design-dna-extractor

Q: How do I install design-dna-extractor?

Run npx skills add https://github.com/reason-machines/design-skills --skill design-dna-extractor in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-dna-extractor/ (personal) or .claude/skills/design-dna-extractor/ (project).

by reason-machinesFrontend & Design

Extract and apply visual design identity as machine-readable Design DNA JSON (tokens, style, effects) from reference UIs

Installs: 147
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill design-dna-extractor

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads design-dna-extractor automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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:

Structure — Surface the full schema and field meanings
Analyze — From references, produce complete DNA JSON (every field filled)
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": "#3b82f6"
        }
      },
      "roles": {
        "background": "#ffffff",
        "surface": "#f5f5f5",
        "text-primary": "#1a1a1a",
        "text-secondary": "#666666",
        "border": "#e0e0e0"
      }
    },
    "typography": {
      "font-families": {
        "primary": "Inter, system-ui, sans-serif",
        "secondary": "Georgia, serif",
        "monospace": "JetBrains Mono, monospace"
      },
      "scale": {
        "xs": "0.75rem",
        "sm": "0.875rem",
        "base": "1rem",
        "lg": "1.125rem",
        "xl": "1.25rem",
        "2xl": "1.5rem",
        "3xl": "1.875rem",
        "4xl": "2.25rem"
      },
      "weights": [400, 500, 600, 700],
      "line-heights": {
        "tight": 1.25,
        "normal": 1.5,
        "relaxed": 1.75
      },
      "letter-spacing": {
        "tight": "-0.025em",
        "normal": "0",
        "wide": "0.025em"
      }
    },
    "spacing": {
      "scale": [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128],
      "unit": "px",
      "layout-grid": 8
    },
    "layout": {
      "grid": {
        "columns": 12,
        "gutter": 24,
        "margin": 16
      },
      "containers": {
        "sm": 640,
        "md": 768,
        "lg": 1024,
        "xl": 1280,
        "2xl": 1536
      },
      "breakpoints": {
        "mobile": 640,
        "tablet": 768,
        "desktop": 1024,
        "wide": 1280
      }
    },
    "shape": {
      "border-radius": {
        "none": 0,
        "sm": 4,
        "md": 8,
        "lg": 12,
        "xl": 16,
        "full": 9999
      },
      "border-width": [1, 2, 4],
      "border-style": "solid"
    },
    "elevation": {
      "shadows": {
        "sm": "0 1px 2px 0 rgba(0,0,0,0.05)",
        "md": "0 4px 6px -1px rgba(0,0,0,0.1)",
        "lg": "0 10px 15px -3px rgba(0,0,0,0.1)",
        "xl": "0 20px 25px -5px rgba(0,0,0,0.1)"
      },
      "z-index": {
        "dropdown": 1000,
        "modal": 2000,
        "tooltip": 3000
      }
    },
    "motion": {
      "durations": {
        "fast": 150,
        "normal": 250,
        "slow": 350
      },
      "easings": {
        "default": "cubic-bezier(0.4, 0, 0.2, 1)",
        "in": "cubic-bezier(0.4, 0, 1, 1)",
        "out": "cubic-bezier(0, 0, 0.2, 1)"
      }
    }
  },
  "design-style": {
    "mood": {
      "primary-adjectives": ["minimal", "clean", "modern"],
      "energy-level": "calm",
      "formality": "professional",
      "playfulness": "subtle"
    },
    "visual-language": {
      "aesthetic": "modernist",
      "ornamentation": "minimal",
      "symmetry": "asymmetric-balanced",
      "density": "spacious"
    },
    "composition": {
      "hierarchy-method": "scale-and-weight",
      "layout-pattern": "grid-based",
      "whitespace-philosophy": "generous",
      "alignment-preference": "left-aligned"
    },
    "imagery": {
      "photography-style": "clean-product-shots",
      "illustration-style": "none",
      "iconography": "outline-icons",
      "image-treatment": "subtle-border"
    },
    "interaction-feel": {
      "responsiveness": "immediate",
      "feedback-style": "subtle-animation",
      "hover-behavior": "color-shift",
      "transition-character": "smooth"
    },
    "brand-voice": {
      "tone": "confident",
      "personality": "authoritative",
      "copywriting-style": "concise",
      "messaging-approach": "benefit-focused"
    }
  },
  "visual-effects": {
    "canvas-webgl": {
      "used": false,
      "techniques": []
    },
    "particles": {
      "used": false
    },
    "shaders": {
      "used": false
    },
    "scroll-effects": {
      "parallax": true,
      "reveal-animations": true,
      "progress-indicators": false
    },
    "cursor-effects": {
      "custom-cursor": false,
      "hover-effects": "scale-and-shadow"
    },
    "svg-animation": {
      "used": true,
      "techniques": ["line-drawing", "morph"]
    },
    "glassmorphism": {
      "used": false
    },
    "gradients": {
      "types": ["linear"],
      "complexity": "simple"
    }
  }
}

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: 8px;
      --radius-lg: 12px;
      
      /* Motion */
      --duration-normal: 250ms;
      --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: var(--font-primary);
      color: var(--text-primary);
      background: #ffffff;
      line-height: 1.5;
    }
    
    /* Design Style: Spacious composition, generous whitespace */
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--space-4);
    }
    
    .hero {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--space-12) 0;
    }
    
    /* Design Style: Scale-and-weight hierarchy */
    .hero h1 {
      font-size: 3.75rem; /* 3xl+ from DNA scale */
      font-weight: 700;
      line-height: 1.25; /* tight from DNA */
      margin-bottom: var(--space-6);
      letter-spacing: -0.025em; /* tight from DNA */
    }
    
    .hero p {
      font-size: 1.5rem; /* 2xl from DNA */
      color: var(--text-secondary);
      line-height: 1.75; /* relaxed from DNA */
      margin-bottom: var(--space-8);
      max-width: 600px;
    }
    
    /* Design System: Shape, Motion, Interaction */
    .cta {
      display: inline-block;
      padding: var(--space-4) var(--space-8);
      background: var(--secondary-100);
      color: white;
      text-decoration: none;
      border-radius: var(--radius-lg);
      font-weight: 600;
      transition: transform var(--duration-normal) var(--easing-default),
                  box-shadow var(--duration-normal) var(--easing-default);
    }
    
    /* Design Style: Hover behavior = color-shift + scale-and-shadow */
    .cta:hover {
      background: #0052a3; /* secondary-200 from DNA */
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); /* elevation lg */
    }
    
    /* Visual Effects: Scroll reveal animations */
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--space-8);
      padding: var(--space-12) 0;
      opacity: 0;
      transform: translateY(20px);
      animation: reveal 0.6s var(--easing-default) forwards;
      animation-delay: 0.2s;
    }
    
    @keyframes reveal {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .feature {
      padding: var(--space-6);
      background: var(--neutral-100);
      border-radius: var(--radius-md);
      border: 1px solid #e0e0e0; /* border role from DNA */
    }
    
    .feature h3 {
      font-size: 1.25rem; /* xl from DNA */
      font-weight: 600;
      margin-bottom: var(--space-4);
    }
    
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2.25rem; /* 4xl responsive */
      }
      .hero p {
        font-size: 1.125rem; /* lg responsive */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <section class="hero">
      <h1>Ship faster with AI-powered code reviews</h1>
      <p>Catch bugs before deployment</p>
      <a href="#" class="cta">Start free trial</a>
    </section>
    
    <section class="features">
      <div class="feature">
        <h3>Speed</h3>
        <p>Instant feedback on every commit</p>
      </div>
      <div class="feature">
        <h3>Accuracy</h3>
        <p>AI-powered bug detection</p>
      </div>
      <div class="feature">
        <h3>Integration</h3>
        <p>Works with your existing tools</p>
      </div>
    </section>
  </div>
</body>
</html>

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

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

Common Patterns

Pattern 1: Multi-Reference Analysis

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

Identify dominant patterns across all references
Note variants where references disagree (e.g., "Reference A uses 8px radius, B uses 12px — dominant: 12px")
Fill every field based on consensus or most representative example
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:

Edit references/schema.md — add new fields or dimensions
Update references/generation-guide.md — document how to apply new fields
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:

Re-analyze references with explicit instruction: "Extract all visual details including micro-interactions, shadows, gradients, typographic rhythm, and spacing."
Iterative refinement: Attach references again and request audit (see Pattern 2)
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

High-quality references — Screenshots at native resolution, live URLs preferred over photos
Multiple angles — Provide 2–5 references to capture full design system
Explicit instructions — Request "complete DNA" or "fill every field" to avoid incomplete output
Iterative refinement — First pass gives structure; second pass adds richness
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

FAQ

What does the design-dna-extractor skill do?

Extract and apply visual design identity as machine-readable Design DNA JSON (tokens, style, effects) from reference UIs

How do I install design-dna-extractor?

Run npx skills add https://github.com/reason-machines/design-skills --skill design-dna-extractor in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-dna-extractor/ (personal) or .claude/skills/design-dna-extractor/ (project).

Which AI agents can use design-dna-extractor?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is design-dna-extractor safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains design-dna-extractor?

It is published by reason-machines in reason-machines/design-skills. It has 147 recorded installs.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

design-dna-extractor

Install

Install

Describe the task

Review the result

SKILL.md

design-dna-extractor

What It Does

Installation

Quick Install (Recommended)

Install to Specific Agent

Install from Local Clone

List Available Skills

Three-Phase Workflow

Phase 1: Structure

Phase 2: Analyze

Phase 3: Generate

Common Patterns

Pattern 1: Multi-Reference Analysis

Pattern 2: Iterative Refinement

Pattern 3: DNA Reuse Across Projects

Pattern 4: Component-Specific Generation

Configuration

Environment Variables

Schema Customization

Troubleshooting

Issue: Empty or Incomplete DNA JSON

Issue: Generated UI Doesn't Match Reference

Issue: DNA JSON Conflicts Across References

Issue: Agent Generates React/Vue Instead of HTML

Key Files Reference

Example: Full Workflow

Tips for Best Results

Related Skills

License

FAQ

More from reason-machines/design-skills

Popular frontend & design skills