designer-skill

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

Overview · Setup · Reference · Tools · Development

copy

npm i designer-skill-mcp

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.

Plugin (recommended)

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.10.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).

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

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

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

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

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

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

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

Skill-only

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

Files

Intent → verb

Preflight

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

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

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.