Design System Generator
SkillDocs & knowledgeCreate design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Design System Generator skill
What this skill tells your AI
The instructions your AI receives, as published by onewave-ai/claude-skills in design-system-generator/SKILL.md and read by ahel’s review.
Generate a token-driven design system: tokens, base components, build config, and documentation.
Contents
references/design-tokens.md— color, typography, spacing, shadow, and radius token files plus CSS variable setup.references/components.md— Button, Input, Card implementations and the component barrel index.references/config-and-utilities.md— Tailwind config and thecnclass-merge helper.
Workflow
- Define design tokens. Create
tokens/with colors, typography, spacing, and effects (shadows, radii) perreferences/design-tokens.md. Replace the reference values with the project brand palette. - Add CSS variables. Set up
:rootand.darkcustom properties inglobals.cssusing the variable block inreferences/design-tokens.md. - Wire the build. Add the
cnhelper and extend the Tailwind theme from the token files followingreferences/config-and-utilities.md. - Build base components. Implement Button, Input, and Card from
references/components.md, then extend the set as the product requires. - Export a barrel. Re-export every shipped component from
components/ui/index.ts(seereferences/components.md). - Document usage and variants. For each component, note its variants, sizes, props, and accessibility behavior so consumers apply it consistently.
Signals
- GitHub stars
- 291
- Forks
- 46
- Last commit
- Aug 2026
Advanced
- Catalog kind
- skill
- Gateway key
design-system-generator-onewave-ai- Source
- github.com/onewave-ai/claude-skills