design-dna

Provide the screenshot, image, or URL to the agent and request a design analysis. The skill inspects color, typography, spacing, layout, shape, elevation, motion, and visual effects, then outputs a complete Design DNA JSON with every schema field populated.

First analyze the reference into a Design DNA JSON, then provide that JSON together with your content. The agent builds a self-contained HTML/CSS/JS implementation using CSS custom properties from the tokens and implements specified effects via Canvas, GSAP, or Three.js.

It is a structured design specification with three dimensions: design_system for measurable tokens, design_style for qualitative perception like mood and composition, and visual_effects for rendering beyond plain CSS such as particles, shaders, and scroll effects.

Yes, you can provide several screenshots or URLs together. The skill identifies dominant patterns across the references and notes variants when the sources conflict, rather than leaving fields empty or guessing.

Yes, the generation guide maps effect intensity to technology tiers: CSS and SVG for lightweight, Canvas 2D and GSAP for medium, and Three.js or custom GLSL shaders for heavy effects. It also requires fallback strategies and prefers-reduced-motion support.

Run a polish iteration by re-attaching the same reference URLs or screenshots and asking the agent to audit hierarchy, ornamentation, typographic rhythm, motion, and materiality against the reference, then merge the findings into the current implementation.