Prototype → Figma

This skill takes a working Claude Code prototype and produces a structured Figma file that cross-functional partners can review asynchronously. The output has two equal goals:

1. True 1:1 visual parity — layout, colors, spacing, typography, content, and icons match the rendered prototype exactly, because the base is produced by a headless render → serialize (Rule 0), not a hand-reconstruction. Runs entirely in the terminal — no visible browser or tab.
2. A design-system-native, reviewable result — captured elements are reconciled to DS component instances / bound variables / text styles wherever the DS is published to Figma (Rule 2), and every state transition is annotated on its node.

This skill works across all Figma MCP clients. The output format adapts to what your client supports — see Client Compatibility below.

Five non-negotiable rules