Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Design DNA — Extract & Apply Design Identity

Turns reference designs into a three-dimensional JSON profile (system tokens, style, visual effects) and regenerates new pages from it with measured-color verification.

Design & UIIntermediate★ 1,838⑂ 100AI score 9/10Last updated: Aug 28, 2026

What it does

  • Analyzes images, screenshots, or URLs into a structured JSON profile across three dimensions: design_system (color, typography, spacing, layout, shape, elevation, motion), design_style (mood, personality, composition), and visual_effects (Canvas, WebGL, particles, shaders, scroll and cursor effects).
  • Measures colors deterministically with the bundled scripts/measure-colors.mjs instead of eyeballing hex values that typically drift by ΔE 10+.
  • Generates a self-contained HTML page from the DNA JSON using CSS custom properties, then runs scripts/verify.mjs to score per-color ΔE and coverage drift against the source palette, fixing failures automatically.

Who it's for

  • Front-end developers recreating the exact look and feel of a reference site
  • Design system owners who need tokens and style guides documented as JSON
  • Solo builders who only have inspiration screenshots and need a fast, faithful mockup

Examples

  1. "Analyze this screenshot into a design DNA JSON" → full three-dimension profile with no empty fields
  2. "Build my product landing page in the same style as this site" → chains Phase 2 into Phase 3 with color verification
  3. "Show me the Design DNA schema" → prints the full field list with explanations

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/zanwei/design-dna/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the SKILL.m folder from the GitHub repo zanwei/design-dna into my ~/.claude/skills/design-dna/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/zanwei/design-dna.git ~/.claude/skills/design-dna

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and confirm Node.js 18+ is installed with node -v.
  2. Create the skills folder: mkdir -p ~/.claude/skills
  3. Clone the repository: git clone https://github.com/zanwei/design-dna.git ~/.claude/skills/design-dna
  4. Pre-install the color measurement dependencies: npm install --prefix ~/.claude/skills/design-dna/scripts
  5. Verify that ~/.claude/skills/design-dna/SKILL.md exists (if SKILL.md sits in a subfolder, move that subfolder into ~/.claude/skills).
  6. Restart Claude Code and try a prompt like "extract the design DNA from this screenshot".
View source on GitHub ↗License: MIT