19:39Griffin Wooldridge · Tutorial
Claude Design for Beginners: The Complete Guide
A screen-recorded walkthrough of Anthropic's Claude Design tool, built around one argument: skip the design system and every output stays generic.
July 15thThe argument in one line.
Claude Design 2.0 replaces the old prompt-and-wait loop with direct canvas editing, so making a portfolio site look intentional is now about feeding it strong visual references and a precise prompt, then hand-tuning layout and effects live instead of re-generating from scratch.
Read if. Skip if.
READ IF YOU ARE…
- You want a repeatable process for turning an AI first-draft design into something that looks custom and considered.
- You're comfortable prompting an AI tool but keep getting generic 'PowerPoint-looking' output and want to know what's missing from your inputs.
- You want to see the full pipeline from design tool to a deployed, live public URL, not just the design step in isolation.
SKIP IF…
- You're looking for a from-scratch coding tutorial — this workflow leans on paid third-party tools (Framer template, prompt pack) that aren't shown in full detail.
- You need enterprise-scale deployment guidance — this is a single-page portfolio pushed straight to Vercel with no discussion of scaling, auth, or backend concerns.
The full version, fast.
The core lesson is that AI design output is only as good as its direction: pulling three to five annotated references from sites like Mobbin, Awwwards, and Savee before prompting is what keeps a Claude Design output from looking like a generic PowerPoint slide. The new update's headline feature is direct canvas editing — moving, deleting, and repositioning elements instantly instead of leaving a comment and waiting for a full regeneration — plus finer layout and alignment controls for individual elements. The demonstrated pipeline runs reference gathering, a role-and-clarifying-questions prompt, iterative canvas edits (removing elements, centering text, adding a cursor-trail effect, rebuilding the work section into an asymmetric grid from a pasted mockup, and layering in a Three.js liquid-scroll effect), then a one-click handoff to Claude Code, a GitHub commit, and a Vercel deploy to get a public live link.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:11
01 · Intro / hook
Creator claims the update makes Claude Design 90% better and previews the finished site with its image cursor-trail and liquid-scroll effects.
00:11 – 00:28
02 · What we're building
Shows the target portfolio site's hero cursor-trail effect and Three.js liquid scrolling before explaining the process.
00:28 – 01:28
03 · Gathering references
Argues against prompting cold; pulls 3-5 screenshots from Mobbin, Awwwards, and Savee, drops them into Figma with notes on what's liked about each.
00:28 – 01:36
04 · The prompt
Shares the exact prompt: assigns Claude a 'principal product designer and award-winning creative developer' role and instructs it to ask clarifying questions until 99.9% confident before generating.
01:36 – 01:42
05 · First iteration
Claude Design asks clarifying questions, then returns a first-pass portfolio concept.
01:28 – 04:54
06 · Hands-on with Claude Design
Uses the new direct canvas edit mode to delete/move elements instantly, center text via layout controls, add a mouse-trail effect to the hero via a text prompt, rebuild the work section into a custom asymmetric grid by pasting a mocked-up reference image, and layer in a Three.js liquid-scroll effect.
03:52 – 04:45
07 · Framer template plug
Pauses to mention the sponsor-style plug for a Framer portfolio template (Lofi) as a simpler alternative to the full custom build.
04:54 – 05:59
08 · Export and repo setup
Uses the share button to send the design to Claude Code web, which rebuilds the design in code; meanwhile creates a new private GitHub repo to receive it.
05:59 – 06:14
09 · Commit to GitHub
Tells Claude Code to commit the rebuilt project to the newly created GitHub repo by pasting the repo URL into the chat.
06:14 – 06:28
10 · Deploy on Vercel
Imports the GitHub repo into Vercel and deploys; the site goes live with a public preview link.
06:28 – 06:40
11 · Recap
Frames the real takeaway as Claude Design and Claude Code merging into one workflow from idea to live site, then teases a follow-up video testing Claude's newest model on one-shot design tests.
Lines worth screenshotting.
- Pulling three to five annotated visual references before prompting is what separates a directed AI design from one that looks like a generic PowerPoint slide.
- The single most-skipped part of an AI design prompt is the instruction to ask clarifying questions until the tool has near-total confidence, rather than assuming intent.
- Direct canvas editing turns small design fixes (deleting an element, recentering text) from a full re-prompt-and-wait cycle into an instant, no-generation-needed action.
- Pasting a rough manual mockup screenshot back into the tool and asking it to match the layout gets closer results than describing the layout in words alone.
- A single share-button flow can move a completed AI design directly into a code editor, a GitHub repo, and a live Vercel deployment without leaving that loop.
- The tools around an AI design workflow can keep improving independently of design quality itself, which still depends entirely on the underlying model.
Direction beats prompting when using AI design tools
WHAT TO LEARN
An AI design tool only produces a distinctive result when it's given concrete visual direction up front and then hand-tuned through fast, targeted edits rather than repeated full regenerations.
- Collecting three to five annotated screenshots from real shipped designs before prompting gives an AI tool concrete direction instead of forcing it to guess at style.
- Explicitly instructing an AI tool to keep asking clarifying questions until it's highly confident, rather than assume intent, reduces the odds of a wasted first pass.
- Being able to directly manipulate a generated design (move, delete, realign elements) is faster than the comment-and-regenerate cycle, and preserves more of the parts that already work.
- Pasting a rough visual mockup back into an AI tool and asking it to match that layout communicates intent more precisely than describing a layout in words.
- A workflow that chains design generation, code export, version control, and hosting into one continuous handoff removes the friction points where projects usually stall before going live.
- Tool improvements and underlying model quality are separate levers — a better workflow can't fully substitute for a better model, and vice versa.
Terms worth knowing.
- Claude Design
- Anthropic's AI design tool that generates and edits website mockups from prompts and reference images, with a canvas for direct visual editing.
- Mobbin
- A searchable library of screenshots from real shipped apps and websites, used as a source of design references.
- Awwwards
- A site that curates and awards standout web design work, often used as inspiration for high-end site aesthetics.
- Asymmetric grid
- A layout pattern where items are arranged in varying sizes and offset positions rather than uniform rows and columns, giving a more custom, editorial look.
- Liquid scroll effect
- A visual effect where content appears to stretch, warp, or flow as the user scrolls, typically built with a 3D/animation library.
- Three.js
- A JavaScript library for creating 3D graphics and animation effects in the browser, commonly used for interactive web visuals.
Things they pointed at.
00:40toolMobbin
00:41toolAwwwards
00:41toolSavee
00:42toolFigma
05:00toolClaude Code
05:20toolGitHub
06:14toolVercel
Lines you could clip.
00:00
“Claw design just got a major update and there's new things that make it 90% better than before.”
00:33
“Don't just start prompting and hope it looks good. Spoiler, it won't.”
01:10
“Now Claude isn't guessing in the dark.”
06:28
“Claude design and Claude code stopped being two separate tools and turned into one workflow. You can go from idea to live site without ever leaving that loop.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphorstory
Claw design just got a major update and there's new things that make it 90% better than before. We'll build a portfolio together from start to finish so you can actually see how good it is.
Let's dive straight in. Here's the site we're gonna be building today. It has this really fun image cursor trail effect.
As you scroll down, it has this really fresh, modern, liquid scrolling three j s effect. But before you get too excited, here's the first step that makes this even possible. Don't just start prompting and hope it looks good.
Spoiler, it won't. Pull a few references first so you're directing Claude. Without them, .
My go to for this is Mobin. It's full of shipped screens from actual apps, so you're using battle tested designs. But also look for inspiration on other sites like awards and savey.
Grab a couple screenshots of your strongest references and drop them straight into Figma, and be sure to add notes so Claude knows exactly what you like about each reference. Once you have about three to five visual references with notes, just screenshot it and paste it back into Claude Design. Now Claude isn't guessing in the dark.
Okay. Here's the exact prompt I'm using. I start by giving it a role, telling Claude it's a principal product designer and award winning creative developer, so it knows the bar we're aiming for here.
The part most people skip is this very last line here at the bottom, where I tell Claude to ask me any clarifying questions until it has 99.9% confidence in the design assignment and not to assume anything. Let's run this prompt and see what it comes back with.
And watch what happens. Cloud design starts by asking some questions about what we want it to build for us. I'm answering its questions so I can get to work.
After just a few minutes, we have the first iteration of the portfolio design concept. It's looking pretty good overall, especially for this to be the first pass. Now, this is the part where you actually make it unique and interesting, and the new tools inside of clouddesign2.o make it almost too easy.
Starting with the hero, I wanna take this in a slightly different direction. So, first thing I wanna do is remove this project image on the right. Before this update, fixing that meant leaving a comment or reprompting and waiting on Claude to generate a whole new design.
Now, I can click edit in the top right corner, and I can just grab it. There's direct editing right on the canvas. And when I grab it, I can move it around.
I can drag it to the backgrounds. I could also just press delete on my keyboard and it removes it all together. And as you can see, the result is instant.
No more prompting just to make small changes like that. And while I'm here, also wanna simplify a few other things. So, let's delete this and let's remove this.
And what I'll do now is remove this one and then update this to be product designer.
And next, I will select this div here at the bottom. And one other thing you'll notice with this new claw design update, we have this additional configuration for refining the layout and position of a particular element.
So after selecting this div, I actually want this text to be centered in the middle of the screen. So to do that, I'm gonna hit justify center, and now I'm gonna select the text element inside that div, and I want the text to be aligned centered as well. So I'm just gonna find align on this left panel, and I'm gonna select center.
So now we're getting closer to the hero design that I have in mind, but first, I wanna have it update this text to be full width all on one line. So I'm gonna select comment in the top right, and now I'm gonna type something like update this text to be full width and ensure it doesn't break to two lines.
I'm gonna send this to Claude. Okay. So we're almost there.
The next thing I wanna do is remove these background effects, and I want to update product designer to be centered within the hero section. So the next thing I wanna do is add a simple mouse trailing effect the hero section. And to do that, I'm gonna go back to the text box here in Claude, I'm gonna say something like, as the pointer moves over the hero, spawn a trail of the project image assets that follows the cursor and fades out behind it.
Nice. This is what it came back with. This hero section with the image trail effect is starting to feel more like the visual direction that I had in mind.
Now, if you've been following all this and part of you is thinking, this is cool but it's kind of a lot, I get it. That's exactly why I built LoFi. It's a clean, super minimal framer template designed to help you stand out, get hired, and launch your portfolio fast.
Simply drop in your work, customize it, and hit publish. If you wanna check it out, the link's in the description below. Scrolling down to the work section, I wanna rework these projects to be in a custom asymmetric grid closer to this reference that I took a screenshot of earlier.
And to save a little bit of time, I went ahead and mocked up what I had in mind. From here, I'm gonna select this design and copy it as a PNG and just paste it back inside of Claude. And then I'll say something like, update the project in the work section to match the updated mock up.
Use an asymmetric grid instead of the current layout. This is what it came back with. It's not exactly how I mocked it up, but it's actually pretty close.
To take this further, I wanna add a liquid scroll effect to the work images. To do that, I'm gonna paste this prompt into the text box here, and I won't bore you reading through all the details on this one because it's pretty technical, but I'll drop it in the description if you wanna use it. Nice.
Look at this. This is actually pretty good. I think it makes the whole section feel a lot more unique.
And with that update, this portfolio is basically ready to go. But right now, it's currently sitting as a draft on our laptop. Let's get it live.
To do that, we just export straight from Claude Design into Cloud Code by clicking the share button up here in the top right. We're gonna click this option, more formats and apps, and then send to Cloud Code. Now from inside this modal, we're gonna come up here and choose send to Cloud Code web, and then we're gonna click this option, open in Cloud Code web.
Claude Code is essentially gonna rebuild everything we just did in Claude Design. While it's doing that, we're gonna go to GitHub and create a new repo for this project. From the home page, you wanna click new in the top left corner, and then it'll bring you to this page to create a new repo.
I'll go ahead and set myself as the owner here, and then give this repo a name. And then for the visibility, I'll select private, and then go ahead and choose create repo.
Next, we're gonna go ahead and copy this link. This will come in handy once Claude code has officially finished rebuilding the prototype. Great.
It looks like Claude code is done. Now let's send this project to the GitHub repo that we just created. To do that, we're just gonna go to this text box and say something like, commit this project to the following GitHub address, and then paste the link that we just copied from GitHub and submit the prompt.
Over on our cell, we're gonna add a new project. From here, we're gonna import the GitHub repo that we just created. In my case, it'll be this one, so I'll select import.
Once we're on this page, we're gonna hit deploy. Great. The site has been deployed, and we can see a little preview of it here.
If we simply click on this image, it takes us directly to the site, and now the portfolio is officially live with a public link. So here's the real takeaway. Claude design and Claude code stopped being two separate tools and turned into one workflow.
You can go from idea to live site without ever leaving that loop. But notice what actually changed here. Everything I just showed you is the workflow getting better, the tools around the design.
The design itself, that depends on how good the model is. So I took Claude's newest model, Fable five, and put it through four one shot design tests. And honestly, the results are pretty insane.
Check it out.
The Hook
The bait, then the rug-pull.
The pitch is a workflow upgrade, not a new trick: Claude Design 2.0 adds direct canvas editing and a two-way handoff into Claude Code, and this video builds one portfolio site start to finish to show exactly how the new pieces fit together.
Named ideas worth stealing.
00:28concept
Reference-first prompting
- Pull 3-5 screenshots from Mobbin/Awwwards/Savee
- Annotate each with notes on what's liked
- Paste references into the design prompt before generating
Gathering and annotating real shipped-design references before prompting so the AI has concrete direction instead of guessing.
Steal forAny AI design or copy generation task where output quality depends on the strength of the input references.
01:00concept
Clarifying-questions prompt closer
Ending a design brief with an explicit instruction for the AI to keep asking clarifying questions until it reaches near-total confidence, rather than letting it assume intent.
Steal forAny complex generation prompt (design, code, copy) where wrong assumptions are costly to redo.
How they asked for the click.
VERBAL ASK
04:07product
“That's exactly why I built LoFi... If you wanna check it out, the link's in the description below.”
Soft mid-video plug for the creator's own Framer template as a simpler alternative, framed as an aside rather than a hard sell, with the affiliate/commission links placed in the description.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
