Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
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"]
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:
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."
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 DNAecho'[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)
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.
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
