Summary
This generates a complete design system with tokens, components, and Tailwind integration. You get color palettes with semantic variants (primary, success, error), typography scales, spacing units, and pre-built React components like Button with CVA variants, Input with error states, and Card composables. The setup includes both TypeScript token files and CSS variables for theming, plus dark mode support. Useful when you're starting a new project and want consistent design patterns from day one instead of cobbling together random component libraries. The Button component alone saves you from writing the same variant logic for the hundredth time.
Install to Claude Code
npx -y skills add onewave-ai/claude-skills --skill design-system-generator --agent claude-codeInstalls into .claude/skills of the current project.
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Files
SKILL.mdView on GitHub
Design System Generator
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.
Featured
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →First SeenJun 3, 2026
