design-to-code

What this skill does

# 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