Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.
design-dna is an agent skill that analyzes screenshots, images, or URLs and records a user interface’s design tokens, visual style, and visual effects as machine-readable JSON. Developers use that profile to reproduce a visual identity in generated HTML, CSS, and JavaScript interfaces. The catalogue contains the skill itself for coding agents.
Skill Claude CodeCodex
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…