Designer Skill

Plug-and-play MCP. UI superpowers for your agent.

[](#setup) [](https://www.npmjs.com/package/designer-skill-mcp) [](https://www.npmjs.com/package/designer-skill-mcp) [](LICENSE)

[](#setup) [](#reference) [](#tools) [](#tools)

[Overview](#overview) · [Setup](#setup) · [Reference](#reference) · [Tools](#tools) · [Development](#development)

npm i designer-skill-mcp

Route

dispatch_intent maps vague requests like "make it pop" or "it feels off" to the right design verb and reference files.

Know

15 reference files cover type, color, motion, a11y, anti-slop, and redesign loops. Your agent reads the right file before writing UI code.

Check

A 44-rule deterministic detector plus anti_slop_checklist runs before shipping. Generic UI gets caught before it lands.

[](#overview)

designer-skill-mcp is a small MCP server you add in one line. Your agent gets design tools, reference docs, and a ship gate so UI work stops looking generic.

flowchart LR
  A[Your prompt] --> B[dispatch_intent]
  B --> C[get_reference]
  C --> D[Build / polish UI]
  D --> E[anti_slop_checklist]
  E --> F[Ship]
  style A fill:#f8fafc,stroke:#94a3b8,color:#18181b
  style B fill:#eff6ff,stroke:#3b82f6,color:#1e3a8a
  style C fill:#faf5ff,stroke:#7c3aed,color:#4c1d95
  style D fill:#fff7ed,stroke:#e87a3d,color:#7c2d12
  style E fill:#ecfdf5,stroke:#10b981,color:#065f46
  style F fill:#f1f5f9,stroke:#64748b,color:#0f172a

Add the server. Ask in plain language. The agent handles the rest.

[](skills/designer-skill/) [](designer-skill-mcp/)

Built with it: pythinker.com — a live production site designed end-to-end with this skill.

[](#setup)

Plugin (recommended)

[](#setup) [](#setup) [](#setup)

One install gets both the skill and the MCP server:

/plugin marketplace add Pythoughts-labs/designer-skill
/plugin install designer-skill@pythoughts-labs

Codex CLI:

codex plugin marketplace add Pythoughts-labs/designer-skill

Then install designer-skill from the pythoughts-labs marketplace in /plugins. The skill appears as designer-skill:designer-skill.

Cursor: install from the marketplace (or open this repo). Plugin ships mcp.json, skills, and /designer-setup · /designer-status commands.

Plug in (any client)

Same one-liner everywhere. No API key. Repo-root mcp.json is the canonical MCP config (plugins reference it too):

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

Updates: @latest for newest npm; pin @0.11.0 for teams. Plugin skill content updates separately (/plugin update …). Registry: io.github.pythoughts-labs/designer-skill-mcp (publish via mcp-publisher after npm release).

[](docs/blog/integrating-designer-skill-with-pythinker.md) [](https://github.com/openai/codex) [](https://claude.ai/code) [](https://cursor.com) [](https://code.visualstudio.com) [](https://kilocode.ai) [](https://opencode.ai) [](https://github.com/earendil-works/pi-coding-agent)

Client Quick install

Pythinkerpythinker mcp add --transport stdio designer-skill -- npx -y designer-skill-mcp · guide Codex CLIcodex mcp add designer-skill -- npx -y designer-skill-mcp Claude Codeclaude mcp add designer-skill -- npx -y designer-skill-mcp CursorCursor plugin or copy mcp.json → .cursor/mcp.json VS Code.vscode/mcp.json ("servers" + "type": "stdio") Kilo CodeMCP Settings → mcp_settings.json Open Codeopencode.json (key "mcp") PiMCP config or native skill path

Per-client config snippets

Pythinker (~/.pythinker/mcp.json)

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

Verify: pythinker mcp test designer-skill · TUI: /mcp lists the server, /tools shows mcp_designer-skill_*.

Codex CLI (~/.codex/config.toml)

[mcp_servers.designer-skill]
command = "npx"
args = ["-y", "designer-skill-mcp"]

Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json)

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

Cursor (.cursor/mcp.json — same shape as repo-root mcp.json)

VS Code (.vscode/mcp.json, requires 1.99+ or MCP extension)

{
  "servers": {
    "designer-skill": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "designer-skill-mcp"]
    }
  }
}

Kilo Code (MCP Settings → Edit MCP Settings)

{
  "mcpServers": {
    "designer-skill": {
      "command": "npx",
      "args": ["-y", "designer-skill-mcp"],
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Open Code (opencode.json or ~/.config/opencode/config.json)

{
  "mcp": {
    "designer-skill": {
      "type": "local",
      "command": ["npx", "-y", "designer-skill-mcp"]
    }
  }
}

Pi (MCP config, same JSON as Pythinker, or register the skill natively):

{ "skills": [{ "path": "/path/to/skills/designer-skill/SKILL.md" }] }

Skill-only

[](#setup)

cp -r skills/designer-skill/ ~/.claude/skills/designer-skill/   # Claude Code
cp -r skills/designer-skill/ ~/.codex/skills/designer-skill/     # Codex

Invoke with the Skill tool or $designer-skill on design tasks.

Invoke

Use designer-skill to redesign this pricing page without breaking functionality.

getdesignsystem → dispatchintent → getreference → work → antislopchecklist

[](#reference)

Files

File Use when Tier

design-principles.mdTypography, spacing, color, layout, hierarchy (neutral baseline)core differentiation-playbook.mdHow to be distinctive: inverse test, layout menu, one weird thing, named referencescore aesthetic-systems.mdPicking a look: 5 systems with palettes, fonts, shadowscore motion-and-interaction.mdAnimation timing, springs, scroll, reduced-motioncore engineering-and-performance.mdTokens, a11y, responsive, Core Web Vitals, real-data hardeningcore avoid-ai-slop.mdBan-list, category-reflex checks, output-completeness contractcore refactor-and-redesign.mdAudit → diagnose → redesign without breaking behaviorcore command-playbook.mdIntent → verb dispatch (build, finish, amplify, ship, …)core interaction-design.mdFitts/Hick/Miller, forms, navigation, errors, loading statesextended visual-critique.mdSeven-dimension critique instrumentextended design-systems.mdToken architecture, component specs, themingextended project-init.mdDiscovery interview, PRODUCT.md, DESIGN.md setupextended craft-flow.mdShape-then-build pipeline with user gatesextended live-mode.mdBrowser variant mode: element select, HMR, poll/steer/acceptextended css-techniques.mdModern CSS cookbook: resets, centering, selectors, logical props, container queries, :has(), clamp()extended

[](#reference) [](#reference)

Intent → verb

Phrase Verb(s) Read

"make it pop"amplify · coloraesthetic-systems, design-principles "it feels off"check · layoutrefactor-and-redesign, avoid-ai-slop "production-ready"ship · checkengineering-and-performance "add some motion"motionmotion-and-interaction "it looks AI-made"review · brandavoid-ai-slop, aesthetic-systems "redesign this"check · refreshrefactor-and-redesign, command-playbook

Preflight

1 Scope the surface: brand register (distinctiveness) vs product register (earned familiarity).

2 Commit to one aesthetic system; never mix two signatures on one surface.

3 Run the category-reflex check in avoid-ai-slop.md.

4 Build on design-principles.md + engineering-and-performance.md; add motion last.

5 For existing UI, audit → diagnose → redesign. Do not rebuild from scratch.

6 Run the ship gate (antislopchecklist) before declaring done.

[](#tools)

Tool Purpose

getdesignsystemSKILL.md router (call first) loadprojectcontextRead PRODUCT.md / DESIGN.md from the project getreferenceOne of fifteen reference files by name listcommandsAll design verbs with descriptions getcommandFull guidance + references for a specific verb dispatchintentMap a request → verb(s) + files to read detectantipatternsDeterministic scan (44 rules), no LLM, no API key getpaletteseedOKLCH brand-seed for greenfield palette work antislop_checklistShip gate: run before finishing any UI work

[](#tools) [](#tools)

Resources: designer://skill · designer://reference/{name}

Prompt: design (args: task required, aesthetic optional)

[](#development)

cd designer-skill-mcp
npm install
npm run build   # syncs skills/designer-skill/ → assets/skill/, compiles TypeScript
npm test

HTTP mode (remote clients):

node dist/index.js --http --port 3017             # 127.0.0.1 (default)
node dist/index.js --http --port 3017 --host 0.0.0.0  # public: add auth/proxy

Endpoint: http://127.0.0.1:3017/mcp (Streamable HTTP). Includes Origin guard against DNS-rebinding; no built-in auth for public exposure.

Local checkout: replace npx with "command": "node", "args": ["/abs/path/to/designer-skill-mcp/dist/index.js"] in any config above.

[](LICENSE) [](designer-skill-mcp/) [](skills/designer-skill/)

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Pythoughts-labs
• Source: Pythoughts-labs/designer-skill
• License: MIT
• Homepage: https://pythinker.com

Install and usage instructions live in the source repository linked above.