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.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
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
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
