prototype-to-production

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

┌─────────────┐   ┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│   Analyze   │──▶│   Detect    │──▶│  Decompose  │──▶│  Generate   │
│   Input     │   │  Tech Stack │   │  Components │   │    Code     │
└─────────────┘   └─────────────┘   └─────────────┘   └─────────────┘
       │                 │                 │                 │
       ▼                 ▼                 ▼                 ▼
  Identify type    package.json      Atomic design     TypeScript
  & structure      scan + patterns   methodology       components

Step 1: Analyze Input

Detect prototype type and structure:

Input Type	Detection Method	Key Patterns
Super-design	Path: .superdesign/design_iterations/*.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:

Read prototype file → Extract theme CSS reference →
Identify component regions (header, main, footer) →
Map flowbite components to equivalents

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