Repolode
Submit
zanwei

zanwei/design-dna

An agent skill that extracts visual design identity from reference UIs into structured Design DNA JSON, then generates matching UI from it.

View on GitHub
Stars
2,006
Forks
109
Open issues
1
Last commit
2 months ago

What is it?

design-dna is an agent skill for capturing the visual identity of existing designs as machine-readable JSON. It takes screenshots, images, or URLs and produces a profile across three dimensions: design tokens (color, typography, spacing, layout, shape, elevation, motion, components), qualitative style (mood, visual language, composition, imagery, interaction feel), and visual effects such as Canvas, WebGL, particles, shaders, scroll-driven motion, and glassmorphism.

The skill runs in three phases: structure the schema, analyze references into a complete profile, and generate new UI from that profile plus your own content, with self-contained HTML/CSS/JS as the default output. The resulting JSON can be saved, versioned, and reused across projects.

An optional deterministic measurement step uses k-means clustering over image pixels to report exact hex colors and coverage, then compares generated screenshots against them with per-color ΔE scores, so the agent can check its own color output rather than relying on perception.

Key features

  • 01Extracts design tokens for color, typography, spacing, layout, and motion from references.
  • 02Describes qualitative style such as mood, composition, and interaction feel.
  • 03Catalogs visual effects including WebGL, particles, shaders, and scroll-driven motion.
  • 04Generates new UI from saved DNA JSON plus your own content.
  • 05Optional pixel-based color measurement with ΔE verification of generated output.
  • 06Installs through the skills CLI for Cursor, Claude Code, Codex, and other agents.

Use cases

  • Reproducing the look of a reference site in a new project without guessing at values.
  • Saving a team's visual language as a versioned JSON spec shared across projects.
  • Checking whether a generated UI matches a brand color palette within a measured tolerance.
  • Turning a set of inspiration screenshots into a consistent design brief for an agent.

Quick start

  1. 1

    Install the skill with the skills CLI (requires Node.js)

    npx skills add zanwei/design-dna
  2. 2

    Or install it for a specific agent, such as Cursor, non-interactively

    npx skills add zanwei/design-dna -a cursor -g -y
  3. 3

    Ask your agent to analyze reference screenshots or URLs into Design DNA JSON, then generate UI from it

Things to know

  • It is an agent skill, so it needs a compatible AI coding agent to run.
  • The optional deterministic color scripts require a local clone of the repository and an npm install.

Topics

#agent-skills#design-tokens#design-system#ui-design#visual-design#css#color-palette#claude-skills#codex-skills#cursor-skills

FAQ

What is design-dna?
An agent skill that extracts visual design identity from reference UIs into structured Design DNA JSON, then generates matching UI from it. design-dna is an agent skill for capturing the visual identity of existing designs as machine-readable JSON. It takes screenshots, images, or URLs and produces a profile across three dimensions: design tokens (color, typography, spacing, layout, shape, elevation, motion, components), qualitative style (mood, visual language, composition, imagery, interaction feel), and visual effects such as Canvas, WebGL, particles, shaders, scroll-driven motion, and glassmorphism.
Is design-dna free to use? What license does it have?
design-dna is open source under the MIT license. Check the license terms before using it in commercial products.
Is design-dna still maintained?
Updated within 6 months. The last commit to design-dna was on Aug 28, 2026.
What can I use design-dna for?
Reproducing the look of a reference site in a new project without guessing at values. Saving a team's visual language as a versioned JSON spec shared across projects. Checking whether a generated UI matches a brand color palette within a measured tolerance. Turning a set of inspiration screenshots into a consistent design brief for an agent.
How do I install design-dna?
Install the skill with the skills CLI (requires Node.js): npx skills add zanwei/design-dna Or install it for a specific agent, such as Cursor, non-interactively: npx skills add zanwei/design-dna -a cursor -g -y Ask your agent to analyze reference screenshots or URLs into Design DNA JSON, then generate UI from it
Where can I get design-dna?
The source code and installation instructions are on GitHub: https://github.com/zanwei/design-dna

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects