Design DNA

Encode your design taste into DNA.
So that every piece of AI-generated UI looks like you.

npx design-dna

The Problem

AI builds UI fast. But it doesn't know your taste and design vision.

You get a settings page that works. It's "clean." And it looks nothing like the rest of your product. Wrong spacing, wrong hierarchy, wrong component patterns, wrong vibe.

Design DNA lets you encode your taste once — your preferences, your principles, your opinion about how things should look and feel — into design DNA. From that point on, every line of AI-generated UI code comes out looking like it was built by someone who gets it.

How It Works

1. Init

/dna:init

Scans your codebase, asks you a few design questions, and generates your DNA: a structured spec of your product's taste, principles, and visual language. Also generates lookbook pages as golden reference implementations.

2. Check

/dna:check

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

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. Update

/dna:update the buttons feel too chunky

Describe what's off in your own words. Design DNA translates that into precise DNA changes. Works with plain language, Figma files, URLs, screenshots.

4. Help

/dna:help

That's it. Four commands.

What Gets Generated

.design/
  DNA.md              # Your taste, encoded
  principles.md       # Design principles with examples
  components/         # Per-component specs
  patterns/           # Interaction and layout patterns
  lookbook/           # Golden reference implementations

You have taste. Now your AI does too.

npx design-dna

npm GitHub