Design System Selector

Break free from the Tailwind/shadcn monoculture. Answer a short questionnaire about your project and get a curated design system recommendation — complete with install commands, tradeoff notes, and MCP config for your AI editor.

Install

# Run directly (no install needed)
npx design-system-selector

# Or install globally
npm install -g design-system-selector

# Or via Homebrew
brew tap TheLostByGass/tap
brew install design-system-selector

Requires Node.js 20 or later.

AI Matching

AI matching is provided through the hosted Design System Selector API proxy.

• Users do not need to configure ANTHROPIC_API_KEY
• The CLI sends questionnaire preferences to the backend and receives ranked results
• If the API is unavailable, the CLI automatically falls back to static matching

For local backend testing, maintainers can override the API base URL:

DESIGN_SYSTEM_SELECTOR_API_URL=http://localhost:8787 npx design-system-selector

Backend deployment guide: docs/vercel-backend.md

Telemetry

Optional anonymous product telemetry can be sent to PostHog (via the hosted backend proxy) to measure real CLI usage (runs, match/scaffold flows, and feature usage). The CLI never sends the free-text projectBrief or hardConstraints answers.

By default, telemetry posts to:

$DESIGN_SYSTEM_SELECTOR_API_URL/v1/telemetry

If DESIGN_SYSTEM_SELECTOR_API_URL is not set, the built-in default backend URL is used.

Override telemetry endpoint (for local backend/self-hosted API):

DESIGN_SYSTEM_SELECTOR_TELEMETRY_URL=http://localhost:3000/v1/telemetry npx design-system-selector

Disable telemetry at any time:

DO_NOT_TRACK=1 npx design-system-selector
# or
DESIGN_SYSTEM_SELECTOR_TELEMETRY=0 npx design-system-selector

Telemetry is automatically disabled in CI (CI=true).

You can also manage telemetry preference from the CLI:

design-system-selector telemetry status
design-system-selector telemetry disable
design-system-selector telemetry enable

How It Works

The CLI asks a short set of questions about your project, including:

1. Visual style — minimalist, expressive, corporate, or playful
2. Accessibility needs — critical (AAA + EU compliance), important (AA), or standard
3. Opinion level — opinionated, balanced, or headless/unstyled
4. Team experience — beginner, intermediate, or advanced
5. Color preference — neutral, vibrant, monochrome, or custom
6. Framework + tooling — React/Vue/Svelte/etc, plus framework flavor when relevant
7. Project type — dashboard, marketing, internal tool, content, e-commerce, or custom
8. Project brief — one-sentence description of what you're building and who it serves
9. Hard constraints (optional) — timeline, compliance, must-use tech, performance targets

Based on your answers, it recommends a primary design system plus two alternatives. Each recommendation includes:

• Why it was matched to your preferences
• Accessibility rating (AA/AAA)
• Tradeoffs to be aware of
• One-line install command
• MCP config snippet for AI-assisted development

Design Systems

10 systems are evaluated, covering a range of philosophies and complexity levels:

| System | Philosophy | Accessibility | Components | | ----------------- | ---------------------- | ------------- | ------------------ | | Radix UI + Themes | Minimalist | AAA | 30 | | Chakra UI | Expressive, Playful | AA | 60 | | Mantine | Corporate, Minimalist | AA | 120 | | Ant Design | Corporate | AA | 150 | | Park UI | Minimalist, Expressive | AA | 40 | | Ark UI | Minimalist | AAA | 35 | | NextUI (HeroUI) | Playful, Expressive | AA | 50 | | Headless UI | Minimalist | AAA | 12 | | Open Props | Minimalist, Expressive | AA | 0 (tokens only) | | Panda CSS | Minimalist, Corporate | AA | 0 (styling engine) |

MCP Integration

Use --mcp-only to get a machine-readable MCP server config for your top recommendation:

design-system-selector --mcp-only

This outputs JSON you can paste directly into your editor's MCP configuration (Claude Code, Cursor, etc.).

Project Scaffolding

After picking a design system, the CLI offers to scaffold a starter project with your chosen system pre-configured — including dependencies, example components, and recommended project structure.

CLI Options

-h, --help       Show help
-v, --version    Show version
    --mcp-only   Output MCP config JSON (skip interactive UI)
    telemetry    Manage telemetry settings

Contributing

git clone https://github.com/TheLostByGass/design-system-selector.git
cd design-system-selector
npm install
npm run dev          # Run in development
npm test             # Run tests
npm run build        # Lint, typecheck, test, and build

License

MIT