Design DNA (For Claude Code)


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

``
npx design-dna
`

---

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

$3

`
/dna:init
`

Start your DNA.

$3

`
/dna:update the buttons feel too chunky
`

Improve it as you go.

---

Reference

$3

`
/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
`

$3

`
/dna:help
`

Command reference.

$3

`
.design/
DNA.md # Product context and mental model
principles.md # Design principles with examples
primitives.md # Raw design values (colors, type, spacing, shape, motion)
scales.md # Graduated value systems
semantics.md # Meaning-mapped values (roles, states, contexts)
behaviors.md # Interaction and motion specs
components/ # Per-component specs (variants, states, values)
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.