skills.rest
wuji-technology
wuji-technologyOFFICIAL
Explore all skills by this author →
Website𝕏@wuji_globalGitHub

ui-prototype

Create interactive Figma prototypes from product descriptions, screenshots, and wireframes.

Updated Aug 23, 2026
Search Tags:#design#ui#figma#mcp#prototyping#iteration#prototype
One-click install
npx skills add https://github.com/wuji-technology/pm-workflow-plugin --skill ui-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-prototype
Source: https://github.com/wuji-technology/pm-workflow-plugin/tree/main/skills/ui-prototype
Command: npx skills add https://github.com/wuji-technology/pm-workflow-plugin --skill ui-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

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/.

Frequently Asked Questions about ui-prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create interactive Figma prototypes from product descriptions or wireframes?▼

Create interactive Figma prototypes by providing product descriptions, screenshots, or wireframes as input. The system reads the structured design brief, automatically extracts layout and provenance, and generates a fully interactive Figma file with accompanying specification documentation.

Can I iterate on existing Figma files instead of starting from scratch?▼

Iterate on existing Figma files using the built-in Iterate mode. The system automatically detects whether to create a new prototype or incrementally update your current file based on Fix Specs, review notes, or new design briefs without manual reconstruction.

Do I need MCP connections to generate Figma prototypes, or are there fallbacks?▼

MCP connections are not strictly required to generate prototypes. The system uses ClaudeTalkToFigma and figma-remote-mcp for read/write access, but gracefully degrades to local SVG and HTML generation when MCPs are unavailable.

What file formats and inputs can I use to build Figma prototypes?▼

Build Figma prototypes using multimodal inputs including design markdown files, review markdown files, Figma links, screenshots, hand-drawn wireframes, HTML, and local SVG files. The system extracts structure and provenance from all accepted formats.

What deliverables do I get when generating a Figma prototype?▼

Deliverables include an interactive Figma file or local SVG/HTML fallback, a structured prototype specification markdown file with versioning, and updated progress tracking with logic checks and iteration logs for complete design documentation.

Related Skills

Explore More Design & Creative Skills→
ramybarsoumramybarsoum

napkin-sketch

Generate annotated ASCII wireframes and capture browser screenshots for design matching.

Community
Intermediate
easingthemeseasingthemes
6

dx-figma-verify

Compare HTML/CSS prototypes against Figma reference screenshots and generate verification reports.

Community
Advanced
mrgreenishmrgreenish

code-to-figma-design-system

Synchronize tokens.json with Figma variables and generate design system documentation pages.

Community
Advanced
xiaoquqixiaoquqi

architecture-diagram

Generate standalone HTML/SVG architecture diagrams from component descriptions.

Community
Intermediate