How to Use Claude Design Better Than 90% of the Rest (5 Stages)

Your site's visuals are the first thing a customer judges, and Claude Design is one of the most powerful tools for getting them right. But a good design doesn't come from just prompting the tool.

We build software, and we've built a full system around Claude Design based on our own internal process. Whether you've never opened it or you've been designing in it for months, the stages below are what separate an on-brand, production-ready site from another generic AI page. If you've used it already, the real value is in stages four and five, where Claude Design connects to Claude Code.

First, the basics (skip if you know the tool)

Claude Design launched as a research preview alongside Opus 4.7. It's a design tool with an easy interface that lets anyone, even non-technical people, create good designs by prompting, and it's on all the paid plans. It isn't just websites: you can design slides, documents, and animations too. It runs on both Claude desktop and the website, so you don't have to install the app.

It gives you all the Claude models, even Fable (limited access). Opus is still the best for designing, but Opus models burn a lot of tokens. Haiku uses far fewer but usually needs more refining. You can also set an effort level per model, which controls how hard it thinks before acting. We use Opus 5 on medium effort for design work, because it designs well without wasting tokens. It also lets you bring in your MCPs and skills, so your own system works right inside it.

One thing to keep in mind: Claude Design runs on a 5-hour limit shared with everything else you do on Claude, with a token cap inside that window. It's still token-hungry, so heavy use runs your limits down fast. That's exactly why the prep stages below matter.

Stage 1: Start with a design.md, not a prompt

The first thing to create is a design.md file. It's a format Google started, and it holds all the details of your brand's design. Your agent reads it before it writes anything, so every screen comes out on brand and it never has to guess.

Claude Design can build a design system (your fonts, colors, and style choices, reused across every page so the whole site looks consistent). But if you let it build that system on its own, it falls back to the generic colors and styles the Opus models use everywhere, and your site ends up looking like every other AI-built site. Hand it a design.md and that file tells it exactly what you want, so it stays controlled and consistent across every page.

To make the design.md properly, we built a skill that plans it out. You run it inside Claude Code (Anthropic's terminal coding tool). Install Claude Code from the official site, run the install command, type claude, and prompt it. To add the skill, tell Claude Code you want to install skills in the project and it sets up the .claude folder and drops the skill in itself. (That folder is hidden in Finder because its name starts with a dot, so use a code editor like VS Code to see it.)

Then invoke the skill with its slash command and tell it what you're building. It interviews you, plans the visual identity in detail, writes the full design.md, and validates it against Google's standards by running scripts. It also holds anti-slop references, the common patterns that give away an AI-built site. (We link the skill on GitHub, free. Give the link to Claude Code and it installs it.)

Takeaway: Letting Claude Design invent its own style is how you get the generic AI look. A design.md, planned by the skill, locks your brand in before a single screen is generated.

The color and preview shortcuts

When the skill asks about colors, you can hand over your brand colors or let it choose (it won't default to slop colors, but deciding beforehand is still better). We use Coolors to generate and visualize palettes, then export as code and paste that into Claude Code, which drops it into the design.md.

The design.md comes out in Google's format, which the model understands easily but you can't picture. Don't test it by generating designs in Claude Design, because every round you dislike means editing the file and regenerating, and every round costs tokens. Instead, visualize the file first with a tool like designmd.space, which shows how the colors and elements work together so you can decide before spending anything.

If you don't want to build one from scratch, copy a popular site's design as a starting point and tweak it (plenty of people take Notion's clean look and adapt it). getdesign.md lists many brands' styles as design.md files you can grab.

Stage 2: Turn the design.md into a design system

With a design.md ready, create a new design system in Claude Design. It asks for product details, but since you have the file, you just upload it as an asset. It reads the file, creates to-dos, works through them, and builds out the design system, visualizing every element that'll appear in the app.

Stage 3: Wireframe before you build

Before building the site, create wireframes, rough sketches showing where every element goes. Skipping straight to the full build is a trap: Claude Design is slow to generate, and if the result is wrong you redo the whole thing.

Select your design system, choose the wireframe option, and prompt it with how many screens you want. It can generate multiple variations per screen so you can pick a style. Use the commenting feature to change something: click the exact element and type the change, so Claude knows precisely which area you mean instead of guessing. Group your comments and send them all at once so it resolves them together and your wait time stays low. Keep tweaking until the structure is right.

Takeaway: Wireframe first, comment precisely, and batch your changes. It's the difference between a few cheap rounds and one slow, expensive rebuild.

Stage 4: Build the full site, then animate

Pick the wireframe variation you want (each page has a code number), then prompt Claude Design to turn those screens into the full detailed design, keeping the layout and structure from the wireframe with clean spacing and hierarchy. It reads the elements from your design system and builds the site to match.

You'll comment and fix here too. It tends not to pick button colors well, so ask it to make attention-grabbing buttons bold. Because it builds on the wireframe, the site can come out a little bare, so ask it to add textures and elements for a fuller look. Minor changes like deleting an element you can apply directly on the design without prompting, which saves tokens. When you're done, ask it to polish the overall look for subtle, meaningful improvements.

Then add animations, because they make a site feel alive and guide the eye. Prompt it to add subtle touches like scroll-into-view and text pop-ups across all screens, and tell it to keep them subtle and not too springy, since that feels off.

Stage 5: Hand off to Claude Code and add a backend

Claude Design can now export directly into Claude Code through the Claude Design MCP, and it works both ways, so designs move back and forth. Paste the handoff prompt into Claude Code and it reads the metadata, lists the project files, reads the design system first, then every element, and builds the whole thing out in your project with the animations intact.

Double-check the conversion. It may look right but still have internal issues, so ask for a deep review that checks the design.md against what it actually built. That caught several issues for us, mainly responsiveness (the app not looking right on mobile or tablet), which is common because Claude Design is early and builds best for the exact target it was made for. Run the fixes and the app comes out working and responsive.

Finally, connect a database, because without one all your progress disappears when the app reopens. We use Supabase for almost every app we build, because it takes a lot of work off our hands and connects easily to agents like Claude Code. Supabase has an agent skill (actually two: the Supabase skill for database and login tasks, and a best-practices skill that kicks in when you say "optimize performance"). Install it with one command. The skill is only instructions, so it can't reach your Supabase project on its own; connect either the Supabase CLI or the MCP to give the agent real tools. We use the MCP because it's easier and avoids handling CLI keys. Once connected and authenticated, Claude Code loads the skill, builds the backend, runs tests against the database requests, and locks down the areas that shouldn't be open to every user.

Takeaway: The design isn't the finish line. Export to Claude Code, run a deep review for responsiveness, and wire up Supabase, and you go from a pretty mockup to an app that actually stores data and works.

FAQ

Which model and effort should I use in Claude Design? Opus is best for designing but token-heavy. We run Opus 5 on medium effort as the balance. Haiku is cheaper but usually needs more refining.

Why does my Claude Design site look generic? Because you let it build its own design system, so it fell back to the default Opus colors and styles. Start with a design.md so it builds to your brand instead.

Why wireframe first instead of just building? Claude Design is slow to generate, so building straight away means long waits and a full redo if it's wrong. Wireframes let you fix structure cheaply before committing.

How do I make precise changes without wasting tokens? Use the comment feature to point at the exact element, batch your comments and send them together, and apply tiny edits (like deletions) directly on the design instead of prompting.

How does the app actually store data? Through a database. We connect Supabase via its MCP and agent skill, which builds the backend, tests the database requests, and secures access.

The takeaway

Claude Design is powerful, but prompting it cold gets you a slow, token-hungry, generic site. The order is what wins: plan a design.md, turn it into a design system, wireframe before you build, then build, animate, and hand off to Claude Code with a Supabase backend. Run it in that sequence and you get an on-brand, responsive, working product instead of a mockup.

The design.md planning skill and the full internal design system we use live inside AI Labs Pro.