zanwei/design-dna

What it solves

It transforms subjective visual design requests (e.g., "make it look like this website") into a precise, machine-readable specification called "Design DNA." This prevents the common problem where AI agents drift toward generic design defaults or fail to capture the specific nuances of a brand's visual identity.

How it works

The project provides an agent skill that follows a three-phase pipeline:

1. Structure: Defines a comprehensive schema for design tokens, qualitative styles, and visual effects.
2. Analyze: Extracts a quantified JSON profile from screenshots, images, or URLs, covering measurable tokens (colors, typography), qualitative perceptions (mood, brand voice), and advanced visual effects (WebGL, shaders, glassmorphism).
3. Generate: Uses the extracted DNA JSON and user content to implement a faithful UI, typically as self-contained HTML/CSS/JS.

To ensure accuracy, it includes optional deterministic measurement scripts. These use k-means clustering on actual pixels to extract exact hex codes and verify the final implementation against the original reference to eliminate LLM color perception drift.

Who it’s for

Developers and designers using AI agents (such as Cursor or Claude Code) who want to consistently replicate specific visual identities across different projects or share design specifications across teams.

Highlights

• Three-Dimensional Analysis: Captures design tokens, qualitative style, and complex visual effects beyond standard CSS.
• Deterministic Verification: Uses pixel-level measurement to ensure colors and styles are mathematically accurate rather than based on LLM perception.
• Portable Specifications: Outputs a JSON "DNA" file that can be version-controlled and reused across different agents and projects.
• Broad Agent Compatibility: Compatible with the Agent Skills specification and installable via the skills CLI for various AI editors and agents.