design-dna-extractor

name	design-dna-extractor
description	Extract and apply visual design identity as machine-readable Design DNA JSON (tokens, style, effects) from reference UIs
triggers	["extract design DNA from this screenshot","analyze the visual design system of this website","generate UI matching this design DNA","create design tokens from these references","turn this design into structured JSON","apply this design DNA to my content","analyze design style and effects from images","structure this UI's design system"]

design-dna-extractor

Skill by ara.so — Design Skills collection.

An agent skill for extracting, structuring, and applying visual design identity as machine-readable "Design DNA" across three dimensions: design tokens, qualitative style, and visual effects.

What It Does

design-dna turns reference UIs (screenshots, images, URLs) into a complete, quantified JSON specification covering:

Dimension	Coverage
Design System	Colors, typography, spacing, layout, shapes, elevation, motion, components
Design Style	Mood, visual language, composition, imagery, interaction feel, brand voice
Visual Effects	Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor interactions, SVG animation

The skill drives a three-phase workflow:

1. Structure — Surface the full schema and field meanings
2. Analyze — From references, produce complete DNA JSON (every field filled)
3. Generate — Given DNA JSON + content, implement the design

Installation

Quick Install (Recommended)

npx skills add zanwei/design-dna

Install to Specific Agent

# Cursor only
npx skills add zanwei/design-dna -a cursor -g -y

# Claude Code only
npx skills add zanwei/design-dna -a claude-code -g -y

Install from Local Clone

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

List Available Skills

npx skills add zanwei/design-dna --list

Three-Phase Workflow

Phase 1: Structure

When to use: Before analyzing references, to understand the complete schema.

User request:

"Show me the Design DNA schema structure"

Agent action:

• Read references/schema.md
• Surface all available fields across design-system, design-style, and visual-effects
• Explain what each field captures

Output: Full field inventory with descriptions, helping you understand what will be extracted.

---

Phase 2: Analyze

When to use: You have reference designs (screenshots, images, URLs) to extract DNA from.

User request:

"Analyze the design DNA from this screenshot" "Extract design tokens from https://example.com"

Agent action:

• Inspect all visual properties across the three dimensions
• Fill every field in the DNA JSON (no empty fields)
• Note conflicts or variants across multiple references
• Output complete, quantified Design DNA JSON

Example output structure:

{
  "design-system": {
    "color": {
      "palette": {
        "primary": ["#1a1a1a", "#333333"],
        "secondary": ["#0066cc", "#0052a3"],
        "accent": ["#ff6b35"],
        "neutral": ["#f5f5f5", "#e0e0e0", "#cccccc"],
        "semantic": {
          "success": "#10b981",
          "warning": "#f59e0b",
          "error": "#ef4444",
          "info" 
        
      
       
         
         
         
         
         
      
    
     
       
         
         
         
      
       
         
         
         
         
         
         
         
         
      
          
       
         
         
         
      
       
         
         
         
      
    
     
                 
       
       
    
     
       
         
         
         
      
       
         
         
         
         
         
      
       
         
         
         
         
      
    
     
       
         
         
         
         
         
         
      
         
       
    
     
       
         
         
         
         
      
       
         
         
         
      
    
     
       
         
         
         
      
       
         
         
         
      
    
  
   
     
         
       
       
       
    
     
       
       
       
       
    
     
       
       
       
       
    
     
       
       
       
       
    
     
       
       
       
       
    
     
       
       
       
       
    
  
   
     
       
       
    
     
       
    
     
       
    
     
       
       
       
    
     
       
       
    
     
       
        
    
     
       
    
     
       
       
    
  

Key principles:

• Complete coverage — Every field is filled; no blanks or TODOs
• Quantified values — Specific numbers, hex codes, font names
• Conflict documentation — If multiple references disagree, note variants
• Cross-reference schema — Use references/schema.md to understand field semantics

---

Phase 3: Generate

When to use: You have Design DNA JSON and want to implement matching UI with your own content.

User request:

"Generate a landing page using this Design DNA and my product copy" "Apply this design DNA to create a dashboard"

Agent action:

• Read references/generation-guide.md for implementation principles
• Apply all DNA fields (design-system, design-style, visual-effects) to your content
• Default output: self-contained HTML/CSS/JS
• Follow semantic HTML, responsive patterns, accessibility

Example prompt:

Generate a product landing page using this Design DNA:

[paste DNA JSON]

Content:
- Hero headline: "Ship faster with AI-powered code reviews"
- Subheadline: "Catch bugs before deployment"
- CTA: "Start free trial"
- Features: Speed, Accuracy, Integration

Agent generates:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Landing</title>
  <style>
    /* Design System: Color */
    :root {
      --primary-100: #1a1a1a;
      --primary-200: #333333;
      --secondary-100: #0066cc;
      --accent-100: #ff6b35;
      --neutral-100: #f5f5f5;
      --text-primary: #1a1a1a;
      --text-secondary: #666666;
      
      /* Typography */
      --font-primary: Inter, system-ui, sans-serif;
      --font-secondary: Georgia, serif;
      
      /* Spacing */
      --space-4: 16px;
      --space-6: 24px;
      --space-8: 32px;
      --space-12: 48px;
      
      /* Shape */
      --radius-md: ;
      : ;
      
      
      : ;
      : (, , , );
    }
    
    * {
      : ;
      : ;
      : border-box;
    }
    
     {
      : (--font-primary);
      : (--text-primary);
      : ;
      : ;
    }
    
    
     {
      : ;
      :  auto;
      :  (--space-);
    }
    
     {
      : ;
      : flex;
      : column;
      : center;
      : (--space-) ;
    }
    
    
      {
      : ; 
      : ;
      : ; 
      : (--space-);
      : -; 
    }
    
      {
      : ; 
      : (--text-secondary);
      : ; 
      : (--space-);
      : ;
    }
    
    
     {
      : inline-block;
      : (--space-) (--space-);
      : (--secondary-);
      : white;
      : none;
      : (--radius-lg);
      : ;
      : transform (--duration-normal) (--easing-default),
                  box-shadow (--duration-normal) (--easing-default);
    }
    
    
     {
      : ; 
      : (-);
      :    - (,,,); 
    }
    
    
     {
      : grid;
      : (auto-fit, (, fr));
      : (--space-);
      : (--space-) ;
      : ;
      : ();
      : reveal  (--easing-default) forwards;
      : ;
    }
    
     reveal {
       {
        : ;
        : ();
      }
    }
    
     {
      : (--space-);
      : (--neutral-);
      : (--radius-md);
      :  solid ; 
    }
    
      {
      : ; 
      : ;
      : (--space-);
    }
    
     (: ) {
        {
        : ; 
      }
        {
        : ; 
      }
    }
  


  
    
      Ship faster with AI-powered code reviews
      Catch bugs before deployment
      Start free trial
    
    
    
      
        Speed
        Instant feedback on every commit
      
      
        Accuracy
        AI-powered bug detection
      
      
        Integration
        Works with your existing tools
      
    
  

Generation principles (from references/generation-guide.md):

1. Apply all three dimensions — design-system (tokens), design-style (qualitative feel), visual-effects (interactions)
2. Faithful reproduction — Match the reference's visual richness and detail
3. Semantic HTML — Proper elements, accessibility, responsive
4. Self-contained — Default to single-file HTML unless specified otherwise
5. Production-ready — Clean code, no placeholders

---

Common Patterns

Pattern 1: Multi-Reference Analysis

When analyzing multiple references (e.g., 3 screenshots + 2 URLs):

1. Identify dominant patterns across all references
2. Note variants where references disagree (e.g., "Reference A uses 8px radius, B uses 12px — dominant: 12px")
3. Fill every field based on consensus or most representative example
4. Document conflicts in the JSON output

Example conflict notation:

{
  "design-system": {
    "shape": {
      "border-radius": {
        "md": 12,
        "_note": "Variant: Reference A uses 8px, but 12px dominant across B, C, D"
      }
    }
  }
}

Pattern 2: Iterative Refinement

If the first generation feels visually thin compared to references:

Prompt:

"Against the reference [attach same URLs/screenshots], audit hierarchy, ornamentation, typographic rhythm, motion, materiality, and overall UI—then merge your conclusions back into the current implementation."

Agent action:

• Re-inspect references for missed details (micro-animations, subtle shadows, gradient overlays, etc.)
• Update DNA JSON or implementation to close the gap
• Produce visually richer output

Pattern 3: DNA Reuse Across Projects

Save extracted DNA JSON to version control:

# Save DNA
echo '[DNA JSON]' > design-dna.json

# Commit
git add design-dna.json
git commit -m "Add Design DNA for brand identity"

# Reuse in new project
# Prompt: "Generate a dashboard using design-dna.json"

Pattern 4: Component-Specific Generation

Extract DNA, then generate specific components:

Prompt:

"Using this Design DNA, generate a navigation bar component"

Agent generates:

• Standalone nav component
• Applies DNA tokens (colors, spacing, typography, motion)
• Matches design-style (hierarchy, interaction feel)

---

Configuration

Environment Variables

If using AI vision APIs for image analysis (optional):

# .env
ANTHROPIC_API_KEY=your_key_here
OPENAI_API_KEY=your_key_here

Note: The skill works without API keys if the agent has built-in vision (e.g., Claude Code, Cursor with Claude 3.5 Sonnet).

Schema Customization

To extend the DNA schema:

1. Edit references/schema.md — add new fields or dimensions
2. Update references/generation-guide.md — document how to apply new fields
3. Test with Analyze → Generate cycle

---

Troubleshooting

Issue: Empty or Incomplete DNA JSON

Symptom: Agent outputs DNA with missing fields or "TBD" values.

Fix:

• Explicitly request: "Fill every field in the Design DNA schema—no empty values."
• Reference references/schema.md to surface all required fields
• Provide higher-quality references (screenshots vs. blurry photos)

---

Issue: Generated UI Doesn't Match Reference

Symptom: Output looks generic, missing the reference's visual richness.

Fix:

1. Re-analyze references with explicit instruction: "Extract all visual details including micro-interactions, shadows, gradients, typographic rhythm, and spacing."
2. Iterative refinement: Attach references again and request audit (see Pattern 2)
3. Verify visual-effects dimension is populated (not all "false")

---

Issue: DNA JSON Conflicts Across References

Symptom: Multiple references have incompatible styles.

Fix:

• Choose dominant reference and note variants
• Or: Extract separate DNA for each reference, then manually merge
• Document conflicts in JSON _note fields

---

Issue: Agent Generates React/Vue Instead of HTML

Symptom: Default output is a framework component, not self-contained HTML.

Fix:

• Explicitly request: "Generate self-contained HTML/CSS/JS."
• Or specify framework: "Generate as a React component using this DNA."

---

Key Files Reference

File	Purpose
references/schema.md	Complete Design DNA field definitions
references/generation-guide.md	How to implement UI from DNA JSON
SKILL.md	This agent skill documentation

---

Example: Full Workflow

Step 1 — Collect references:

User: "I want to extract design DNA from https://linear.app and this screenshot [attachment]."

Step 2 — Analyze:

Agent:
- Inspects Linear.app and screenshot
- Extracts design-system (colors, typography, spacing, etc.)
- Captures design-style (minimal, modern, fast interactions)
- Notes visual-effects (subtle scroll reveals, smooth transitions)
- Outputs complete DNA JSON (300+ lines)

Step 3 — Generate:

User: "Using this DNA, generate a task dashboard with columns: To Do, In Progress, Done."

Agent:
- Applies DNA tokens (Linear's color palette, Inter font, 8px grid)
- Matches design-style (minimal, generous whitespace, scale-based hierarchy)
- Implements visual-effects (smooth drag-and-drop, hover feedback)
- Outputs self-contained HTML/CSS/JS dashboard

Step 4 — Refine:

User: "Compare against the Linear reference—add missing details."

Agent:
- Re-inspects Linear.app
- Adds subtle shadows, status color coding, keyboard shortcuts hint
- Updates implementation to match reference fidelity

---

Tips for Best Results

1. High-quality references — Screenshots at native resolution, live URLs preferred over photos
2. Multiple angles — Provide 2–5 references to capture full design system
3. Explicit instructions — Request "complete DNA" or "fill every field" to avoid incomplete output
4. Iterative refinement — First pass gives structure; second pass adds richness
5. Version control DNA — Commit JSON to track design evolution over time

---

Related Skills

• design-system-tokens — Focus on design tokens only (subset of design-dna)
• ui-component-generator — Generate isolated components from DNA
• visual-regression-testing — Compare generated output against references

---

License

MIT — https://github.com/zanwei/design-dna/blob/main/LICENSE