alima-max/prototype-to-figma-skill

prototype-to-figma

When your agent uses it

Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype", "break prototype into flows", "Figma specs from code", or wants to make a working prototype legible to non-technical stakeholders. Even if the user just says "put this in Figma" or "make this reviewable" in the context of a prototype, use this skill.

What it loads into context

Token counts are estimates. Scripts run separately; they are not counted as reference context.

# 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](#client-compatibility) below.