Claude Design: the starter guide plus 3 power moves

What Claude Design actually makes

It is a canvas, not a chat window with pictures in it. You describe what you want, Claude builds a real first version on the canvas, and you refine it by talking, commenting and dragging things around. Anthropic describes it as a way to "collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more" (the announcement). Live at claude.com/product/design.

Set it up from scratch, about ten minutes

1. 🔑 Open it. Go to claude.com/product/design and sign in with the same Claude account you already use. If you are on a Team or Enterprise workspace and it is not there, ask your admin to enable it in Organization settings.
2. 📁 Create a project and name it. Projects are how the work stays organised and how your design system gets applied. Name it after the thing you are making, like "course landing page" or "March pitch deck", so future-you can find it.
3. 🧩 Bring your design system in. You can import one or several from a GitHub repo, design files or raw uploads. On a Team or Enterprise workspace, a new project inherits the organisation's design system automatically, so there is nothing to upload.
4. 📎 Add context before you ask. Upload the things it should be looking at: screenshots, existing assets, a slide deck, a document. It accepts DOCX, PPTX and XLSX files, a codebase, and there is a web capture tool for grabbing elements straight off your own website.
5. ✍️ Describe what you want. One clear paragraph beats a one-line request. Say what it is, who it is for, the sections you need, and the feeling you are after. Claude builds a first version on the canvas that you react to.
6. 🔁 Refine, do not re-roll. Nearly everyone types a prompt, gets something generic, and starts over. The refinement tools below are the entire difference between a lucky draft and something you would ship.

Build a design system in one prompt

If you do not have a brand kit, do not skip this and design blind. Ask for the system first, then everything you make afterwards is consistent by default.

Build me a complete design system I can reuse across everything I make in this project. My brand is [what you do] for [who you serve], and I want it to feel [three adjectives, for example warm, calm and modern] rather than [what you want to avoid].

Give me a full palette with hex codes: one background, one main text colour, one accent for buttons and emphasis, two supporting tones, and the states for hover and disabled. Include the contrast ratio for text on each background so I know it is readable. Then pick a type pairing from freely available web fonts, one for headings and one for body, with a size scale from small caption up to page title and the line height for each.

Finish with the component rules: button shape and padding, card style, corner radius, spacing scale, and how much breathing room sits between sections. Show it all as a single styled reference page I can look at, and keep it as the system you apply to everything else you build for me in this project.

Design a full app interface from a description

This is the one that makes people sit up. You describe the product, it designs the screens, and because it is built on the canvas rather than generated as a flat image, you can keep working on it.

Design the complete interface for a mobile app called [name] that helps [who] to [do what]. Use the design system in this project for every colour, font and component.

I need these screens: onboarding, the main home screen, the core action screen where the actual job gets done, a detail or history view, and settings. For each one, show the real content a user would see rather than placeholder text, and design the empty state as well as the full state, because empty is what a new user actually meets first.

Keep it to one primary action per screen and make the navigation obvious without a tutorial. When the screens are done, walk me through the flow in order and tell me the two places you think a real user would hesitate, plus what you would change to fix each one.

Turn messy files into designed output

Drop in the rough version and get back the finished thing. This is the fastest win in the whole product if you are the person who always ends up making the deck.

I have attached [my raw notes / a rough document / a spreadsheet]. Turn it into a [pitch deck / one-pager / infographic] for [audience], using the design system in this project.

First tell me the story you are pulling out of it: the single message, the three points that support it, and the one number or fact that is the strongest thing in here. Then build it, one idea per slide or section, with real headlines rather than labels like "Overview" and "Next steps".

Turn anything comparative or numeric into a chart or a diagram instead of a bullet list. Keep the text on each slide to what a person can read while listening to me talk. At the end, tell me what is missing that would make the argument land harder, and flag anything in my notes you left out and why.

Hand the design to Claude Code

The part most people miss. A design in a canvas is still a picture until someone builds it. Claude Design packages the work into a handoff bundle that Claude Code picks up, so the build continues from your actual design instead of a developer squinting at a screenshot.

1. 🔗 Sync your system into the code side. In Claude Code, run /design-sync to pull your design system in, so what gets built starts from your existing components rather than inventing new ones.
2. 📦 Ask for the handoff. In Claude Design, ask Claude to package the design for handoff. It bundles everything up so it can be passed to Claude Code with a single instruction, either the local agent or the web version.
3. 💻 Build it. Open the bundle in Claude Code and ask for the working version. Your mockup becomes a real page or app with the same branding, because the branding came across with it.
4. ↔️ Move back and forth. The two products connect in both directions, so a design change does not mean starting the build again. Keep designing on the canvas, keep building in the terminal.

Package this design into a handoff bundle for Claude Code so I can build it as a real, working [website / web app], and include everything the build needs rather than only the visuals.

That means: the design system tokens for colour, type and spacing, every screen or section in the order a user meets them, the responsive behaviour you intend at phone and desktop widths, and each interactive element with a note on what it should do when clicked.

Then write me the single instruction I should paste into Claude Code to start the build, and list the three decisions a developer would otherwise have to guess at, with the answer you would give for each.

Refine it like a designer, not a gambler

There are four ways to change something, and picking the right one is most of the skill. Re-prompting the whole design for a spacing tweak is how people end up worse off than when they started.

Export it wherever you finish

Nothing is trapped in the canvas. You can export to PDF, PPTX or standalone HTML, download a zip, share an organisation-scoped link, send it to Canva, or hand it off to Claude Code. Anthropic also lists integrations with Adobe, Base44, Gamma, Lovable, Miro, Replit, Vercel and Wix, so the finishing pass can happen wherever you already work.

Proof

Anthropic, introducing Claude Design
Claude Design product page (features, exports, plans)
Get started with Claude Design (Help Center)
Claude Design admin guide for Team and Enterprise