---

name: implement-design-figma description: Use when translate a Figma URL into production-ready code with one-to-one visual fidelity using the Figma MCP server, mapped to your project's component conventions.

Figma to Code (Implement Design)

Griffin's Implement Design skill comes from Figma directly. Paste a Figma URL and the skill parses the file key and node ID, calls the Figma MCP server for full design context (auto layout, typography specs, color values, spacing tokens), takes a screenshot as visual reference, and downloads any assets. It maps output to your existing component library or design system instead of recreating buttons and inputs from scratch, then runs a validation checklist against the screenshot for layout, typography, colors, interactive states, responsive behavior, and accessibility.

What you get

• Figma URL parsing to file key + node ID
• Figma MCP context pull (auto layout, tokens, typography)
• screenshot reference download
• asset download for icons and images
• reuse of project component conventions
• end-of-run validation checklist against the Figma screenshot

Customize your output

• Figma URL: paste directly
• Project mapping: reuse existing components vs generate fresh
• Validation checklist: layout, typography, colors, interactive states, responsive, accessibility

Example output

Given a Figma dashboard frame node, generates React + Tailwind matching the design system's Button, Card, and Input components, then runs the checklist and flags a color-token mismatch in the empty state.

Best for

Designers and design-engineers handing off Figma files to Claude for production code

---

Source: Griffin Wooldridge · https://www.griffinwooldridge.com/blog/claude-skills-for-designers Category: Design / Handoff · Priority: P1