Claude Code for designers: from Figma to a shipped app

What is Claude Code, in designer terms?

Figma is where you decide what a product should be. Claude Code is where it becomes real.

It opens the folder your project lives in, reads the files, writes new ones, runs them and tells you what it changed.

You talk to it in plain sentences. It answers with working software.

The closest thing in your current life is a developer who sits beside you and never sighs at "can we try it 4px tighter?"

The catch: this developer will also build the wrong thing, very fast, if you're vague.

It's a bit like dating someone who agrees with everything you say. Lovely for a week.

Then you realise you need someone who asks questions. Plan mode, which I'll show you below, is how you make it ask.

Three things worth knowing before you start:

• It works on real files. What you get is the product, not a picture of the product. That's the whole difference from a mockup tool.

• It comes with paid Claude plans, Pro and above.

  You can use it in the Code tab of the Claude desktop app, in a terminal or in the browser.

  Designers should start in the desktop app.

• It only knows what you tell it. Each of my projects has a plain text file at the top called CLAUDE.md.

  It says who the users are, what's already decided and what never to touch.

  Claude Code reads it at the start of every session. It's the brief you'd give a freelancer, written once.

Claude Design, /design or Claude Code with Figma: which should you use?

Anthropic now has three design doors, and its own pages describe each one separately. Nobody tells you which to pick. Here's how I'd choose.

Which one I'd start with

If I were starting today: explore in Claude Design, decide with /design, build with Claude Code.

If your team's truth already lives in Figma, connect Figma and go straight to building.

One thing that saves real pain: Claude Design can hand a design to Claude Code directly.

The build carries on from the design itself instead of starting over from a screenshot.

All of it draws from the same Claude usage, so there's no separate design allowance to track.

Sources, checked 5 October 2026: Get started with Claude Design, Claude Code desktop docs, Figma: set up the MCP server in Claude Code.

Your first 30 minutes (no terminal needed)

You don't need to learn the terminal to start. You need one folder, one small idea and the patience to read a plan before you approve it.

Minutes 0–5: set up

Install the Claude desktop app and open the Code tab.

Make an empty folder on your desktop, call it something like first-page, and choose it as your project.

That folder is the whole world Claude Code can touch for now. Good. Small worlds are safe.

Minutes 5–10: switch to Plan mode and brief it

The desktop app has a few permission modes, from asking before every edit to working on its own.

Pick Plan. In Plan mode it reads, thinks and proposes, and changes nothing until you say yes. Then paste this:

I'm a designer, not a developer. In this folder, build a one-page site for one case study from my portfolio. Plain HTML and CSS, no frameworks, as few files as possible. Sections: the problem, three process images (grey placeholders for now), the outcome, a contact link. Before you build anything, show me your plan: the files you'll create, the layout at desktop and at phone width, and every question you have for me.

Minutes 10–15: read the plan like a junior's brief

This is the part people skip. Don't. Read the plan the way you'd read a brief from a junior designer. Is the hierarchy right?

Did it invent a section you didn't ask for? Answer its questions properly. Two good sentences here save twenty minutes of fixing later.

Minutes 15–25: approve, look, change one thing

Approve the plan. The app shows a live preview in its browser pane, so you watch the page appear.

Now make one tiny change, the kind you'd ask for in a crit:

Make the headline about 20% smaller, give each section more space above it, and at phone width stack the three images in one column.

Check it at phone width. Then check it again. Your eye is the test here.

Minutes 25–30: make it explain itself

What did you change, in which files, and why? Say it in plain words for a designer.

Then open the diff view and look at what moved. You don't need to understand every line.

You need to notice when it changed something you didn't ask for. That's the habit everything else is built on.

You won't feel like a developer after this. You'll feel like a designer who finally has hands.

Workflow 1: design system to coded components

"AI is only as good as the picture you give it." I put that line on a slide for the PepsiCo designers, and it's even more true for code.

If you don't give Claude Code your tokens, it makes its own. They'll be close.

Close is worse than wrong, because you won't catch it until the third screen.

So the order is tokens first, then the smallest components, then a gallery.

1. Write the tokens down first. Colours, type scale, spacing and radius, in one file.

   If they already live in Figma variables, the Figma MCP server can read them.

   If you use Claude Design, the /design-sync command pulls a design system in from a repo, design files or your codebase.

2. Build the smallest pieces first. Button, input, card. Each one with every state: default, hover, focus, disabled, error, loading.

3. Ask for a gallery. One page that shows every component in every state, labelled.

   You review the system there, not by clicking around the product hoping to find an error state.

The gallery is the move I'd steal

On Endii, my endometriosis app, Claude Code built a gallery export that renders every home-screen widget in every pose.

I check states on one screen instead of hunting for them on my phone.

It did the same for marketing: a test that captures each screen in each language, ready for the App Store.

Read tokens.css. Build these components using only those tokens, with no new colours and no new font sizes: button (primary, secondary, ghost), text input, card. Give each one default, hover, focus-visible, disabled and error states. Then make gallery.html showing every component in every state, labelled. If a state needs a value that isn't a token, stop and ask me. Don't invent one.

That last line does the most work. Left alone, it will happily invent a 13px. You'll flinch at the 13px.

It won't. Taste lives in the body, in that small flinch when the spacing is off. Keep yours switched on.

Workflow 2: Figma frame to working prototype

If your team designs in Figma, connect it. The connection runs on MCP, the standard way for an AI to plug into another tool.

Figma's help centre gives a one-line install for Claude Code: claude plugin install figma@claude-plugins-official.

It recommends the remote server for most people.

Once it's connected, Claude Code reads the frame's actual layers, variables and components instead of guessing from a screenshot.

With the remote server it can write back to the canvas, too.

Copy the link to one frame and brief it:

Here's the Figma link to the onboarding step 2 frame: [paste link]. Build it as a working screen in this project with our existing components. Match spacing and type to the Figma variables, not to your eye. Then list every state this screen needs that the frame doesn't show (empty, error, loading, very long text, small phone) and ask me how each one should behave before you build it.

The second half of that prompt is the real lesson. Frames show moments. Products are rules.

What it looked like on Endii

Here's what that looked like for real. Our designer drew a mascot widget for Endii: a red panda that reacts to whether you've checked in today.

Three frames, three moods. Arms up when you've logged. Grumpy, in pyjamas, when you haven't yet. Pleading after two days away.

The frames didn't say when each mood appears, how the lines rotate, or what the panda says on a bad day.

Those were product decisions, not drawings. One rule held from the start: no guilt lines.

People with endometriosis have pain days. A widget that shames you for missing one is bad design, however cute the panda is.

Claude Code built it as a fourth widget, with copy that changes daily but never flickers within a day.

It translated the widget into French and Spanish, and fixed two spots where text was slipping through in English.

Another time, it pulled 18 App Store screenshot frames out of Figma and resized them to Apple's 1320 × 2868.

Then it uploaded 26 screenshots across five App Store locales.

It also flagged that one frame, "Spanish #5", was a blank cream rectangle in the Figma file itself. Nobody had noticed.

While building that missing screen, it found a real bug.

The app's export sheet had been showing English to every Spanish and French user, with 43 translation keys missing.

I would never have caught that by looking at frames.

Workflow 3: ship a real page

A page isn't shipped when it looks right. It's shipped when it has a real address, the form works and it holds up on a phone.

1. Check it locally first, in the preview, at desktop and at phone width.

2. Put it online. Claude Design can send a design straight to hosts like Vercel or Netlify.

   From Claude Code, you can ask it to deploy your folder to Vercel. The first time, you sign in to Vercel yourself. Logins stay yours.

3. Ask for proof, not a checkmark.

I learned the third one the embarrassing way. My own site's signup form looked finished for months.

You typed your email, it told you that you were on the list, and the address went nowhere.

Every signup from May until we caught it at the end of August, gone. The page was beautiful. It just wasn't connected to anything.

Before we call this shipped: submit the form with a test email and show me exactly where it landed. Open every link and list any that fail. Check the page at 375px wide and tell me anything that overflows. Show me the page title and meta description. Don't tell me it works. Show me.

The same rule runs the other way. When an AI edits many pages at once, run a second pass whose only job is to look for damage.

This month a bulk edit across this site left a literal "$1" where three sentences should have been.

The checking pass caught it before anything went live. The first pass never would have. As far as it knew, it was done.

What I built this way, and who did what

Four apps. Endii is an endometriosis tracker, live on the App Store.

Pause is an app with a supplement shop beside it. Timeline turns your birthday into a playing card. Then there's Kiki.

Endii is the one I can show you best. By September it was on build 49, in English, French and Spanish.

The last release included a French pass across 3,983 strings and ran 1,683 automated tests before it went to Apple.

I didn't write that code. I didn't stop deciding, either.

The pattern is boring, and it works. I bring the taste and the bug reports.

Claude Code brings hands, patience and a memory for detail. I make the call.

What not to hand to Claude Code

Your taste

My own AI operations setup has a rule written into it: it doesn't do taste.

On my site, the visual pass happens in a different tool, and Claude Code does the wiring: forms, deploys, data, structured markup.

Claude Code will make something that looks fine. Fine isn't what anyone hires you for.

The why

The method I taught at PepsiCo starts thirty minutes before Figma opens. Rename the screen in your head.

Sketch the object underneath it. Map what the user did five minutes before and what they need five minutes after.

Name the way of working your design rewards. AI can help you do that in ten minutes when the deadline is real. It can't decide it for you.

The buttons that can't be undone

Claude prepares. I press. Signing in, spending money, deleting real data, messaging real people and submitting to the App Store stay with me.

When an Endii release is ready, it's prepared down to the last field, and it goes to Apple when I say "ship".

Deleting without an audit

Before I redrew Endii's illustrations, Claude Code checked which of the 76 old ones the app could still reach. 31 couldn't.

They were deleted only after a second check confirmed it. That's 31 drawings I didn't redraw for nobody. Ask for the list first. Delete second.

Client work you can't share

If a brief is under NDA, don't paste it. Anonymise it or use sample material. The workflow is the same either way.

Numbers you can't check

Another rule I run everywhere: if the data can't be read, the answer is "no fresh data today".

Never a guess dressed up as a number. If it matters, a person checks it.

For design leads: rolling Claude Code out to a team

Most teams don't stall on skill. They stall on feelings and on setup.

When I trained designers at PepsiCo, the pattern was clear. Most of us used AI for quick answers, polished copy and the odd generated image.

The surface. The value underneath it, a thinking partner, a research partner, something that makes the artifacts for you, was barely touched.

And a lot of people felt behind. That feeling stops people experimenting more than any skill gap does.

Five moves that get a team building

• Start inside the tools you've already approved. At PepsiCo, that was Microsoft Copilot.

  It was the AI most designers already had open, so that's where we practised.

  The habit transfers. Swapping the tool later is the easy part.

• Write one context block per project. The product, the screen and the object behind it, the user, the decisions already made.

  Keep it where everyone can find it.

  Then any designer, or any AI session, can pick up a project with one paste. That's context engineering, without the jargon.

• Set the design system up once. On Enterprise plans, Claude Design stays off until an owner turns it on.

  Admins choose who publishes design systems.

  Use /design-sync so everyone builds from the same components.

• Keep engineers in the loop. Designers propose changes and engineers review them.

  The desktop app's diff view lets anyone comment on a specific line before it goes further.

  Nothing should ship because it looked right in a preview.

• Save the rough work. Context blocks, sketches, notes, handoff docs.

  Kept in one folder, they become a memory you can ask questions of.

  "What did we decide about this?" gets a real answer instead of a meeting.

I closed my PepsiCo talk with a line I still believe: systems thinking isn't a talent. It's a folder, a map and a few good questions.

If you'd like this run for your team, here's how team training works.

Claude Code for designers: quick answers

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

No. I don't write code, and I ship apps with it.

What you do need is a habit: read its plan before you approve it, and read its summary of what changed.

Then test the result the way a user would.

How much does Claude Code cost?

It's included in paid Claude plans, Pro and above, and Claude Design draws from the same usage pool.

Limits differ by plan, so check Anthropic's current pricing before you commit a whole team.

What's the difference between Claude Code and Claude Design?

Claude Design makes designs, prototypes and one-pagers on a canvas you can edit.

Claude Code works inside a real project's files and builds the product.

They connect: a design can be handed from Claude Design to Claude Code, which carries on from it.

Will Claude Code replace Figma?

Not for me. Figma is where a team decides and agrees. Claude Code is where the decision becomes software.

Connected through Figma's MCP server, they do more together than either does alone.

Is it safe to let Claude Code edit my files?

Start in Plan mode, in a folder that holds only the project, and approve each step.

Review the changes before anything goes live. Keep logins, payments and publishing in your own hands.

Want help with the thinking around the screen?

If the building part excites you, start with the 30 minutes above.

If the harder part is everything around the screen, that's what I teach live in AI for Designers.

Making sense of the research. Exploring more than one direction. Explaining your decision to a client or an engineer.