figma-design-to-code
MANDATORY prerequisite — you MUST invoke this skill BEFORE calling the get_design_context Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps…
- installs 8w
- 1,164
- 30-day movement
- starts with the next reading
- Related entries
- 1
- Connections
- 0
A SKILL.md agent skill that governs how an AI coding agent implements Figma designs as code. It mandates calling the Figma MCP `get_design_context` tool first, then adapting its React + Tailwind reference output to the target project rather than pasting it verbatim.
Reach for it whenever a user asks to implement, build, or port a Figma design into a codebase, since it enforces the correct read-from-Figma workflow.
Use it to
- Implement a Figma design in an existing codebase
- Port a specific Figma node into project components
- Reuse existing components and design tokens when translating a design
- Handle remote image and icon asset URLs from Figma output
- Recover from get_design_context errors, e.g. missing node-id
For AI coding agents and their users doing design-to-code work
- Host repository
- figma/mcp-server-guide
- Installs, lifetime
- 1,400
- Installs, 8 weeks
- 1,164
- Invocable by
- model
- Host stars
- 2,000
- Host language
- Python