How do I use the-designer?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@the-designer get the design reference for Stripe" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

the-designer

by 1999AZZAR

Overview Schema Related Servers Score Discussions

TypeScript

Remote

The Designer MCP

MIT License TypeScript

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).

Related MCP server: Chuk Design System

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

Tool	Description
`generate_rules`	Generate design rules for a style + palette + optional archetype/hybrid
`list_options`	List all available design systems, palettes, archetypes, and valid hybrid combos
`validate_combo`	Validate a style + palette + optional hybrid combination before generating
`get_reference`	Return full content of a reference document (e.g. `ant-design`, `design-tokens`)
`palette_fetch`	Fetch live color palettes from Color Hunt (trending/popular/random/theme/query)
`palette_convert`	Convert palette JSON into CSS, Tailwind, SCSS, Figma tokens, Android XML, or Swift
`brand_fetch_design_md`	Download and return the DESIGN.md for a real brand
`brand_list`	List all 328+ supported brands grouped by category

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

Variable	Default	Description
`UI_DESIGNER_SKILL_PATH`	`skills/ui-designer`	Path to the ui-designer skill references directory

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

Category	Brands
Productivity SaaS	Notion, Airtable, Cal, Superhuman, Miro, Intercom, Zapier, Linear
Developer Tools	Vercel, Supabase, Cursor, Raycast, Warp, PostHog, Sentry, Expo, Figma, Webflow
AI / ML	Claude, Cohere, Mistral, xAI, MiniMax, Replicate, RunwayML, ElevenLabs, Ollama
Fintech	Stripe, Coinbase, Binance, Kraken, Revolut, Wise, Mastercard
Design / Creative	Figma, Framer, Clay, Lovable, Webflow, Linear
Ecommerce	Shopify, Nike, Starbucks
Media / Consumer	Spotify, Discord, Slack, Pinterest, The Verge, Wired
Automotive / Luxury	Tesla, SpaceX, Ferrari, Bugatti, Lamborghini, BMW, Vodafone
Legacy / Archival	Apple, Dell (1996), HP, Nintendo (2001)

License

MIT

This server cannot be installed

license - permissive license

quality - not tested

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

Lightport: Open-Sourcing Glama's AI Gateway
By punkpeye on April 27, 2026.
open source
OpenAI
Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/1999AZZAR/the-designer'

If you have feedback or need assistance with the MCP directory API, please join our Discord server