design-dna

Provide the screenshot as a reference and the skill runs a deterministic k-means color measurement script over the pixels, then analyzes typography, spacing, layout, shape, and elevation visually. The result is a complete Design DNA JSON with exact hex values and coverage fractions.

First extract a Design DNA JSON from the reference, then provide it with your content for generation. The skill maps tokens to CSS custom properties, implements visual effects per the profile, and outputs a self-contained HTML file.

Colors perceived by eye drift toward familiar palette defaults, often by a ΔE of 10 or more. The measure-colors.mjs script clusters actual pixels with k-means and merges near-duplicates perceptually, producing exact hex values with coverage evidence.

The verify.mjs script re-measures a screenshot of the generated output and scores it against the reference DNA palette. It reports per-color ΔE and coverage drift, passing when mean ΔE is at most 5, max ΔE at most 20, and coverage drift at most 0.35.

The visual_effects dimension covers particle systems, 3D elements, custom GLSL shaders, scroll and parallax effects, text animations, cursor effects, glassmorphism, canvas drawings, and SVG animations. Each effect records its technology, parameters, and an enabled flag.

The scripts require Node.js 18.17 or later and the sharp image processing library, installed via npm in the scripts directory. Sharp's platform-specific binaries are not vendored, so install them in a scratch directory rather than the skill folder.