figma-to-codelisted

Implements a Figma design from a Figma URL, using the Figma MCP server: extracts design context, tokens (colors, typography, spacing), and assets (SVG, PNG), builds the UI in the project's stack — or as a standalone page for design review — then iterates until the render matches the node geometry Figma reports, to the pixel, and the reference screenshot. Use when the user provides a Figma link and wants it implemented, asks to "implement this Figma design", "build this screen from Figma", "make it match the Figma", or mentions figma-to-code.
Firzus/agent-skills · ★ 3 · AI & Automation · score 74

Install: claude install-skill Firzus/agent-skills

# Figma to Code (Figma MCP → project stack) Turn a Figma node into production code. The Figma MCP server output (typically React + Tailwind) is a **representation of the design, not final code** — re-express it in the target's language, framework, components, and tokens. The work is done only when the rendered result **matches** the design twice over: numerically against the node geometry Figma reports, and visually against the reference screenshot — every deviation resolved or explicitly accepted by the user. **Tool mechanics live elsewhere.** The Figma MCP plugin ships its own `figma-design-to-code` skill and declares it a mandatory prerequisite for `get_design_context`. When that skill is available, read it before the first call and follow it for the MCP mechanics — URL parsing, parameters, the `skillNames` logging field, error recovery. This skill layers the token, font, asset, and pixel-verification workflow on top; on tool mechanics the plugin skill wins. ## Prerequisites Verify all three before starting. If one fails, stop and tell the user what is missing. 1. **Figma MCP server connected.** Figma MCP tools (e.g. `get_design_context`) are callable. If not, guide the user to enable the Figma MCP server and restart their MCP client. 2. **Figma URL with a node id**, in the format `https://figma.com/design/:fileKey/:fileName?node-id=1-2`. If the URL has no `node-id`, ask the user to select the frame and copy its link — never guess a node id. 3. **A targ