Can a designer who doesn't code use Claude Code?

You can start without writing code, because you give instructions in plain language. To judge the output, though, you need to read basic HTML, CSS and a project's folder structure. Without that, you can accept code but you can't tell whether it is right.

No. Anthropic's documentation says Claude Code requires a Pro, Max, Team, Enterprise or Console account. The free Claude.ai plan does not include it.

Do I need the Figma MCP server to use Claude Code for design work?

No. You can paste or drag a screenshot into Claude Code and describe the layout. The Figma MCP server lets Claude read variables, components and layout straight from the file, so the result tracks the design more closely.

Where should design rules live so Claude Code follows them?

In a CLAUDE.md file at the project root, or in AGENTS.md imported from CLAUDE.md. I keep the full system in DESIGN.md and the tokens in CSS, and CLAUDE.md holds short rules plus pointers to those two places.

Claude Code for designers: turning a Figma design into a working page

Claude Code is Anthropic's agentic coding tool. It runs in a terminal, a desktop app or your editor. For a designer, it reads a Figma frame (through the Figma MCP server) or a screenshot, reads the design rules you have written down, then creates and edits code in a real project. You still make the decisions and review every change.

There are plenty of Claude Code tutorials already. This one is narrower: how a working designer uses it on a site that has to stay consistent for months. I'm Hai Le, a UI/UX designer with more than five years of experience who also writes React, Tailwind and Next.js. The site you are reading was built with Claude Code starting on 31 August 2026, and most examples below come from its repository. Anything taken from official documentation is linked at the end.

What does Claude Code actually do for a designer?

It is an agent. You describe a task, and it reads files in your project, runs commands, writes code, and reports what it changed. A chat window answers questions; Claude Code works on your source files.

The jobs where it pays off for me:

Building UI from a design. Give it a Figma frame or a screenshot and it writes components in the framework you already use.
Holding a design system together. If the rules are explicit, such as "tokens only, never raw hex", it follows them and reminds you when you forget.
Testing an interaction idea. Scroll effects, hover states and dark mode are faster to judge in a real browser than in a Figma prototype.
Writing the system's documentation. Token tables, naming conventions, handoff notes.

If you haven't installed it yet, installing Claude Code walks through it for people who have never opened a terminal.

What do you need before you start?

You need	Why	Note
A paid Claude plan	Claude Code needs Pro, Max, Team, Enterprise or Console	The free plan does not include it
A terminal or the desktop app	Where you talk to Claude Code	The desktop app avoids the terminal entirely
A web project	Claude works inside a code folder	Mine is Next.js, Tailwind and shadcn/ui
A tidy Figma file	So Claude can read design intent	Components, variables, auto layout, real layer names
Git	So every change can be reviewed and undone	Your most important safety net

On macOS and Linux, the current official install command is:

curl -fsSL https://claude.ai/install.sh | bash

Then open your project folder in a terminal and type claude. The first run opens a browser so you can sign in.

Set up Git on day one. Claude Code edits real files on your machine. With Git, a bad change is one diff to read and one command to undo.

How do you teach Claude your design system?

Every Claude Code session starts with an empty context. What carries across sessions is the instruction file you write, usually CLAUDE.md at the project root. Anthropic's docs say it is loaded at the start of every session, and /init can generate a first draft.

In this repository the rules sit in three layers:

CLAUDE.md contains one line: @AGENTS.md. The @ syntax imports another file, so any other coding tool that reads AGENTS.md gets the same rules.
AGENTS.md holds the short rules: palette, text tiers, token usage, bilingual conventions, and what is done versus not done yet.
DESIGN.md is the full design source of truth, a little over 800 lines: colour ramps, type scale, spacing, motion, and a description of each component. The tokens themselves live in app/globals.css.

There are also small CLAUDE.md files in subfolders. components/layout/CLAUDE.md describes the header and menu in detail. Claude only loads it when it works in that folder, so the shared context stays lean.

Here is a shortened excerpt of the real rules in this site's AGENTS.md:

- Palette: pure white #ffffff, pure black #000000, a strictly neutral
  grey ramp, and exactly one hue: magenta #FF009D.
- Default to semantic tokens (background, foreground, muted, border).
- No box-shadow anywhere. Use a 1px hairline border or a bg-muted fill.
- Magenta text at 20px or smaller uses text-primary-text (#be0074),
  because #ff009d on white only reaches 3.66:1 contrast.

The last rule is the kind most worth writing: a rule with its reason attached. Once Claude knows why the brand magenta fails for small text, it applies the fix in places I hadn't thought about. What is DESIGN.md covers how to write that file.

What is the workflow from a Figma frame to a working page?

This is the workflow I recommend. The Figma file preparation follows Figma's own guidance; the rest is how I work with Claude Code on this repository.

Clean up the Figma file. Anything repeated becomes a component. Colour, spacing, radius and type are bound to variables. Auto layout carries the layout intent. Layers get names like CardContainer instead of Frame1268.
Connect Figma to Claude Code. The Figma MCP server lets Claude read frames, variables and screenshots from the file. Setup and rate limits are in Figma MCP with Claude Code.
Start in plan mode. Press Shift+Tab until the status bar shows plan mode. Claude reads files and proposes a plan, and edits nothing until you approve. I check which tokens it intends to use and where it plans to create files.
Work in small pieces. One block at a time: header, card, grid. Figma's guide gives the same advice, because large selections slow the tools down and return incomplete results.
Compare in a real browser. Run the dev server and put the page next to the Figma frame. Check narrow screens, dark mode and keyboard navigation.
Read the diff before you commit. A hex value inside a component means a token was skipped.

You can skip the MCP server in step 2: drag or paste a screenshot into Claude Code and describe the layout and the tokens to use. Expect less precision, because Claude has to infer values from pixels.

How was this site built with Claude Code?

The repository started from Create Next App on 31 August 2026. At the time of writing it has about 80 commits, and 57 of them carry a Claude co-author line. A few things I learned along the way.

Plans live in files, split by phase. The plan/ folder has one overview and a phase-*.md file per phase: scaffold, design system, layout, content infrastructure. AGENTS.md says to finish one phase before starting the next. In a fresh session I can say "do Task 9.5" and Claude reads the phase file to find out what that means.

A change of direction stayed orderly. The site began as "Design Stash", a design reference library. In Phase 9 it became a personal portfolio. Because the plan was written down, Claude removed the right routes, rewrote the affected parts of AGENTS.md, and left a note explaining why they were gone.

Some things got built twice and then dropped. The header used to shrink into a floating pill on scroll. The first version tracked scroll position in React; the second used pure CSS with animation-timeline: scroll(). Both stuttered on slower machines, so I removed the effect and recorded the reason in components/layout/CLAUDE.md so nobody rebuilds it.

Interaction bugs show up on real devices. The mobile menu once opened a language dropdown on top of itself, which was hard to tap on a touchscreen. Claude had built exactly what I described; my description was wrong. The fix was to inline the language options inside the menu. I only noticed by testing on a phone.

Review happens in batches. At the end of Phase 9 there is a single commit fixing 11 cross-cutting issues that a review pass surfaced. Claude writes quickly, so more of my time goes into reading and deciding.

What goes wrong when AI writes your UI?

Problem	What you see	How to prevent it
Hard-coded values	Hex codes and odd pixel values inside components	A "tokens only" rule in `CLAUDE.md`, and reading the diff
Generic-looking UI	Purple gradients, big radii, shadows everywhere	Describe your system precisely; Anthropic's `frontend-design` plugin targets this problem
Oversized selections	Slow MCP calls, missing parts in the code	One component or section per request
Contrast ignored	Light grey text on a grey surface	Write down contrast thresholds and the allowed text tokens
Code nobody read	The page works and nobody knows why	Ask Claude to explain each file before you accept it
Conflicting rules	Behaviour flips between sessions	Review instruction files regularly and delete stale rules

The last row comes from Anthropic's docs: when two instructions contradict each other, Claude may pick either one. So when I drop a decision, like the pill header, I update the instruction file in the same commit.

How much code does a designer need to know?

You can begin without writing any. To keep using it, I think you need three things:

Read HTML and CSS, especially flexbox and grid. They are the browser's auto layout.
Understand your framework's folder structure: where pages live, where components live.
Basic Git: view changes, commit, go back.

The rest you pick up by asking Claude to explain what it just wrote. If Figma itself is new to you, learning Figma from zero is a better starting point. If all you need is a clickable prototype to test an idea, Figma Make may be enough, with no terminal involved.

When is Claude Code the right tool?

You need	Good fit
A quick prototype for user testing	Figma Make or a Figma prototype
A real page on a real domain that you'll keep editing	Claude Code on a Git project
Handing a screen to a team with an existing codebase	Claude Code with the Figma MCP server, following the team's conventions
A quick answer about one CSS property	Claude in the chat app

I reach for Claude Code when the result has to last and stay consistent: a portfolio I edit every week, a design system several people share, a feature heading to production. For a throwaway idea, a lighter tool is faster.

Where to go next

Installing Claude Code: install it and run your first command.
Figma MCP with Claude Code: pull tokens and components from Figma into code.
What is DESIGN.md: design documentation that both people and AI can read.
Joyme case study: a first version shipped in three months with a 50+ component system, the kind of system worth writing down as rules.

If you're hiring a designer who builds systems and reads code, the about page has my experience and contact details.

Sources

Anthropic, Advanced setup: installation and account requirements
Anthropic, How Claude remembers your project: CLAUDE.md, AGENTS.md, imports
Anthropic, Common workflows: plan mode and working with images
Anthropic, Discover plugins: the official marketplace
Figma, Structure your Figma file for better code
Figma, Figma MCP server guide on GitHub

Install commands, account requirements and CLAUDE.md behaviour were checked against the official documentation on 4 October 2026. Commit counts come from this site's repository on the same date.