implement-design
implement design
What it does
- Figma MCP server must be connected and accessible
- Before proceeding, verify the Figma MCP server is connected by checking if Figma MCP tools (e.g., getdesigncontext) are available.
- User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
- :fileKey is the file key
- 1-2 is the node ID (the specific component or frame to implement)
- Project should have an established design system or component library (preferred)
- File key: :fileKey (the segment after /design/)
Requirements & configuration
- Issue: Design token values differ from Figma
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
implement-design FAQ
What does the implement-design skill do?
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection. Figma MCP server must be connected and accessible Before proceeding, verify the Figma MCP server is connected by checking if Figma MCP tools (e.g., getdesigncontext) are available.
What does implement-design require?
Issue: Design token values differ from Figma
How do I install implement-design?
Run: npx -y skills add https://github.com/figma/mcp-server-guide --skill implement-design --agent claude-code — the source lives at github.com/figma/mcp-server-guide.
Maintain implement-design?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/figma-mcp-server-guide-implement-design?ref=badge) npx agentictools info skills/figma-mcp-server-guide-implement-design The second line is the CLI lookup for this page — handy in READMEs and docs.
