# Design Dna (agent skill)

> Design Dna is an agent skill (a SKILL.md file) 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. It works with Claude Code, Codex, Cursor and GitHub Copilot and has 1,899 GitHub stars.

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…

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/zanwei/design-dna |
| Skill path | SKILL.md |
| Skill name | design-dna |
| GitHub stars | 1,899 |
| Installs on skills.sh | not listed |
| License | MIT |
| Skills in repo | 1 |
| Plugin marketplace | no |
| Official | no |
| Works with | Claude Code, Codex, Cursor, GitHub Copilot |
| Category | Design & frontend |
| Last commit | Aug 28, 2026 |

## When it triggers

- 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 dimen
- 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
- "design DNA"
- "extract design style"
- "analyze design"
- "design tokens from reference"
- "generate design from JSON"
- "design system from screenshot"

## Add this skill

### Claude Code

```sh
git clone --depth 1 https://github.com/zanwei/design-dna.git
cp -r design-dna ~/.claude/skills/design-dna   # personal, or .claude/skills in a project
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/zanwei/design-dna.git
cp -r design-dna .agents/skills/design-dna   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/zanwei/design-dna.git
cp -r design-dna .cursor/skills/design-dna   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

---

Canonical page: https://appsgit.com/skills/zanwei-design-dna
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.