🛠️ Claude Design

A plain-language walkthrough of what everything does and how to actually use it. No jargon, no assumed knowledge.

🤔 What Claude Design even is

Think of it as a room with two halves.

Left side - the chat. You type what you want in normal English. "Build me a landing page for aidhd.co with a hero section and three feature cards." This is where you talk to Claude.
Right side - the canvas. This is where the thing you asked for actually appears, live. It's not a flat picture - it's real, working HTML/CSS you can click into and mess with.

You describe → it builds → you refine → you export. That's the whole loop.

It's included with Pro, Max, Team, and Enterprise (no separate cost), and it runs on web and desktop only - no mobile.

"Why did it make a README and a bunch of files?"

Don't panic when you see this. It's a good sign, not a bug.

Claude Design doesn't make flat pictures. It builds in real code (HTML and CSS) sitting on the canvas. That's the whole point - it means the thing is editable and portable instead of a dead JPEG you can't change later. So the moment you ask for anything structural (a landing page, a multi-screen prototype), it behaves like a proper little project: it lays out files, a component structure, and often a README describing what the thing is and how it's put together.

That README is just Design being tidy about its own work. It is not a sign that something's gone wrong or that you need to be a coder.

Two situations to keep straight:

Single image or icon (like a post graphic) → minimal fuss, no project files worth caring about. Prompt, it draws, you export the picture. Done.
Something structural (a page, an app layout) → it starts acting like a codebase, with the README and file structure. That's normal and expected.

Is Claude Design running on Claude Code?

No. They're two separate tools that cooperate, not one running on top of the other.

Claude Design = the drafting table. Chat + canvas, built for making visual things.
Claude Code = the workshop. A terminal tool for actually writing and shipping code.

Design makes the files. Code takes those files and turns them into a live, running website or app. The README is born in Design; it only becomes properly useful at the handoff to Code. You don't need Code at all for images or mockups - it only enters the story when you want to ship a design as a real site.

Step 1 - Get in

Go to claude.ai/design (or find Design in the Claude sidebar).
Start a new project.
If it offers onboarding to read your existing brand/codebase, you can do that later - skip it for your first go and just play. Or you can load images that have your brand/colours/fonts and let it discover what you are into :)

Step 2 - Write your first prompt

Type into the chat panel what you want built. The trick for beginners: give it context, not just a noun.

Weak: "Make a landing page."

Strong: "Build a landing page for an ADHD/AI tool called Hearthline. Hero section with a headline and one call-to-action button, then three feature cards below, then a simple footer. Warm, calm palette. Not corporate."

The more you tell it about purpose, sections, tone, and rough copy, the closer the first draft lands.

Hit send. Claude builds it on the canvas in a few seconds.

Step 3 - Understand the first draft is ~70% right

This is normal and expected. Your first version is a starting point, not the finished thing. The real value is in the refining. You've got four ways to change things, and knowing which one to use when is the whole skill:

1. Chat - for BIG, sweeping changes

Use the left panel when the change affects the whole design.

"Make the whole colour scheme darker and more minimal."
"Rearrange this so the metrics are on top and the chart sits below."
"Rebuild the layout with more whitespace."

2. Inline comments - for ONE specific thing

Click directly on an element on the canvas and pin a comment to it. Claude changes just that.

Click the heading → "Make this lighter weight, tighter spacing."
Click a photo → "Swap this for an abstract illustration."

3. Direct text editing - for copy tweaks

Just click into any text block and type. Fixing a typo or rewording a button? Don't waste a prompt on it - edit it directly.

4. Sliders - for fine-tuning by feel

Claude auto-generates little sliders for things like spacing, corner roundness, colour temperature. Use these when you know you want "a bit more padding" but don't know the exact number. Drag until it looks right.

Rule of thumb: big change = chat. Small specific change = inline comment or direct edit. Nudge = slider.

Step 4 - Add movement (optional, once you're comfy)

Claude Design can add hover effects, scroll effects, and simple animations right on the canvas. Ask specifically:

"On hover, the feature cards should lift slightly."
"Add a subtle parallax on the hero image as I scroll."

Keep it tasteful. Every animation should earn its place - when in doubt, less.

Step 5 - Bring in your own stuff (import)

You're not stuck starting from a blank prompt. You can:

Upload files — images, or documents like DOCX, PPTX, XLSX, and build from them.
Point it at a codebase — so designs match your existing components and brand automatically.
Web capture — grab elements straight off an existing website so your prototype looks like the real thing.

For a first project, you can ignore all this. Come back to it once the basics feel easy.

Step 6 - Export or share when you're happy

Top-right corner → Export. Your options:

PDF - for a static, send-it-to-someone version.
PPTX - turns it into PowerPoint slides.
Standalone HTML - the actual web files.
Canva - opens it as a fully editable Canva design (good if you want drag-and-drop tidying afterwards).
Send to other tools - Adobe, Figma-adjacent tools, Miro, Vercel, Wix, Lovable, Replit, and more.
Shareable link - share inside your org with view-only, comment, or edit access.

The power move: Handoff to Claude Code

If your design is meant to become a real, live website or app, use

Export → Handoff to Claude Code.

This bundles up your design, its colours/spacing tokens, the component structure, and the intent behind each page. You hand that bundle to Claude Code and it builds the actual working project - continuing your work instead of starting over from a screenshot.

Quick troubleshooting

"Chat upstream error" → open a new chat tab inside the same project.
Laggy with a huge codebase → link the big repo from Claude Code rather than loading it all in the browser.
Two people editing at once → still rough, don't rely on it yet.
Brand import looks off → it's only as good as the source you pointed it at. Feed it something clean.

The one-line version

Describe it → let Claude build it on the canvas → refine (chat for big, click for small) → export or hand off to Claude Code.

Everything else is detail you'll pick up by poking at it. Go break something.

~ With Love

Firecracker&Cass