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. Pixel-perfect visual parity — correct layout, colors, spacing, typography, content, and component hierarchy, derived directly from the source code (CSS, Tailwind, inline styles).
2. Interaction legibility — every interactive element and state transition annotated on its node so reviewers understand what's tappable, what it does, and how states connect.

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

Four non-negotiable rules

Rule 0: Never use browser capture or HTML-to-design tools