Design Dna

design-dna

English | 中文 | 日本語 | 한국어 | Español | 繁體中文

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.

https://github.com/user-attachments/assets/00e0a28d-42ce-4a08-a0c0-1ecf8b9f7e97

Other cases

https://github.com/user-attachments/assets/80793608-930d-42ca-951f-eb21ac188d54

https://github.com/user-attachments/assets/cd4cba94-cd2c-480f-8efa-4ac86e00ae1f

Prerequisites

• Node.js environment installed
• Ability to run npx commands

Installation

Quick Install (Recommended)

npx skills add zanwei/design-dna

Install to Specific Agent

# Cursor only, non-interactive, global install
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

What It Does

The skill drives a three-phase workflow:

1. Structure — Surface the full schema and field meanings (see references/schema.md).
2. Analyze — From screenshots, images, or URLs, produce a complete JSON profile (every field filled; conflicts noted).
3. Generate — Given DNA JSON plus content, implement the design (default: self-contained HTML/CSS/JS), following references/generation-guide.md.

Phases can be used alone or chained (e.g. Analyze → Generate).

How It Works

Pipeline at a glance (Mermaid renders on GitHub):

flowchart LR
    A["Reference designsScreenshots · URLs · imagesAny design you admire"]
    B["Design DNA JSONQuantified specStructured profile"]
    C["Final outputFaithful implementationProduction-ready UI"]

    A -->|"Analyze — extract every visual property"| B
    B -->|"Generate — apply DNA to your content"| C
    B -.-> D["Save · reuse · version control"]

Step 1 — Curate references. Collect screenshots, images, or live URLs of designs whose visual identity you want to capture. Multiple references can be combined; the skill identifies dominant patterns and notes variants.

Step 2 — Extract DNA. Feed the references to the agent. It inspects every visual property across all three dimensions and outputs a complete, quantified Design DNA JSON — no empty fields, no guesswork. This JSON becomes a portable, reusable design specification.

Step 3 — Generate from DNA. Provide the DNA JSON together with your own content. The agent produces implementations that faithfully reproduce the original design language while adapting to your material.