Designing with Claude Code

The frontend-design skill

Anthropic published frontend-design in November 2025, alongside a post called Improving frontend design through Skills. The post names the problem directly: models drift toward the “safe design choices” that dominate their training data, which is how every generated landing page ended up with the same fonts, a purple gradient on white, and very little motion.

The skill is a set of instructions Claude loads when it builds UI. It lives in Anthropic’s claude-code repo as a plugin, with the same skill in anthropics/skills. To install it from inside Claude Code:

/plugin install frontend-design@claude-plugins-official

The official marketplace is added automatically the first time you start an interactive Claude Code session, so that is the whole setup (docs).

It has been rewritten since most guides were written

Most articles that rank for this quote the original version, which banned Inter, Roboto and purple gradients by name. The skill was rewritten in June 2026 and updated again in September. The current text is less a list of bans and more a working method. It asks Claude to “make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief,” to plan first as “a compact token system” before building, and to “spend your boldness in one place.” It also lists the looks AI-generated design now clusters around, including, pointedly, a cream background with a serif and a terracotta accent.

It works. Output from Claude with the skill is noticeably less generic. But notice what it does: it shapes each generation. The token system it plans lives in that conversation. Next session, Claude plans again.

Figma MCP with Claude Code

If the design already exists in Figma, Figma’s MCP server lets Claude Code read it: the layer structure, variables, screenshots, and Code Connect mappings to your real components. There are two servers.

Sources: Figma’s setup guide, plan details and tools reference, checked 6 October 2026.

A few things worth knowing before you rely on it:

• Calls are rate limited. On the free Starter plan, and for View and Collab seats on any plan, that is 20 calls a month; Dev and Full seats on paid plans get daily limits, from 200 to 600 a day depending on the plan (details).
• Output defaults to React and Tailwind. You can steer it to other stacks in the prompt.
• The main tool is get_design_context. get_variable_defs pulls the variables (your tokens) used in a selection, and create_design_system_rules generates a rules file for your agent. That last one is worth running once.
• Results depend on the file. Well-structured frames with auto layout and Code Connect come through far better than loose ones, and Figma’s own forum has threads from people whose results came back with the fonts and colours wrong.

Claude Code to Figma

The other direction arrived on 17 February 2026. Figma’s Claude Code to Figma captures a running UI from your browser (localhost, staging or production) and turns it into editable Figma frames. You ask Claude Code to send it to Figma, and Figma’s remote MCP server does the capture.

It is useful for getting a built screen in front of a designer. It is also a snapshot. The frames do not carry your logic, and once the code moves on, the Figma copy is a picture of something that used to be true. Builder.io’s write-up is blunt about the round trip: once you add business logic to the generated code, design updates from Figma mean redoing those changes.

Claude Design

On 17 April 2026 Anthropic Labs launched Claude Design, a research preview for Pro, Max, Team and Enterprise plans. It makes designs, prototypes, slides and one-pagers that you refine by chatting, commenting, editing directly and adjusting sliders. During onboarding it can build a design system from your codebase and design files, and it can export to Canva, PDF, PPTX or HTML, or package the work as a handoff to Claude Code.

It is a strong tool for exploring and presenting. The handoff is still a handoff: the design lives in Claude Design, and Claude Code receives a bundle to build from. We compare it with Figma in Claude Design vs Figma.

The part none of them cover

Put the three together and you can generate tasteful UI, pull a Figma design into code, and push code back into Figma. What is still missing is persistence. Three things go wrong in practice:

• Decisions live in the conversation. The skill makes Claude choose well each time. It does not make Claude choose the same thing each time.
• CLAUDE.md is advice, not enforcement. Anthropic’s memory docs say Claude “treats them as context, not enforced configuration,” and that specific, concise instructions are followed more consistently. A rules file written once and left to go stale is confidently wrong about your brand colour.
• Two copies drift. Whenever the design lives in one place and the code in another, someone fixes one of them, and from then on you have two sources of truth.

Claude Code with a design layer

Caret is a free, open-source desktop app that takes a different route: the design lives in your repo, as real React, in a .caret/ folder beside your app. Its pages render live on a canvas you can click and edit, and every change is a line in a file that git tracks.

For a Claude Code user, three parts matter.

1. Your tokens are always in CLAUDE.md, and always current

Caret writes your colour, type, spacing and radius into CLAUDE.md (and AGENTS.md and Cursor’s rules) inside a marked block, and rewrites that block every time a token changes. Whatever you wrote in CLAUDE.md yourself stays where it is. That matters because Claude Code reads CLAUDE.md at the start of every session, and if a project has both files it reads only CLAUDE.md, so the tokens have to be there.

2. Design decisions are files, not chat history

A page is a .tsx file. A colour you picked is a token reference on a line in that file. Next week it is still there, and a reviewer can see it in a pull request.

3. Claude Code can do the sync, over MCP

Caret runs a local MCP server for each open project. Connect Claude Code with the command Caret generates for you (the port and token change every launch):

claude mcp add --transport http caret <URL> --header "Authorization: Bearer <TOKEN>"

Claude Code can then read your pages and tokens, see what changed in the design since the last sync, and make your app match, in whatever framework it uses. It tells Caret when it is done, and Caret moves its bookmark forward. The Claude Code connection has been tested against the real CLI (setup guide).

MCP runs one way here. Claude Code can call into Caret, but Caret cannot push work out to Claude Code, so the canvas work happens in Caret and the sync is the part you hand over.

Does it replace the skill or Figma MCP?

No, and it does not need to. The frontend-design skill still improves what Claude generates, inside Caret’s pages as much as anywhere. If your team designs in Figma, Figma MCP is still the way to read those files. Caret is the part that keeps the result in your repo.

Questions

• What is the Claude frontend design skill?

  An official Anthropic skill for Claude Code that guides how Claude designs UI: deliberate typography and palette, a plan before building, and avoiding the patterns AI-generated design clusters around. Install it with /plugin install frontend-design@claude-plugins-official.

• Do I need a paid Figma plan to use Figma MCP with Claude Code?

  No. The remote server is available on all seats and plans, but calls are rate limited: 20 a month on the Starter plan or on a View or Collab seat. The desktop server needs a Dev or Full seat on a paid plan.

• Can Claude Code send designs to Figma?

  Yes, through Figma’s remote MCP server and its Claude Code to Figma feature, which turns a running UI into editable frames.

• Does Caret need Figma?

  No. Caret’s pages are React files in your repo. There is no design file to export from.