# Designer Skill

> Plug-and-play MCP that gives your coding agent UI superpowers. One-line install, zero config. Claude Code, Codex, Cursor, VS Code, and more.

- **Type:** MCP server
- **Install:** `agentstack add mcp-pythoughts-labs-designer-skill`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Pythoughts-labs](https://agentstack.voostack.com/s/pythoughts-labs)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Pythoughts-labs](https://github.com/Pythoughts-labs)
- **Source:** https://github.com/Pythoughts-labs/designer-skill
- **Website:** https://pythinker.com

## Install

```sh
agentstack add mcp-pythoughts-labs-designer-skill
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

**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)

```bash
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](https://modelcontextprotocol.io) server you add in one line. Your agent gets design tools, reference docs, and a ship gate so UI work stops looking generic.

```mermaid
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](https://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:

```bash
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):

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

```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`)

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

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

```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)

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

**Kilo Code** (MCP Settings → Edit MCP Settings)

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

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

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

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

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

### Skill-only

[](#setup)

```bash
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.

get_design_system → dispatch_intent → get_reference → work → anti_slop_checklist

[](#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 (anti_slop_checklist) before declaring done.

[](#tools)

Tool
Purpose

get_design_systemSKILL.md router (call first)
load_project_contextRead PRODUCT.md / DESIGN.md from the project
get_referenceOne of fifteen reference files by name
list_commandsAll design verbs with descriptions
get_commandFull guidance + references for a specific verb
dispatch_intentMap a request → verb(s) + files to read
detect_antipatternsDeterministic scan (44 rules), no LLM, no API key
get_palette_seedOKLCH brand-seed for greenfield palette work
anti_slop_checklistShip gate: run before finishing any UI work

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

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

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

[](#development)

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

**HTTP mode** (remote clients):

```bash
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](https://github.com/Pythoughts-labs)
- **Source:** [Pythoughts-labs/designer-skill](https://github.com/Pythoughts-labs/designer-skill)
- **License:** MIT
- **Homepage:** https://pythinker.com

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-pythoughts-labs-designer-skill
- Seller: https://agentstack.voostack.com/s/pythoughts-labs
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.