Preflight first, then route
Designer-skill MCP is a keyless server from PyModel that gives a coding agent 15 tools for UI work. It routes a request to up to four of 50 references, then runs a 44-rule static detector through review_and_gate. It reports static results only and never claims rendered readiness.
The README tells agents to call get_preflight_brief before anything else. It returns the scope and verification contract. Then dispatch_intent maps a phrase such as make it pop or it feels off to design verbs and at most four references.
The registry name is io.github.PyModel/designer-skill-mcp, and the server needs Node 22 or newer. No API key is required, and the README tells setup prompts not to add one.
Route, know, check
- Route: dispatch_intent turns loose feedback into verbs and a short reading list.
- Know: 24 designer references plus 26 ux references on forms, collaboration, canvas, AI and i18n.
- Check: a 44-rule deterministic detector backs review_and_gate, which marks each required rule as ran, unsupported, unresolved or waived.
A gate that admits its limits
The gate is static only. Overall status is FAIL or NOT_VERIFIED, never a rendered-readiness pass, and rendered, accessibility and performance checks stay NOT_RUN until the host supplies evidence. For a rendered check, see accessibility audit practice.
Optional Niblet pairing
Niblet is a separate platform for real-screen references and licensed materials. Designer-skill works without it, and its find_ui_references tool is a text-only wrapper, not Niblet's image-delivering tool. Existing product tokens and real content win over reference aesthetics.
Use it with UiChemy
Designer-skill steers and statically checks the UI your agent writes. It does not touch WordPress. Bring a finished AI build in with UiChemy AI to WordPress, then refine it visually in Composer. Get Started at uichemy.com. Related reading: anti UI slop, form design and DESIGN.md.
Connect Designer Skill MCP: UI Guidance and a Static Gate to your AI client
claude mcp add designer-skill -- npx -y @pymodel/designer-skill-mcpCheck Node
The README requires Node 22 or newer. No API key is needed.
Add the server
In Claude Code, run
claude mcp add designer-skill -- npx -y @pymodel/designer-skill-mcp. The README says the same arguments work withcodex mcp add.Or use the canonical config
Paste the JSON above into your client's mcpServers config. For VS Code, use .vscode/mcp.json with a servers entry of type stdio. For Codex CLI, use a TOML entry in ~/.codex/config.toml.
Verify the tools
List the designer-skill server's tools and confirm get_preflight_brief, dispatch_intent and review_and_gate are present. The README says not to run a sample check.
Pin if needed
@latest tracks npm. The README says teams pin an exact version, such as 0.22.0, for repeatable setups.
Client configuration
{ "mcpServers": { "designer-skill": { "command": "npx", "args": ["-y", "@pymodel/designer-skill-mcp@latest"] } } }Endpoints and ports
io.github.PyModel/designer-skill-mcpPublished registry entry/mcpStreamable HTTP when started with --httpWhat you can do with it
- 15 MCP toolsPreflight, project context, design system router, references, commands, intent dispatch, direction records, palette seeds, a detector and a gate, plus three optional Niblet wrappers.
- 50 design references24 designer references covering type, color, motion, accessibility, anti-slop and redesign, plus 26 ux references, loaded only when a task needs them.
- Intent dispatchdispatch_intent maps phrases like production-ready or add some motion to design verbs and at most four references to read.
- 44-rule static detectordetect_antipatterns scans code deterministically and reports coverage, file hashes and gaps, and review_and_gate applies it per required rule.
- Honest verification statusStatic success is never treated as a UI pass. Rendered, accessibility and performance checks stay NOT_RUN until the host supplies evidence.
- Project context loadingload_project_context reads PRODUCT.md and DESIGN.md from the project, so guidance follows your own product decisions.
- No API keyThe designer core is keyless. Niblet tools are optional and use a NIBLET_TOKEN only if you choose to pair them.
- Plugins and HTTP modePlugin installs exist for several agents, and an HTTP mode serves Streamable HTTP at /mcp, with a root required for every bind.
Tools it exposes
get_preflight_brief
Returns the scope and verification contract. The README says to call it first.
load_project_context
Reads PRODUCT.md and DESIGN.md from the project, using an absolute cwd.
get_design_system
Returns the SKILL.md router and reference map.
get_reference
Loads one reference by name, either a designer reference or a ux reference.
anti_slop_checklist
Advisory style and truthful-content review guidance.
list_commands
Lists all design verbs with descriptions.
get_command
Returns help and reference names for one verb.
dispatch_intent
Maps a request to verbs and at most four references to read.
commit_design_direction
Validates a context-grounded direction record.
get_palette_seed
Returns an OKLCH brand seed for authorized new palette work.
detect_antipatterns
Runs the deterministic 44-rule static scan and reports coverage, file hashes and gaps.
review_and_gate
Applies the static gate per required rule and never claims rendered readiness.
find_ui_references
Optional text-only Niblet real-screen search or selected-screen metadata, using NIBLET_TOKEN.
get_design_reference
Optional Niblet structured reference for a web screen, using NIBLET_TOKEN.
find_ui_materials
Niblet materials routing guidance. Retrieval runs on the Niblet MCP package or hosted MCP.
Frequently asked questions
What is the designer-skill MCP server?
It is the @pymodel/designer-skill-mcp package from the PyModel/designer-skill repository. It gives coding agents 15 tools for UI work: routing requests to references, loading project context, detecting antipatterns and running a static review gate.
Does designer-skill need an API key?
No. The README states the designer core is keyless and tells setup prompts not to add a key. Only the optional Niblet wrappers use a NIBLET_TOKEN, and the server works without Niblet by continuing from local product evidence.
Does the review gate prove my UI is ready?
No. The gate is static only, so its overall status is FAIL or NOT_VERIFIED. Rendered, accessibility and performance checks stay NOT_RUN until the host supplies evidence. Treat it as supplemental evidence beside real browser testing.
Which agents can I use it with?
The README lists Claude Code, Codex, Cursor, VS Code and other MCP clients, and gives plugin routes for Claude Code, Codex and Cursor. It also documents Claude Desktop, Kilo Code, Open Code, Pythinker and Pi configs.
How is it different from the Niblet MCP?
Designer-skill handles routing, craft guidance and verification reporting. Niblet supplies real-screen references and licensed materials. The find_ui_references name on designer-skill is a text-only wrapper, so prefer the Niblet MCP when you need to inspect reference images.
Does it run remotely or locally?
The documented setup is local stdio through npx. The README also describes an HTTP mode, started with --http, that serves Streamable HTTP at /mcp. Every HTTP bind needs a root, and a non-loopback bind also needs a bearer token.
What license is designer-skill under?
MIT. The repository carries a LICENSE file and the README badge states MIT. The Niblet platform it can pair with is a separate product, so check its own terms for licensed materials.