Your favorite UI, reverse-engineered into JSON

What it does design-dna is an agent skill that ingests screenshots, images, or URLs of interfaces you admire and distills them into a structured JSON specification called Design DNA. The spec covers three dimensions: hard tokens like color and typography, qualitative style such as mood and brand voice, and advanced visual effects including shaders, WebGL, and scroll-driven motion. Once extracted, the DNA drives generation of self-contained UI implementations that match the reference’s visual identity while adapting to your own content.

The interesting bit The project treats design replication as a measurement problem rather than a prompting exercise. It includes optional deterministic scripts that use k-means clustering and perceptual color distance to extract exact hex values from screenshots and verify generated output against them, closing the loop on LLM drift toward familiar palette defaults.

Key highlights

• Produces a complete JSON profile with every field filled; conflicts across multiple references are explicitly noted.
• The DNA JSON is portable: commit it to version control, share it across teams, or reuse it across projects.
• Supports advanced effects beyond plain CSS, including Canvas, WebGL, 3D, particles, glassmorphism, and SVG animation.
• Optional color measurement runs fully offline with no API keys, giving agents a self-correction loop based on actual pixel data.
• Phases can be used standalone or chained: analyze a reference today, generate from that DNA tomorrow.

Caveats

• Deterministic color measurement is opt-in and requires installing dependencies inside a separate scripts/ folder rather than working out of the box.
• The README warns that first-pass generated output can still feel visually thin, so expect to run deliberate polish iterations against the same references.

Verdict Worth a look if you want coding agents to stop approximating design and start reproducing it. Less useful if you already have a locked design system and no need to reverse-engineer external references.