designer-mcp

Claude Code用のCursorスタイルのデザイナーペンです。ヘッド付きChromiumで任意のウェブページをクリック、範囲選択、または描画すると、Claudeが正確なソースファイル、行番号、CSSセレクタ、スクリーンショットを取得し、すぐに編集・検証ができるようになります。

機能

ビジュアルからソースを取得する3つのモード：

すべてのスクリーンショットは/tmpにPNGファイルとして保存され、パスとして返されます。そのため、MCPクライアントがbase64のコンテキスト制限に達することはありません。

Reactのソース解決は、_debugSourceファイバープロパティ（@babel/plugin-transform-react-jsx-sourceによって付与）を介してNext.js開発モードで動作します。本番ビルドではこれらが削除されます。以下の本番環境のソースマッピングを参照してください。

デモ

You:     "Make this button rounder"
Claude:  [designer_open http://localhost:3000/dashboard]
Claude:  [designer_pick mode=element]
You:     *click the button*
Claude:  → source: Button.tsx:42
Claude:  [Edit Button.tsx add rounded-full]
Claude:  [designer_screenshot selector=#cta-btn]  ← after screenshot for verification

インストール

前提条件: Node 18+、Claude Code、動作するmacOS/Linux環境（Playwright Chromium）。

git clone https://github.com/YOUR_USER/designer-mcp.git
cd designer-mcp
npm install
npx playwright install chromium      # one-time browser download

MCPをClaude Codeに登録します（ユーザースコープ＝すべてのセッションで利用可能）：

claude mcp add --scope user designer-mcp node "$(pwd)/index.js"

Claudeスキルをインストールして、今後のセッションでワークフローを認識できるようにします：

mkdir -p ~/.claude/skills/designer
cp SKILL.md ~/.claude/skills/designer/SKILL.md

Claude Codeを再起動します。セッション内にdesigner_*ツールとdesigner:スキルが表示されるはずです。

使用方法

Next.js開発サーバーを起動します（ソースマッピングのため）：

cd your-nextjs-app && npm run dev

次に、Claude Codeで以下のように入力します：

"Open http://localhost:3000/settings in the designer and let me pick the header."

Claudeがdesigner_open(...)を呼び出し、続いてdesigner_pick({ mode: "element" })を呼び出します。Chromiumが前面に表示され、カーソルが十字線に変わるので、ヘッダーをクリックします。Claudeはsource.fileNameとlineNumberを取得し、直接編集できるようになります。

モードのチートシート

• 単一要素 — elementを使用

• 1つの領域内の関連する複数の要素 — areaを使用（ボックスをドラッグ。中心が範囲内にあるすべての要素を返します）

• 視覚的な注釈・説明 — drawを使用（赤ペン、Enterで完了、Escでキャンセル）

本番環境のソースマッピング

_debugSourceは開発専用です。本番ビルドでピッカーを使用するには、next.config.jsでソースマップを有効にします：

module.exports = {
  productionBrowserSourceMaps: true,
  // ...
};

現在、ピッカーは本番環境ではsource: nullを返します。将来のバージョンで、デプロイされたソースマップを通じてセレクタを解決する予定です。プルリクエストを歓迎します。

ツールリファレンス

すべてのツールはMCP経由で公開されており、Claude Codeからはmcp__designer-mcp__*として認識されます。

designer_open(url: string)

ヘッド付きChromiumインスタンスを起動または再利用してナビゲートします。macOSではbringToFront()とAppleScriptの呼び出しによりウィンドウを前面に表示します。

designer_pick({ mode?: "element" | "area" | "draw" })

ピッカーオーバーレイをアクティブにします。ユーザーが操作を完了すると（またはEscでキャンセル、あるいは180秒のタイムアウトで）値を返します。

designer_screenshot({ selector?: string })

ページ全体または特定の要素のPNGを取得します。{ path, bytes }を返します。

designer_close()

ブラウザを終了し、Playwrightのリソースを解放します。

仕組み

1. Playwrightで制御されたChromiumがヘッド付きで起動します（プロセスごとにシングルトン）。

2. designer_pickが小さなバニラJSオーバーレイ（picker.js）をページに注入します。オーバーレイの動作：

   • elementモード — mousemove/clickを追跡し、ホバー対象を青枠で囲み、一意に近いCSSセレクタを解決し、Reactファイバーチェーンを辿って_debugSourceを取得し、MCPに返します。

   • areaモード — ラバーバンド形式の範囲選択。マウスアップ時に、中心点がボックス内にあるすべての要素を収集します（セレクタで重複排除）。

   • drawモード — ビューポート全体を覆うキャンバスオーバーレイ。ストロークを点の配列としてキャプチャし、Enterで完了します。

3. サーバーはwindow.__designerResultを200msごとに最大180秒間ポーリングします。

4. 完了後、適切なスクリーンショット（要素 / 範囲の切り抜き / ビューポート全体）が/tmpに保存され、そのパスが返されます。

コントリビューション

• プルリクエストを歓迎します。特に以下の分野：

  • 本番環境のソースマップ解決

  • Kestrel/React Nativeピッカー（現在はWebのみ）

  • elementモードでの複数要素の蓄積（Cmd+クリックで追加）

  • VS Codeの「エディタで表示」統合

ライセンス

MIT