Design DNA

Extract visual identity from any reference. Apply it to any content. Reuse it everywhere.

Three phases — use any combination:

1. Analyze — screenshots, images, or URLs → Design DNA JSON
2. Generate — Design DNA JSON + your content → faithful implementation
3. Structure — show the full schema when asked

Read references/schema.md for the full field list. Read references/generation-guide.md for generation rules.

The Three Dimensions

Phase 1: Analyze

When the user provides screenshots, images, or URLs:

1. Read references/schema.md — know every field before starting
2. For each reference: analyze or fetch and analyze
3. Fill every field — no empty strings, no guesswork flagged as guesswork
4. When references conflict: note the dominant pattern, mention variants
5. Output complete Design DNA JSON
6. Ask: "Want to adjust any values before generating?"

Key extraction rules:

• Colour: sample dominant palette by area. Primary = largest area, accent = CTA usage
• Typography: identify font class visually (geometric, humanist, serif). Estimate scale ratios from heading/body relationships
• Spacing: assess density by element proximity. Measure section rhythm consistency
• Visual effects: scan for Canvas, WebGL, Three.js, GSAP, particles, shaders, custom cursors. Set enabled: false for anything not present

Phase 2: Generate

When the user provides DNA JSON + content:

1. Read references/generation-guide.md
2. Build CSS custom properties from design_system tokens
3. Apply design_style qualitative fields to subjective decisions
4. Implement visual_effects at the appropriate tech tier (CSS → Canvas → WebGL)
5. Fetch real assets from original URLs when possible — don't recreate
6. Default output: self-contained HTML with inline CSS/JS

Priority order:

1. Colour & typography (80% of visual identity)
2. Spacing & layout
3. Shape & elevation
4. Design style qualitative fields
5. Visual effects
6. Motion & interaction

Quality check before delivering:

• Does it actually look like the reference?
• Are all design tokens applied (not just some)?
• Is the output self-contained (no external dependencies that could break)?
• Do visual effects degrade gracefully without JS?

The DNA JSON as an Asset

The extracted JSON is the key output — not just the generated UI. Once extracted:

• Commit it to version control
• Share it across teams and projects
• Feed it to any agent for any future generation
• Refine it iteratively

This turns "make it look like that site" into a precise, reproducible spec.

Pair with no-slop-ui

When generating UI from DNA:

• Apply no-slop-ui rules alongside DNA tokens
• DNA tells you WHAT the design is
• no-slop-ui tells you what NOT to do (no AI defaults slipping in)
• Together: faithful to reference, clean execution