Designer Skill MCP

What designer-skill-mcp does

The designer-skill-mcp MCP server provides a structured workflow for UI design tasks. It starts with a preflight brief, can load PRODUCT.md and DESIGN.md from an absolute project directory, and exposes a design-system router with named references. Those references cover areas such as typography, color, motion, accessibility, forms, collaboration, canvas interfaces, AI interfaces, internationalization, redesign, and anti-slop review.

Natural-language requests can be passed to dispatch_intent, which returns applicable design verbs and no more than four references to inspect. The server also provides command descriptions, reference lookup, palette seeds for authorized new palette work, and validation for a context-grounded design direction record.

How it works

A typical flow is to call get_preflight_brief first, load project context when available, route the request with dispatch_intent, and read only the relevant references. The host or agent then performs the implementation. Afterward, detect_antipatterns or review_and_gate can provide static evidence about the result.

The designer-skill-mcp MCP server does not perform the implementation itself. Its gate evaluates required static rules and reports states such as ran, unsupported, unresolved, or waived. A successful static result is not a claim that the interface is ready: rendered inspection, functional testing, accessibility checks, and performance checks must be completed by the host with appropriate evidence.

Optional Niblet-related tools can search text-only real-screen metadata, return structured web-screen references, or provide routing guidance for UI materials. Image inspection and material retrieval belong to the separately configured Niblet MCP package or hosted MCP. The catalogue wrappers in this server return metadata or guidance rather than serving the reference images themselves.

Setup and configuration

Node.js 22 or newer is required. The standard setup runs the npm package through stdio:

{
  "mcpServers": {
    "designer-skill": {
      "command": "npx",
      "args": ["-y", "@pymodel/designer-skill-mcp@latest"]
    }
  }
}

No API key is required for the core server. Teams can replace @latest with a pinned package version, and a local checkout can run the built dist/index.js file with Node. The repository also documents integrations for Claude Code, Codex, Cursor, VS Code, Claude Desktop, Pythinker, and other MCP clients. The companion designer-skill skill is installed separately from the MCP package.

Niblet access is optional. Tools that use the Niblet catalogue accept NIBLET_TOKEN when that deployment requires it; local project evidence remains the fallback when Niblet is not configured.

Tools and capabilities

The designer-skill-mcp MCP server exposes tools for:

• Establishing scope with get_preflight_brief and reading project files with load_project_context.
• Finding design commands and references through get_design_system, list_commands, get_command, and get_reference.
• Routing requests with dispatch_intent and validating a direction with commit_design_direction.
• Generating an OKLCH palette seed with get_palette_seed for authorized new palettes.
• Running the 44-rule static detector through detect_antipatterns and review_and_gate.
• Searching optional Niblet screen and materials resources with find_ui_references, get_design_reference, and find_ui_materials.

Limitations and notes

Static results do not replace rendered or interactive verification. The host retains responsibility for authorized file and dependency changes, browser or native interaction, visual inspection, accessibility evidence, and performance checks. Existing product tokens, components, and real content should take precedence over the style of a retrieved reference. Reference or component retrieval does not authorize dependency installation or source edits.

The server's find_ui_references wrapper is text-only and should not be treated as the image-delivering Niblet tool. Do not infer Niblet connectivity merely because the wrapper is installed, and do not call both providers for the same question. The core designer-skill-mcp workflow is keyless; only optional Niblet deployments may require a token.