What problem does it solve? Translating a visual reference into a reproducible design is slow and inconsistent: colors get eyeballed, typography is guessed, and effects like WebGL or scroll animations are forgotten. This Skill turns screenshots, URLs, or descriptions into a complete three-dimension Design DNA JSON that can drive consistent design generation. ## Core Features & Use Cases - Three-dimension schema: Captures measurable design system tokens (color, typography, spacing, layout, shape, elevation, motion, components), qualitative design style (mood, composition, brand voice), and visual effects (particles, 3D, shaders, scroll, cursor, glassmorphism). - Reference analysis: Analyzes images, screenshots, or URLs into a fully populated Design DNA JSON with no empty fields, noting dominant patterns when references conflict. - DNA-driven generation: Builds self-contained HTML/CSS/JS designs from a DNA JSON, mapping tokens to CSS custom properties and implementing effects with CSS, Canvas, GSAP, Three.js, or GLSL based on performance tier. - Use Case: Provide a screenshot of a site you admire, get its full Design DNA JSON, then generate a landing page for your own product in the same style with matching palette, type scale, and scroll effects. ## Quick Start Analyze this screenshot and extract its full design DNA JSON, then generate a landing page in the same style.
