Claude Code for design.

What Claude Code actually is

Claude Code is Anthropic’s agentic coding tool. It reads your codebase, edits files, runs commands, and integrates with your dev tools — planning, writing, and verifying work from natural-language tasks rather than just autocompleting lines.

It ships across several surfaces that all share the same engine: a terminal CLI, IDE extensions for VS Code, Cursor, and JetBrains, a desktop app with visual diff review, and a web experience for long-running tasks. Your CLAUDE.md files, settings, and MCP servers carry across all of them.

• Instruction file: Claude Code reads a CLAUDE.md file in your project root at the start of every session — the natural place to encode your design conventions, tokens, and review checklists.
• Skills: Agent Skills package repeatable instructions, scripts, and resources that Claude loads on demand, including Anthropic’s official Frontend Design skill for taste.
• Plan and subagents: It can plan before acting and spawn subagents that work on different parts of a task in parallel, which keeps large UI refactors coherent.

• Vendor: Anthropic
• Credential: Anthropic API key (BYOK, via the Console) or a Claude subscription (Pro / Max)
• Surfaces: terminal CLI, VS Code / Cursor / JetBrains extensions, desktop app, web

Why Claude Code is good at design

Among coding agents, Claude Code has a reputation for taste in frontend work. A few things explain it.

• Specific, not vague, decisions: Claude Code tends to commit to concrete choices — exact hex values, spacing scales, type ramps, and component hierarchy — instead of hand-waving, which is what separates a real interface from a placeholder.
• Codebase-aware reasoning: With a large working context it refactors UI across many files at once, reusing your existing components and tokens rather than reinventing one-off styles.
• An official frontend skill: Anthropic ships a Frontend Design skill that makes Claude write a design direction first and deliberately steers away from generic system fonts and predictable purple gradients.

The lesson is the same one Anthropic makes about its own models: Claude does not have taste by default — left alone it converges on the statistical center of web design (Inter, purple gradients, soft shadows). It produces good design when you give it constraints. Open Design packages exactly those inputs, which is why the two fit together (more below).

Set up Claude Code for design work, from zero

Here is the full path from a clean machine to a Claude Code that can build and verify UI.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Encode your design rules: Put your tokens, primitives, and conventions in CLAUDE.md and point Claude at them, so output matches a brand instead of defaulting to a generic look.
• Add browser verification: Wire a Playwright or Chrome MCP so Claude renders in a real browser and checks its output across breakpoints instead of only confirming the build passes.

The CLAUDE.md and Skills workflow

The highest-leverage design loop with Claude Code is feeding it real references plus your design context, then iterating until the UI matches — with CLAUDE.md and Skills carrying the constraints so you do not re-explain them every prompt.

1. Start from the clearest visual references you have — and include multiple states (desktop and mobile, hover, empty, loading), not just one hero shot.
2. Be specific in the prompt; vague prompts produce generic UI even with a strong agent.
3. Keep your design system and conventions in CLAUDE.md, and tell Claude where the tokens and canonical primitives live.
4. Add the Frontend Design skill so Claude commits to a real aesthetic direction before writing code.
5. Wire browser verification so Claude renders, resizes to breakpoints, and compares back to the references — not merely confirms it builds.

Drop a reference image into the session and prompt with concrete constraints:

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Run a dev server alongside, keep prompts small and focused, and commit good iterations / revert bad ones (telling Claude when you revert) so each pass builds on a clean base. Use plan mode for larger refactors so you can review the approach before any file changes.

Claude Code + Figma: design ↔ code round-trip

In February 2026 Anthropic and Figma shipped a first-class, bidirectional integration via the Figma MCP server. It works in both directions.

• Design → Code: Select a frame in Figma or paste a link into Claude Code, pull the design context, and ask it to implement the design using your existing component library. Code Connect keeps output aligned with your real components.
• Code → Design: Build and preview a feature in the browser, then say “Send this to Figma” to capture the running UI as editable Figma layers — entire screen or a selected element.

Install it once with claude plugin install figma@claude-plugins-official (Dev Mode MCP requires a paid Figma plan). The same Figma MCP is available to Claude Code, Codex, Cursor, and VS Code — exactly the kind of portable, multi-agent capability Open Design is built to orchestrate.

Claude Code vs Codex vs Cursor for design

There is no single winner for design work — each agent has a different strength, and experienced teams stack them. A fair summary:

The recurring community verdict is that taste comes from humans: all three default to a generic aesthetic without skills, references, and constraints. That is the real problem to solve — and it is design-tool-shaped, not model-shaped.

Pitfalls, and how to avoid the “AI slop” look

Even with Claude Code’s reputation for taste, the most common complaint about AI-generated design is that it looks generic — Inter fonts, purple gradients on white, soft shadows, oversized rounded corners, an aesthetic that “screams an AI made this.” Anthropic itself attributes this to distributional convergence: safe choices dominate web training data. Other reported issues include broken mobile layouts and instructions leaking into UI copy.

• Install the Frontend Design skill: It forces Claude to commit to a real direction and explicitly avoids fonts and gradients overused by AI.
• Enable browser verification: Make Claude render and self-check across breakpoints so layouts do not silently break on mobile.
• Supply tokens and references: Real design tokens and reference screenshots are the single biggest lever on output quality.
• Encode rules in CLAUDE.md: Put “no hero cards, max two typefaces, brand-first hierarchy” style rules where the agent reads them every run.

Notice that every mitigation is about giving the agent a curated design context. Maintaining that context by hand, per project, is the toil Open Design removes.

Designing with Claude Code inside Open Design

Open Design is the open-source design layer the workflow above keeps asking for. It treats Claude Code as a first-party adapter and wraps it in a curated skill and design-system library, a structured render pipeline, and a local desktop UI — so the design context that makes Claude Code good is there from the first run, not assembled by hand each time.

1. Install Open Design and select Claude Code as your agent.
2. Authenticate with your Anthropic API key (BYOK) or Claude subscription — credentials stay on your machine and are never proxied through us.
3. Pick a design system and a skill, then generate decks, prototypes, and landing pages with consistent taste.
4. Every artifact and DESIGN.md file lives in your own repo, not a hosted cloud.

Same Claude Code agent, same key — plus a real, portable, open-source design workflow around it. It is local-first and Apache-2.0, so nothing about your work or your credentials leaves your machine.

Frequently asked questions

1. 01 Is Claude Code good for design work? +

   Yes — it is widely regarded as the coding agent with the best frontend taste, making specific, codebase-aware decisions about hex values, spacing, and type scales. With the Frontend Design skill, a design system, and real reference images in context it produces production-quality, responsive UI and can verify it in a browser. Without that context it tends to default to a generic look, which is the gap Open Design fills.

2. 02 Do I need a Claude subscription to design with Claude Code? +

   You can use either an Anthropic API key (BYOK, via the Console) or a Claude subscription (Pro / Max). Either way Open Design never proxies your credentials — they are used directly by your agent on your machine.

3. 03 Claude Code or Codex for frontend design? +

   Both are strong. Claude Code is known for specific, codebase-aware design decisions and frontend reasoning; Codex has strong visual polish and excels at delegated, sandboxed builds. Many teams use both — Open Design lets you switch agents without changing your design workflow.

4. 04 How do I connect Claude Code to Figma? +

   Install the official Figma plugin with claude plugin install figma@claude-plugins-official. You can then implement Figma frames in code using the design context, and push a running UI back to editable Figma frames with “Send this to Figma.” Dev Mode MCP requires a paid Figma plan.

5. 05 What are Skills and CLAUDE.md? +

   CLAUDE.md is a markdown file in your project root that Claude Code reads at the start of every session — the place to encode your design conventions. Skills package repeatable instructions and resources Claude loads on demand, including Anthropic’s official Frontend Design skill. Open Design ships a curated library of both so you skip the per-project setup.

6. 06 How do I avoid the generic “AI slop” aesthetic? +

   Install the Frontend Design skill, supply real design tokens and reference screenshots, encode brand rules in CLAUDE.md, and enable browser verification. Open Design ships these as a curated library so you skip the per-project setup.

7. 07 Is Open Design affiliated with Anthropic? +

   No. Claude Code is a product of Anthropic; Open Design is an independent open-source project that supports it as a first-party adapter. Claude and Claude Code are trademarks of Anthropic.

8. 08 Are my files and credentials safe? +

   Yes — Open Design is local-first and Apache-2.0. Your files, artifacts, and DESIGN.md stay in your own repo, and your Anthropic credentials are used directly by your agent, never routed through Open Design servers.