# design-dna

An agent skill that extracts a reference UI's visual identity, its design tokens, qualitative style and visual effects, into a structured Design DNA JSON, then generates matching UI from new content.

design-dna is an agent skill for extracting, structuring and applying visual design identity as machine-readable Design DNA across three dimensions: measurable design tokens (color, typography, spacing, layout, shape, elevation, motion, components), qualitative style (mood, visual language, composition, imagery, interaction feel, brand voice), and visual effects beyond plain CSS, such as canvas, WebGL, 3D, particles, shaders and glassmorphism.

Its three-phase workflow structures the schema, analyzes screenshots, images or live URLs into a complete quantified JSON profile noting any conflicts across references, and generates matching UI, by default as self-contained HTML/CSS/JS, from that profile plus new content. The phases can be run alone or chained.

It installs into an agent such as Cursor or Claude Code with the skills CLI over npx, or from a local clone.

Website: https://github.com/zanwei/design-dna