01
It starts by itself
you share references. Runs in Claude Code routine.
- ↻ you share references
user gives images or URLs of a target style
zanwei · 6K installsDesign DNA skill
Runs by itself, when you share a design to copy.
New pages match your look, with colors measured.
Install the Design DNA skill and make it a habit: follow https://gethabit.dev/skills/zanwei/design-dna.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
6K installs2K starsMIT licenceSource on GitHub ↗
Design DNA
by zanwei · 6K installs
The skill
Copies the look of a design from pictures.
Only when you ask.
Match your brand
New pages match your look, with colors measured. Your brand stays steady.
↻ Runs by itselfwhen you share a design to copy
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after one design and 2 verify-fix rounds per run.
- 01
Read the schema
Your agent reads references/schema.md for all fields.
- 02
Measure colors
For image references it runs measure-colors.mjs instead of guessing hex values.
- 03
Extract DNA
It fills design_system, design_style and visual_effects for every field.
- 04
Confirm values
It asks if you want to adjust any values before generating.
- 05
Generate
It follows references/generation-guide.md to build HTML with tokens and effects.
- 06
Verify
It screenshots the output, runs verify.mjs and fixes failing colors.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inloops/design-dna-fidelity-loop/**
- Talks tono outside service
- Sendsnothing
- Your OKIt asks you before anything goes out.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Design DNA skill helps.
Use it when
- ✓ You want a style guide JSON from screenshots
- ✓ You generate a page in a reference style
- ✓ You need measured colors, not guesses
Skip it when
- – You have a full design system already
- – You only need one color
Design DNA skill, answered.
Why measure colors?
Eyeballed hex values drift toward familiar defaults, so the skill measures them.
What are the three dimensions?
Design system tokens, qualitative design style, and visual effects like WebGL or particles.
How do I install the Design DNA skill?
Copy the prompt at the top into your agent. It installs the skill from zanwei/design-dna and sets up the habit. Or run npx skills add zanwei/design-dna --skill design-dna.
Is the Design DNA skill free?
Yes. It is published under MIT. Habit is free too.
Design DNA. Now as a habit.
Install the Design DNA skill and make it a habit: follow https://gethabit.dev/skills/zanwei/design-dna.md
All zanwei skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by zanwei, published under MIT. Habit links to the original and never changes it. Is this your skill?