---

name: figma-implement description: Implement Figma designs as production code with any component library. Guided flow discovers your project stack, maps Figma components to code components, and generates matching code. Triggers on "implement", "code this design", "Figma to code", "build this from Figma", or when a Figma URL is provided with implementation intent.

Figma Implement — Design to Code

Turn any Figma design into production code. Guided flow discovers your project, maps design system components to code components, and generates code that matches your conventions.

On Activation

Check the current model. If NOT opus, warn the user:

"Heads up — you're currently using [model name]. This plugin works best with Claude Opus for accurate design-to-code translation. To switch, run:

/model opus

Or continue with the current model if you prefer."

If already opus, skip this message silently.

Then start the guided flow. Ask one question at a time. Wait for each response.

---

Phase 0: Connect to Figma

Verify Figma MCP is connected.

Try calling mcp__figma__whoami or mcp__plugin_figma_figma__whoami silently. If it succeeds, skip to Phase 1.

If it fails:

"Figma MCP is not connected. Follow the setup instructions in the plugin README (Figma MCP Setup section) — you'll need a Figma access token and one CLI command. Tell me when you're ready and I'll verify."

Wait for response. Try whoami again. If it works, continue. If it still fails, suggest checking the token and restarting Claude Code.

---

Phase 1: Discover Your Project

Scan the project to understand stack, conventions, and existing components.

"Let me scan your project to understand how you write code..."

Run these checks silently:

1a. Framework detection

Read package.json → identify: React? Vue? Svelte? Next.js? Remix? Astro?
Read tsconfig.json → TypeScript or JavaScript?

1b. CSS framework detection

Check for: tailwind.config.* → Tailwind CSS
Check for: *.module.css → CSS Modules
Check for: styled-components or @emotion → CSS-in-JS
Check for: .scss files → Sass
Check for: plain .css → vanilla CSS

1c. Component library detection

Read package.json dependencies for:
  @mui/* → Material UI
  @chakra-ui/* → Chakra UI
  antd → Ant Design
  @eds/* → Epic Design System
  @radix-ui/* → Radix
  Custom → scan src/components/ for in-house library

1d. Existing component inventory

Glob: src/components/**/*.{tsx,jsx,vue,svelte}
For each: extract component name, props interface, usage patterns

1e. Code conventions

Check file naming: PascalCase.tsx? kebab-case.tsx? index.tsx in folders?
Check import style: absolute (@/components) or relative (../components)?
Check export style: default export or named export?

Present the discovery:

"Here's what I found in your project:

Framework: [React/Vue/etc.] with [TypeScript/JavaScript] CSS: [Tailwind/CSS Modules/etc.] Component library: [MUI/Chakra/Custom/None] Existing components: [N] found in src/components/ [List top 10-15 component names] Conventions: [PascalCase files, absolute imports, default exports, etc.]

Does this look right? Anything I should know about your project setup?"

Wait for response. Adjust understanding if they correct anything.

---

Phase 2: Get the Figma Design

"Share the Figma design URL (with a specific frame/node selected)."

Wait for response. Extract fileKey and nodeId from the URL.

Then fetch the design:

get_design_context({ nodeId, fileKey })
get_screenshot({ nodeId, fileKey })

Show the screenshot:

"Here's the design I'll implement: [screenshot]

I can see: [brief description of sections and elements]

Is this the right frame?"

Wait for confirmation.

---

Phase 3: Component Mapping

Map every Figma element to a code component. This is the critical step.

"Let me map the design to your code components..."

For each element in the Figma design:

1. Check if a matching component exists in the project (from Phase 1d inventory)
2. If yes → reuse it with correct props
3. If no → will create a new component following project conventions

Present the mapping:

"Here's my implementation plan:

Reusing existing components:

Figma element	Your component	Props I'll set
Primary button	<Button variant=\"primary\">	label, onClick
Text input	<TextField>	label, placeholder
Avatar	<Avatar>	src, name, size
...	...	...

New components to create:

Figma element	New component	Location
Stats card	<StatsCard>	src/components/StatsCard.tsx
...	...	...

[N] elements reuse existing components. [M] new components needed.

Should I proceed?"

Wait for confirmation.

---

Phase 4: Implement Section by Section

Build incrementally — not all at once:

1. Layout structure — outer container, grid, responsive breakpoints
2. Navigation — header, sidebar, breadcrumbs (reuse existing if available)
3. Primary content — main feature area
4. Secondary content — sidebars, footers
5. Data content — tables, cards, forms with realistic data

After each section:

• Save the file
• Check in browser if dev server is running
• Compare against Figma screenshot

Implementation rules

1. Reuse existing components. Never create a new Button if one exists.
2. Match conventions. File naming, imports, exports — follow what the project already does.
3. Match CSS approach. If Tailwind → Tailwind. If CSS Modules → CSS Modules. Don't mix.
4. Figma specs are source of truth. Match spacing, colors, typography exactly.
5. Position calculation: CSS position = Figma child − Figma parent for absolute elements. Use flexbox/grid for auto-layout.
6. SVG sanitization. Remove preserveAspectRatio="none" from SVGs.

---

Phase 5: Verify with Playwright

"Implementation complete. Let me check it matches the design..."

Use Playwright MCP to compare the implementation against Figma:

1. Ask for the dev server URL if not known (e.g., http://localhost:5173)
2. Navigate: browser_navigate({ url })
3. Match viewport to Figma frame size: browser_resize({ width: [figma width], height: [figma height] })
4. Take browser screenshot: browser_take_screenshot({ type: "png" })
5. Compare against the Figma screenshot from Phase 2
6. Check for console errors: browser_console_messages({ level: "error" })
7. Get the accessibility snapshot: browser_snapshot() — verify structure matches

"Here's the comparison:

• Figma: [screenshot]
• Browser: [screenshot]
• Console errors: [any errors, or 'None']
• Mismatches: [list differences, or 'Looks good!']

Want me to adjust anything, or run a full validation with /figma-validate?"

---

Critical Rules

• Phase 0 is mandatory. Never skip Figma connection check.
• Phase 1 runs once per project. Cache the discovery for the session.
• Phase 3 mapping requires confirmation. Don't generate code until the user approves the plan.
• Reuse over recreate. Always check existing components first.
• Match the project. Don't impose new patterns, frameworks, or conventions.
• Section by section. Never generate the entire page in one go.