A designer's workflow for building with Claude Code

More designers are building real products in code now, with Claude Code doing most of the typing. It's a genuinely new way to work: you can go from an idea to a running app in an afternoon, and change anything by describing it.

It also has a learning curve that isn't about code. The hard part is steering. This is the workflow I use as a designer building with Claude Code, from the first reference to a page I'm happy with.

Why designers are building with Claude Code

Claude Code is Anthropic's AI coding tool. It runs in your terminal or editor, reads your project, and writes and edits code when you ask. For designers, that means you can build the real thing instead of a mockup of it, and you can make changes at the speed you think of them.

You don't need to be an engineer to use it well. You do need to be clear about what you want, which is something designers are already good at.

Before you start: set up a project Claude can read

Two things make every later step easier.

A CLAUDE.md file. Claude Code reads this file at the start of every session. Put your design rules in it: fonts, the type scale, spacing steps, colours, corner radius, and anything you never want. For example:

## Design rules
- Fonts: Geist for text, Roboto Mono for labels
- Spacing: multiples of 4px
- Colours: cream #FFFDF8 background, forest #24463A text, lime #C7D882 accent
- Buttons are pills; cards have 16px corners
- No gradients, no drop shadows heavier than 8% opacity

Git. Commit after every change you like. If a later change goes wrong, you can always go back. Ask Claude Code to commit for you if you're not used to doing it.

Step 1: Collect references before you prompt

Spend half an hour collecting before you write a single prompt. Save the specific details you want: a hero layout, a button, a type pairing, a colour. Note what you like about each one.

This is the step that decides whether the result looks like yours or like every other AI-generated site. I wrote a separate guide on building a moodboard for AI-generated UI.

Step 2: Write the brief as constraints

A good first prompt reads more like a brief than a wish. Say what the page is for, what goes on it, and what rules it follows:

• The goal of the page, in one sentence.
• The sections, in order, with what each one needs to say.
• Which references apply to which section.
• What to avoid.

"Build a landing page for a reading app" will get you a template. "A landing page with a split hero (headline left, phone screenshot right), three short testimonials, and a single sign-up form. Follow CLAUDE.md. Use the attached hero reference for proportions only" gets you a starting point.

Step 3: Get a rough first pass, fast

Let Claude Code build the whole page in one go, then stop and look. Don't correct details yet. The first pass is for checking structure: are the right sections there, in the right order, at roughly the right size?

If the structure is wrong, fix it now with one clear instruction. Polishing details on a page whose structure will change is wasted work.

Step 4: Review on localhost, one element at a time

Now open the page on localhost and review it the way you'd review a junior designer's work. Go section by section. For each thing that's off, note:

• the exact element,
• what feels wrong, in a sentence,
• a reference for the direction,
• what to leave alone.

This is the slowest step to do by hand, and the one that matters most. I covered it in detail in how to give Claude Code visual feedback.

Step 5: Send feedback in batches

Collect your notes for a section, then send them together. Claude Code works better with a numbered list of specific changes than with a stream of one-line corrections, and it can spot when several notes share a cause, like one spacing value used in five places.

Check the result, commit what's right, and move on to the next section.

Step 6: Lock in what you've learned

Every round of feedback teaches you something about the project's rules. When you correct the same thing twice, it belongs in CLAUDE.md. "Section headings are 48px light, never bold." Over time the first pass gets closer to right, because Claude Code starts each session with the decisions you've already made.

Where Moodbit fits

Moodbit is the Chrome extension I built for steps 1, 4 and 5.

• Explore mode saves the part of a page that caught your eye, with your note on it, into projects you can search later.
• Build mode lets you open your app on localhost, click the exact element you want to change, write what feels off, draw what you mean, and attach a saved reference.
• Send hands one note or several to your Claude Code session, with your words, the screenshots, the element you clicked and the references. If Claude is closed, the notes wait for it.

Your notes stay on your computer.

Common questions

Do designers need to know how to code to use Claude Code?

No, but it helps to know the basics: what a component is, how to run the project, and how to commit with git. Claude Code can explain anything you're unsure about as you go.

What is CLAUDE.md?

A Markdown file in your project that Claude Code reads at the start of each session. It's the right place for design rules, conventions and anything you'd otherwise repeat in every prompt.

Is Claude Code a replacement for Figma?

For many projects it replaces the high-fidelity mockup, because you design in the real product. Figma is still useful for exploring ideas quickly and working with others on visuals.

How do I get Claude Code to match my design?

Write your design system into CLAUDE.md, give it annotated references, and review the result element by element with specific feedback. Vague prompts get generic results; specific ones get yours.

What's the best way to review AI-generated UI?

Review structure first, then type, spacing, colour and detail, in separate passes. Point at exact elements and send your notes in batches rather than one at a time.