The Designer MCP

The Designer MCP

A Model Context Protocol (MCP) server combining three design capabilities into a single endpoint: UI design rules generation, color palette hunting, and real brand design reference fetching (328+ brands).

Table of Contents

• Features
• Tools
• Installation
• Usage
• Configuration
• Configuring with AI Assistants

Features

• Design Rules Generator: Generate production-ready design rules from 17 design systems (Material, Ant, Carbon, Glass, etc.) + 4 palette modes + 5 archetypes + hybrid combos
• Color Palette Hunter: Fetch live trending, popular, or themed palettes from Color Hunt with format conversion (CSS, Tailwind, SCSS, Figma, Android XML, Swift)
• Brand Design References: Access DESIGN.md files for 328+ real-world brands (Stripe, Vercel, Tesla, Claude, Spotify, etc.) grouped by category
• Reference Library: Built-in reference docs for design systems, accessibility, design tokens, and more

Tools

Installation

Manual Installation

# Clone the repository
git clone https://github.com/1999AZZAR/the-designer.git
cd the-designer

# Install dependencies
npm install

# Build the project
npm run build

Requirements

• Node.js >= 18

Usage

Starting the Server

# Start the server using stdio (default mode)
npm start

Testing with MCP Inspector

npx @modelcontextprotocol/inspector node dist/index.js

Available NPM Scripts

npm run build   # Build the TypeScript project
npm start       # Start the MCP server

Architecture

All tooling is implemented in TypeScript within the MCP server. The skills/ directories are git submodules kept for reference and standalone script usage, but the MCP does not shell out to them at runtime.

src/
  index.ts            # MCP server entry, tool routing
  rules.ts            # Design systems, palettes, archetypes, hybrids, rule generation
  palette.ts          # Color Hunt palette fetcher with caching
  palette-convert.ts  # Format converter (CSS, Tailwind, SCSS, Figma, Android, Swift)

Configuration

Environment Variables

Configuring with AI Assistants

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "the-designer": {
      "command": "node",
      "args": ["/path/to/the-designer/dist/index.js"],
      "env": {}
    }
  }
}

Roo Code / Cline

Add to your MCP settings file:

{
  "mcpServers": {
    "the-designer": {
      "command": "node",
      "args": ["/path/to/the-designer/dist/index.js"],
      "env": {}
    }
  }
}

Brand Categories

License

MIT