Design DNA

Build your project's Design DNA, one feedback at a time.

npx design-dna

Problem

Before: You do the same tweaks every time. AI doesn't remember what it ate for lunch.

Now: Every piece of feedback gets encoded into the design DNA, and will naturally be part of anything you build next.

Usage

Init

/dna:init

Start your DNA.

Update

/dna:update the buttons feel too chunky

Improve it as you go.

Reference

Check

/dna:check

Audits code against your DNA. Reports what drifted, where, and why.

DRIFT DETECTED in Settings.tsx

Mechanical:
  Line 34: Button uses px-4 py-2 — DNA specifies px-3 py-1.5 for secondary actions
  Line 67: Card radius is rounded-lg (8px) — DNA specifies rounded-xl (12px)

Judgment:
  Line 89: Empty state uses illustration — DNA principle: "icons functional, not decorative"

3 issues · 2 auto-fixable · 1 needs review

Help

/dna:help

Command reference.

What Gets Generated

.design/
  DNA.md              # Product context and mental model
  principles.md       # Design principles with examples
  primitives.md       # Raw design values (colors, type, spacing)
  scales.md           # Graduated value systems
  semantics.md        # Meaning-mapped values (roles, states)
  behaviors.md        # Interaction and motion specs
  components/         # Per-component specs
  patterns/           # Layout and content patterns

Your CLAUDE.md gets an embedded compressed reference — passive context without reading files. Stays in sync automatically.

You have taste. Now your AI does too.

npx design-dna

npm GitHub