create-my-design-system

Scaffold a production-ready design system monorepo in seconds.

Quick Start

npx create-my-design-system my-design-system

This will create a directory called my-design-system with a complete design system setup including:

• 🎨 Design Tokens - Style Dictionary powered token system with light/dark themes
• 🧩 Component Library - 5 production-ready React components
• 🖼️ Icon System - Automated SVG → React pipeline with 12 icons
• 📖 Storybook - Interactive component documentation
• 🌐 Next.js App - Example app with Server Components and theme switching
• 🧪 E2E Tests - Playwright tests across 5 browsers + mobile
• ⚡ Turborepo - Monorepo with caching for fast builds

Usage

Interactive Mode

npx create-my-design-system

You'll be prompted for:

• Project name
• Description
• Author
• Package manager (pnpm, npm, or yarn)

With Project Name

npx create-my-design-system my-awesome-design-system

Options

npx create-my-design-system my-project [options]

Options:

• --no-install - Skip package installation
• --no-git - Skip git initialization

What Gets Created

my-design-system/
├── apps/
│   ├── docs/              # Storybook
│   ├── web/               # Next.js app
│   └── e2e/               # Playwright tests
├── packages/
│   ├── design-tokens/     # Style Dictionary
│   ├── ui/                # React components
│   ├── icons/             # SVG icons
│   ├── eslint-config/     # Shared ESLint
│   └── typescript-config/ # Shared TypeScript
└── turbo.json             # Turborepo config

After Installation

cd my-design-system

# If you used --no-install, install dependencies:
pnpm install   # or npm install / yarn install

# Start development
pnpm dev       # Starts Storybook + Next.js app

# Or run specific commands
pnpm build     # Build all packages and apps
pnpm test      # Run E2E tests
pnpm lint      # Lint all packages

Development URLs:

• Storybook → http://localhost:6006
• Next.js App → http://localhost:3000
• Token Verification → http://localhost:3000/tokens-verify

Available Commands

pnpm dev                  # Start all apps in dev mode
pnpm build                # Build all apps and packages
pnpm storybook            # Start Storybook only
pnpm preview-storybook    # Preview Storybook build
pnpm test                 # Run Playwright E2E tests
pnpm lint                 # Lint all packages
pnpm clean                # Clean all build artifacts

Package-specific commands:

# Design tokens
pnpm --filter @your-project/design-tokens build

# UI components
pnpm --filter @your-project/ui dev

# Icons
pnpm --filter @your-project/icons build

Features

Design Tokens

• Generates 124 Tailwind utilities from tokens
• Light/dark theme support
• Multi-platform output (CSS, Tailwind, TypeScript)

Components

• Button (primary, outline variants)
• Text (polymorphic with 5 variants)
• Input (with icon support)
• Card (container component)
• Modal (accessible dialogs)

Icon System

• Drop SVG → Get React component
• Auto-generated TypeScript types
• Customizable size and color props

Testing

• Playwright E2E tests
• Cross-browser (Chrome, Firefox, Safari)
• Mobile device testing (Pixel 5, iPhone 12)

Requirements

• Node.js 18 or higher
• pnpm, npm, or yarn

Troubleshooting

Port already in use

If port 3000 or 6006 is already in use:

# Kill the process using the port (macOS/Linux)
lsof -ti:3000 | xargs kill -9
lsof -ti:6006 | xargs kill -9

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

Module resolution errors

If you see Cannot find module '@your-project/...' errors:

# Clean install
rm -rf node_modules
pnpm install

# Or from root directory
pnpm install --force

Build failures

# Clean all build artifacts and rebuild
pnpm clean
pnpm build

Storybook not starting

# Clear Storybook cache
rm -rf apps/docs/.storybook-cache
pnpm storybook

Learn More

• Turborepo Documentation
• Style Dictionary Documentation
• Storybook Documentation
• Playwright Documentation

License

MIT

Support

• 🐛 Report a bug
• 💬 Discussions
• 📖 Documentation