designer-skill-mcp — Claude Code MCP server: setup and overview
MCP server equipping AI coding agents with UI guidance, intent mapping, and static design gates. Runs locally without external API credentials.
claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcpWhat designer-skill-mcp does
The server provides 15 tools tailored for frontend tasks. It starts with get_preflight_brief to collect context. Next, dispatch_intent translates informal critique into concrete design actions. The bundle holds 50 reference guides. They cover core typography alongside patterns for forms or canvas views.
Before shipping UI code, review_and_gate executes 44 static rules against markup. Clean static checks do not guarantee visual perfection. The host client still handles rendered visual inspection.
Execution runs locally over stdio. The server requires Node.js 22 or newer. No vendor credentials or keys are needed.
What it helps with
- translate ambiguous UI critique into explicit visual actions
- audit interface markup against 44 static design rules
- retrieve targeted guidance on contrast, typography, and accessibility
- inspect layout patterns for forms and responsive dashboards
Example prompts for the agent
- Run
get_preflight_briefon this settings page before refactoring styles. - Use
dispatch_intentto translate 'make the navigation look cleaner' into concrete design rules. - Audit this modal dialog markup using
review_and_gate.
How to install designer-skill-mcp
Platform CLI
claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcpPlatform CLI
codex mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcpConfig file
{
"mcpServers": {
"designer-skill-mcp": {
"command": "npx",
"args": [
"-y",
"@pymodel/designer-skill-mcp"
]
}
}
}Config file
{
"servers": {
"designer-skill-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@pymodel/designer-skill-mcp"
]
}
}
}Platform CLI
gemini mcp add designer-skill-mcp npx -y @pymodel/designer-skill-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about designer-skill-mcp
How do I install designer-skill-mcp in Claude Code?
Run claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcp in your terminal.
What does designer-skill-mcp do?
It equips agents with 15 MCP tools to parse design intents, consult 50 built-in reference guides, and run 44 static checks on generated markup.
Does designer-skill-mcp require an API key?
No API key is needed. You only need a local Node.js runtime at version 22 or newer.
