Agent skill · software engineering · aiskillstore
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.
Why this skill is useful
Adds a comprehensive workflow for converting design prototypes into production-ready React components, including executable scripts for analysis and generation.
What it needs
Requires react, tailwindcss, typescript installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Prototype to Production Skill Convert design prototypes into production-ready, typed components by analyzing structure, extracting patterns, and generating clean code. When to Use Converting HTML prototypes to React components Transforming super-design outputs (.superdesign/designiterations/.html) to production code Breaking down Figma exports into reusable components Extracting design tokens from prototype CSS/inline styles Productionizing a mockup or proof-of-concept UI Conversion Workflow Step 1: Analyze Input Detect prototype type and structure: 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 Super-design analysis: Step 2: Detect Project Tech Stack Scan target project to determine output format: 1. Check package.json for frameworks: react / react-dom → React components vue → Vue SFCs svelte → Svelte components @angular/core → Angular components 2. Check for TypeScript: tsconfig.json exists → TypeScript output typescript in dependencies → TypeScript output 3. Check styling approach: tailwindcss → Tailwind classes styled-components / @emotion/react → CSS-in-JS CSS/SCSS files → Separate stylesheets Default: React + TypeScript + Tailwind CSS Step 3: Component Decomposition Apply atomic design methodology: Component identification checklist: [ ] Repeated patterns (2+ occurrences = extract) [ ] Logical groupings (header, nav, content sections) [ ] Interactive elements (buttons, forms, modals) [ ] Data display patterns (cards, lists, tables) Step 4: Extract Design Tokens Extract from prototype CSS/styles: See templates/design-tokens-extract.json for full template Step 5: Generate Components For each identified component: 1. Create TypeScript interface for props 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/prototype-to-production