moai-domain-design-dna

Provide the screenshot directly and the Skill analyzes its visual properties into a Design DNA JSON. Colour roles are assigned by area dominance, radius is measured relative to element height, and type scale is inferred from heading-to-body ratios rather than absolute pixel sizes.

Fetch the page and read its source for stated facts like canvas elements, WebGL contexts, shader imports, and scroll triggers, which are more reliable than screenshot inference. The extracted profile then drives generation of a self-contained HTML artifact with inline CSS and JS.

Yes, completed DNA JSON can be saved as a named profile in a project-root .design-dna/ directory with a one-line active marker file. Later generations load the active profile in place, validate it against the schema, and backfill missing fields with explicit not-observed values.

Technology follows the recorded performance tier: lightweight effects use CSS and SVG, medium effects use Canvas 2D or animation libraries, and heavy effects use WebGL or custom GLSL. Heavy-tier libraries load from a pinned CDN version inside the self-contained artifact.

Do not use it for markdown report rendering, static architecture diagrams, or charts and dashboards, which belong to other skills. It also does not apply when a design is authored from first principles rather than deconstructed from an existing reference.

Contrast must be verified against the rendered result, not token values, whenever an effect sits between text and its background. The delivery gate also requires honoured prefers-reduced-motion support and requestAnimationFrame-driven loops instead of setInterval.