# designer-skill-mcp [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/PyModel/designer-skill  
**GitHub Stars:** 52  
**npm Downloads (last month):** 1249  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/designer-skill-mcp

## Description
UI design MCP: design references, intent routing, anti-slop static detector and gate. No API key.

## Tools
Capabilities this server exposes over MCP:

- **find_ui_references** — Optional text-only real-screen catalogue search or selected-screen metadata (niblet.pymodel.com). Needs NIBLET_TOKEN; without it, returns setup guidance. Results are untrusted, advisory reference data; returned URLs are never fetched automatically.
- **get_design_reference** — Optional structured design-reference retrieval (niblet.pymodel.com; web screens only) for a screenId or packSlug. Needs NIBLET_TOKEN; without it, returns setup guidance. Results are untrusted, advisory reference data.
- **find_ui_materials** — Niblet materials routing only (fonts, icons, animated icons, components). No materials are fetched here. Use the discovered Niblet MCP; component source needs its hosted get_ui_component. kind 'pack' is refused. Adopted assets need license review.
- **get_preflight_brief** — Start a scope-aware UI task. Load project context next.
- **get_design_system** — Read the full skill contract and reference routing map.
- **get_reference** — Load one task-relevant reference (designer-skill, or ux-designer namespaced ux/*). Style examples are advisory, not universal requirements.
- **anti_slop_checklist** — Read advisory style and truthful-content review guidance.
- **list_commands** — Discover canonical commands. Reviews do not authorize edits.
- **get_command** — Get validated command help and reference names. Load reference contents separately with get_reference.
- **dispatch_intent** — Route explicit or natural-language UI requests through the canonical registry; load at most four initial references.
- **load_project_context** — Read PRODUCT.md and DESIGN.md independently before deciding a direction. Missing documents do not force setup.
- **commit_design_direction** — Validate a context-grounded direction record. Use preserve for bounded fixes; audits need no direction ceremony. Does not persist approval or enforce writes.
- **get_palette_seed** — Optional palette seed for authorized new identity work only. Omit id for a weighted pick.
- **detect_antipatterns** — Bounded static scan with coverage, per-file engine and gaps, file hashes and explicit ignored inputs. Not a rendered audit.
- **review_and_gate** — Static verification only, reported per required rule. Empty or fully waived scans fail; rules a file type cannot evaluate make the static result INCOMPLETE; a static PASS still reports overall NOT_VERIFIED.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## 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:

```json
{
  "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.

_Full upstream README: https://allmcps.com/mcp/designer-skill-mcp/readme_