Skip to content
mcp/skillhub

Agent Skill

Design Dna skill

design-dnazanwei/design-dnaSKILL.md

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".

2.0kMIT

always on

192 tokname + description

once used

1,639 tokSKILL.md body

bundled files

74 scripts

repo stars

2.0kGitHub

Install the Design Dna skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/zanwei/design-dna --skill design-dna

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/zanwei/design-dna.git /tmp/design-dna
mkdir -p ~/.claude/skills
cp -R /tmp/design-dna ~/.claude/skills/design-dna

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description192 tok
When the agent uses itThe SKILL.md instructions1,639 tok
Only if opened7 bundled files (47 KB)varies

Until it is used, design-dna costs about 7.1× less than the median MCP server we measured (1,363 tokens on every turn). Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Design DNA
  • Phases
  • Phase 1: Structure — Output the Schema
  • Phase 2: Analyze — Extract DNA from References
  • Phase 3: Generate — Apply DNA to Content
  • Phase Combinations