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

Design DNA — Design Identity Extractor

Turns reference screenshots or URLs into a structured JSON of design tokens, style feel, and visual effects — then generates new designs from it.

Design & UIIntermediate★ 1,327⑂ 66AI score 8/10Last updated: Apr 13, 2026

What it does

Design DNA models design identity across three dimensions:

  1. design_system — measurable tokens: color palette, type scale, spacing rhythm, grid/layout, shape, elevation, motion
  2. design_style — the qualitative layer: mood, personality, composition strategy, ornamentation level, whitespace philosophy, brand voice
  3. visual_effects — everything CSS alone can't describe: Canvas, WebGL/Three.js, particles, shaders, scroll and cursor effects, SVG animation, glassmorphism

It runs as three phases: show the schema, analyze references into a fully populated Design DNA JSON, and generate real HTML/CSS/JS from that JSON plus your content. Any phase can be used alone or chained end to end.

Who it's for

  • Front-end developers who want to port a site's look and feel into their own project
  • Designers and design engineers documenting a token system
  • Solo builders and marketers who need fast landing-page variants
  • Anyone deciding whether an interactive effect belongs in CSS, Canvas 2D, or Three.js

Examples

  • Extract: drop three screenshots of a landing page and say "extract the design DNA" → get a JSON profile with every color, type, and effect field filled in.
  • Transfer: "Build my SaaS product page in the style of this URL" → it analyzes the page, then emits a self-contained HTML file.
  • Recreate effects: share a hero shot with a particle field and ask how it's built → it identifies the likely tech tier and implements a comparable version in code.

· · · 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 (Terminal on macOS, WSL or Git Bash on Windows).
  2. Create the skills directory if it doesn't exist: mkdir -p ~/.claude/skills
  3. Clone the repo into it: git clone https://github.com/zanwei/design-dna.git ~/.claude/skills/design-dna
  4. Confirm the folder contains SKILL.md plus references/schema.md and references/generation-guide.md — analysis quality drops without those reference files.
  5. Restart Claude Code and type something like "show me the design DNA schema" to verify the skill loads.
  6. Then attach reference images or paste a URL and ask it to "analyze this design".
View source on GitHub ↗License: MIT