| name | moai-domain-design-dna |
| description | Reverse-engineer a reference design — a screenshot, an image set, or a live URL — into a portable Design DNA JSON across three dimensions (measurable tokens, qualitative style, special-rendering effects), then generate a new self-contained artifact from that JSON. Carries the extraction rules (dominance-based colour roles, relative radius measurement, multi-reference conflict resolution), a performance-tier technology map for Canvas / WebGL / shader / scroll effects, and a delivery gate covering contrast, reduced motion, and animation-loop hygiene.
|
| when_to_use | Use when someone points at an existing design and wants its look captured or reproduced — "build this in the same style as this screenshot", "extract the design tokens from this site", "make a page that feels like this reference" — or when a Design DNA JSON already exists and a new artifact must be generated from it. Not for report rendering (moai-domain-html-report), static diagrams (moai-domain-svg-infographic), or charts (dataviz).
|
| license | Apache-2.0 |
| compatibility | Designed for Claude Code |
| allowed-tools | Read, Write, Edit, Grep, Glob, WebFetch, Bash |
| user-invocable | true |
| metadata | {"version":"1.0.0","category":"domain","status":"active","related-skills":"moai-ref-ui-polish, moai-domain-html-report, moai-domain-svg-infographic"} |
Design DNA
Most "make it look like this" requests fail the same way: the reference is
looked at once, an impression is formed, and the impression is coded from
memory. What survives is a vague resemblance — the palette drifts, the rhythm
flattens, and the one effect that gave the reference its character is missing
entirely.
This skill inserts an artifact between looking and building. The reference is
first deconstructed into a Design DNA JSON, and only that JSON is used to
generate. The intermediate step is what makes the result checkable: every
colour, radius, and easing curve in the output traces to a recorded field, so a
mismatch is a diff rather than an argument about taste.
Provenance: the three-dimension taxonomy and several extraction rules are
adapted from the MIT-licensed zanwei/design-dna skill. See
.claude/rules/moai/NOTICE.md for the retained copyright notice.
The three dimensions
The split matters because the three are extracted differently and fail
differently.
| Dimension | What it holds | How it is obtained |
|---|
design_system | What can be measured — colour hex values, type scale, spacing base unit, radius, elevation, motion timings, component patterns | Sampled and measured from the reference; numeric |
design_style | What can be felt — mood, ornamentation level, composition strategy, whitespace philosophy, interaction personality, microcopy tone | Judged holistically; descriptive words, not numbers |
visual_effects | What cannot be expressed in plain CSS — Canvas scenes, WebGL / 3D, shaders, particle systems, scroll-driven motion, cursor behaviour, glassmorphism | Read from source where available, described from screenshots where not |
Collapsing them loses information in both directions. A token dump with no
style dimension reproduces the colours and none of the character; a mood board
with no system dimension reproduces the vibe and no two elements align.
Field-by-field schema and enum vocabularies: references/dna-schema.md.
Phase 1 — Structure
When the request is for the schema itself ("what does a design profile
contain?"), read references/dna-schema.md, present the three dimensions and
their field groups, and ask whether any dimension should be extended or
dropped before extraction begins.
