# designer-skill-mcp

MCP server equipping AI coding agents with UI guidance, intent mapping, and static design gates. Runs locally without external API credentials.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 48
- Author: PyModel
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/PyModel/designer-skill
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/mcp/designer-skill-mcp

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "designer-skill-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@pymodel/designer-skill-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "designer-skill-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@pymodel/designer-skill-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add designer-skill-mcp npx -y @pymodel/designer-skill-mcp
```

## When to use it
- 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
- Run `get_preflight_brief` on this settings page before refactoring styles.
- Use `dispatch_intent` to translate 'make the navigation look cleaner' into concrete design rules.
- Audit this modal dialog markup using `review_and_gate`.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md