designrails

CLI tool to quickly set up MCP servers for AI-powered UX design assistance in your coding environment.

What is Design Rails?

Design Rails provides an MCP (Model Context Protocol) server that gives AI coding tools access to UX design expertise. The CLI tool helps you configure this server in your preferred development environment with a single command.

Features

• One-Command Setup - Configure MCP servers with a single command
• Multi-Tool Support - Works with Claude Code, Cursor, and VS Code
• Interactive or Direct - Choose your tool interactively or use flags for automation
• Smart Configuration - Automatically creates config files and directories as needed
• Safe Updates - Prompts before overwriting existing configurations

Installation

No installation required! Use with npx, pnpm dlx, yarn dlx, or bun x:

# npm
npx designrails@latest setup

# pnpm
pnpm dlx designrails@latest setup

# yarn
yarn dlx designrails@latest setup

# bun
bunx --bun designrails@latest setup

Or install globally:

npm install -g designrails

Usage

Interactive Mode

Run without flags for a guided setup experience:

npx designrails@latest setup

You'll be prompted to:

1. Select your AI coding tool:

   • Claude Code
   • Cursor
   • VS Code

2. Update instructions file:

   • Optionally add Design Rails guidance to your tool's instruction file:
     • Claude Code: CLAUDE.md
     • Cursor: .cursorrules
     • VS Code: .github/copilot-instructions.md

3. Choose design context folder location:

   • Default: design-context (in your project root)
   • Or specify a custom path

Direct Mode with Flags

Skip the tool selection prompt by specifying your tool directly. You'll still be prompted for instructions file and design context folder preferences:

# Set up Claude Code
npx designrails@latest setup --claude
npx designrails@latest setup --claude-code

# Set up Cursor
npx designrails@latest setup --cursor

# Set up VS Code
npx designrails@latest setup --vscode
npx designrails@latest setup --vs-code

What It Does

Both interactive and direct modes will:

1. Ask if you want to update your tool's instruction file with Design Rails guidance
2. Ask where to create the design context folder (default: ./design-context)
3. Create the MCP server configuration:
   • Claude Code: .mcp.json in your project directory
   • Cursor: .cursor/mcp.json in your project directory
   • VS Code: .vscode/mcp.json in your project directory

The only difference between modes:

• Interactive: Shows intro and asks which tool to set up
• Direct: Skips tool selection (you already specified it with a flag)

All configurations point to https://designrails.com/api/mcp as the MCP server URL.

Example Output

Interactive Mode:

Design Rails Setup
Give your AI coding tool access to UX design expertise

This setup will:
  1. Connect your AI tool to the Design Rails server
  2. Create a folder for your product's design guidelines
  3. Help you populate those guidelines to get started

? Which tool would you like to set up? Claude Code

Design Context Folder
This folder will store your product's design guidelines:
  • Brand colors, typography, spacing rules
  • Common UI patterns and component usage
  • Accessibility requirements and UX principles
Your AI tool will reference these files when building UI features.

? Where should we create this folder? design-context
✓ Created design context folder: design-context
You'll populate this folder in the next step.

AI Tool Instructions
We can add guidance to CLAUDE.md that tells your AI:
  • When to consult Design Rails for UI decisions
  • Where to find your design context files
  • How to maintain design system consistency
This helps your AI make better UX decisions automatically.

? Add Design Rails guidance to CLAUDE.md? Yes
✓ Updated CLAUDE.md with Design Rails guidance

Design Context Folder
This folder will store your product's design guidelines:
  • Brand colors, typography, spacing rules
  • Common UI patterns and component usage
  • Accessibility requirements and UX principles
Your AI tool will reference these files when building UI features.

? Where should we create this folder? design-context

✓ Created design context folder: design-context

✓ Claude Code configuration updated!
ℹ Configuration file: .mcp.json

What's Next:
  1. Restart Claude Code so it loads Design Rails
  2. Run /mcp to see the Design Rails server listed
  3. Sign in to Design Rails when prompted
  4. Once authenticated, paste this prompt to populate your design context:

 Help me initialize design context using the Design Rails MCP

✓ Setup complete!

Direct Mode (with --claude flag):

Design Rails Setup
Give your AI coding tool access to UX design expertise

AI Tool Instructions
We can add guidance to CLAUDE.md that tells your AI:
  • When to consult Design Rails for UI decisions
  • Where to find your design context files
  • How to maintain design system consistency
This helps your AI make better UX decisions automatically.

? Add Design Rails guidance to CLAUDE.md? Yes
✓ Updated CLAUDE.md with Design Rails guidance

Design Context Folder
This folder will store your product's design guidelines:
  • Brand colors, typography, spacing rules
  • Common UI patterns and component usage
  • Accessibility requirements and UX principles
Your AI tool will reference these files when building UI features.

? Where should we create this folder? design-context

✓ Created design context folder: design-context

✓ Claude Code configuration updated!
ℹ Configuration file: .mcp.json

What's Next:
  1. Restart Claude Code so it loads Design Rails
  2. Run /mcp to see the Design Rails server listed
  3. Sign in to Design Rails when prompted
  4. Once authenticated, paste this prompt to populate your design context:

 Help me initialize design context using the Design Rails MCP

✓ Setup complete!

Configuration Details

Creates a JSON configuration like:

{
  "mcpServers": {
    "uxmcp": {
      "url": "https://designrails.com"
    }
  }
}

Development

This package is part of the UXMCP monorepo.

Local Development

# Install dependencies
pnpm install

# Run in development mode
pnpm --filter designrails dev

# Build
pnpm --filter designrails build

# Type checking
pnpm --filter designrails check-types

Project Structure

apps/cli/
├── src/
│   ├── commands/
│   │   └── mcp.ts          # MCP setup logic for all tools
│   ├── utils/
│   │   └── logger.ts       # Colored console output utilities
│   └── index.ts            # Main CLI entry point (Commander.js)
├── dist/                   # Compiled output
├── package.json
├── tsconfig.json
└── README.md

Tech Stack

• Framework: Commander.js for CLI structure
• Prompts: Inquirer.js for interactive questions
• Styling: Chalk for colored terminal output
• Loading: Ora for spinners
• Language: TypeScript

Options

• --version, -v - Show version number
• --help, -h - Show help information

License

MIT