designer-skill-mcp

プラグアンドプレイの MCP。エージェントに UI の超能力を。

セットアップ · 仕組み · リファレンス · ツール · 開発

セットアップ

エージェントに貼り付けてください（Claude Code、Codex、Cursor など、あらゆる MCP クライアントに対応）。スキルをインストールし、MCP を接続して、ツールを検証します。

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.

Niblet がない場合は、ローカルの製品エビデンスを使って続行してください。カタログの取得は任意です。

または、次から選んでください。

正式な MCP 設定（mcp.json）：

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

@latest は npm の最新バージョンを参照します。チームでは @pymodel/[email protected] を固定してください。プラグインのスキル内容は別途更新されます（/plugin update …）。MCP レジストリ名：io.github.PyModel/designer-skill-mcp。Node 22 以降が必要です。

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

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

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

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

ゲートが行うのは静的チェックのみです。全体のステータスは FAIL または NOT_VERIFIED で、レンダリング後の準備完了を示すステータスになることはありません。ホストから証拠が提供されるまでは、レンダリング、アクセシビリティ、パフォーマンスのチェックは NOT_RUN のままです。

Niblet エコシステム

ツールはサーバーごとに確認してください。designer-skill にある find_ui_references という同じ名前のツールはテキストのみの REST ラッパーであり、画像を返す Niblet のツールではありません。参考情報の確認と素材の取得には Niblet MCP を優先してください。同じ質問に対して両方のプロバイダーを呼び出したり、インストール状況から接続性を推測したりしないでください。デプロイの違い、範囲、ライセンスについては niblet-catalogue を参照してください。

製品に基づいたデザイン契約を1つ使用してください。Niblet のサーフェスモード（Persuade、Operate、Read、Experience）はユーザーの目的を表し、designer-skill の実行モード（audit、plan、refine、implement、system）は許可された作業を表します。両者は独立しています。Operate サーフェスに対して、読み取り専用の監査を行うことも、承認済みの改善を行うこともできます。既存の製品トークン、コンポーネント、実際のコンテンツは、参考デザインの美しさより優先されます。コンポーネントの取得は、依存関係のインストールやソースの書き込みを許可するものではありません。また、いずれの MCP もレンダリング品質を保証しません。

例： 「機能を損なわずに、この料金ページを再デザインするため designer-skill を使ってください。」 → get_preflight_brief → dispatch_intent → get_reference → 編集 → review_and_gate

さらに、skills/ux-designer/ で作成され、skills/designer-skill/reference/ux/ にベンダー取り込みされた26個の ux/* リファレンスがあります（node scripts/sync-ux.mjs で生成し、テストで確認）。そのため、designer-skill のみをインストールしても自己完結します。各 SKILL.md は1行の説明を含む短いルーターで、タスクで必要になった場合にのみリファレンスを読み込みます。

ツール

リソース： designer://skill · designer://reference/{+name} · プロンプト： design（task、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

スキルの堅牢性チェック

UX ガイダンスは skills/ux-designer/references/ でのみ編集してください。npm run sync-skill はバンドル前にスタンドアロンのミラーを再生成します。ファイルシステムのみを対象に配布する場合は、リポジトリのルートから node scripts/sync-ux.mjs を実行してください。

レポートの実行形式は、ホスト管理の検証プランを加えた v2 になりました。バンドルされた JSON スキーマを両方検証したうえで、依存関係のない skills/designer-skill/scripts/validate-report.mjs REPORT PLAN AUTHORIZED_ROOT を実行し、証拠ハッシュ、制約、リビジョンとプランの一致、レンダリング後の準備状況の意味を検証してください。このツール自体の PASS はレポートの検証を意味するもので、UI の認定ではありません。従来の v1 レポートはフェイルクローズとなり、実際の証拠から再生成する必要があります。ホスト側の読み取り処理と書き込み処理は合わせて更新してください。

動作を確認するアクションプランのケースと決定論的な評価ツールは、evals/designer-skill/ にあります。合成データによる評価ツールのテストはモデル評価には該当せず、モデルの提案も実際のツール使用に関する準拠やレンダリング品質を証明するものではありません。評価結果とともに、モデル、ホスト、スキルのハッシュ、反復回数を記録してください。

HTTP モード（/mcp での Streamable HTTP）：

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

HTTP のバインドにはすべて、少なくとも1つの --root が必要です。ループバックバインドでは Host ヘッダーが検証され、非ループバックバインドではさらに DESIGNER_SKILL_HTTP_TOKEN（Authorization: Bearer …）が必要です。

リリース： ./scripts/release.sh "notes" はすべてのバージョンを更新して同期し、検証、タグ付け、プッシュを実行します。さらに、publish.yml が npm（プロビナンス付き）、MCP レジストリエントリー、GitHub リリースを公開します。契約の詳細：docs/HARDENING.md。