figma-to-code
Installation
SKILL.md
Figma to Code
Repo-first Figma MCP workflow — inspect the codebase before generated markup, preserve local primitives and tokens, and verify visually. Rationale and implementation rules: references/design-philosophy.md.
Capabilities
| Area | Outcome |
|---|---|
| Implement | Build repo-integrated UI from a Figma URL, frame, component, or desktop selection |
| Tokens | Map Figma variables to the project's token system by semantic role |
| Rules | Generate or update agent rules (AGENTS.md, CLAUDE.md, Cursor rules) for Figma workflows |
| Code Connect | Link published Figma library components to code implementations (Organization or Enterprise plan) |
Commands
Choose one command before using Figma MCP. Keep implementation, token extraction, rule authoring, and Code Connect work inside their respective command boundaries.