Claude Design, from idea to live site — a checklist · Resource

This is the version to keep open while you work. Have it up next to Claude Design, check off steps as you go, and glance at the session counter at every stage. One rule repeats through every section: do your thinking and planning where it's cheap, and leave the actual building to the tool that does it best.

0. Before you click — what you need

Confirm you're on a paid plan: Pro, Max, or a Team or Enterprise plan. Claude Design does not run on the free plan — you have to upgrade before the tool even opens.
Keep in mind that the pricier the plan, the bigger the pool of work you get in a given time window; on a cheaper plan the same pool runs out sooner.
Accept up front how the session limit works: work spends tokens (a token is a fragment of text, roughly a piece of a word), and the more you build and the more complex it is, the faster you burn through the pool.
Assume usage runs higher than you'd like, and that no single project should be allowed to exhaust the limit. The order of the steps below is built to protect that.

1. Work out the brand outside Claude Design

You develop the brand concept in a plain Claude chat, not in Claude Design. Brainstorming is a long conversation, and inside Claude Design it would burn the session limit for no benefit.

Open a plain Claude chat and start with a prompt like: "I'm building a new brand and I'll be turning it into a deck, a logo, guidelines and a website — help me work out a coherent concept."
Push the conversation to one document, a brand brief, that covers the full set: product, audience, customer profiles, mission, positioning, brand pillars, tone of voice, and visual identity (a palette of four core colors and early typography guidelines).
Settle the logo in the same chat: ask for a professional, minimalist mark, describe the brand, audience and palette, pick a variant, and ask for small refinements.
Only open Claude Design once the brand brief and the logo are both done. Not before.

If you already have a brand, skip this step — go to step 2 and point it at what you already have.

2. Build the brand system — the foundation everything starts from

A brand system is a brand's rules in one place: colors, typography, logo, button style. Once it exists, everything you build afterward looks consistent. Build it properly — it's your spec for every future project.

Open the brand systems tab and click to create a new one.
Give it a name and a short company description; optionally point to a code repository and files with the logo and other assets.
If you already have a brand: point to the existing site, its URL, or a repository — the tool scans fonts, colors and button shapes and assembles a system from them. Be selective: supply the key elements (logo, palette, typography, maybe a few buttons), because every extra file spends tokens. Don't hand over the whole repository unless something in it genuinely matters.
Give the tool time — digesting the material and assembling a coherent spec can take up to fifteen minutes and burn a noticeable share of tokens.

Review and fix before you approve

Watch what the tool is building in real time and stop it the moment it drifts off course — interrupting and redirecting is cheaper than letting it finish a whole wrong version.
Go through what it shows you one by one (the mark, the wordmark variant, the tagline, the palette, the typography, a sample mockup) and either approve each one or flag it.
Set aside a calm stretch of time for this review — it isn't a step to click through in a hurry.
Check the counter once the brand system alone is built: in one run, with a moderate amount of material, it came to about six percent of the pool on the top plan. On a cheaper plan it eats proportionally more.

3. Build four things: a deck, a website, a prototype, and a video

The mechanism is always the same: draft the plan in a plain chat first, open Claude Design only to build, and fix things in small steps.

Pitch deck

In a plain chat, ask for the deck's structure and a short market scan: "I want to build an investor deck for brand X; I already have its brief; add a slide structure to it and do a short market scan."
Stop the tool if it starts drawing slides on its own: "Don't build the deck yet, just give me the outline."
Go back to Claude Design, pick presentation mode, point it at the brand system, and name the project.
Paste in the finished outline (usually hundreds of lines) and ask: "I have the brand brief, I have this outline, build an investor deck from it."
Keep the slides light on text — this is material someone will be talking over out loud.
Iterate with the "select and comment" technique: select an element right on the preview and add a short note (for example, "make this logo bigger"). The tool injects a screenshot of the selection and fixes exactly that piece — more precise and cheaper than a vague request.
Check the counter: after the brand system and this deck, usage reached about a third of the pool on the top plan.

Website

(Optional) Make a wireframe: in sketch mode the tool asks how many concepts to sketch (say, three), how rough they should be (pick the middle option), the mood, and who you're talking to. On a simple site this step is often unnecessary — build straight at full quality instead; a wireframe pays off mainly for an app, or when you're choosing a direction for a logo or packaging.
Or set the layout by drawing it: click new sketch, draw the page frame as a rectangle, mark sections with smaller rectangles in different colors, and label them ("nav bar", "headline text", "subhead", "background video here", "CTA button").
If you want a video background: work out the idea, the scene description, and the prompts (one for the image, one for the animation) in a plain chat, generate the material in an image-and-video tool, and only embed it inside Claude Design. Point to the file, ask for it to loop in the background with the headline text sitting beside it, and paste in a dozen or so lines of brand brief and tone guidance.
Refine the site through the tweaks panel: switch the tone (remember dark mode also changes the video), pick a background texture, a color accent, video dimming, section rhythm, frame crop.
Stick to the one change at a time rule.

Mobile app prototype

In a plain chat, ask for the app's full specification as a "requirements document" — a screen-by-screen description of how it should look and behave (this can run past eight hundred lines).
Go back to Claude Design, start a new project, switch to the right brand system, and say explicitly that you're building for phone, not desktop.
Paste in the whole specification and let it run; answer the tool's questions (how to arrange the screens, how clickable it should be, whether you want a light/dark mode toggle, how many layout variants).
Test dark mode — the brand green often reads more vivid in it, and shadows and detail tend to sit better.
Do at least one round of fixes — the prototype visibly gains depth after it (you won't design a full app in half an hour).

Start an animation-type project, point it at the brand system and the brief.
For a better result, add a separate ruleset for building the animation (a ready instruction file) and sharpen the brief: horizontal format, roughly twenty to thirty seconds, fast pace, the goal is to announce the brand and what it does, ending with a clear call to sign up for the free trial.
If the first pass is "polite," ask for more energy: "not enough is happening, tell a story, add motion and graphics, this has to feel like a big day — we're announcing the app and inviting people in."
To save the limit, give it the URL of an animation you like — the tool fetches the page, inspects its code, and weaves in a similar scene instead of building the effect from zero.
Make small fixes with the "select and comment" method: circle the spot ("I don't like this hard cut, add a smooth transition") and send it.
Check the counter: all four builds together with the brand system came to about 95 percent of the pool on the top plan — nothing gets polished to perfection in one session.

4. Publish the site

This is where the project stops being a preview on screen and becomes a site at a real address. Walk the path in order.

Move the project from Claude Design into Claude Code (the tool where Claude works with files and code on your machine): click share, then either download the project as a ZIP or choose "hand off to Claude Code" and paste the ready-made command.
Push the project to a private GitHub repository: ask Claude Code to create the repository and push the project there. First time doing this, set up a free github.com account and ask Claude Code to connect it.
Before you push anything, have Claude Code confirm the site runs locally — easy to skip in a hurry.
Connect the repository to Vercel (the service that hosts the site, meaning it makes it available on the internet): create a free account (easiest by signing in with the same GitHub account), add a new project, point it at the repository, click import and deploy.
Collect the real address — after about sixty seconds you get an address ending in .vercel.app that you can hand to someone. You connect a custom domain later, also by talking to the tool.

If you see a 404 error

Don't panic — nothing is permanently broken.
Go back to Claude Code and describe the situation in plain language: "I pushed this to GitHub, synced it with Vercel, and I get a 404 when I open it — what does that mean and how do I fix it?"
The usual cause: Vercel looks for a starting file named index.html, and yours is named something else. Claude Code renames it, pushes the fix to GitHub, Vercel picks it up on its own, and the site works.

Day-to-day work after publishing

Make fixes locally, on your own machine — only you see them. Once you like one, ask Claude Code to push the changes to GitHub; Vercel picks them up and the site updates after about thirty seconds.
Before calling the site finished, click through the presentation preview and check that the buttons go where they should.

5. Build habits that stretch the limit

This isn't a list of bans, just habits that extend your pool.

Show, don't describe. Give it something concrete: screenshots, elements selected right on the canvas, sketched-in hints, ready-made sliders from the tweaks panel. The more precisely you point, the fewer rounds of fixes you need, and fixes are the biggest token drain.
Fix in small pieces. Don't load one prompt with five changes at once. Stick to one visual dimension per prompt: handle layout, or color, or typography in a single request, never all of them together.
Build one brand system, not five. Build it well and share it with the team. When you change a button, logo, or color, you swap it in one place, the system, instead of in every project separately.
Match the model to the stage. Save the strong Opus 4.7 for planning and bigger changes. For the actual building and small fixes, switch to the lighter Sonnet 4.6 (it handles a clear brief well and spends less of the pool). For the smallest tweaks there's an even lighter Haiku.
Start a new conversation when the old one grows heavy. Long threads clutter the context and burn more of the pool. The tool prompts you when a new conversation would recover context — export the finished piece then and keep working fresh.
Export when it's cheaper to finish somewhere else. The tool exports the project to HTML, PowerPoint, Figma, or Canva. If you're left with a fix you could make by hand in five seconds (say, swapping a broken logo on one slide), do it there instead of burning minutes and tokens inside Claude Design.

What to watch for

Logos get "fixed." Upload a finished PNG with your mark, and the tool sometimes tries to change it and breaks it. Push back specifically: "I uploaded the logo as a PNG, leave it exactly as it is, don't change it." A simple letterform logo is usually fine; the trouble shows up with ornate marks that carry fine detail.
The site is built for a computer screen. Claude Design and Claude Code don't adapt the layout to phones automatically. Open the site, press F12 (the browser's developer tools) and switch the preview to phone view — you'll usually see the layout come apart on a small screen. Asked to, the tools fix the layout for mobile without breaking the desktop version.
Watch the counter as you go, not after the fact. The brand system alone is a few percent of the pool even on the priciest plan, and the full set of four builds gets you close to exhausting it. Decide deliberately what's worth building in the tool and what's cheaper to prepare beforehand in a plain chat.
Don't brainstorm inside Claude Design. Every planning conversation there spends the limit for nothing — move it to a plain chat.

One closing thought: iteration is the whole point of this work. Nothing comes out perfect on the first pass, and it doesn't need to. Work the plan where it's cheap, build where it pays off, fix in small steps, and watch the counter. Your first project doesn't have to be perfect — it just has to ship.