What problem does it solve? Turning a working code prototype into a reviewable design artifact normally requires manually recreating every screen in Figma, which is slow and error-prone. This Skill automates that handoff by exploding prototype interaction flows into state-by-state Figma frames with annotations, so designers and stakeholders can review and comment without touching code. ## Core Features & Use Cases - State-by-state frame generation: Analyzes prototype source to inventory components and interaction flows, then creates one Figma frame per UI state with flow arrows between them. - Design system mapping: Searches linked Figma libraries for matching components and uses real DS instances; unmatched elements are built from primitives and flagged with "No DS match" badges. - Native Dev Mode annotations: Adds filterable annotations (Interaction, Navigation, Validation, Error Handling, Data Flow, Edge Cases) plus an overview frame with legend, table of contents, and open questions. - Code Connect integration: Optionally creates bidirectional mappings between Figma components and codebase files. - Use Case: After building a login flow prototype in Claude Code, ask the agent to put it in Figma — it creates a new file, generates frames for empty/validation-error/loading/success states, annotates triggers and transitions, and returns a shareable URL for design review. ## Quick Start Ask your AI assistant to convert this prototype into Figma frames with interaction annotations so the design team can review it.
