designmd-cli

Install any DESIGN.md design system for AI coding agents in one command.

DESIGN.md is a plain-text file that tells your AI agent (Cursor, Claude Code, Codex, Webflow, Framer, Windsurf, Bolt, v0, Lovable) how to generate UI that looks intentional — not generic.

Browse all files → designmd.directory

Quick start

# Short names work — no need to know the full slug
npx designmd-cli install vercel
npx designmd-cli install cursor
npx designmd-cli install linear

A DESIGN.md file appears in your project. Then tell your agent:

"Follow the design system in DESIGN.md"

That's it. Your agent now generates UI that matches the visual direction.

What you get

$ npx designmd-cli install vercel

Fetching DESIGN.md for "vercel"...

✓ Installed → ./DESIGN.md (512 lines) (resolved to vercel-design-md)

─────────────────────────────────────────
Next step — tell your agent:

  "Follow the design system in DESIGN.md"

Works in Cursor, Claude Code, Codex, Webflow, Framer, Windsurf, Bolt, v0
─────────────────────────────────────────

The installed file contains the full design system: color tokens with hex values, typography scale, component specs with inline Tailwind code, spacing rules, layout patterns, and agent instructions.

Browse what's available

# List all files organized by category
npx designmd-cli list

# Search by style, brand, or use case
npx designmd-cli search "dark minimal"
npx designmd-cli search tailwind
npx designmd-cli search dashboard
npx designmd-cli search fintech

list output (excerpt):

DesignMD — 200+ files available  ·  designmd.directory

BRAND REFERENCES  (inspired by real products)
────────────────────────────────────────────────────
  stripe-design-md                              Stripe
  linear-design-md                              Linear
  vercel-design-md                              Vercel
  notion-design-md                              Notion
  github-design-md                              GitHub
  figma-design-md                               Figma
  supabase-design-md                            Supabase
  ...

  Short names work: designmd-cli install stripe

GENERIC TEMPLATES  (not brand-specific)
────────────────────────────────────────────────────
  minimal-saas-dashboard-designmd               Minimal SaaS Dashboard
  dark-terminal-app-designmd                    Dark Terminal App
  ai-chat-app-designmd                          AI Chat App
  analytics-dashboard-designmd                  Analytics Dashboard
  command-center-designmd                       Command Center
  ...

  Use the full slug: designmd-cli install minimal-saas-dashboard-designmd

Popular files

Brand references

Based on publicly observable design signals from real products. Not affiliated or endorsed.

| Short name | Full slug | Style | |------------|-----------|-------| | stripe | stripe-design-md | Clean, fintech, indigo on white | | linear | linear-design-md | Dark, compact, keyboard-first | | vercel | vercel-design-md | Monochrome, Geist, developer-native | | notion | notion-design-md | Document-native, warm, editable | | github | github-design-md | Utility-first, Primer design system | | figma | figma-design-md | Creative tools, canvas-first | | supabase | supabase-design-md | Open-source dark green | | resend | resend-design-md | Minimal, developer email | | anthropic | anthropic-design-md | Clean, trustworthy, AI-native | | openai | openai-design-md | Enterprise AI, measured, dark |

Generic templates

Design patterns not tied to any brand — use as a starting point.

| Slug | Best for | |------|----------| | minimal-saas-dashboard-designmd | Any B2B or SaaS product | | dark-terminal-app-designmd | Dev tools, CLI wrappers, terminals | | ai-chat-app-designmd | Conversational AI products | | analytics-dashboard-designmd | Data-heavy dashboards | | command-center-designmd | Raycast/Linear-style command palette | | landing-page-designmd | Marketing pages | | admin-panel-designmd | Internal tools and back-office | | developer-docs-designmd | Documentation sites | | onboarding-flow-designmd | Multi-step user onboarding | | finance-app-designmd | Fintech with green/trust palette |

→ Browse all 200+ files at designmd.directory

All commands

# Install by short name (auto-resolves to full slug)
npx designmd-cli install stripe

# Install by full slug
npx designmd-cli install minimal-saas-dashboard-designmd

# Install to a custom path
npx designmd-cli install linear --path ./.cursor/design-system.md

# List all available files (categorized)
npx designmd-cli list

# Search by keyword
npx designmd-cli search "dark minimal"
npx designmd-cli search dashboard
npx designmd-cli search cursor

How to connect to your agent

Cursor

Place DESIGN.md in your project root. Reference it in chat:

"Follow the design system in DESIGN.md when generating UI"

Or add to .cursor/rules:

Follow the design system in DESIGN.md for all UI work.

Claude Code

Place DESIGN.md in your project root. Reference in CLAUDE.md:

## Design System
Follow the design system defined in DESIGN.md for all UI components.

Codex

Paste the DESIGN.md contents into your system prompt, or reference it:

Follow the design system in DESIGN.md. Apply color tokens, typography, and component specs exactly.

Windsurf

Add to .windsurfrules:

Follow the design system in DESIGN.md for all frontend work.

Webflow AI

Paste the DESIGN.md content into the AI prompt field or use it as a design reference when generating sections.

Framer AI

Use DESIGN.md as your design context — paste it into the AI generation prompt for consistent visual output.

Bolt / v0 / Lovable

Paste the contents of DESIGN.md into the system prompt field when starting your project.

Install globally

npm install -g designmd-cli
designmd-cli install stripe
designmd-cli list

Environment

Override the API endpoint (for local development or self-hosting):

DESIGNMD_API=http://localhost:3001/api npx designmd-cli list

License

MIT — designmd.directory