whit3rabbit/designer-mcp

Designer MCP — リサーチファーストデザイン

すべてのデザインを、実装前に実際のプロダクトのエビデンスに基づいて行います。このスキルは、ローカルの無料ライブラリ（1,342の抽出されたデザインシステム）とリサーチファーストの方法論を組み合わせたものです。

リサーチライブラリは以下の1つのレイヤーで構成されています。

1. スタイル — 実際のWebマーケティング/プロダクトページから抽出された、視覚的な方向性とセンス。

画面やフローは有料のReferoプロダクトに存在しますが、このデプロイメントには含まれていません。画面レベルまたはジャーニーレベルの質問については、バンドルされているクラフトリファレンスとユーザー自身のマテリアルを使用し、その旨を明確に伝え、先例を作り出さないようにしてください。

絶対条件

• デザイン作業の前にリサーチを行うこと。 すべてのデザインは、実装前にリファレンスに基づいて裏付けられなければなりません。モデルの汎用的なデザインセンスに依存しないでください。
• ビジュアル作業にはまずスタイルを使用すること。 MCPサーバーが利用できない場合は、バンドルされているクラフトリファレンスを使用し、同じリファレンスロックのワークフローを維持してください。
• 1つのリファレンスをコピーしないこと。 いくつかの優れたリファレンスを調査し、ユーザーのプロダクト向けに新しい方向性を合成してください。
• リファレンスを平均して安全な中間を取らないこと。 リファレンスが矛盾する場合は、1つの支配的な方向性を選択し、そのシャープな特性を保持してください。二次リファレンスは、限定的な詳細のみを追加するために使用します。
• トークンの意味を変更しないこと。 リファレンスが、特定の役割のために色、フォント、半径、シャドウ、グラデーション、またはコンポーネントを示している場合、その役割にのみ使用するか、省略してください。
• 画像ガイダンスを尊重すること。 スタイルが写真、イラストレーション、プロダクトショット、またはグラフィックに依存している場合、メディアの役割を維持してください。利用可能な場合は実際の/生成/ストックアセットを使用し、それ以外の場合はアートディレクションを施した意図的なプレースホルダーを作成してください。弱いCSS、テキスト、または装飾的なボックスで複雑な画像を偽造しないでください。
• このスキルが利用可能な場合、汎用的なフロントエンド/プロダクトデザインスキルを並列のデザイン権威として使用しないこと。 これがデザイン方法論です。汎用的なデザインスキルは、作業を一般的なAIデザインに引き戻す傾向があります。
• リサーチの出力は具体的でなければなりません。 リファレンスに名前を付け、具体的な選択を説明し、何が適応されるかを説明してください。
• 雰囲気の記憶に基づくデザインをしないこと。 主要なビジュアル、レイアウト、コンテンツ、またはインタラクションの決定はすべて、リサーチ、ユーザーのブリーフ、またはクラフトリファレンスに遡らなければなりません。
• 実装前に合成すること。 描画やコーディングの前に、リサーチをコンセプト、トークンの方向性、具体的な決定台帳に変換してください。
• ブリーフはビルドターゲットではありません。 実装前に、ユーザー提供のビジュアルソース、既存のプロダクト/デザインシステムターゲット、選択された生成モックアップ、または直接ビルドが承認された明示的なリファレンスロックの方向性のいずれかにロックしてください。
• 画像生成は、結果を変える場合にのみ使用すること。 画像生成は遅くなる可能性があり、すべてのコーディング環境に存在するとは限りません。ビジュアル探索、モックアップ、画像、イラストレーション、テクスチャ、および難しいアセットに使用し、小さな修正、明らかなプロダクション編集、またはコードネイティブなUI作業にはスキップしてください。
• ビジュアル作業の構築後に検証すること。 ハンドオフ前に、レンダリングされた実装をロックされたターゲット/リファレンスと比較してください。リサーチで十分とみなさず、修正可能なデザインのずれを修正してください。

MCP設定

このスキルは、リサーチファーストのデザイン方法論およびクラフトリファレンスとして、単独でも有用です。リサーチはどちらの場合でも必須です — 利用可能な場合はMCPツールをライブスタイルリサーチに使用し、それ以外の場合はバンドルされているクラフトリファレンスとユーザー提供のリファレンスを使用してリサーチを行ってください。

ローカルサーバーはDockerで実行されます。

# MCPサーバーを登録 (Hermes / 任意のstdio MCPクライアント)
hermes mcp add designer \
  --command docker \
  --args run --rm -i -v "$HOME/.refero-cache:/cache:ro" \
         designer-mcp:latest node scripts/mcp-entry.mjs

その後、ゲートウェイを再起動するか（または/reload-mcp）、ツールが登録されるようにしてください。

同じデータのブラウザギャラリー（サムネイル、スウォッチ、タイプスケール）については、以下を実行します。

cd designer-mcp-docker && docker compose up -d   # http://127.0.0.1:8787

ツールの詳細については、references/mcp-tools.mdをお読みください。

発見

リサーチの前に、短いデザインブリーフを作成してください。結果を実質的に変える可能性のある不足情報のみを尋ね、それ以外は合理的な前提を立てて進めてください。

明確にすること：

• 何をデザインするか
• プラットフォーム：Web、iOS、またはその両方
• オーディエンスと技術レベル
• 主要ユーザー目標
• 望ましい雰囲気またはブランドの方向性
• 克服すべきビジネス/ユーザーの反対意見
• 制約：既存のブランド、フレームワーク、期限、アクセシビリティ、コンテンツ
• タスクに必要なもの：ビジュアルの方向性、具体的なUIパターン、ジャーニーロジック、またはその組み合わせ
• タスクを直接コードに進めるか、まずビジュアルオプションを生成するか、実装中にアセットを生成するか

ブリーフの形式：

[WHO]向けの[WHAT]を[PLATFORM]上でデザインする。
目標：[PRIMARY USER GOAL]。
トーン：[DESIRED FEELING]。
主な反対意見/リスク：[OBJECTION]。
覚えておくべきこと：[HOOK OR DISTINCTIVE IDEA]。
制約：[CONSTRAINTS]。
必要なリサーチ：[styles/screens/flows]。
パス：[direct build / visual exploration / audit / asset generation]。

ワークフロールーティング

高品質な結果を生み出せる最も軽量なワークフローを選択してください。

• 直接ビルド: 小さなUI修正、明確なプロダクション編集、既存のデザインシステム作業、または一致させる具体的なソースがあるタスクに使用します。方向性をリサーチしてロックし、その後コード化します。
• ビジュアル探索: ユーザーがバリエーション、新しいビジュアル言語、大規模なリデザイン、ランディングページ、または複数の可能性のある方向性を持つその他の視認性の高いサーフェスを求める場合に使用します。デフォルトでは3つのリファレンスロックされたオプションを提供し、ユーザーに選択を求めます。references/visual-workflow.mdを参照してください。
• 監査: 批評の前に、キャプチャされたスクリーンショットまたはスタイルリファレンスを証拠として使用します。
• アセット生成: コード、アイコン、または既存のアセットでは忠実に提供できないビットマップメディアをリファレンスロックが必要とする場合にのみ、生成された画像を使用します。references/visual-workflow.mdを参照してください。

ツールルーティング

ビジュアル作業にはまずスタイルを使用

ユーザーがビジュアルコンポーネントを含むもののデザイン、リデザイン、改善、ポリッシュ、または作成を依頼した場合に、refero_search を使用してください。

スタイルは、実際のWebマーケティング/プロダクトページから抽出されたセマンティックなデザインリファレンスです。スクリーンショットやコンポーネントライブラリではありません。検索結果はプレビューを提供し、refero_get からの完全なスタイルリファレンスは、ビジュアルテーゼ、トークン、タイポグラフィ、レイアウト/コンポジション、セクションリズム、スペーシング、エレベーション、サーフェス、コンポーネント、画像処理、実装ノート、do/don'tルールなどのデザインガイダンスを提供します。

カバレッジ：Webマーケティング/プロダクトページ — ランディングページ、価格ページ、プロダクトマーケティングサイト、エディトリアルブランドサイト、SaaS Webサイト。アプリ内ダッシュボード、認証画面、設定画面、iOSアプリ画面はスタイルシステムとしてカバーされていません。プロダクトUIタスクの場合は、スタイルからビジュアル言語を確立し、その後プロダクトロジックにクラフトリファレンスを使用します。

スタイルを以下に使用します。

• ルックアンドフィール
• ブランドの方向性
• ランディングページとマーケティングページ
• タイポグラフィ、パレット、レイアウト、セクション構造、スペーシング、半径、エレベーション、サーフェス
• コンポーネントの処理、場合によってはコンポーネント/コードの例
• 画像とプロダクトスクリーンショットの処理
• デザインシステムのインスピレーション
• 一般的なインターフェースをよりセンスの良いものにする

強力なスタイルを見つけた後：

• 詳細については refero_get を使用
• ポータブルなDESIGN.mdアーティファクトをレンダリングするには refero_design_md を使用
• カタログに実際に含まれているフォント、色、テーマ、業界を確認するには、方向性を決定する前に refero_facets を使用

プロダクトパターンとジャーニーの場合

このデプロイメントにはスクリーンまたはフローのレイヤーはありません。タスクに具体的なUIパターン（特定の画面タイプ、フォームの状態、価格ページのレイアウト）またはジャーニーロジック（オンボーディング、チェックアウト、キャンセル）が必要な場合：

• バンドルされているクラフトリファレンスを使用します — フォーム、フォーカス、空の状態、オンボーディングパターン、コンバージョンクラフトをカバーしています。
• 提供されている場合は、ユーザーの既存のプロダクト、スクリーンショット、またはデザインシステムを使用します。
• これらがリファレンスに基づくものではなく、クラフトに基づくものであることを明確にします。

調査しなかった先例を作り出さないでください。

画像とQAにはビジュアルワークフローを使用

画像生成、ビジュアルオプション、生成アセット、ビジュアルQAについては、タスクで必要な場合に references/visual-workflow.md をお読みください。

リサーチワークフロー

1. スタイルを使用してビジュアルの方向性をリサーチ

ビジュアルデザインタスクの場合は、ここから始めてください。

推奨ループ：

1. 3〜5つの異なるビジュアルアングルを検索します。
2. 1つの幅広い美的クエリを含めます。
3. 1つのドメイン/カテゴリクエリを含めます。
4. 関連する場合、1つの既知のブランドまたは強力なプロダクトクエリを含めます。
5. refero_get で3〜4の強力なスタイルを取得します。完全なスタイルは大きいため、より大規模なリサーチは複数のバッチに分割します。
6. 各スタイルが何に貢献するかを比較します。
7. 1つの主要な基盤を選択し、他のスタイルから1〜2の具体的な詳細を借用します。
8. 実装前に、主要なリファレンスの特徴的な特性をロックします。

適切なスタイルクエリと完全な抽出チェックリスト（各スタイルから何を抽出するか：テーゼ、タイプ、カラーロール、スペーシング、レイアウト、コンポーネント、画像、メディア戦略、do/don'tルール）は、references/research-playbook.md にリストされています。

合成ルール：

• 主要スタイル：全体的なムード、密度、構造。
• 二次スタイル：借用した特定の詳細。
• ユーザーコンテキスト：すべてをプロダクト、オーディエンス、タスクに適応させます。
• すべてのリファレンスの平均/共通部分を使用しないでください。1つのリファレンスがダークで、1つがアシッドで、1つがセリフの場合、答えはウォームクリーム+ミュートオレンジ+丁寧なセリフではありません。

結果を「Xのコピー」として提示しないでください。複数のリファレンスに触発された新しい方向性として提示してください。

実装前に、リファレンスロックを作成します。

主要リファレンス/方向性: [1つの支配的なソース]
保持するもの: [生き残らなければならない3〜5の特性: キャンバス、タイプ、アクセント、レイアウト、密度、メディア]
借用のみ: [1〜2の具体的な二次詳細]
ロールルール: [保持するソーストークン/コンポーネントの意味（例：CTAのみ、コードのみ、装飾のみ）]
メディア戦略: [実際/生成/ストック/コードネイティブ/プレースホルダー、アスペクト比とアートディレクションを記載]
拒否するもの: [方向性を崩すデフォルト/平均]
トークンコミットメント: [背景、タイプ、アクセント、半径、ボーダー/シャドウ、画像処理、ロールを記載]

実装がロックから逸脱した場合は、停止して修正してください。特徴的な特性をより安全な色、より安全なフォント、よりソフトな半径、または一般的なセクションレイアウトに軟化させないでください。リファレンスロックはクローン作成ではありません。コンテンツ、ブランド、インタラクションの詳細をユーザーのプロダクトに適応させながら、選択された特性を保持します。

スタイルを組み合わせる場合は、各ソースに境界のある役割を割り当ててください。例：1つのソースがキャンバス/タイプを担当し、別のソースがコードウィンドウの処理を担当し、さらに別のソースが主要CTAを担当する場合があります。トークンをソースの役割の外に移動させないでください。CTAの色はCTAのみに留め、構文の色はコード内に留め、装飾的なグラデーションは装飾的に留め、カード/ボタンのルールは指定された半径、シャドウ、状態動作を維持します。

主要スタイルが画像主体の場合、テキストのみのレイアウトに置き換えないでください。必要な画像やグラフィックを生成できない場合は、安定した寸法、アスペクト比、キャプション/代替テキスト、および短いアートディレクションノートでスロットを維持してください。ソーススタイルに一致する場合にのみ、シンプルな図、アイコン、コードウィンドウ、または幾何学的プリミティブを構築してください。

大規模なビジュアル探索、生成モックアップ、ビットマップアセット、またはビルド後のビジュアルQAについては、references/visual-workflow.md に従ってください。

2. スクリーンレイヤーなしのプロダクトパターン

タスクがインターフェースに何を含めるべきか、または実際のプロダクトが特定のUI問題をどのように解決するかを知る必要がある場合に、クラフトリファレンスを使用します。

必要なもの	リファレンス
フォームデザイン、フォーカス状態、空の状態、テーブル、オンボーディングパターン	references/craft-details.md
CTAコピー、信頼シグナル、反対意見への対応、コンバージョン構造	references/copywriting.md
コンポーネント/アイコンの選択	references/icons.md
タイプロールと階層の決定	references/typography.md
カラーロール、コントラスト、パレットの規律	references/color.md

これらから抽出します：

• レイアウト構造
• 情報階層
• コンポーネントの選択
• CTAパターン
• コンテンツ/コピーパターン
• 状態とエッジケース
• 信頼またはコンバージョン戦術
• 適応する価値のある具体的な詳細

3. フローレイヤーなしのジャーニーロジック

タスクに複数のステップがある場合、またはユーザーが時間の経過とともに状態を変更する場合、先例を主張するのではなく、インタラクションパターンから推論します。

• エントリーポイントと終了状態
• ステップ数
• ユーザーが行う決定
• 摩擦を減らすもの
• 必要な確認
• 保存/リカバリ状態
• エラーハンドリング
• 維持または説得の瞬間
• 各ステップでのシステム応答

リサーチの深さと合成

深さをタスクのリスクに合わせ、調査結果を3つのバケットに分類します：ビジュアルの方向性（スタイルから）、プロダクトパターン（クラフトリファレンスとユーザーマテリアルから）、ジャーニーロジック（インタラクション推論から）。

タスクタイプごとの深さの段階、各バケットの出力形式、リサーチサマリーテンプレート、決定台帳テーブルについては、references/research-playbook.md をお読みください。

デザインクラフト

リサーチ後は、シニアプロダクトデザイナーのように実行してください。関連する場合にのみバンドルリファレンスを使用し、デフォルトですべてのファイルをロードしないでください。

• タイポグラフィ: references/typography.md
• カラー: references/color.md
• モーション: references/motion.md
• アイコン: references/icons.md
• フォーム、フォーカス、画像、タッチ、パフォーマンス、アクセシビリティ: references/craft-details.md
• コピーライティングと説得: references/copywriting.md
• AIスロップ防止チェック: references/anti-ai-slop.md