Design Dna
Turn reference screenshots or URLs into a three-dimension Design DNA JSON (tokens, style, effects) and regenerate UI from that profile.
Overview
Design-dna is an agent skill most often used in Build (also Validate prototype, Idea discover) that extracts and applies 3-dimension design DNA—tokens, style, and visual effects—from references or JSON.
Install
npx skills add https://github.com/zanwei/design-dna --skill design-dnaWhat is this skill?
- 3-dimension schema: design system tokens, qualitative design style, and visual effects (Canvas, WebGL, 3D, particles, sh
- Phase 1 outputs full structure/schema; Phase 2 analyzes images, screenshots, or URLs into JSON
- Phase 3 generates designs from Design DNA JSON plus content
- Triggers on design profile, style guide JSON, and visual effects analysis phrases
- Separates measurable tokens from mood/composition and special rendering layers
- 3 design dimensions: design system, design style, and visual effects
- 3-phase workflow: structure schema, analyze references, generate from JSON
Adoption & trust: 795 installs on skills.sh; 735 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent produces inconsistent UI because references live in screenshots and vibe words, not a reusable structured design profile.
Who is it for?
Builders standardizing look-and-feel across a web app or marketing site using reference URLs, screenshots, or an existing JSON design profile.
Skip if: Pure backend or API work with no UI, or teams that only need a one-component tweak without a system-level DNA pass.
When should I use this skill?
User asks for design DNA, extract design style, analyze design, tokens from reference, generate design from JSON, design profile, style guide JSON, or visual effects analysis.
What do I get? / Deliverables
You get a Design DNA JSON covering system, style, and effects that agents can reuse to generate aligned interfaces from the same schema.
- Design DNA JSON with system, style, and visual-effects dimensions
- Generated design output aligned to the extracted or supplied profile
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build because output is design system tokens, style language, and visual effects for implementation. Frontend subphase fits extraction-to-code workflows for layout, typography, motion, and WebGL-style effects agents apply in UI work.
Where it fits
Apply extracted tokens and motion rules while implementing a new dashboard shell.
Clone competitor landing aesthetics into JSON before committing to a component library.
Catalog how reference products use 3D and scroll effects to inform positioning.
Keep campaign landing pages visually consistent with the app DNA JSON.
How it compares
Structured extract-and-generate design pipeline—not a generic "pick Tailwind colors" snippet skill.
Common Questions / FAQ
Who is design-dna for?
Solo developers and designers using Claude Code, Cursor, or similar agents who need tokenized design systems plus style and effects from real references.
When should I use design-dna?
During Build frontend implementation; in Validate when prototyping branded flows; and in Idea discover when analyzing competitor UI into a reusable JSON profile.
Is design-dna safe to install?
Capabilities depend on how your agent fetches URLs or runs generators; confirm repo permissions and review the Security Audits panel on this Prism page.
SKILL.md
READMESKILL.md - Design Dna
# Design DNA A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions: 1. **Design System** — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components) 2. **Design Style** — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice) 3. **Visual Effects** — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.) ## Phases ### Phase 1: Structure — Output the Schema When the user asks for the structural dimensions or schema: 1. Read [references/schema.md](references/schema.md) 2. Present the full schema with field descriptions 3. Explain the three dimensions and their roles: - **design_system**: What you can measure — exact hex values, pixel sizes, rem scales - **design_style**: What you can feel — mood, personality, composition strategy - **visual_effects**: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations 4. Ask if the user wants to customize or extend any dimensions ### Phase 2: Analyze — Extract DNA from References When the user provides images, screenshots, or links representing a target design style: 1. Read [references/schema.md](references/schema.md) for the full field list 2. For each reference provided: - If image/screenshot: analyze visual properties directly - If URL: fetch and analyze the page's visual design 3. For every field in the schema, extract or infer a value from the references 4. When multiple references conflict, note the dominant pattern and mention variants 5. Output a complete Design DNA JSON — every field populated, no empty strings 6. After output, ask: "Want to adjust any values before using this for generation?" **Analysis approach per dimension:** #### Dimension 1: design_system - **color**: Extract dominant palette via visual sampling. Primary by area dominance, secondary by supporting role, accent by CTA usage. Map neutral scale from lightest background to darkest text. - **typography**: Identify font families by visual characteristics (geometric, humanist, serif class). Estimate scale ratios from heading/body size relationships. - **spacing**: Assess density by element proximity. Measure rhythm by section gap consistency. - **layout**: Identify grid by content alignment patterns. Note max-width, column count, asymmetry. - **shape**: Measure border-radius by comparing to element height. Note border and divider presence. - **elevation**: Classify shadow softness, spread, and layering approach. - **motion**: If observable (video/interactive), note easing curves and duration feel. #### Dimension 2: design_style - Synthesize holistic impressions — mood, personality, composition strategy - Compare against genre archetypes (SaaS, editorial, brutalist, etc.) - Note ornamentation level and whitespace philosophy #### Dimension 3: visual_effects - **From code**: Scan for `<canvas>`, WebGL contexts, Three.js/Pixi.js imports,