Design-to-Code

Powered by the Figma MCP and Anthropic's frontend-design skill. Claude reads your actual Figma file — components, variables, spacing, colors — and generates React code that matches the design. The frontend-design skill ensures bold, intentional styling instead of generic AI output. No more constant context-switching between Figma and your editor.

10 min setup5 components4 skills1 MCP serverLast updated Sep 28, 2026

Skills

Frontend Design

Bold, intentional UI design — ensures Claude makes distinctive visual decisions.

npx skills add anthropics/skills@frontend-design

Figma Implement Design

Translates Figma design tokens, components, and layouts into production code. Published by OpenAI, not Figma.

npx skills add openai/skills@figma-implement-design

React Best Practices

Modern React patterns ensuring the generated components are architecturally sound.

npx skills add vercel-labs/agent-skills@vercel-react-best-practices

Anthropic Design Plugin

Critique the design before you build it, then turn it into a handoff spec — tokens, states, breakpoints, edge cases.

MCP Servers

Figma MCP

Read Figma design files — extract components, variables, spacing, and colors.

Setup

Add the frontend design, Figma implementation, and React best practices skills.

npx skills add anthropics/skills@frontend-design
npx skills add openai/skills@figma-implement-design
npx skills add vercel-labs/agent-skills@vercel-react-best-practices

Run /critique on the Figma frame before generating code, then /handoff for a spec the generated components can be checked against. It is a plugin, so it installs in two steps. It also pre-configures nine MCP connectors (Figma, Slack, Linear, Asana, Atlassian, Notion, Intercom, and two with no endpoint set) — each needs its own sign-in before it does anything.

/plugin marketplace add anthropics/knowledge-work-plugins
/plugin install design@knowledge-work-plugins

Add Figma's remote MCP server. The endpoint is https://mcp.figma.com/mcp — the bare host does not serve MCP. It authenticates with OAuth against api.figma.com (scope mcp:connect), so your client will prompt you to sign in to Figma on first connect.

{
  "mcpServers": {
    "figma": { "url": "https://mcp.figma.com/mcp" }
  }
}

Use Cases

Translating Figma mockups to React components
Design system implementation from Figma tokens
Pixel-accurate frontend development
Rapid prototyping from design files

Figmadesign-to-codefrontendReactdesign systemUI implementation

All Workflows

Get new workflows in your inbox. Skills and MCP servers combined for a whole job, one a week. See a past issue.