# Design DNA

> Turn reference UIs into a Design DNA JSON of tokens, style and visual effects, then have your agent build new UI from it.

Design DNA is an Agent Skill from zanwei that turns reference designs into a portable, quantified spec. Give your agent screenshots, images or URLs of designs you like; it extracts a complete Design DNA JSON across three dimensions, then generates new UI from that DNA and your own content.

The three dimensions
- Design system: measurable tokens for colour, typography, spacing, layout, shape, elevation, motion and components
- Design style: mood, visual language, composition, imagery, interaction feel and brand voice
- Visual effects: canvas, WebGL, 3D, particles, shaders, scroll-driven motion, cursor effects, SVG animation and glassmorphism

How it works
- Structure: shows the full schema and what each field means
- Analyze: reads your references and fills every field of the JSON profile, noting conflicts between references
- Generate: implements the design from the DNA plus your content, by default as self-contained HTML, CSS and JavaScript
- Phases work alone or chained, and the JSON can be saved, versioned and reused across projects
- Bundled Node scripts measure colours from images deterministically and verify the result

How to install it
Run npx skills add zanwei/design-dna. It needs Node.js for npx and the measuring scripts. It works in Claude, ChatGPT, Gemini and more agents that support Agent Skills.

Good to know
- MIT licensed.

- Type: Skill
- Made by: zanwei
- Category: Design
- Formats: Skills
- Version: 56044ce
- Website: https://github.com/zanwei/design-dna
- Source: https://github.com/zanwei/design-dna
- Page: https://pluginboard.ai/skills/design-dna

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the design-dna folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/zanwei/design-dna

### Claude

In Claude (web or desktop): Download the design-dna folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/zanwei/design-dna

### Gemini

In Gemini: Download the design-dna folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the folder on GitHub: https://github.com/zanwei/design-dna

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.copilot/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### Cursor

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.cursor/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### Claude Code

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.claude/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### Codex

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.agents/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### Antigravity

In Antigravity: Copy the design-dna folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the folder on GitHub: https://github.com/zanwei/design-dna

### Gemini CLI

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.gemini/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### Replit

Run in your terminal:

```shell
npx -y degit zanwei/design-dna .agents/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### OpenClaw

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.openclaw/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### OpenCode

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.config/opencode/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

### Hermes Agent

Run in your terminal:

```shell
npx -y degit zanwei/design-dna ~/.hermes/skills/design-dna
```

View the folder on GitHub: https://github.com/zanwei/design-dna

---
From Pluginboard (https://pluginboard.ai).