The best design tool for Claude Code depends on where your design starts.
/design..pen design files in your repo; Paper's canvas is HTML and CSS.Try Subframe free on the app Claude Code built.
DESIGN.md.| Tool | Connects to Claude Code via | Starts from your existing app | Runs on | Starting price (as of 2026-10-09) |
|---|---|---|---|---|
| Figma + MCP | Plugin (remote MCP server) | Captures live UI as Figma layers | Browser | Free (20 MCP calls/month); Dev seat $12/mo |
| Claude Design | Built in: /design, /design-sync |
Links your repo and design system | Web, desktop, terminal | In every Claude plan; Claude Code from $20/mo |
| Pencil (pen.dev) | MCP | Imports pages from its built-in browser | macOS, Windows, Linux, VS Code/Cursor | See pen.dev's pricing page |
| Paper | Plugin (MCP via Paper Desktop) | Extension pastes web components | Web; macOS, Windows, Linux | Free (100 MCP calls/week); Pro $20/editor/mo |
| Magic Patterns | MCP or Claude connector | Imports layouts from your codebase | Web | Free; MCP from $20/seat/mo |
| Subframe | Your Claude Code subscription in the app; plugin (MCP + skills) | Opens your running app | Web canvas; codebase features need macOS app | Free; Pro $20/editor/mo |
| Onlook | Shared codebase | Opens your Next.js + Tailwind project | Self-hosted; hosted in closed beta | Free to self-host |
| v0 | GitHub sync | Prompt, screenshot or Figma link | Web | Free (7 messages/day); Plus $30/user/mo |
| Google Stitch | MCP + Stitch skills | Extracts DESIGN.md from your code |
Web | See Stitch's site |
| Design skills | Plugins | Works on your code | Anywhere Claude Code runs | Free |
Builders we talk to describe the same loop with Claude Code alone: dictating pixel changes in prose ("update the border radius from 16 to 12 pixels") and getting it right about half the time. So we built one test around that job.
Tools are numbered by how they connect to Claude Code, not ranked. Here's what each one hands back to Claude Code, according to its own docs:
| Tool | What goes back to Claude Code |
|---|---|
| Figma + MCP | Design context over MCP: components, variables, layout data and Code Connect mappings |
| Claude Design | A handoff that continues from the design you made |
| Pencil (pen.dev) | A .pen design file in your repo, kept in step with your code |
| Paper | The Paper file open in Paper Desktop, over MCP, down to a frame turned into code |
| Magic Patterns | The design, pulled into your project over MCP, with a skill that adapts it to your code |
| Subframe | Your exact changes, comments and a screenshot, sent to the agent in the app (Send) or packaged as a prompt for Claude Code in your terminal (Copy prompt) |
| Onlook | Edits in the same files Claude Code works on |
| v0 | Code in a GitHub repo Claude Code can work in |
| Google Stitch | A DESIGN.md for Claude Code to follow, plus the Stitch MCP server |
| Design skills | Nothing to hand back: they change what Claude Code writes |
Figma's MCP server gives Claude Code your components, variables, layout data and Code Connect mappings, so its code uses your real components. It also writes to the canvas, and code-to-canvas turns live UI, localhost included, into editable Figma layers. Install: claude plugin install figma@claude-plugins-official.
Our test. Capture the settings screen with code-to-canvas, make three directions, change the radius in Figma, and paste the frame link into Claude Code. Figma's docs cover the capture and the handoff: code-to-canvas brings the running screen in as editable layers, and over MCP Claude Code reads the edited frame's components, variables and layout data before it changes code.
Best for: teams whose design system and reviews live in Figma.
Watch for: MCP calls are capped at 20 a month on the free Starter plan and 200 a day on Professional. Writing to the canvas is free in beta and will become usage-based and paid, Figma says.
Price (as of 2026-10-09): Starter is free; on Professional, a Dev seat is $12 a month and a Full seat $16.
Anthropic's tool for designs and interactive prototypes, in Claude chat and Claude Code. In Claude Code, /design creates, edits and syncs designs on desktop or in the terminal, and /design-sync pulls in your design system from a repo, design files or your local codebase. The handoff to Claude Code "continues from your existing work instead of starting over from a screenshot," per Anthropic.
Our test. Run /design-sync on the test repo, ask for "2–3 alternative layouts" (Anthropic's suggested prompt), change the card radius, and hand off to Claude Code. Anthropic's guide covers that path: /design-sync brings in the design system from your local codebase, the prompt asks for alternatives to compare, and the handoff carries the chosen design into Claude Code.
Best for: exploring ideas when you're already on a Claude plan.
Watch for: no version history yet, and several people editing at once "is still basic" (Anthropic). Design work shares Claude Code's usage limits.
Price (as of 2026-10-09): included on Free, Pro, Max, Team and Enterprise. Claude Code itself starts with Pro, $20 a month ($17 billed annually).
Claude Design vs Subframe. Claude Design starts from your repo and design system and hands Claude Code a finished design. Subframe starts from your running app: you set exact values on the live page or a captured copy, then the agent edits your files. Rather prompt than tweak? Pick Claude Design.
Pencil, now pen.dev, saves designs as .pen files: JSON that works with Git like code, kept in your repo. It runs as a desktop app (macOS, Windows, Linux), a VS Code and Cursor extension, and a CLI; turn on Claude Code under Settings → MCP. Its built-in browser imports web pages onto the canvas.
Our test. Import the running settings screen, ask for three directions, change the radius on the canvas, and have Claude Code apply it. pen.dev's docs cover the round trip: the built-in browser imports the page onto the canvas, and the agent updates the .pen file and your code as separate files, so both show up in the diff.
Best for: design and code reviewed in the same pull request.
Watch for: design and code are separate files the agent keeps in step; pen.dev's docs say to review both after each request.
Price: see pen.dev's pricing page.
A design canvas built on HTML and CSS. Over MCP, Claude Code can read and write your Paper files, from generating layouts to turning a frame into code. Paper Desktop (macOS, Windows, Linux) runs the MCP server; one click in its MCP panel adds it to Claude Code. The Paper Snapshot extension pastes web components in as editable layers.
Our test. Paste in the settings screen with Paper Snapshot, have Claude Code make three directions, change the radius by hand, and have Claude Code update the code. Paper's MCP docs cover both directions: Claude Code can generate layouts in the open Paper file and turn a frame into code.
Best for: watching Claude Code design on a canvas you can also edit.
Watch for: the agent works on the file open in Paper Desktop. The free plan allows 100 MCP calls a week.
Price (as of 2026-10-09): Free; Pro is $20 per editor a month, $16 billed yearly.
A hosted AI design tool for product teams that generates React prototypes. Its MCP server, also offered as an official Claude connector, lets Claude Code pull a design into your project or import layouts from your codebase. Its "inspiration" tools put several directions on one shareable comparison page.
Our test. Import the settings screen, generate directions, pick one, and have Claude Code integrate it. Magic Patterns' MCP docs describe that path: the inspiration tools lay out several directions on one comparison page, and the integration skill has Claude Code adapt the chosen design to your project.
Best for: sharing directions before anyone touches the repo.
Watch for: MCP needs a paid plan, and Magic Patterns recommends its integration skill so the agent adapts a design "rather than pasting the prototype verbatim."
Price (as of 2026-10-09): Free; Starter, which includes MCP, is $20 per seat a month ($17 billed annually).
A design tool for your codebase, built on HTML and CSS: a canvas, a built-in browser and an agent in one desktop app.
Our test. Open the running settings screen, change the radius with Inspect, capture the page, ask for three variations, and send the change to the agent. Subframe's docs cover each step: Inspect sets the exact value on the live page, variations land as real pages on the canvas, and Send hands the agent your changes, comments and a screenshot, so it edits your files and you review the diff in Git.
Best for: an existing app that needs better UI: see options, pick one, fix the exact thing that's off.
Watch for: the desktop app is macOS only, and codebase, browser and own-subscription features need it (Windows and Linux are "coming soon"). Figma designs come in as screenshots. No hosting.
Price (as of 2026-10-09): Free, including your own Claude Code subscription and Capture; Pro is $20 per editor a month.
An open-source (Apache 2.0) visual editor for code. Its README says it runs on any Next.js + Tailwind CSS project, so it edits the same files Claude Code does.
Our test. Open the test repo and change the card radius. Onlook calls your code the source of truth, so a radius you set visually is saved to the project itself, where Claude Code picks it up.
Best for: a self-hostable visual editor for a Next.js + Tailwind app.
Watch for: the hosted app is in closed beta.
Price (as of 2026-10-09): free to self-host; hosted pricing on request.
Vercel's AI builder generates React, Next.js and Tailwind UI with shadcn/ui, from a prompt, screenshot or Figma link. Design Mode adjusts type, spacing, colors and layout visually. v0 syncs with GitHub, so Claude Code can pick up in the same repo.
Our test. Prompt the same settings screen, set the radius in Design Mode, and pull the code into the test repo. v0 builds the screen from the prompt, and its GitHub sync puts the code in a repo Claude Code can work in.
Best for: new screens and greenfield apps.
Watch for: the free plan allows seven messages a day.
Price (as of 2026-10-09): Free; Plus is $30 per user a month.
Google's AI design tool for generating UI from prompts. It works with DESIGN.md, a Markdown design-system file agents can read. Stitch skills from Google's google-labs-code GitHub org install into Claude Code, use the Stitch MCP server, and can extract a DESIGN.md from your frontend code.
Our test. Prompt the same settings screen and export it. Stitch generates the screen from the prompt; on the Claude Code side, the Stitch skills work through the Stitch MCP server and can write a DESIGN.md from your existing frontend for Claude Code to follow.
Best for: quick concepts and a design-system file for Claude Code to follow.
Watch for: the skills repo says it's "not an officially supported Google product."
Price: see Stitch's site for current plans and limits.
Instructions Claude Code loads for frontend work. Anthropic's frontend-design plugin "generates polished code that avoids generic AI aesthetics" and applies automatically. UI/UX Pro Max (MIT) adds 192 color palettes, 74 font pairings and UX guidelines. Install both through /plugin.
Our test. Have Claude Code build the settings screen with and without frontend-design.
Best for: better first drafts, free.
Watch for: skills change what Claude Code writes, not how you review it; you still describe changes in prose.
Price: free.
Also worth knowing: Penpot (open source, official MCP server), Doop (open-source multiplayer canvas Claude Code joins over MCP), and Playwright MCP, which lets Claude Code read and screenshot pages to check its own work.
| If you… | Use |
|---|---|
| Design and review in Figma as a team | Figma + MCP server |
| Pay for Claude, want no new subscription, or would rather prompt | Claude Design, plus frontend-design |
| Want design files versioned in Git | Pencil (pen.dev) |
| Want to watch Claude Code design on a canvas | Paper |
| Want directions to share before building | Magic Patterns |
| Have an app Claude Code built, on a Mac, and need it to look better | Subframe |
| Are on Windows or Linux | Figma, Claude Design, Pencil or Paper (Subframe's desktop app is macOS only) |
| Want an open-source, self-hosted editor | Onlook or Penpot |
| Need a new app in minutes | v0 |
Working from the terminal? Install the Subframe plugin instead. For the full workflow, see How to Use Claude Code for Frontend Design.
Figma's MCP server for Figma teams, Claude Design to explore on a Claude plan, Pencil or Paper for an MCP canvas, and Subframe when Claude Code already built your app and the UI needs work (macOS).
Yes. Claude Design runs in Claude Code as /design, with /design-sync for your design system. Claude Design is on every Claude plan; Claude Code starts with Pro.
Pencil, Paper, Magic Patterns and Subframe connect over MCP, and Claude Design needs no setup. Figma's own setup is now a plugin install and a sign-in, so Figma teams should try it first.
Claude Design for exploring, Pencil or Paper for a canvas Claude Code edits, and Subframe for the running app. Many keep Figma for review. More options: Best AI UI Design Tools.
Claude Code works on your files; unless you give it a way to look, it changes code without seeing the result. Design MCP servers give it design context, Playwright MCP lets it inspect rendered pages, and Subframe's Send includes a screenshot with each edit.
Mostly. Figma, Paper and Magic Patterns have Cursor plugins, Pencil has a Cursor extension, and Subframe connects through MCP and agent skills. Claude Design runs in Claude's apps and Claude Code.
If Claude Code built your app and you'd rather not dictate pixels, try Subframe free: open your running app, pick from variations side by side, set exact values, and ship code your engineers can use.
Checked October 9, 2026.
Changelog
