Plug-and-play MCP. UI superpowers for your agent.
Agenten stärken
Der eigene Befehl des Herausgebers. Kein PlugMCP-Endpunkt.
Host a copy with our keys and logs.
npx -y @pymodel/[email protected]Claude Code hat keinen Installationslink für einen lokalen Befehl. Kopieren Sie den Befehl unten und führen Sie ihn in einem Terminal aus.
claude mcp add pymodel-designer-skill-mcp -- npx -y @pymodel/designer-skill-mcp@0.22.0In einem Terminal ausführen.
{ "mcpServers": { "pymodel-designer-skill-mcp": { "command": "npx", "args": [ "-y", "@pymodel/[email protected]" ] } }}claude_desktop_config.json
Remote-URL oder ein Befehl auf Ihrem Rechner? Worin sich die beiden Installationen unterscheiden
Auf PlugMCP ausführen
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
StartenSetup · How it works · References · Tools · Development
Paste into your agent (Claude Code, Codex, Cursor, any MCP client). It installs the skill, wires the MCP and verifies the tools:
Add designer-skill alongside Niblet Designer UI. The designer core is keyless: it routes requests, loads guidance and runs supplemental static checks. Niblet optionally supplies real screens and licensed materials; the host owns implementation and rendered verification.
1. Install or refresh the skill into the user skill directory (not this project):
npx skills add PyModel/designer-skill --skill designer-skill -g -y
2. Add the local MCP using this client's native MCP configuration, in the user-level (not project-level) config:
Name: designer-skill
Transport: stdio
Command: npx
Args: -y @pymodel/designer-skill-mcp@latest
No API key is needed. Do not add one.
3. Verify: list the designer-skill server's tools and confirm get_preflight_brief, dispatch_intent, review_and_gate are present. Do not run a sample check.
When setup is complete, confirm the skill is installed and the three named tools are exposed. On UI work: call get_preflight_brief, use dispatch_intent and load only relevant guidance. If an unresolved visual question warrants retrieval, use the separately configured niblet server's discovered tools. Prefer its image content for inspection; designer-skill's catalogue wrappers return metadata or routing guidance only. Run review_and_gate as supplemental static evidence, then perform the required rendered, functional and accessibility checks in the host. Never treat static success as UI PASS. Preserve audit/plan scope. Continue an active authorized task; otherwise report designer-skill ready, and report Niblet paired only if its tools were actually observed.
No Niblet? Continue from local product evidence; catalogue retrieval is optional.
Or pick one:
Canonical MCP config (mcp.json):
{ "mcpServers": { "designer-skill": { "command": "npx", "args": ["-y", "@pymodel/designer-skill-mcp@latest"] } } }
@latest tracks npm; teams pin @pymodel/[email protected]. Plugin skill content updates separately (/plugin update …). MCP registry name: io.github.PyModel/designer-skill-mcp. Requires Node 22+.
VS Code .vscode/mcp.json (1.99+):
{ "servers": { "designer-skill": { "type": "stdio", "command": "npx", "args": ["-y", "@pymodel/designer-skill-mcp"] } } }
Codex CLI ~/.codex/config.toml:
[mcp_servers.designer-skill]
command = "npx"
args = ["-y", "@pymodel/designer-skill-mcp"]
Open Code opencode.json:
{ "mcp": { "designer-skill": { "type": "local", "command": ["npx", "-y", "@pymodel/designer-skill-mcp"] } } }
Claude Desktop, Cursor (.cursor/mcp.json), Kilo Code (mcp_settings.json), Pythinker (~/.pythinker/mcp.json): the canonical mcpServers JSON above. Pythinker verify: pythinker mcp test designer-skill (guide).
Pi: the same JSON, or register the skill natively: { "skills": [{ "path": "/path/to/skills/designer-skill/SKILL.md" }] }
Local checkout: replace npx with "command": "node", "args": ["/abs/path/to/designer-skill-mcp/dist/index.js"].
flowchart LR
A[Prompt] --> B[get_preflight_brief]
B --> C[dispatch_intent]
C --> D[get_reference]
D --> E[Build / polish UI]
E --> F[review_and_gate]
F -->|FAIL: fix| E
F -->|static checks pass| G[Rendered checks<br/>by the host]
classDef start fill:#f8fafc,stroke:#94a3b8,color:#18181b
classDef route fill:#eff6ff,stroke:#3b82f6,color:#1e3a8a
classDef know fill:#faf5ff,stroke:#7c3aed,color:#4c1d95
classDef work fill:#fff7ed,stroke:#e87a3d,color:#7c2d12
classDef gate fill:#ecfdf5,stroke:#10b981,color:#065f46
classDef host fill:#fff1f2,stroke:#e11d48,color:#881337
class A start
class B,C route
class D know
class E work
class F gate
class G host
The gate is static only: overall status is FAIL or NOT_VERIFIED, never a rendered-readiness pass. Rendered, accessibility and performance checks stay NOT_RUN until the host supplies evidence.
Discover tools per server: the same find_ui_references name on designer-skill is a text-only REST wrapper, not Niblet's image-delivering tool. Prefer Niblet MCP for reference inspection and materials. Do not call both providers for the same question or infer connectivity from installation. Consult niblet-catalogue for deployment differences, bounds and licensing.
Use one product-grounded design contract. Niblet's surface modes (Persuade, Operate, Read, Experience) describe the user's job; designer-skill's execution modes (audit, plan, refine, implement, system) describe permitted work. They are independent: an Operate surface can receive a read-only audit or an authorized refinement. Existing product tokens, components and real content win over reference aesthetics. Component retrieval does not authorize dependency installation or source writes, and neither MCP certifies rendered quality.
Example: "Use designer-skill to redesign this pricing page without breaking functionality." → get_preflight_brief → dispatch_intent → get_reference → edit → review_and_gate.
Built with it: pythinker.com
Plus 26 ux/* references, authored in skills/ux-designer/ and vendored at skills/designer-skill/reference/ux/ (generated by node scripts/sync-ux.mjs, checked by test), so a designer-skill-only install is self-contained. Each SKILL.md is a short router with a one-line description; references load only when a task needs them.
Resources: designer://skill · designer://reference/{+name} · Prompt: design (task, optional aesthetic)
cd designer-skill-mcp
npm ci
npm run build # syncs skills/ → assets/ (generated, gitignored), compiles TypeScript
npm run typecheck && npm test # tsc over src + test, then vitest; `npm run smoke` drives the packed tarball
Edit UX guidance only in skills/ux-designer/references/; npm run sync-skill regenerates the standalone mirror before bundling. Run node scripts/sync-ux.mjs from the repository root for filesystem-only distribution.
Run reports now use v2, plus a host-owned verification plan. Validate both bundled JSON schemas, then run the dependency-free skills/designer-skill/scripts/validate-report.mjs REPORT PLAN AUTHORIZED_ROOT for evidence hashes, confinement, revision/plan matching and rendered-readiness semantics. Its own PASS means report validation, not UI certification. Legacy v1 reports fail closed and must be regenerated from real evidence; update host readers/writers together.
Behavioral action-plan cases and a deterministic grader live in evals/designer-skill/. Synthetic grader tests do not count as model evaluations, and model proposals do not prove actual tool-use compliance or rendered quality. Keep model, host, skill hash and repetitions with evaluation results.
HTTP mode (Streamable HTTP at /mcp):
node dist/index.js --http --port 3017 --root /abs/project # 127.0.0.1
DESIGNER_SKILL_HTTP_TOKEN=… node dist/index.js --http --host 0.0.0.0 --root /abs/project
Every HTTP bind requires at least one --root. Loopback binds validate the Host header; a non-loopback bind also requires DESIGNER_SKILL_HTTP_TOKEN (Authorization: Bearer …).
Release: ./scripts/release.sh "notes" bumps and syncs every version, verifies, tags and pushes; publish.yml publishes npm (with provenance), the MCP registry entry and the GitHub release. Contract details: docs/HARDENING.md.
Plug-and-play MCP that gives your coding agent UI superpowers: design tools, reference docs, and anti-slop checks.
{ "mcpServers": { "pymodel-designer-skill-mcp": { "command": "npx", "args": [ "-y", "@pymodel/[email protected]" ] } }}Tools
Noch keine Tool-Liste. Remote-Server erhalten eine nach dem ersten Health-Check.
FAQ
Kopieren Sie auf dieser Seite die stdio-Konfiguration für Cursor, Claude Desktop, Claude Code oder VS Code. Sie nutzt die Installation des Herausgebers, keinen PlugMCP-Proxy.
In diesem Eintrag ist keine erforderliche Umgebungsvariable aufgeführt.
@pymodel/designer Skill läuft lokal über stdio.
Zuletzt geprüft: 2026-10-28. Plug-and-play MCP that gives your coding agent UI superpowers: design tools, reference docs, and anti-slop checks.