ui-prototype

What problem does it solve?

This Skill turns product ideas, wireframes, screenshots, or existing designs into structured, interactive Figma prototypes and accompanying documentation, removing manual reconstruction and iteration friction for PMs and designers.

Core Features & Use Cases

• Create & Iterate Modes: Automatically detects Create or Iterate mode to build new prototypes or incrementally update existing Figma files based on design briefs and Fix Specs.
• Multimodal Input Handling: Accepts design-.md, review-.md, Figma links, screenshots, hand-drawn wireframes, HTML/SVG, and local files, extracting structure and provenance.
• MCP Integration with Fallbacks: Uses ClaudeTalkToFigma for read/write and figma-remote-mcp for enhanced reads; gracefully degrades to SVG/HTML local generation when MCPs are unavailable.
• End-to-end Deliverables: Produces Figma files (or SVG/HTML fallbacks), a prototype-v{ver}-v{N}-{date}.md specification, and updates progress tracking with logic checks and iteration logs.

Quick Start

Create a Figma prototype for product studio feature data-recording from the design brief and screenshots, then save the Figma file (or SVG/HTML fallback) and the prototype-v1 documentation into portfolio/studio/features/data-recording/.