Agent skill

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.

View SKILL.md on GitHub Repository
Stars 8
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/ArieGoldkin/ai-agent-hub/tree/main/skills/prototype-to-production

SKILL.md

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:

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:

  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

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:

  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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

ArieGoldkin/ai-agent-hub

brainstorming

Use when creating or developing anything, before writing code or implementation plans - refines rough ideas into fully-formed designs through structured Socratic questioning, alternative exploration, and incremental validation

8 0
Explore
ArieGoldkin/ai-agent-hub

security-checklist

Use this skill when implementing security measures or conducting security audits. Provides OWASP Top 10 mitigations, authentication patterns, input validation strategies, and compliance guidelines. Ensures applications are secure against common vulnerabilities.

8 0
Explore
ArieGoldkin/ai-agent-hub

Performance Optimization

Full-stack performance analysis, optimization patterns, and monitoring strategies

8 0
Explore
ArieGoldkin/ai-agent-hub

ai-native-development

Build AI-first applications with RAG pipelines, embeddings, vector databases, agentic workflows, and LLM integration. Master prompt engineering, function calling, streaming responses, and cost optimization for 2025+ AI development.

8 0
Explore
ArieGoldkin/ai-agent-hub

react-server-components-framework

Design and implement React Server Components with Next.js 15 App Router. Master server-first architecture, streaming SSR, Server Actions, and modern data fetching patterns for 2025+ frontend development.

8 0
Explore
ArieGoldkin/ai-agent-hub

testing-strategy-builder

Use this skill when creating comprehensive testing strategies for applications. Provides test planning templates, coverage targets, test case structures, and guidance for unit, integration, E2E, and performance testing. Ensures robust quality assurance across the development lifecycle.

8 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results