zanwei

Design Dna — Design skill for Claude Code

Design community

Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

How to install Design Dna

This entry records only its repository, not the path inside it, so there is no exact command to give. Open zanwei/design-dna and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Dna does

Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

Alternatives in Design

Figma — Fetch design context, screenshots, and assets from Figma for implementation 14.6k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
Dna — Place a design in the measured design space — nearest systems, per-axis percentiles, outliers 3.6k ★

README

design-dna

English | 中文 | 日本語 | 한국어 | Español | 繁體中文

An agent skill for extracting, structuring, and applying visual design identity as machine-readable "Design DNA" across three dimensions: design tokens, qualitative style, and visual effects.

![example](https://github.com/user-attachments/assets/77e9e02e-35a4-4d65-a402-dc6f9b35ed6e)

https://github.com/user-attachments/assets/00e0a28d-42ce-4a08-a0c0-1ecf8b9f7e97

Other cases

https://github.com/user-attachments/assets/80793608-930d-42ca-951f-eb21ac188d54

https://github.com/user-attachments/assets/cd4cba94-cd2c-480f-8efa-4ac86e00ae1f

Prerequisites

Node.js environment installed
Ability to run npx commands

Installation

Quick Install (Recommended)

npx skills add zanwei/design-dna

Install to Specific Agent

# Cursor only, non-interactive, global install
npx skills add zanwei/design-dna -a cursor -g -y

# Claude Code only
npx skills add zanwei/design-dna -a claude-code -g -y

Install from Local Clone

git clone https://github.com/zanwei/design-dna.git
npx skills add ./design-dna -y

List Available Skills

npx skills add zanwei/design-dna --list

What It Does

Dimension	Role
Design System	Measurable tokens: color, typography, spacing, layout, shape, elevation, motion, components
Design Style	Qualitative perception: mood, visual language, composition, imagery, interaction feel, brand voice
Visual Effects	Beyond plain CSS: Canvas, WebGL, 3D, particles, shaders, scroll-driven motion, cursor effects, SVG animation, glassmorphism, etc.