prototype-to-production
✓Convert design prototypes (HTML, CSS, Figma exports) into production-ready components. Analyzes prototype structure, extracts design tokens, identifies reusable patterns, and generates typed React components. Adapts to existing project tech stack with React + TypeScript as default.
Installation
SKILL.md
Convert design prototypes into production-ready, typed components by analyzing structure, extracting patterns, and generating clean code.
| Input Type | Detection Method | Key Patterns |
| Super-design | Path: .superdesign/designiterations/.html | Flowbite, Tailwind CDN, theme CSS references | | Generic HTML | Any .html file | Standard HTML structure, inline/external CSS | | Figma Export | Figma-specific class names | figma-, absolute positioning, frame naming |
Convert design prototypes (HTML, CSS, Figma exports) into production-ready components. Analyzes prototype structure, extracts design tokens, identifies reusable patterns, and generates typed React components. Adapts to existing project tech stack with React + TypeScript as default. Source: ariegoldkin/ai-agent-hub.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/ariegoldkin/ai-agent-hub --skill prototype-to-production- Source
- ariegoldkin/ai-agent-hub
- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is prototype-to-production?
Convert design prototypes (HTML, CSS, Figma exports) into production-ready components. Analyzes prototype structure, extracts design tokens, identifies reusable patterns, and generates typed React components. Adapts to existing project tech stack with React + TypeScript as default. Source: ariegoldkin/ai-agent-hub.
How do I install prototype-to-production?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/ariegoldkin/ai-agent-hub --skill prototype-to-production Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/ariegoldkin/ai-agent-hub
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01