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

code

┌─────────────┐   ┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│   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:

code

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:

•
Check package.json for frameworks:
- •react / react-dom → React components
- •vue → Vue SFCs
- •svelte → Svelte components
- •@angular/core → Angular components
•
Check for TypeScript:
- •tsconfig.json exists → TypeScript output
- •typescript in dependencies → TypeScript output
•
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:

code

┌─────────────────────────────────────────────────────────┐
│ 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:

json

{
  "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:

•Create TypeScript interface for props
•Apply forwardRef pattern for DOM access
•Include accessibility attributes
•Use project's styling approach
•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

typescript

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):

html

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

Output (React + TypeScript):

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:

•Read the theme CSS file referenced in the HTML
•Map theme variables to design tokens
•Preserve animations defined in the prototype
•Maintain responsive breakpoints from Tailwind classes

Super-design folder structure:

code

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