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:

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

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

/* 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:

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

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

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

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:

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.