design-dna-extractor

# design-dna-extractor > Skill by [ara.so](https://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) ```bash npx skills add zanwei/design-dna ``` ### Install to Specific Agent ```bash # 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 ```bash git clone https://github.com/zanwei/design-dna.git npx skills add ./design-dna -y ``` ### List Available Skills ```bash 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:** ```json { "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:** ```html <!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;