▎LINKS & RESOURCES
Using some of the links below, I may receive a small commission at no extra cost to you. This is the easiest way to support me and helps me continue making content like this for you. Appreciate you!
Launch your portfolio in days, not months:
Explore my Framer template Lofi: https://go.temploton.com/lofi-claude-design-2
Get started with Framer: https://framer.link/devantaebison
Prompts used in this video: https://app.notion.com/p/Prompts-used-in-this-video-3a95b6328ea68034bedcf963b74971dd?source=copy_link
▎VIDEO OVERVIEW
Learn how to use Claude Design 2.0 to build an Awwwards level portfolio website, using the update that adds direct canvas editing, layout and typography controls, and a two way handoff into Claude Code. This is the full start to finish workflow, from reference gathering to a live URL.
In this video, I cover the exact workflow to get there: pulling design references from Mobbin, Awwwards, and Savee and annotating them in Figma so Claude is being directed instead of guessing, the exact prompt I use, editing the first iteration directly on the canvas instead of re prompting and waiting on a full regenerate, adding an image cursor trail effect to the hero section, rebuilding the work section into a custom asymmetric grid from a pasted mockup, layering in a liquid scroll effect with Three.js, then exporting into Claude Code, committing to a GitHub repo, and deploying on Vercel for a live public link.
▎CHAPTERS
0:00: Intro
0:11: What we’re building
0:28: Gathering references
0:28: Prompt
1:28: Hands-on with Claude Design
4:52: Getting it live
6:14: Recap