Prototype to Figma

What it does

This skill transforms a functional code prototype (React, Tailwind, CSS) into a professional Figma file. It focuses on two core goals: maintaining visual parity with the source code and ensuring interaction legibility through native Figma annotations.

When to use it

Use this skill when a prototype needs to be reviewed by non-technical stakeholders, converted into design specs, or handed off to a design team. It is ideal for breaking a working prototype into individual states and flows.

What's included

• Procedural Workflow: A strict 6-phase process covering prototype analysis, design system mapping, page structuring, building in Figma, flow overview creation, and final verification.
• Strict Rules: Guidelines to prevent browser capture tools, forbid creating new master components, and ensure every element is accounted for.
• Annotation System: Specific categories for 'Interaction' (blue) and 'DS Drift' (orange) to signal missing components or state transitions.

Compatible agents

Works with any agent supporting Figma MCP clients, including Claude Code, Cursor, VS Code, and Copilot CLI.