Design System Generator

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.

skills.sh installs: 317
GitHub stars: 422
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add onewave-ai/claude-skills --skill design-system-generator --agent claude-code

Installs into .claude/skills of the current project.

Files

Design System Generator

Generate a token-driven design system: tokens, base components, build config, and documentation.

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 the cn class-merge helper.