What is Design DNA? Setup, scripts and data flow
You give the agent a reference screenshot or URL; the Design DNA skill turns it into a measurable "design DNA" JSON made of colors, type, spacing and effects, then has the agent generate similar interface code from that DNA. The repository includes three Node scripts for measurement; they use only the sharp library and Node's built-in modules, with no network calls and no browser. Setup: npx skills add zanwei/design-dna; the measurement scripts also need npm install. Images and the DNA go to the model of the agent you use; the skill does not decide that. MIT licensed.
- What it does
- Measures a reference design and has the agent generate similar interface code
- Type
- Skill (community, individual maker)
- Maker
- zanwei
- Scripts
- Measure locally, no network calls
- Images
- Sent to the agent's model
- Version
- No tagged release; last commit August 28, 2026
- Price
- Free, MIT
What does Design DNA do?
A skill is an instruction pack that teaches an agent how to work on a task. Design DNA turns a design into measurable values instead of a vague description like "I like this": a color palette (measured from real pixels), fonts, spacing and effects. These values are collected in a JSON schema; the agent then generates code from that DNA.
The repository contains the skill file, a schema and a generation guide, three Node scripts (color measurement, validation, color math), two images and READMEs in six languages (22 files in total).
Who it helps: Developers and designers who want to hand an agent the visual language of an interface they like, in concrete values. Copying someone else's design one-to-one can raise copyright and trademark issues; use it for inspiration and measurement.
How do you install Design DNA?
You install the skill with the skills CLI; the README does not pin a version (the skills@1.7.1 line on the atlas card is not in the README). The measurement scripts need their dependencies installed separately.
› npx skills add zanwei/design-dna› npm install --prefix ./scriptsThe npx skills installer sends anonymous usage data; DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 turns it off. The documentation does not say where the sharp binaries are downloaded from. The README has no separate steps for Cursor or other clients.
How do you use Design DNA?
Give the agent the reference and ask it to extract the DNA; then ask it to build from the resulting JSON.
The generation guide recommends CDN scripts from jsDelivr with @latest versions for sample HTML; that means an external dependency without a pinned version in the generated page. Pin the version on production pages.
Where does Design DNA work?
| Claude Code and agents supported by the skills CLIYes | Installed with the skills CLI. |
|---|---|
| Other clientsUnclear | The README has no separate steps; that does not mean it won't work. |
What does Design DNA access, and where do my images go?
The screenshot or image file you provide; the measurement scripts read pixel values locally.
The design DNA JSON file and the code the agent generates.
No delete step.
The scripts use only sharp, node:path and node:child_process; no network calls, no browser and no external API. Network access happens only on the agent side (fetching a URL). Images and the DNA go to the model of the agent you use; the skill does not decide that.
!Screenshots and page content taken from someone else's site are untrusted input; the agent should not follow that content as instructions. The README does not state this; it is a general precaution.
The repository has no hooks and no MCP; it has three scripts. GitHub Security Advisories is empty; no recorded advisory appears. That does not mean "safe". A warning level was reported in a third-party scan on skills.sh; check the details on the skills.sh page.
Is Design DNA free?
Yes; the repository is MIT licensed and the README lists no paid plan. The plan of the agent tool you use, and the need for a model that can read images, are separate matters.
Common problems
| What happens | What to do |
|---|---|
| The measurement script does not run | First install the dependencies with npm install --prefix ./scripts; check your Node.js version. |
| The colors differ from what I expected | Colors are measured from real pixels; the screenshot's compression and color profile affect the result. |
How do you uninstall Design DNA?
- Skill: Delete the design-dna folder in the agent's skills folder; the skills CLI remove command also works.
- Leftovers: Manually delete the DNA JSON files you generated and the node_modules folder inside scripts.
The README does not describe uninstalling; the steps above are the general method.
Frequently asked questions
What is Design DNA?
An agent skill that turns a reference screenshot or URL into a measurable design DNA JSON made of colors, type, spacing and effects, then generates code from it.
Is Design DNA free?
Yes; it is MIT-licensed open source and the README lists no paid plan.
Do the scripts go online?
No: the three Node scripts use only local libraries and make no network calls. However, images and the DNA go to the model of the agent you use.
How do you install it?
npx skills add zanwei/design-dna; the measurement scripts also need npm install --prefix ./scripts. The README does not pin a version.
Is it okay to copy someone else's site?
This skill is for inspiration and measurement; a one-to-one copy can raise copyright and trademark issues. This is not legal advice.
Related guides
Sources
Not clear in the official sources: Where the sharp binaries are downloaded from · the contents of references/schema.md and the READMEs in other languages · details of the skills.sh third-party scan · OSV scan · whether it works in Cursor and other clients · Turkish support. Each is noted in the relevant section.