implement-design
Translates Figma designs into production-ready code using the Figma MCP server with pixel-perfect accuracy.
Install
npx skills add https://github.com/figma/mcp-server-guide --skill implement-designStats
| Total installs | 5,880 |
| Weekly installs | 5.9K |
| GitHub stars | 718 |
| First seen | Jan 20, 2026 |
| Source | @figma/mcp-server-guide |
Summary
- Requires Figma MCP server connection and a Figma URL with file key and node ID to extract design context, screenshots, and assets
- Seven-step structured workflow: parse URL, fetch design context, capture visual reference, download assets, translate to project conventions, achieve 1:1 parity, and validate against Figma
- Prioritizes design system reuse over duplication; maps Figma tokens to project design tokens and extends existing components rather than creating new ones
- Handles complex designs by fetching metadata first, then individual child nodes incrementally when responses are truncated
Tags
Related skills
| Skill | Installs | vs implement-design |
|---|---|---|
| react-native-design | 5,259 | -621 |
| vitepress | 5,310 | -570 |
| angular-component | 6,039 | +159 |
| llm-monitoring-dashboard | 6,847 | +967 |
| vue-testing-best-practices | 6,375 | +495 |
FAQ
- How many installs does implement-design have?
- implement-design has 5,880 total installs and 5.9K installs this week.
- Where is implement-design hosted?
- implement-design is published by @figma/mcp-server-guide at https://github.com/figma/mcp-server-guide.
- How many GitHub stars does implement-design have?
- implement-design has 718 GitHub stars.
- When was implement-design first indexed?
- OrangeBot.AI first indexed implement-design on Jan 20, 2026.
- How do I install implement-design?
- Run: npx skills add https://github.com/figma/mcp-server-guide --skill implement-design