design-dna
A skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Runs helper scripts from the skill directory
- Reads reference images and links
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/design-dnaDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add zanwei/design-dna --skill design-dna -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Install the skill via the skills CLI: npx skills add zanwei/design-dna. For a specific agent add a flag, for example -a claude-code -g.
Other ways from the author
npx skills add zanwei/design-dnaInstalls via the skills CLI; add a per-agent flag, for example -a claude-code -g -y.
This is third-party code. Review the repository files before installing.
What it does
The skill breaks design into three dimensions: a token system (color, typography, spacing, shape, elevation, motion), qualitative style (mood, composition, character) and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll animations). From images, screenshots or links it builds a JSON profile, then generates new UI from that profile and your content in the same character. It runs in three phases: present the schema, extract the profile from references, apply it to content.
Who it is for. For designers and frontend developers who want to carry a reference's style onto their own UI.
Good fit when
- You need to break a reference UI into tokens and style
- You need a structured design profile in JSON
- You need to generate UI in a reference's character for your content
Not a fit when
- You need a finished human design rather than a structural breakdown
- You cannot run npx and helper scripts
Example request
Extract the design DNA from this screenshot and build a landing page from it for my copyLimitations
The skill extracts and applies design structure; the quality of the final UI depends on the content and the model. Some features require running helper scripts from the skill directory.
How to disable. Remove the design-dna folder from your agent's skills directory, for example ~/.claude/skills/design-dna.
Security check
- Runs helper scripts from the skill directory
- Reads reference images and links
README in short
The README describes a skill that extracts and applies design across three dimensions: token system, qualitative style and visual effects. Install via npx skills add with per-agent flags or from a local clone. The skill follows the Agent Skills specification and installs into supported agents. Helper scripts live in the skill directory and load on demand. MIT licensed.
SKILL.md
--- name: design-dna description: >- 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 a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, or has a Design DNA JSON and content and wants a design generated from it. --- # Design DNA A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions: 1. Design System - measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components) 2. Design Style - qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice) 3. Visual Effects - special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)
FAQ
What is the output format?
The design profile is a structured JSON across three dimensions.
Which agents are supported?
The skills CLI install works for Cursor, Claude Code, Codex, GitHub Copilot and others.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys