design-system-generator
Design System Generator
Transform product artifacts into design systems that feel so natural users think "of course, how else would it be?"
Philosophy
Great design systems don't impose arbitrary aesthetics. They reveal what was always latent in the product's purpose. The goal is not to decorate but to crystallize the product's soul into visual and interaction patterns.
Before generating specifications, understand three things:
- Who feels what? The target audience's emotional state before, during, and after using the product
- What's the core tension? Every product resolves a tension. The design system should embody that resolution
- What must feel inevitable? The final system should feel like the only possible answer
Token Architecture
This skill uses a three-layer token system inspired by shadcn/ui and the W3C Design Tokens specification. Every visual decision flows through three levels of abstraction:
More from hungv47/agent-skills
mkt-copywriting
This skill should be used when the user asks to "write copy", "create a headline", "write a tagline", "improve my copy", "write landing page copy", "create ad copy", "write email subject lines", "write product description", or mentions copywriting, persuasive writing, marketing copy, or conversion copy. Uses Harry Dry's Marketing Examples framework.
19tool-plan-interviewer
This skill should be used when the agent enters plan mode, when the user mentions "plan file", "spec file", "interview me about the plan", "help me think through this", or when starting implementation planning. Conducts in-depth, multi-round interviews using AskUserQuestion to surface non-obvious requirements, edge cases, and tradeoffs before writing specifications.
14design-user-flow
This skill should be used when the user asks to "create a user flow", "map navigation", "design user journey", "create wireflow", "plan screen transitions", "map the app flow", "design navigation", or mentions user flow, wireflow, navigation map, user journey, screen transitions, or pre-interface design research. Creates user flow diagrams and wireflows for digital products.
14eng-system-architecture
This skill should be used when the user asks to "design system architecture", "plan the tech stack", "create database schema", "design API structure", "architect the system", "plan the backend", "design infrastructure", or mentions system architecture, technical architecture, database design, API design, or tech stack selection. Transforms product documentation into comprehensive technical blueprints.
13mkt-diagnosis
This skill should be used when the user asks to "diagnose the problem", "break down the issue", "build a logic tree", "what's causing this", or mentions problem diagnosis, logic trees, MECE decomposition, or structured problem solving. This is the ENTRY POINT for problem analysis — use when no diagnosis exists yet.
13mkt-lp-optimization
This skill should be used when the user asks to "optimize a landing page", "improve conversion rates", "review my landing page", "create a high-converting landing page", "audit my LP", "reduce bounce rate", or mentions landing page design, conversion optimization, A/B testing strategy, or CTA optimization.
13