Extract Any UI's Visual Style as Reusable Design DNA

"Make it look like this site" is the vaguest brief in front-end work. design-dna, a 2k-star MIT agent skill by zanwei, replaces the adjective with a JSON file: it extracts, structures, and applies a visual identity as quantified Design DNA your agents can reuse.

Why This Skill Matters

The skill works across three dimensions:

A three-phase workflow drives them: Structure surfaces the schema and field meanings, Analyze turns screenshots, images, or URLs into a complete JSON profile with every field filled and conflicts noted, and Generate implements the design from DNA JSON plus your content — self-contained HTML/CSS/JS by default. Phases run alone or chained. The JSON is the point: once extracted, it can be committed to version control, shared across teams, and reused across projects — turning subjective taste into a spec any agent can consume.

Installation

npx skills add zanwei/design-dna

Prerequisites are Node.js and the ability to run npx. Target a single agent with npx skills add zanwei/design-dna -a claude-code -g -y, or inspect what the repo ships with --list. Per the README, the skill follows the Agent Skills specification and installs through the skills CLI to Cursor, Claude Code, Codex, GitHub Copilot, and more.

Real Workflow: From a Screenshot to a Matched Page

1. Curate references — screenshots, images, or live URLs of the design you want to capture. Multiple references can be combined; the skill identifies dominant patterns and notes variants.
2. Analyze — feed the references to your agent; it outputs a complete, quantified Design DNA JSON.
3. Generate — provide the DNA JSON together with your own content, and the agent produces an implementation in the original design language.

If the first pass feels visually thin, the README prescribes a polish iteration: re-attach the same URLs or screenshots and run its audit prompt:

Against the reference, audit hierarchy, ornamentation, typographic rhythm, motion, materiality, and overall UI—then merge your conclusions back into the current implementation.

For color, the README documents why eyeballing fails: LLM perception drifts toward familiar palette defaults — its example is a brand pink #ff90e8 seen as #ec4899 (ΔE ≈ 29). Two optional scripts make the phases measurable: measure-colors.mjs runs deterministic k-means clustering over the actual pixels and outputs exact hexes with role assignments, and verify.mjs re-measures the generated output and reports per-color ΔE and coverage drift with PASS/FAIL thresholds. In the README's example rebuild of the bun.sh hero, the measured rebuild passed with mean ΔE 0.87 while the perceived rebuild failed at 9.54. The skill instructs agents to use both scripts automatically when references are image files; no API keys are required.

Tips

• The phases are independent: run Analyze alone to document an existing design system, or Generate alone from a DNA JSON you already have.
• When installed as a skill, the agent resolves the measurement scripts from the directory containing the loaded SKILL.md — your project needs no scripts/ folder.
• Commit the DNA JSON next to your code; the README frames it as a portable, reusable, iteratively refined specification.
• Multiple references beat one: combining references lets the skill surface dominant patterns while noting variants.

When Not to Use This

Generation's documented default is self-contained HTML/CSS/JS — the README documents no framework export, so a React or Vue port means adapting the output yourself. The deterministic scripts need a local clone path or a skill install that exposes them, and none of this works without Node.js and npx.

See the leaderboard for more skills.