デザイン — デザインツール統合

ユーザーが提供する URL に基づいて適切なデザインツール（Paper（推奨）、Stitch、Figma、またはローカルアセット）にルーティングして、実装のためにレイアウト、コンテンツ、ビジュアルリファレンスを抽出します。

使用タイミング

• ビジュアルデザインの実装を開始するとき
• 構築前にデザインリファレンスをキャプチャする必要があるとき
• 実装をデザインと比較するとき
• プラン assets ディレクトリにスクリーンショットを登録するとき

必須入力

• デザインソース: Stitch プロジェクト ID、Figma ファイル URL、またはローカルアセットパス
• オプション: 抽出する特定セクション/スクリーン名

手順

0) ユーザー入力から信号源を判定（URL ベースのルーティング）

ルーティングは、設定されている MCP ではなく、ユーザーが提供したものに基づいて決まります。

1. URL マッチ — ユーザー入力でデザイン URL を検査します：
   • paper.design/* または *.paper.design/* → paper ブランチ（mcp__paper__* を使用）
   • figma.com/* → figma ブランチ（mcp__figma__* / mcp__claude_ai_Figma__* を使用）
   • stitch.withgoogle.com/*（またはその他の既知の stitch ホスト） → stitch ブランチ（mcp__stitch__* を使用）
2. パスマッチ — ユーザー入力で .pen リファレンスを検査します：
   • 入力が .pen で終わる、または入力が design/ で始まる → pencil ブランチ
   • 入力なし かつ プロジェクトルートに design/ が存在し .pen ファイルがある場合: 利用可能な .pen ページファイル（*.lib.pen を除外）をリストし、 続行前にどのページを抽出するか確認します。
3. ローカルフォールバック — URL はないが docs/plans/<active-plan>/assets/section-*.png が存在する → offline ブランチ
4. 確認 — URL もローカルアセットもない場合、ユーザーに入力を求めます

MCP ゲート: ブランチが判定されたら、対応する mcp__<tool>__* ネームスペースで ToolSearch を実行します。MCP が設定されていない場合は、このメッセージで停止します：

⛔ {paper|figma|stitch} リンクを送信しましたが、`{tool}` MCP が設定されていません。

設定してから再実行するか、別のソースからのリンクを送信してください。

異なる MCP に暗黙的にフォールバックしないでください。

Pencil MCP ゲート: pencil ブランチの場合、mcp__pencil__open_document で ToolSearch を実行します。 設定されていない場合:

⛔ .pen ファイルが検出されましたが、Pencil MCP が設定されていません。

インストール: claude mcp add pencil -- npx -y @anthropic/pencil-mcp
インストール後、セッションを再開してください。

1) デザインデータを抽出（セクションごと、決して一度に全体デザインは不可）

Paper ワークフロー（ソースが paper.design の場合が推奨）:

1. mcp__paper__get_basic_info — ドキュメントメタデータを取得
2. mcp__paper__get_tree_summary — ターゲットセクションノードを特定
3. セクション上で mcp__paper__get_node_info — 構造、テキスト、階層をキャプチャ
4. mcp__paper__get_screenshot — assets/section-{name}.png として保存
5. mcp__paper__get_computed_styles — assets/section-{name}.styles.json として保存（タイポグラフィ、色、スペーシング — 正確な値；verifying でスタイルスポットチェック用）
6. mcp__paper__get_jsx — このヘッダーコメントをファイルの最初の行として assets/section-{name}.reference.jsx として保存:

   // 構造リファレンスのみ — コピーしないでください。
   // Sage は React ではなく Blade を使用しています。これは
   // コンポーネント階層とネスティングを理解するために使用してください。
   

7. 構造化出力を生成（ステップ 2 を参照） — 他のブランチと同じスキーマ。

Stitch ワークフロー:

1. mcp__stitch__list_projects — プロジェクトを検索
2. mcp__stitch__list_screens — すべてのスクリーンをリスト
3. mcp__stitch__get_screen — 一度に 1 つのセクションを抽出
4. 各セクションについて、キャプチャ: 見出し、本文、コンポーネント、色、レイアウト構造

Figma ワークフロー:

1. mcp__figma__get_file — ファイル構造を読み込む
2. フレームをナビゲートしてセクションを検索
3. セクションごとにテキストレイヤー、色、コンポーネント構造を抽出

Pencil ワークフロー:

1. open_document(filePath) — ユーザーが指定した .pen ファイルを開く
2. get_editor_state() — トップレベルノードとドキュメントがアクティブであることを確認
3. nodeIds なし、readDepth: 1 で batch_get — すべての利用可能なセクションをマップ
4. 抽出する各セクションについて: SURGICAL モードで pencil-extractor にデリゲート、 filePath、sectionId、planPath を渡す
5. すべてのセクション後: オプションで pencil-extractor を COMPONENT_MAP モードで実行 して design/component-map.md を生成

オフラインワークフロー:

1. docs/plans/<plan>/assets/section-*.png から画像を読み込む
2. Claude はネイティブに画像を読む — レイアウト、コンテンツ、色を説明
3. アセットが存在しない場合、ユーザーにスクリーンショットの提供を求める

2) 出力を構成化

抽出された各セクションについて、以下を出力します：

### セクション: {name}

**レイアウト:** {グリッド構造、カラム配置、アライメント}
**見出し:** "{正確なテキスト}"
**本文:** "{正確なテキスト}"
**コンポーネント:** {カード、ボタン、アイコン、画像 — 詳細情報付き}
**色:** {背景、テキスト、アクセント — 表示される場合は 16 進数値}
**タイポグラフィ:** {見出しサイズ、本文サイズ、ウェイト、フォントファミリー}
**スペーシング:** {パディング、マージン、ギャップ — 概算}
**アイコン:** {アイコン名/タイプ、どのセットから}

3) プランアセットに保存（アクティブプランが存在する場合）

docs/plans/ にアクティブプランがある場合:

• 抽出したデータを assets/section-{name}.md に構造化ノートとして保存
• スクリーンショットが利用可能な場合は、そのパスを記録
• plan.md frontmatter を design-tool: paper|stitch|figma|offline で更新

主要原則

• 粒度の細かい抽出 — 常にセクションごと、決して一度に全体デザイン（コンテキストオーバーフロー防止）
• 正確なコンテンツ — テキストをそのままコピー、見出しや本文をパラフレーズしない
• ディスクに永続化 — すべてを plan assets/ に保存、コンテキスト圧縮時にも生き残らせる
• 実装前に再読 — 常にディスクからアセットを再読、コンテキストメモリに頼らない