Design To Code

---
description: Use this skill when the user uploads a design screenshot, shares a Figma export, provides a mockup image, or asks to "convert design to code", "build from mockup", "generate component from screenshot", "extract design to React", or wants to transform visual designs into production-ready components using Claude's vision capabilities.
---

# Design-to-Code Skill (Vision AI)

## Overview

Transform design screenshots, Figma exports, and mockups into pixel-perfect React components using Claude's multimodal vision capabilities. Upload an image, get production code with exact spacing, colors, typography, and all visual states.

**This is the flagship SOTA feature - leverages Claude's vision models for design analysis.**

## How It Works

### 1. Upload Design

Supported formats:
- **Screenshots**: PNG, JPG from any design tool
- **Figma exports**: Frame exports, component screenshots
- **Mockups**: Photoshop, Sketch, XD exports
- **Photos**: Even hand-drawn sketches (with lower accuracy)

### 2. Vision AI Analysis

Claude's vision model extracts:

```json
{
  "component_type": "card",
  "layout": {
    "type": "flex",
    "direction": "column",
    "align": "stretch",
    "gap": "16px",
    "padding": "24px"
  },
  "spacing": {
    "padding": "24px",
    "gap_vertical": "16px",
    "gap_horizontal": "12px",
    "border_radius": "8px"
  },
  "colors": {
    "background": "#FFFFFF",
    "text_primary": "#1F2937",
    "text_secondary": "#6B7280",
    "border": "#E5E7EB",
    "accent": "#2196F3"
  },
  "typography": [
    { "element": "heading", "size": "24px", "weight": "700", "line_height": "1.2" },
    { "element": "body", "size": "16px", "weight": "400", "line_height": "1.5" },
    { "element": "caption", "size": "14px", "weight": "500", "line_height": "1.4" }
  ],
  "elements": [
    { "type": "image", "width": "100%", "height": "200px", "object_fit": "cover" },
    { "type": "heading", "text": "Product Title" },
    { "type": "paragraph", "text": "Description text..." },
    { "type": "button", "variant": "primary", "text": "Add to Cart" }
  ],
  "states": ["default", "hover", "focused"],
  "responsive": {
    "mobile": { "padding": "16px", "font_size_heading": "20px" },
    "desktop": { "padding": "24px", "font_size_heading": "24px" }
  }
}
```

### 3. Generate Component Code

**Example: Product Card from Screenshot**

```tsx
// Generated from design screenshot

import { ShoppingCart } from 'lucide-react';

interface ProductCardProps {
  product: {
    image: string;
    title: string;
    description: string;
    price: number;
    rating: number;
  };
  onAddToCart: () => void;
}

export function ProductCard({ product, onAddToCart }: ProductCardProps) {
  return (
    <article className="flex flex-col rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
      {/* ✨ Extracted: 200px height, cover fit */}
      <img
        src={product.image}
        alt={product.title}
        className="w-full h-[200px] object-cover"
      />

      {/* ✨ Extracted: 24px padding, 16px gap */}
      <div className="flex flex-col gap-4 p-6">
        {/* ✨ Extracted: 24px size, 700 weight */}
        <h3 className="text-2xl font-bold text-gray-900">
          {product.title}
        </h3>

        {/* ✨ Extracted: 16px size, gray-600 color */}
        <p className="text-base text-gray-600 line-clamp-2">
          {product.description}
        </p>

        {/* ✨ Extracted: flex layout, space-between */}
        <div className="flex items-center justify-between">
          <span className="text-xl font-semibold text-gray-900">
            ${product.price.toFixed(2)}
          </span>

          {/* ✨ Extracted: blue button with icon */}
          <button
            onClick={onAddToCart}
            className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
          >
            <ShoppingCart size={18} />
            Add to Cart
          </button>
        </div>
      </div>
    </article>
  );
}
```

### 4. Extract Design Tokens

Create reusable design system:

```css
/* Generated design tokens from screenshot */

/* Colors */
--color-primary: #2196F3;
--color-bg: #FFFFFF;
--color-text-primary: #1F2937;
--color-text-secondary: #6B7280;
--color-border: #E5E7EB;

/* Typography */
--font-size-h1: 24px;
--font-size-body: 16px;
--font-size-caption: 14px;
--font-weight-bold: 700;
--font-weight-medium: 500;
--font-weight-normal: 400;
--line-height-tight: 1.2;
--line-height-normal: 1.5;

/* Spacing */
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;

/* Borders */
--radius-md: 8px;
--border-width: 1px;
```

### 5. Generate All Variants

Vision AI detects states from visual cues:

```tsx
// Detected hover state (darker shadow, lifted appearance)
export const Hover: Story = {
  parameters: {
    pseudo: { hover: true },
  },
};

// Detected focused state (blue outline ring)
export const Focused: Story = {
  parameters: {
    pseudo: { focus: true },
  },
};

// Detected disabled state (grayed out, reduced opacity)
export const Disabled: Story = {
  args: {
    disabled: true,
  },
};
```

## Advanced Features

### Multi-Design Analysis

Upload multiple screenshots to extract design system:

```bash
User uploads:
- button-primary.png
- button-secondary.png
- card-default.png
- card-featured.png

AI extracts:
- Color palette (all unique colors across designs)
- Typography scale (all font sizes used)
- Spacing system (common spacing values)
- Component variants (primary vs secondary button)
```

### Responsive Detection

If multiple screenshots provided (mobile + desktop):

```tsx
// Desktop
<div className="hidden md:flex md:p-6">

// Mobile
<div className="flex p-4 md:hidden">

// Responsive
<h1 className="text-xl md:text-2xl">
```

### State Inference

Vision AI infers states from design:

**Detected patterns:**
- Darker color → Hover state
- Blue outline → Focus state
- Reduced opacity → Disabled state
- Spinner/loading indicator → Loading state
- Red border → Error state
- Green checkmark → Success state

### Component Recognition

AI identifies component types:

- **Button**: Rectangular, text + optional icon, solid background
- **Card**: Container with border/shadow, multiple child elements
- **Input**: Text field with border, optional label
- **Modal**: Centered overlay with backdrop
- **Nav**: Horizontal/vertical list of links
- **Table**: Grid of data with headers
- **Form**: Multiple inputs with labels and submit button

## Workflow Example

### User Uploads Pricing Card Screenshot

**AI Analysis:**
```
Detected:
- Component: Pricing Card
- Layout: Vertical stack, centered content
- Sections: Header (icon + title), Price (large number), Features (list), CTA (button)
- Colors: Purple primary (#8B5CF6), White BG, Gray text
- Spacing: 32px padding, 16px gap between sections
- Typography: 48px price, 24px title, 16px features
- Border: 1px solid, 12px radius
- States: Default + Featured (purple border, purple BG for header)
```

**Generated Code:**
```tsx
interface PricingCardProps {
  plan: {
    name: string;
    price: number;
    features: string[];
    icon: React.ReactNode;
  };
  featured?: boolean;
  onSelect: () => void;
}

export function PricingCard({ plan, featured = false, onSelect }: PricingCardProps) {
  return (
    <div
      className={`
        flex flex-col gap-4 p-8 rounded-xl border
        ${featured ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white'}
      `}
    >
      {/* Header */}
      <div className="flex items-center gap-3">
        <div className="text-purple-500">{plan.icon}</div>
        <h3 className="text-2xl font-bold">{plan.name}</h3>
      </div>

      {/* Price */}
      <div className="flex items-baseline gap-1">
        <span className="text-5xl font-bold">${plan.price}</span>
        <span className="text-gray-600">/month</span>
      </div>

      {/* Features */}
      <ul className="flex flex-col gap-2">
        {plan.features.map(feature => (
          <li key={feature} className="flex items-center gap-2">
            <Check className="text-purple-500" size={16} />
            <span>{feature}</span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <button
        onClick={onSelect}
        className={`
          mt-4 px-6 py-3 rounded-lg font-semibold transition-colors
          ${featured
            ? 'bg-purple-500 text-white hover:bg-purple-600'
            : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
          }
        `}
      >
        {featured ? 'Get Started' : 'Select Plan'}
      </button>
    </div>
  );
}
```

**Generated Stories:**
```tsx
export const Basic: Story = {
  args: {
    plan: {
      name: 'Starter',
      price: 9,
      features: ['Feature 1', 'Feature 2', 'Feature 3'],
      icon: <Star />,
    },
  },
};

export const Featured: Story = {
  args: {
    ...Basic.args,
    featured: true,
  },
};
```

## Accuracy & Limitations

### High Accuracy For:
- ✅ Layout structure (flex, grid, positioning)
- ✅ Spacing measurements (padding, gap, margin)
- ✅ Colors (exact hex values from screenshots)
- ✅ Typography (font sizes, weights)
- ✅ Component types (button, card, input, etc.)

### Challenges:
- ⚠️ Subtle spacing (1-2px differences)
- ⚠️ Complex animations (CSS/JS required)
- ⚠️ Custom fonts (may default to system fonts)
- ⚠️ Low-resolution images (pixelation)
- ⚠️ Hand-drawn sketches (approximate)

### Recommendations:
- Use high-resolution screenshots (2x or 3x)
- Include multiple states if possible (hover, focus, etc.)
- Provide design system context (color names, spacing scale)
- Review and refine generated code

## Integration with Design Tools

### Figma Plugin (Future)
Direct integration with Figma API:
- Select frame → Generate code
- Auto-sync design updates
- Extract design tokens automatically

### Sketch/XD
Export artboards → Upload to Claude → Generate code

## Commands

### `/design-to-code`
Interactive workflow:
1. User provides image (upload or URL)
2. AI analyzes and shows extracted data
3. User confirms or adjusts
4. AI generates component + stories + tokens

### `/extract-design-tokens`
Extract only design tokens from multiple screenshots:
- Colors, typography, spacing
- Output as CSS variables or JSON

## Best Practices

### For Best Results:
1. **High resolution**: 2x or 3x screenshots
2. **Clean backgrounds**: Remove noise, distractions
3. **Clear states**: Separate screenshots for hover/focus/disabled
4. **Annotate if needed**: Add notes about behavior
5. **Provide context**: Mention design system if you have one

### Review Generated Code:
- ✅ Check responsive breakpoints
- ✅ Verify accessibility attributes
- ✅ Test keyboard navigation
- ✅ Adjust animations (AI can't infer timing)
- ✅ Add business logic (AI generates UI only)

## Summary

Vision AI design-to-code pipeline:
1. Upload design screenshot
2. Claude vision model extracts layout, colors, typography, spacing
3. Generates pixel-perfect React component
4. Creates design tokens (CSS variables)
5. Generates Storybook stories with all states
6. Adds accessibility attributes

**Result:** 80% faster design-to-code workflow, pixel-perfect accuracy, production-ready components.