Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Install the "design-dna" agent skill from https://github.com/zanwei/design-dna/tree/main into .claude/skills/design-dna/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-dna", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add zanwei/design-dna --skill design-dna -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "design-dna" agent skill from https://github.com/zanwei/design-dna/tree/main into .agents/skills/design-dna/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-dna", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add zanwei/design-dna --skill design-dna -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "design-dna" agent skill from https://github.com/zanwei/design-dna/tree/main into .cursor/skills/design-dna/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-dna", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add zanwei/design-dna --skill design-dna -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "design-dna" agent skill from https://github.com/zanwei/design-dna/tree/main into .gemini/skills/design-dna/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-dna", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
GitHub CLI
$ gh skill install zanwei/design-dna design-dna
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add zanwei/design-dna --skill design-dna -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "design-dna" agent skill from https://github.com/zanwei/design-dna/tree/main into .github/skills/design-dna/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-dna", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add zanwei/design-dna --skill design-dna -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "design-dna" agent skill from https://github.com/zanwei/design-dna/tree/main into .opencode/skills/design-dna/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-dna", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
design-dna
GitHub stars
1.9k
Used in
1 other repo
Token cost
~2.1k tokens
SKILL.md length
970 words
Files
18 (incl. scripts, references)
Skills in repo
1
Repo updated
First seen
Licence
MIT
At a glance
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Works in 3 steps: Structure — Output the Schema → Analyze — Extract DNA from References → Generate — Apply DNA to Content
A user wants to see the full 3-dimension design structure/schema
SKILL.md covers Phases and Phase Combinations
Runs JavaScript scripts from its folder; calls node and npm
What it does
Design Dna is an agent skill from zanwei/design-dna. Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design…
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 21 other files, including scripts and reference files (for example `README.es.md`, `README.ja.md` and `README.ko.md`).
It sits in Frontend & Design, covering Design systems, Design tokens and 3D graphics and WebGL. The repository describes itself as: Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content. The licence is MIT.
When your agent uses it
A user wants to see the full 3-dimension design structure/schema
A user provides images
URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions
A user has a Design DNA JSON and content and wants a design generated from it
Example prompts
“design DNA”
“extract design style”
“analyze design”
“/design-dna”
Requirements
Node.js
Workflow steps
3 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 593e39b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 4 files in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
node
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design Dna loads about 2.1k tokens when it runs, and up to ~7.2k if it reads all its reference files. Until then it costs about 214 tokens; SKILL.md has 970 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~214
When it runs· the whole SKILL.md, loaded when a task matches
~2.1k
With references· SKILL.md plus every file in references/, read only if the agent opens them
~7.2k
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
Download SKILL.mdSave it as .claude/skills/design-dna/SKILL.md (or your agent's skills folder). This skill also uses 17 other files; get the full folder from GitHub.
name
design-dna
description
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "extract design style", "analyze design", "design tokens from reference", "generate design from JSON", "design system from screenshot", "design profile", "style guide JSON", "visual effects analysis", "design with effects", "3d design analysis".
Design DNA
A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:
If image/screenshot: first run the deterministic color measurement (see below), then analyze the remaining visual properties directly
If URL: fetch and analyze the page's visual design
For every field in the schema, extract or infer a value from the references
When multiple references conflict, note the dominant pattern and mention variants
Output a complete Design DNA JSON — every field populated, no empty strings
After output, ask: "Want to adjust any values before using this for generation?"
Analysis approach per dimension:
Dimension 1: design_system
color: Do not estimate hex values by eye — perceived colors drift toward familiar palette defaults (often by a ΔE of 10+). When the reference is an image file, measure instead. Resolve SKILL_ROOT to the absolute directory containing this SKILL.md; never assume the current project directory contains the skill's scripts/ folder. Use absolute paths for the reference and output, and keep one uniquely named measurement file per reference:bash
Use the measured hexes verbatim in the DNA JSON: map the background role to surface.background; map text to the end of neutral.scale that contrasts with the measured background and document that foreground use in neutral.usage; and map accent to accent.hex. Keep both the measured palette and its measurement configuration in design_system.color.measured_palette and design_system.color.measurement so verification can reuse the same clustering configuration. Coverage values are fractions from 0 to 1. Only fall back to visual sampling when measurement is impossible (for example, a URL-only reference that cannot be screenshotted). Choose primary and secondary colors by semantic role, use accent for CTA emphasis, and order the neutral scale from lightest to darkest regardless of theme.
typography: Identify font families by visual characteristics (geometric, humanist, serif class). Estimate scale ratios from heading/body size relationships.
spacing: Assess density by element proximity. Measure rhythm by section gap consistency.
Compare against genre archetypes (SaaS, editorial, brutalist, etc.)
Note ornamentation level and whitespace philosophy
Show full SKILL.md (430 more words)Show less
Dimension 3: visual_effects
From code: Scan for <canvas>, WebGL contexts, Three.js/Pixi.js imports, GSAP/Lottie usage, custom shaders, IntersectionObserver scroll triggers, SVG <animate> elements
From screenshots: Describe visible effects that go beyond standard CSS — glowing particles, 3D object renders, noise textures, gradient animations, parallax depth, cursor trails, text distortions, glassmorphic surfaces. Note these in composite_notes when exact implementation can't be determined.
Parse the DNA JSON and extract all tokens across three dimensions
Build CSS custom properties from design_system values
Apply design_style qualitative fields to guide subjective design decisions
When the design needs assets or source materials, fetch them from the original source whenever possible. If the user provided a URL, retrieve the real asset from that URL instead of recreating, approximating, or substituting it.
Implement visual_effects using appropriate technologies:
Heavy effects → Three.js, custom GLSL shaders, Pixi.js
Generate the design output (default: self-contained HTML with inline CSS/JS)
Run quality checks from the generation guide
Verify (when the DNA contains a measured palette): save the current Design DNA JSON if it is not already a file, screenshot the generated output, then score it against that DNA file. Resolve SKILL_ROOT from this SKILL.md and use absolute paths; do not assume a temporary file named measured-colors.json exists:bash
A standalone measurement JSON may be used instead of the DNA file when that is the only persisted artifact. For multiple image references, verify against each reference's measurement separately. The report gives per-color ΔE and coverage drift with PASS/FAIL thresholds. If it fails, fix the offending colors and re-verify instead of asking the user to judge fidelity by eye.
If the user provides only content without DNA JSON, ask whether to:
Analyze a reference first (go to Phase 2)
Use a described style (extract DNA from description, then generate)
Phase Combinations
Users may invoke any combination:
Phase 1 only: "Show me the design structure/schema"
Phase 2 only: "Analyze this design" (with images/links)
Phase 2 → 3: "Analyze this design and build me a landing page in the same style"
Phase 1 → 2 → 3: Full pipeline
Phase 3 only: User already has DNA JSON
Detect which phase(s) are needed from context and execute accordingly.
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in zanwei/design-dna, which our catalogue first saw on October 7, 2026.
Design Dna next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code.
Extract a design system from a screenshot (PNG/JPG/WEBP) or a live URL and produce a schema-compliant design.v1.json file plus a ready-to-use agent prompt for applying the design to any website/app.
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…. Design Dna is an agent skill from zanwei/design-dna.).
When should I use Design Dna?
Design Dna fits situations like: A user wants to see the full 3-dimension design structure/schema; A user provides images; URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions; A user has a Design DNA JSON and content and wants a design generated from it.
How do I install Design Dna in Claude Code?
Run `npx skills add zanwei/design-dna --skill design-dna -a claude-code`. Or copy the skill folder (the zanwei/design-dna repository) into .claude/skills/design-dna in your project. Claude Code loads it when a task matches its description.
How do I install Design Dna in Codex?
Run `npx skills add zanwei/design-dna --skill design-dna -a codex`. Or copy the skill folder (the zanwei/design-dna repository) into .agents/skills/design-dna in your project. Codex loads it when a task matches its description.
Can I use Design Dna in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zanwei/design-dna --skill design-dna -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-dna, .gemini/skills/design-dna, .github/skills/design-dna and .opencode/skills/design-dna in your project.
What does Design Dna need to run?
Going by SKILL.md and its folder, Design Dna needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npm). Our summary lists: Node.js.
Does Design Dna access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Design Dna safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Design Dna use?
Design Dna is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design Dna use?
About 2.1k tokens (SKILL.md is roughly 8.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.1k tokens, read only when the agent opens those files.
What are the alternatives to Design Dna?
Skills that share tags, products or a category with Design Dna: Website Design Taste Extractor (senlindesign/taste-skill, 385 stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 135 stars), UI Component Spec Designer (plugin87/ux-ui-agent-skills, 1.6k stars) and Better Design (marvkr/better-design, 254 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Dna?
zanwei (a GitHub user) maintains it in zanwei/design-dna, which has 1,916 GitHub stars. The repository was last updated on August 28, 2026.
Source: zanwei/design-dna on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
