@uxtopianai/design-tool-mcp

An MCP server that gives Claude Code access to the uxtopian Design Tool — opinionated design systems for AI-native products.

Every product shipping from Claude Code looks the same because everyone starts from the same defaults. This tool gives you a real design POV in one command.

What you get

• 6 styles: Minimalist, Editorial, Warm, Brutalist, Glass, Expressive
• 9 page templates: Landing, Dashboard, Tool, Explorer, and 5 AI patterns (Chat, Search, Approval, Generator, Diagnostic)
• 4 color modes: Light, Tinted, Dark, Colored
• Two files written to your project:
  • globals.css — complete OKLCH design tokens
  • CLAUDE.md — natural-language design rules for Claude to follow

AI pattern pages include interaction-specific behavioral constraints in the CLAUDE.md (streaming, typing indicators, disabled states, etc.) — validated to produce +72% better AI-generated UI than style-only rules.

Install

npm install -g @uxtopianai/design-tool-mcp

Then add it to your Claude Code MCP config (~/.claude/mcp_config.json or equivalent):

{
  "mcpServers": {
    "uxtopian-design-tool": {
      "command": "uxtopian-design-tool"
    }
  }
}

Usage

In Claude Code, ask:

"Use uxtopian design-tool to apply the editorial style for a chat interface"

Claude will call apply_design_system and write globals.css + CLAUDE.md into your project.

Or explore first:

"What design styles are available in uxtopian design-tool?"

Claude calls list_options and shows you styles, pages, and modes.

Tools

list_options

Returns all available styles, pages, and modes. Use this to see what's available before applying.

Returns: styles[], pages[], modes[], notes[]

apply_design_system

Generates globals.css + CLAUDE.md in the current directory (or a specified output directory).

Parameters:

| Param | Type | Required | Default | Description | |---|---|---|---|---| | style | string | yes | — | One of: minimalist, editorial, warm, brutalist, glassmorphism, expressive | | page | string | yes | — | One of: landing, dashboard, tool, explorer, chat, search, approval, generation, diagnostic | | mode | string | no | "dark" | One of: light, tinted, dark, colored | | brandColor | string | no | — | Optional hex or oklch brand color (e.g. "#E8456B") | | outputDir | string | no | "." | Directory to write files to |

Returns: paths + bytes written, summary of what was applied

Example

> Apply the brutalist style with a chat interface, use #FF6B35 as brand color

→ Claude calls apply_design_system({
    style: "brutalist",
    page: "chat",
    brandColor: "#FF6B35"
  })

→ Writes:
    ./globals.css (867 bytes)
    ./CLAUDE.md (10,438 bytes)

→ Summary: Applied Brutalist style with Chat page preset in dark mode.
  Interaction constraints included in CLAUDE.md.

How it works

The tool ships with the same data and generation logic that powers uxtopian.com/design-tool. Styles define fixed/variable/forbidden properties. AI pattern pages append interaction-specific behavioral rules to the CLAUDE.md export.

The result is a complete design system Claude can reason about — not just color tokens, but the rules for how to use them.

License

MIT — Ian Alexander

Links

• Design Tool (browser)
• GitHub
• uxtopian.com