← ClaudeAtlas

design-dnalisted

Extract and apply evidence-tagged Design DNA from screenshots, images, URLs, Figma context, or existing UI code across tokens, qualitative style, and visual effects. Use when the user explicitly asks for Design DNA, a structured design profile, tokens/style/effects from references, reference-to-JSON analysis, or implementation from an existing DNA JSON. Do not trigger for ordinary UI critique or routine component implementation.
mrDesign-ww/vault-os · ★ 2 · Web & Frontend · score 75
Install: claude install-skill mrDesign-ww/vault-os
# Design DNA Build a machine-readable design profile without presenting guesses as measured facts. Treat existing project tokens, Figma variables, approved specs, and vault decisions as sources of truth. ## Source priority Use the strongest available evidence in this order: 1. Existing approved project tokens, Figma variables, and implementation constants. 2. Inspected source code and computed styles. 3. Pixel measurements or color sampling from supplied assets. 4. Visual inference from screenshots or video. 5. Qualitative interpretation. Never overwrite a stronger source with a weaker inference. When sources conflict, report the conflict and ask which source governs. ## Evidence contract Read [references/schema.md](references/schema.md) before extraction. Preserve its three dimensions: `design_system`, `design_style`, and `visual_effects`. For every populated leaf, add an entry to a top-level `evidence` map keyed by JSON path: ```json { "evidence": { "design_system.color.primary.hex": { "status": "measured", "confidence": 0.96, "source": "Figma variable Brand/Primary" } } } ``` Allowed status values: - `authoritative`: approved token, Figma variable, spec, or implementation constant. - `measured`: directly sampled or inspected. - `observed`: clearly visible behavior or property without an exact value. - `inferred`: reasoned estimate from incomplete evidence. - `unknown`: not supported by the available references. Use `null` for unkno