mcpField
D
design-system-generator

design-system-generator

github.com/onewave-aiDesign & UI393306 installsUpdated 1w ago
Repository

About design-system-generator

A skill for producing a token-driven design system, from design tokens and CSS variables to base components, build configuration, and usage documentation. It guides teams through adapting a reference setup to a product’s brand and needs.

Key features

  1. 01Color, type, spacing, and effect tokens
  2. 02CSS variables for light and dark themes
  3. 03Tailwind configuration and class merge helper
  4. 04Button, Input, and Card components
  5. 05Component exports and usage documentation

Use cases

  1. 01Setting up a product design system
  2. 02Adapting tokens to a brand palette
  3. 03Creating reusable base UI components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/onewave-ai/claude-skills --skill design-system-generator

After installing, type/design-system-generatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
components.md
config-and-utilities.md
design-tokens.md

Details

From the project README

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

Workflow

  1. Define design tokens. Create tokens/ with colors, typography, spacing, and effects (shadows, radii) per references/design-tokens.md. Replace the reference values with the project brand palette.
  2. Add CSS variables. Set up :root and .dark custom properties in globals.css using the variable block in references/design-tokens.md.
  3. Wire the build. Add the cn helper and extend the Tailwind theme from the token files following references/config-and-utilities.md.
  4. Build base components. Implement Button, Input, and Card from references/components.md, then extend the set as the product requires.
  5. Export a barrel. Re-export every shipped component from components/ui/index.ts (see references/components.md).
  6. Document usage and variants. For each component, note its variants, sizes, props, and accessibility behavior so consumers apply it consistently.

Comments

Markdown supported