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

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:

┌─────────────────────────────────────────────────────────┐
│ ORGANISMS (Complex compositions)                        │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ MOLECULES (Simple compositions)                     │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ ATOMS (Primitive elements)                      │ │ │
│ │ │ Button, Input, Label, Icon, Badge, Avatar       │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ FormField, SearchBar, Card, MenuItem               │ │
│ └─────────────────────────────────────────────────────┘ │
│ Header, Sidebar, ProductGrid, CommentThread            │
└─────────────────────────────────────────────────────────┘

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:

{
  "colors": {
    "primary": "extracted-from-buttons",
    "secondary": "extracted-from-secondary-elements",
    "background": "extracted-from-body/container",
    "text": "extracted-from-body-text"
  },
  "typography": {
    "fontFamily": "extracted-from-font-family",
    "fontSize": { "base": "16px", "lg": "18px", "xl": "20px" }
  },
  "spacing": {
    "derived-from-padding-margin-patterns": true
  },
  "borderRadius": "extracted-from-rounded-elements"
}

See templates/design-tokens-extract.json for full template

Step 5: Generate Components

For each identified component:

1. Create TypeScript interface for props
2. Apply forwardRef pattern for DOM access
3. Include accessibility attributes
4. Use project's styling approach
5. Add JSDoc documentation

See templates/component-base.tsx and templates/component-with-variants.tsx

Step 6: Integration Guidance

Provide clear instructions for:

• File placement in project structure
• Import statements needed
• Peer dependencies (if any)
• Usage examples

Component Output Standards

TypeScript Props Interface

interface ComponentProps {
  /** Primary variant for emphasis */
  variant?: 'primary' | 'secondary' | 'outline';
  /** Size affects padding and font-size */
  size?: 'sm' | 'md' | 'lg';
  /** Disables interaction */
  disabled?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Content */
  children: React.ReactNode;
}

Accessibility Requirements

Every component must include:

• Semantic HTML elements (use <button> not <div>)
• Keyboard navigation support
• ARIA attributes where needed
• Focus management

Naming Conventions

| Type | Convention | Example | |------|------------|---------| | Components | PascalCase | ProductCard.tsx | | Props types | PascalCase + Props | ProductCardProps | | CSS classes | kebab-case | product-card-container | | Design tokens | camelCase | primaryColor |

Conversion Patterns Reference

See references/conversion-patterns.md for comprehensive HTML → React patterns

Quick Reference

| HTML Pattern | React Equivalent | |--------------|------------------| | class="..." | className="..." | | onclick="..." | onClick={handler} | | for="..." | htmlFor="..." | | <input value=""> | <input value="" onChange={...}> | | Inline styles | Tailwind classes or styled objects |

Templates Reference

| Template | Purpose | |----------|---------| | component-base.tsx | Basic component with types and accessibility | | component-with-variants.tsx | Component with variant/size system | | design-tokens-extract.json | Token extraction structure |

Example Conversion

Input (super-design HTML):

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
  Submit
</button>

Output (React + TypeScript):

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button = ({ variant = 'primary', children, onClick }: ButtonProps) => {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded-lg transition-colors',
        variant === 'primary' && 'bg-blue-600 text-white hover:bg-blue-700'
      )}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

Integration with Super-Design

When converting super-design outputs:

1. Read the theme CSS file referenced in the HTML
2. Map theme variables to design tokens
3. Preserve animations defined in the prototype
4. Maintain responsive breakpoints from Tailwind classes

Super-design folder structure:

.superdesign/
└── design_iterations/
    ├── theme_1.css      # Theme tokens
    ├── chat_ui_1.html   # Prototype iteration 1
    └── chat_ui_2.html   # Prototype iteration 2