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 a...