Design DNA provides a framework for extracting and applying visual identity across three dimensions: measurable design tokens, qualitative style, and complex visual effects. It helps UI/UX designers convert screenshots or URLs into a structured schema that defines everything from typography to WebGL and shader implementations.
By bridging the gap between a reference image and a technical specification, the skill allows for the systematic reproduction of specific design aesthetics and high-end rendering effects.
Follow the documented setup, then try a first task.
Installs: design-dna repository skill
Run this command in a terminal:
npx skills add zanwei/design-dna
Installs: design-dna repository skill; global, non-interactive installation for Cursor only · Cursor
Run this Cursor-specific installation command in a terminal:
npx skills add zanwei/design-dna -a cursor -g -y
Installs: design-dna repository skill; global installation for Claude Code only · Claude Code
Run this Claude Code-specific installation command in a terminal:
npx skills add zanwei/design-dna -a claude-code -g -y
Installs: design-dna repository skill from a local clone
Run this command in a terminal to clone the repository:
git clone https://github.com/zanwei/design-dna.git
From the same terminal directory, install the skill from the newly created ./design-dna clone:
npx skills add ./design-dna -y
Uses design-dna
Use the design-dna skill to analyze this reference design into a structured Design DNA JSON profile covering the design system, design style, and visual effects: [REFERENCE_IMAGE_SCREENSHOT_OR_URL]. Treat the bracketed value as the image path, screenshot path, or URL I provide.
Claude
Codex
Cursor
Copilot