Dezzy Design System CLI

A powerful CLI tool for creating comprehensive design systems with TypeScript, React, Storybook, and automated scaffolding.

Features

🎨 Complete Design System Scaffold

• Comprehensive design tokens (colors, typography, spacing, borders, shadows)
• Pre-built React components with TypeScript interfaces
• Storybook integration with accessibility testing
• Jest + Testing Library setup
• ESLint + Prettier configuration

🚀 Smart Code Generation

• Interactive CLI with sensible defaults
• Multiple project templates (Vite, Next.js, CRA, Storybook-only)
• Automatic documentation generation
• AI assistant integration (Claude, Cursor, etc.)

⚡ Developer Experience

• TypeScript-first approach
• BEM CSS methodology
• Accessibility built-in
• Comprehensive testing utilities

Installation

Global Installation (Recommended)

npm install -g dezzy

Local Installation

npm install --save-dev dezzy

Quick Start

Create a new design system project:

# Interactive setup
dezzy create my-design-system

# Quick setup with defaults
dezzy create my-design-system --yes

# Specify template
dezzy create my-design-system --template vite-react

Usage

Commands

# Create new project with interactive setup
dezzy create [directory] [options]

# Quick setup with defaults
dezzy create --yes --template vite-react

# Validate DSL files
dezzy validate <file>

# Initialize new DSL file
dezzy init <name> [options]

# Compile DSL to React component
dezzy compile <file> [options]

# Show help
dezzy --help

Project Templates

• vite-react - Modern Vite + React setup (default)
• react-app - Create React App
• nextjs - Next.js application
• storybook-only - Storybook-focused setup

Generated Structure

my-design-system/
├── src/
│   ├── components/          # React components
│   ├── views/              # Page-level components
│   ├── tokens/             # Design tokens
│   ├── stories/            # Storybook stories
│   ├── __tests__/          # Test files
│   └── test-utils/         # Testing utilities
├── .storybook/             # Storybook configuration
├── package.json            # Dependencies & scripts
├── tsconfig.json           # TypeScript config
├── README.md               # Project documentation
├── CONTRIBUTING.md         # Development guidelines
├── DEVELOPMENT.md          # Human developer guide
└── CLAUDE.md              # AI assistant instructions

Design Tokens

Dezzy generates a comprehensive design token system:

import { colors, spacing, typography, borders, shadows } from './tokens';

const buttonStyles = {
  backgroundColor: colors.primary[500],
  padding: `${spacing[3]} ${spacing[6]}`,
  borderRadius: borders.radius.md,
  fontFamily: typography.fontFamily.sans,
  boxShadow: shadows.md
};

Generated Components

Button Component

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

Storybook Integration

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Click me'
  }
};

Development Features

Built-in Testing

• Jest configuration
• Testing Library setup
• Custom render utilities
• Accessibility testing
• Component test examples

Code Quality

• TypeScript strict mode
• ESLint + Prettier
• Pre-commit hooks ready
• CI/CD templates

Documentation

• Auto-generated README
• Component documentation
• Development guidelines
• AI assistant instructions

Configuration Options

The CLI supports extensive configuration:

• Languages: TypeScript, JavaScript
• Package Managers: npm, yarn, pnpm
• Features: Testing, Linting, Dark Mode, A11y
• Team Size: Solo, Small Team, Enterprise
• Complexity: Simple, Moderate, Complex

AI Assistant Integration

Dezzy generates specific instructions for AI assistants:

• Claude Code: Comprehensive development guidelines
• Cursor: IDE-specific workflows
• GitHub Copilot: Inline assistance patterns
• Windsurf: Collaborative development
• Generic: Universal AI assistant instructions

Examples

Create TypeScript Project with Full Features

dezzy create my-ds --template vite-react
# Select: TypeScript, all features enabled

Create JavaScript Storybook-Only Project

dezzy create storybook-ds --template storybook-only --yes

Validate DSL File

dezzy validate my-view.view.json

Contributing

Contributions are welcome! Please read the contributing guidelines.

License

MIT © Dan Delp

Links:

• GitHub Repository
• Issues
• NPM Package