design-systemlisted

This skill generates distinctive, production-grade design systems that are **derived from architecture context** — not random aesthetic choices. Every design decision traces back to the product domain, target audience, component library, and accessibility requirements defined in the SDL. **Reference files to load alongside this skill:** - `references/design-systems.md` — component library presets, personality guide, domain defaults, sub-domain differentiation - `references/design-system-fonts.md` — curated font pairing library by personality (49+ pairs including organic/retro/expressive/cinematic, rotation rules) - `references/design-system-patterns.md` — dark mode tokens, gradient/texture recipes, motion timing values, layout archetype spatial specs, 8 unconventional layout patterns with CSS - `references/design-system-creative.md` — 4 creative personalities (organic, retro, expressive, cinematic), consumer/creative domain defaults, personality × domain quick guide The user has an SDL blueprint. This skill fills, refines, or validates the `design` section and produces actionable design artifacts. ## Design Thinking — Context-Driven Before making any design choice, ground it in the SDL: 1. **Read the SDL** — extract `solution.name`, `solution.description`, frontend components, target audience, product domain 2. **Derive personality** — map domain + audience to a design personality: - Fintech / Banking → corporate or editorial - Healthcare → minimal - E-commerce