{"id":"411e6779-fbe6-4d8a-865e-a5c5b033da1f","shortId":"bTEVeE","kind":"skill","title":"design-dna","tagline":">-","description":"# 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.","tags":["design","dna","zanwei","agent-skills","claude-skills","codex-skills","cursor-skills","design-dna","design-system","design-tokens","skills-cli","ui-design"],"capabilities":["skill","source-zanwei","skill-design-dna","topic-agent-skills","topic-claude-skills","topic-codex-skills","topic-cursor-skills","topic-design-dna","topic-design-system","topic-design-tokens","topic-skills-cli","topic-ui-design","topic-visual-design"],"categories":["design-dna"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/zanwei/design-dna","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add zanwei/design-dna","source_repo":"https://github.com/zanwei/design-dna","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 622 github stars · SKILL.md body (5,359 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T00:52:57.874Z","embedding":null,"createdAt":"2026-04-18T23:37:50.034Z","updatedAt":"2026-04-23T00:52:57.874Z","lastSeenAt":"2026-04-23T00:52:57.874Z","tsv":"'/pixi.js':414 '1':20,67,82,180,269,515,674,706 '2':33,86,161,189,378,519,655,682,690,707 '2d':605 '3':7,47,94,210,403,500,531,691,708,712 '3d':54,437 '4':148,225,540 '5':237,551 '6':250,588 '7':615 '8':628 'accent':287 'accord':729 'across':17,528 'adjust':256 'align':335 'alon':137 'alreadi':715 'analysi':264 'analyz':162,196,204,648,684,692 'anim':62,147,443,598 'appli':14,502,541 'approach':265,366 'appropri':593 'approxim':584 'archetyp':391 'area':281 'ask':75,149,253,645 'assess':319 'asset':556,577 'asymmetri':343 'background':296 'base':494 'behavior':469 'beyond':432 'border':347,355 'border-radius':346 'brand':45 'brutalist':394 'build':532,696 'canva':52,604 'categori':482 'characterist':306 'check':631 'choreographi':473 'class':310 'classifi':360 'code':407 'color':25,272 'column':341 'combin':667,672 'compar':350,388 'complet':240 'compon':32 'composit':41,123,386,455 'conflict':229 'consist':329 'contain':623 'content':334,505,512,641 'context':411,726 'count':342 'css':136,434,533,597 'css/js':627 'cta':289 'cursor':59,446 'curv':373 'custom':155,418,534,611 'darkest':298 'decis':550 'default':620 'demo':466 'densiti':320 'depth':445 'describ':427,658 'descript':93,663 'design':2,4,15,21,34,102,115,178,209,241,270,379,514,537,542,549,554,618,679,686,694 'design-dna':1 'detect':719 'determin':463 'dimens':19,79,98,159,267,268,377,402,530 'direct':199 'distort':143,449,471 'divid':357 'dna':3,5,164,242,503,510,522,643,661,717 'domin':232,274,282 'driven':146 'durat':375 'eas':372 'editori':393 'effect':49,58,60,126,405,429,481,591,596,603,609 'element':322,352,424 'elev':30,359 'empti':248 'enabl':477 'estim':311 'etc':64,395 'everi':212,244 'exact':108,458 'execut':728 'explain':95 'express':134 'extend':157 'extract':11,163,217,273,525,660 'fals':478 'famili':303 'feel':44,120,376 'fetch':202,560 'field':92,187,213,245,545 'first':651 'font':302 'full':89,186,709 'gap':328 'generat':263,501,616,634,665 'genr':390 'geometr':307 'glassmorph':63,450 'glow':435 'glsl':612 'go':431,652 'gradient':442 'grid':332 'gsap':606 'gsap/lottie':416 'guid':547,635 'heading/body':315 'heavi':608 'height':353 'hex':109 'holist':382 'hover':470 'html':624 'humanist':308 'ident':16 'identifi':301,331 'imag':171 'image/screenshot':195 'imageri':42 'images/links':688 'implement':459,589 'import':415 'impress':383 'infer':219 'inlin':626 'instead':581 'intens':490 'interact':43 'intersectionobserv':420 'invok':670 'js':601 'json':243,511,523,644,718 'land':699 'languag':40 'layer':365 'layout':28,330 'level':398 'lightest':295 'lightweight':595 'link':174 'list':188 'load':474 'lotti':607 'map':291 'materi':559 'max':339 'max-width':338 'may':669 'measur':23,107,324,345 'medium':602 'mention':235 'mood':38,121,384 'motion':31,367 'multipl':227 'need':555,724 'neutral':292 'nois':440 'note':230,337,354,371,396,452,456,467 'object':438 'observ':369,498 'origin':564 'ornament':397 'output':69,238,252,619 'overview.effect':489 'overview.performance':492 'page':206,700 'palett':275 'parallax':444 'pars':520 'particl':55,140,436 'pattern':233,336 'per':266 'percept':37 'person':122,385 'phase':8,65,66,160,499,654,666,673,681,689,705,711,721 'philosophi':401 'pipelin':710 'pixel':111 'pixi.js':614 'popul':246 'possibl':567 'presenc':358 'present':87,484 'primari':279 'properti':198,535 'provid':170,193,509,571,639 'proxim':323 'qualit':36,544 'qualiti':630 'radius':348 'rate':488 'ratio':313 'read':83,181,516 'real':576 'recreat':583 'refer':166,192,224,228,487,650 'references/generation-guide.md':517,518 'references/schema.md':84,85,182,183 'relationship':317 'rem':113 'render':51,439 'repres':175 'retriev':574 'rhythm':325 'role':101,286 'run':629 'saa':392 'sampl':278 'scale':114,293,312 'scan':408 'scene':139 'schema':71,81,90,216 'screenshot':172,426 'scroll':57,145,421,468 'scroll-driven':144 'secondari':283 'section':327 'see':130 'self':622 'self-contain':621 'sequenc':475 'serif':309 'set':476 'shader':56,142,419,613 'shadow':361 'shape':29,344 'show':676 'size':112,316 'skill' 'skill-design-dna' 'soft':362 'sourc':558,565 'source-zanwei' 'space':27,318 'special':50 'spread':363 'standard':433 'strategi':124,387 'string':249 'structur':12,68,78 'structure/schema':680 'style':35,116,179,380,543,659,704 'subject':548 'substitut':586 'support':285 'surfac':451 'svg':61,423,599 'synthes':381 'system':22,103,141,271,538 'target':177 'technolog':594 'text':299,448 'textur':441 'three':18,97,529 'three.js':413,610 'three.js/pixi.js':412 'tier':493 'token':24,527 'topic-agent-skills' 'topic-claude-skills' 'topic-codex-skills' 'topic-cursor-skills' 'topic-design-dna' 'topic-design-system' 'topic-design-tokens' 'topic-skills-cli' 'topic-ui-design' 'topic-visual-design' 'trail':447 'transit':472 'trigger':422 'typographi':26,300 'url':201,573,580 'usag':290,417 'use':260,592,656 'user':74,152,169,508,570,638,668,714 'valu':110,221,258,539 'vanilla':600 'variant':236 'via':276 'video/interaction':465 'video/interactive':370 'visibl':428 'visual':39,48,125,197,208,277,305,404,590 'voic':46 'want':153,254 'webgl':53,138,410 'whenev':566 'whether':646 'whitespac':400 'width':340 'without':642 'workflow':9","prices":[{"id":"b3ea7337-72ff-48d4-bcb9-f84a72a6f79f","listingId":"411e6779-fbe6-4d8a-865e-a5c5b033da1f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"zanwei","category":"design-dna","install_from":"skills.sh"},"createdAt":"2026-04-18T23:37:50.034Z"}],"sources":[{"listingId":"411e6779-fbe6-4d8a-865e-a5c5b033da1f","source":"github","sourceId":"zanwei/design-dna","sourceUrl":"https://github.com/zanwei/design-dna","isPrimary":false,"firstSeenAt":"2026-04-18T23:37:50.034Z","lastSeenAt":"2026-04-23T00:52:57.874Z"}],"details":{"listingId":"411e6779-fbe6-4d8a-865e-a5c5b033da1f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"zanwei","slug":"design-dna","github":{"repo":"zanwei/design-dna","stars":622,"topics":["agent-skills","claude-skills","codex-skills","cursor-skills","design-dna","design-system","design-tokens","skills-cli","ui-design","visual-design"],"license":"mit","html_url":"https://github.com/zanwei/design-dna","pushed_at":"2026-04-13T01:30:34Z","description":"Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.","skill_md_sha":"3445a9609f5db1bd11371e2b1d0dff7233eb88a0","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/zanwei/design-dna"},"layout":"root","source":"github","category":"design-dna","frontmatter":{"name":"design-dna","description":">-"},"skills_sh_url":"https://skills.sh/zanwei/design-dna"},"updatedAt":"2026-04-23T00:52:57.874Z"}}