The Designer

The Designer MCP

[](https://choosealicense.com/licenses/mit/) [](https://www.typescriptlang.org/)

A Design-Theory-as-a-Service Model Context Protocol (MCP) server for production-grade UI design. Unlike standard code-retrieval MCPs, the-designer codifies subjective design principles—perceptual color math (OKLCH), motion physics, typographic scaling, and accessibility—into executable algorithms with strict anti-slop quality gates.

Featuring 17 design systems, 328+ brand references, anime.js v4 motion integration, WCAG 2.1 accessibility auditing, React/Vue component output, and framework-agnostic CSS generation.

Table of Contents

• [Features](#features)
• [Tools](#tools)
• [Motion Design](#motion-design)
• [Examples](#examples)
• [Installation](#installation)
• [Usage](#usage)
• [Architecture](#architecture)
• [Anti-Slop Design Philosophy](#anti-slop-design-philosophy)
• [Configuration](#configuration)
• [Configuring with AI Assistants](#configuring-with-ai-assistants)
• [License](#license)

Features

• Anti-Slop Quality Gates — 31-gate slop test + 6-axis self-critique (P-H-E-S-R-V). Rejects anything = 18

Usage

npm start

npx @modelcontextprotocol/inspector node dist/index.js

Architecture

the-designer operates on a dual-architecture. An MCP server on its own is just an API; by pairing the MCP with two companion agent skills, the AI gets both the tools (the MCP) and the instruction manual (the skills).

• ui-designer skill: Provides the design intelligence, heuristics, and brand context so the AI knows what to ask the MCP to generate.
• color-palette-hunter skill: Handles external palette sourcing and feeds them into the OKLCH token engine.

src/
  index.ts              # MCP server entry, tool routing (27 tools)
  rules.ts              # 17 design systems, palettes, archetypes, hybrids
  anti-patterns.ts      # 31-gate slop test + 6-axis self-critique
  a11y-audit.ts         # 25-check WCAG 2.1 accessibility auditor (no deps, regex-only)
  tokens.ts             # 16 curated themes, OKLCH token generation, dark mode derivation
  css-output.ts         # vanilla CSS / CSS Modules / SCSS / css-variables-only generator
  anime-motion.ts       # anime.js v4 integration — style-aware presets, CDN helper, snippet generator
  components.ts         # Component library — HTML/React TSX/Vue 3 SFC output
  components-8state.ts  # 8-state component demo generator (anime.js micro-interactions)
  preflight.ts          # Project context scanner (framework, fonts, palette, motion)
  evaluate.ts           # Style scoring engine
  palette.ts            # Color Hunt palette fetcher
  palette-convert.ts    # Format converter
  palette-variants.ts   # Light/dark/high-contrast variant generator
  templates.ts          # HTML template generator (anime.js baked in)
  tailwind-config.ts    # Tailwind config generator
  export.ts             # Project scaffold exporter
skills/
  ui-designer/          # Reference docs + genre files (git submodule)
  color-palette-hunter/ # Palette CLI scripts (git submodule)

Anti-Slop Design Philosophy

• Locked tokens — every color/font references a named CSS variable, never inline values
• No fabricated content — real metrics or labeled placeholders only
• No re-drawn chrome — no fake browser bars, phone frames, or code window chrome
• Typography purity — headings always roman, no italic display faces
• Structural variety — different briefs produce structurally different pages
• Mobile-responsiveness hard floor — 320/375/414/768px, overflow-x: clip, minmax(0, 1fr), no two-line clickable text
• OKLCH-first — all new tokens defined in OKLCH for perceptual uniformity
• Motion with restraint — animations are style-calibrated, spring-physics-grounded, and always gated on prefers-reduced-motion

Configuration

| Variable | Default | Description | |----------|---------|-------------| | UI_DESIGNER_SKILL_PATH | skills/ui-designer | Path to the ui-designer skill references | | COLOR_PALETTE_HUNTER_PATH | skills/color-palette-hunter | Path to the color palette hunter skill |

Configuring with AI Assistants

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

License

[MIT](LICENSE)

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: 1999AZZAR
• Source: 1999AZZAR/the-designer
• License: MIT

Install and usage instructions live in the source repository linked above.