---
name: design-to-code-skill-vision-ai
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.


---
Source attribution: flight505
Original project: https://github.com/flight505/storybook-assistant/blob/815e6169a7c4eb7eb27a3ea008130346a3552e6a/skills/design-to-code/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 Jesper Vang

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: flight505
Original project: https://github.com/flight505/storybook-assistant/blob/815e6169a7c4eb7eb27a3ea008130346a3552e6a/skills/design-to-code/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design, Development & Engineering, Product Management
Roles: Frontend Developer, Graphic Designer, Product Designer, Product Manager, UX Designer
Specialties: Design, Frontend
Tools: Figma, Photoshop, Sketch, Xd
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: fb3770a33caf828557740658fc1e38b45aacd4acb9f0ab1c3bdddab9ed1efd0b
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.