{"id":"design-dna","name":"design-dna","summary":"デザインDNA(デザインDNA)を抽出し、定義し、適用します。デザインシステム(トークン)、デザインスタイル(質的な感覚)、視覚効果(キャンバス、WebGL、3D、パーティクル、シェーダー、スクロールエフェクトなど)です。","body":"# Design DNA\n\nA 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:\n\n1. **Design System** — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components)\n2. **Design Style** — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice)\n3. **Visual Effects** — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)\n\n## Phases\n\n### Phase 1: Structure — Output the Schema\n\nWhen the user asks for the structural dimensions or schema:\n\n1. Read [references/schema.md](references/schema.md)\n2. Present the full schema with field descriptions\n3. Explain the three dimensions and their roles:\n   - **design_system**: What you can measure — exact hex values, pixel sizes, rem scales\n   - **design_style**: What you can feel — mood, personality, composition strategy\n   - **visual_effects**: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations\n4. Ask if the user wants to customize or extend any dimensions\n\n### Phase 2: Analyze — Extract DNA from References\n\nWhen the user provides images, screenshots, or links representing a target design style:\n\n1. Read [references/schema.md](references/schema.md) for the full field list\n2. For each reference provided:\n   - If image/screenshot: analyze visual properties directly\n   - If URL: fetch and analyze the page's visual design\n3. For every field in the schema, extract or infer a value from the references\n4. When multiple references conflict, note the dominant pattern and mention variants\n5. Output a complete Design DNA JSON — every field populated, no empty strings\n6. After output, ask: \"Want to adjust any values before using this for generation?\"\n\n**Analysis approach per dimension:**\n\n#### Dimension 1: design_system\n- **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.\n- **typography**: Identify font families by visual characteristics (geometric, humanist, serif class). Estimate scale ratios from heading/body size relationships.\n- **spacing**: Assess density by element proximity. Measure rhythm by section gap consistency.\n- **layout**: Identify grid by content alignment patterns. Note max-width, column count, asymmetry.\n- **shape**: Measure border-radius by comparing to element height. Note border and divider presence.\n- **elevation**: Classify shadow softness, spread, and layering approach.\n- **motion**: If observable (video/interactive), note easing curves and duration feel.\n\n#### Dimension 2: design_style\n- Synthesize holistic impressions — mood, personality, composition strategy\n- Compare against genre archetypes (SaaS, editorial, brutalist, etc.)\n- Note ornamentation level and whitespace philosophy\n\n#### Dimension 3: visual_effects\n- **From code**: Scan for `<canvas>`, WebGL contexts, Three.js/Pixi.js imports, GSAP/Lottie usage, custom shaders, IntersectionObserver scroll triggers, SVG `<animate>` elements\n- **From screenshots**: Describe visible effects that go beyond standard CSS — glowing particles, 3D object renders, noise textures, gradient animations, parallax depth, cursor trails, text distortions, glassmorphic surfaces. Note these in `composite_notes` when exact implementation can't be determined.\n- **From video/interaction demos**: Note scroll behaviors, hover distortions, transition choreography, loading sequences\n- Set `enabled: false` for any effect category not present in the reference\n- Rate `overview.effect_intensity` and `overview.performance_tier` based on what's observed\n\n### Phase 3: Generate — Apply DNA to Content\n\nWhen the user provides DNA JSON + content to design:\n\n1. Read [references/generation-guide.md](references/generation-guide.md)\n2. Parse the DNA JSON and extract all tokens across three dimensions\n3. Build CSS custom properties from `design_system` values\n4. Apply `design_style` qualitative fields to guide subjective design decisions\n5. When the design needs assets or source materials, fetch them from the original source whenever possible. If the user provided a URL, retrieve the real asset from that URL instead of recreating, approximating, or substituting it.\n6. Implement `visual_effects` using appropriate technologies:\n   - Lightweight effects → CSS animations, SVG, vanilla JS\n   - Medium effects → Canvas 2D, GSAP, Lottie\n   - Heavy effects → Three.js, custom GLSL shaders, Pixi.js\n7. Generate the design output (default: self-contained HTML with inline CSS/JS)\n8. Run quality checks from the generation guide\n\n**If the user provides only content without DNA JSON**, ask whether to:\n- Analyze a reference first (go to Phase 2)\n- Use a described style (extract DNA from description, then generate)\n\n## Phase Combinations\n\nUsers may invoke any combination:\n- **Phase 1 only**: \"Show me the design structure/schema\"\n- **Phase 2 only**: \"Analyze this design\" (with images/links)\n- **Phase 2 → 3**: \"Analyze this design and build me a landing page in the same style\"\n- **Phase 1 → 2 → 3**: Full pipeline\n- **Phase 3 only**: User already has DNA JSON\n\nDetect which phase(s) are needed from context and execute accordingly.","author":"@zanwei","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/zanwei/design-dna","license":"MIT","category":"design","lang":"en","tokens":1181,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":".gitignore","size":54,"sha256":"17df6a62351de1ad87cae25c00f75b5b8489d99a91a5237dea5f3e9941c11e53"},{"path":"LICENSE","size":1079,"sha256":"2de108bcd0d904f8756e1135ca77ce1e3e9ca0edb1ae6abecb97dea76d27d174"},{"path":"README.es.md","size":5608,"sha256":"628f434b5ebcca8506e430ddb8c2013639d6f91bb4512bfc951c4828b1ced41c"},{"path":"README.ja.md","size":6625,"sha256":"9af71c7efbabdcd000a6f494fec968c346c976ef63f43352d6ea3656c39dcaca"},{"path":"README.ko.md","size":5633,"sha256":"0f2a20a6321d67c58991b32161b6a2353d035f408b73264abe5a6a67865f0bbc"},{"path":"README.md","size":5266,"sha256":"87a05b22a74001a08ecfc6853f1fb9f09ca1f832630d17bd8384da5602c232c7"},{"path":"README.zh-CN.md","size":4875,"sha256":"4fd6f41e2abeca5158a2f0a30546fd920e4b64e25ad3e97875f05d31764d88f6"},{"path":"README.zh-TW.md","size":4882,"sha256":"10bd434cce3b8c082f83785bb2040e14a31aed04305ad7860d663ac2c1abbafb"},{"path":"references/generation-guide.md","size":8567,"sha256":"7073c2b297854daa49c2f2474a678a438fa65db59a2cf07bd71ca373174b4ef8"},{"path":"references/schema.md","size":11527,"sha256":"7437729591e892ccd6c373beb316c28025c05bb78633cbe4912ee40523a03dcf"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["agentskills.io","api.star-history.com","cdn.jsdelivr.net","github.blog","nodejs.org","star-history.com"]}}