How do I connect The Designer MCP Server to Claude?

Run `claude mcp add the-designer -- npx -y @modelcontextprotocol/inspector node dist/index.js` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.

Is The Designer MCP Server free?

The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.

What can The Designer MCP Server do?

The Designer MCP Server documents 24 tools to the agent, including anti_pattern_check, brand_fetch_design_md, brand_list. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.

The Designer

Unclaimed

by 1999AZZAR

MCP server for production-grade UI design — 27 tools covering design rules, OKLCH tokens with auto dark mode, WCAG 2.1 accessibility audit, React/Vue/HTML component output, vanilla CSS/SCSS/CSS Modules generation, anime.js v4 motion, anti-slop quality gates, and 328+ brand references.

Set up this server

Compare servers My Stack

01 / Choose your client

02 / Before you connect

Authentication is not specified. Check the project instructions before connecting.

Install the runtime required by the project and make it available to your client.

Project instructionsEnvironment variable names (optional)

Use names from the project instructions, separated by commas. Enter names only, never secret values.

03 / Add the configuration

Source: generated from public install instructions

claude mcp add --transport stdio 'the-designer' -- 'npx' '-y' '@modelcontextprotocol/inspector' 'node' 'dist/index.js'

Run in your terminal after replacing any placeholders.

04 / Check it in your client

Open your client’s MCP settings and confirm the server connects and lists its tools. A copied configuration does not confirm a working connection.

accessibilityaianimejsclaudecssdark-modedesign-systemgeminillmmcp

Is this your MCP server?

This listing was auto-indexed from the public record. Claim it to edit the page, set compatibility and unlock growth tools. Takes under two minutes.

Claim this server

Security profile

Claimed and verified servers get a weekly static scan that shows what the code can reach: external services, environment variables, shell commands, agent configuration folders, plus any dependencies with known advisories. Claim this listing to get one. How the security profile works

24 of 24 tools

Documented tools (24)

From project documentation. A server handshake does not verify each tool’s description or behavior.

anti_pattern_check

Run 31-gate slop test on HTML/CSS

brand_fetch_design_md

Download DESIGN.md for a real brand

brand_list

List all 328+ brands by category

build_custom_tokens

Build custom OKLCH token system from paper/accent/font values — also emits dark mode derivation

detect_genre

Classify brief into editorial / modern-minimal / atmospheric / playful

evaluate_style

Score 17 design systems against product context

export_project

Full project scaffold (config + HTML + components)

generate_8state_component

Standalone HTML preview with all 8 interactive states — animated via anime.js spring physics

generate_motion_snippet

Generate a ready-to-paste motion.dev or anime.js snippet matched to the current design style's physics and easing. Supports 8 categories: entrance, micro, stagger, scroll, loader, transition, counter, typewriter. Every snippet includes a prefers-reduced-motion guard.

generate_palette_variants

Light/dark/high-contrast variants from hex colors

generate_rules

Generate design rules for style + palette + archetype/hybrid

generate_tailwind_config

Generate ready-to-use tailwind.config.js

generate_template

Full HTML starter page — ships with anime.js v3 animations

generate_tokens

Generate complete OKLCH token system. Returns css (light :root), fullcss (light + dark @media + [data-theme="dark"] overrides), darkcss, darktokens

get_cross_cutting_rules

Get standalone rules (a11y, motion, icons, tokens, responsive)

get_reference

Pull full content of any reference doc

list_installed_skills

Detect installed skill submodules

list_options

List all available systems, palettes, archetypes, hybrids

list_themes

List all 16 themes with OKLCH values, fonts, axis metadata

palette_convert

Convert palette JSON to CSS / Tailwind / SCSS / Figma / Android / Swift

palette_fetch

Fetch live palettes from Color Hunt

pre_flight_scan

Scan existing project for framework, fonts, palette, motion libs

self_critique

Score output on 6 quality axes (P-H-E-S-R-V) — anything < 3 triggers revision

validate_combo

Validate style + palette + hybrid combo

Tool change history

Compared across complete checks of the same configuration. Tools were listed, not invoked. Input-schema changes are not measured here.

No complete tool checks yet.

FAQ

Questions about The Designer MCP Server

How do I connect The Designer MCP Server to Claude?: Run `claude mcp add the-designer -- npx -y @modelcontextprotocol/inspector node dist/index.js` in Claude Code, or add the same command and arguments under mcpServers in Cursor's mcp.json or Claude Desktop's claude_desktop_config.json, then restart the client. The blocks above are ready to paste.
Is The Designer MCP Server free?: The listed licence is MIT. Check the upstream terms for permitted use and commercial requirements; a public repository does not by itself mean the software is free or open source. Connected APIs and hosted services may have separate charges.
What can The Designer MCP Server do?: The Designer MCP Server documents 24 tools to the agent, including anti_pattern_check, brand_fetch_design_md, brand_list. The descriptions above come from project documentation. A live handshake does not test individual tool behavior.