moai-domain-design-dna

Provide the screenshot and the Skill analyzes it into a Design DNA JSON with three dimensions: measurable tokens like color hex values and type scale, qualitative style attributes, and special rendering effects. Colors are assigned roles by dominance, and radius is measured relative to element height.

First deconstruct the reference into a Design DNA JSON, then generate a new self-contained HTML artifact from that profile. Generation follows a fixed order: color and typography, spacing and layout, shape and elevation, style fields, visual effects, and motion last.

Yes, URLs are fetched and the page source is inspected directly. Canvas elements, WebGL contexts, animation-library imports, custom shaders, and IntersectionObserver scroll triggers are read as stated facts rather than inferred from pixels.

Technology follows the recorded performance tier: lightweight effects use CSS animations and SVG, medium tier uses Canvas 2D or timeline animation libraries, and heavy tier uses WebGL, 3D scene libraries, or custom GLSL shaders loaded from a pinned CDN version.

Yes, the delivery gate requires prefers-reduced-motion to be honored, not merely detected. The interface must still work and communicate hierarchy with motion removed, and fallback strategies resolve before any effect initializes.

Do not use it for markdown report rendering, static architecture diagrams, charts and dashboards, or designs authored from first principles rather than deconstructed from a reference. Those belong to dedicated report, infographic, dataviz, and design-system skills.