generate-project-plan

プロジェクト計画を生成する

PRD（および任意のコードベース情報）を FigJam のプロジェクト計画ボードに変換します。セクションの構成は固定されていません。スキルは調査結果から候補を提案し、ユーザーが含めるものを選びます。選択された各セクションについて、スキルが内容と描画形式（ブロック）を提案し、ユーザーが確認します。

必須の前提条件

基盤スキル（figma/mcp-server-guide から名前で読み込みます）：

• figma-use — セッションごとに一度読み込みます。 すべての use_figma 呼び出しでコンテキストに保持されます。
• figma-use-figjam — use_figma を呼び出す前に、毎回再読み込みします。
• figma-generate-diagram — generate_diagram を呼び出す前に、毎回再読み込みします。

基盤リファレンス（このプラグイン内）：

• foundation/palette.md — セクション、付箋、テキストのパレット定数（hex/255）。
• foundation/layout.md — キャンバスの形状、サイズ設定ルール、プレースホルダーのライフサイクル。
• foundation/plugin-api-traps.md — FigJam の use_figma に関する既知の落とし穴。
• foundation/codebase-grounding.md — ステップ 1 の拡張ルール。

セクションカタログ：

• section-catalog.md — デフォルトのブロックとパレットを含む、約 10 個のセクション候補。

ブロックのサブスキル（コンテンツタイプごとに 1 つ。use_figma で内容を入力する呼び出しの前に、必要なものを毎回再読み込みします）：

ブロック	ファイル	読み込むタイミング
最上位セクション	blocks/section.md	骨組みの作成（ステップ 6）および内容入力のすべての呼び出し（ステップ 7）
入れ子のセクション	blocks/nested-section.md	サブコンテンツをグループ化する内容入力（例：「設計上の決定事項 1/2/3」）
イントロの吹き出し	blocks/intro-callout.md	強調したイントロで始まる内容入力（例：動機）
テキストの基本要素	blocks/text-primitives.md	本文の段落、H3 の小見出し、または箇条書きを使う内容入力
テーブル	blocks/table.md	構造化データを含む内容入力（リソース、目標、依存関係、展開、マイルストーン）
複数列テキスト	blocks/multi-column-text.md	2～4 個の選択肢の列を含む内容入力（設計上の決定事項の代替案）
付箋の列	blocks/sticky-column.md	付箋のリストを含む内容入力（成功指標、リスク、未解決の質問）
図のセクション	blocks/diagram-section.md	右列の図のセクション（ステップ 8）
メタデータ帯	blocks/metadata-strip.md	骨組みの作成 — ボード上部にメタデータ帯を 1 つ配置

また、use_figma の呼び出しには skillNames: "figma-use,figma-use-figjam,generate-project-plan" を渡します（ログ記録のみ）。

ビジュアル UI の規約 — 厳守し、逸脱しないこと

これらは標準のリファレンスボードに基づいています。定数の全容は、正確な情報源となるファイルを参照してください。このセクションは、エージェントが探し回らずに「色／サイズ／フォント／パディングは？」という質問に答えられるよう、要点を一か所にまとめたものです。

色（セクションごとに2色）

左カラムの各セクションでは、同じ色相の連携した2色を使用します。非常に淡い ARCH_PALE の背景色と、そのセクション内のテーブルヘッダーに使う、少し彩度の高い FigJam の SECTION パレット色です。右カラムの図のセクションは純白です。

セクション背景色（ARCH_PALE.X）	テーブルヘッダー（TABLE_HEADER.lightX）	色相
#F8F5FF	#DCCCFF	バイオレット
#EBFFEE	#CDF4D3	緑
#DBF0FF	#C2E5FF	青
#F5FBFF（代替）	#C2E5FF	ペールブルー
#FFF7F0	#FFE0C2	オレンジ
#F1FEFD	#C6FAF6	ティール
#FFFBF0	#FFEC BD	黄
#FFEEF8	#FFC2EC	ピンク
#FFEEE8	#FFCDC2	赤

出典：references/foundation/palette.md。テーブルヘッダーには、彩度の高いダークパレット（#874FFF、#3DADFF など）を絶対に使用しないでください。これらはプロジェクト計画ボードではなく、FigJam の単独テーブル用です。

アーキテクチャ図のサブグラフの色は generate_diagram によって自動適用されるため、上書きしてはいけません。正規の値は次のとおりです。client #AFF4C6 角丸四角形、gateway #FFFFFF 四角形（「Load Balancer」／「ALB」／「LB」とラベル付けされている場合はひし形）、service #E4CCFF 四角形、datastore #BDE3FF 円柱、external #FFFFFF PREDEFINED_PROCESS、async #BDE3FF ENG_QUEUE。

タイポグラフィ（フォントサイズ）

要素	サイズ	フォント	色
H1（ボードのタイトル）	40	Inter Medium	#1E1E1E
H2（セクションタイトル — 各セクションの最初の子要素）	40	Inter Medium	#1E1E1E
H3 — 全幅の小見出し（例：「Motivation」内の「Resources」）	40	Inter Medium	#1E1E1E
H3 — ネストされたセクションの見出し（例：「Design Decision 1: …」）	32	Inter Medium	#1E1E1E
H3 — 2／3／4カラムレイアウトのカラムタイトル（Risks カラム、Goals カラム）	24	Inter Medium	#1E1E1E
本文	16	Inter Medium	#1E1E1E
テーブルセル（ヘッダーと本文の両方）	16	Inter Bold	#1E1E1E

H3 の3種類のサイズは意図的なものです。40 はセクション内に小見出しが単独である場合に H2 と同等の重みになるサイズです。32 は子セクション内のサブセクション見出し（内側の幅 672px）に使います。24 は狭い領域でのカラムタイトル（カラム幅 ≤ 224px）に使います。意味上の階層ではなく、コンテナの幅に応じて選んでください。

テーブル（Bold）とその他のテキスト（Medium）を作成する use_figma スクリプトでは、必ず先頭で Inter Medium と Inter Bold の両方を読み込んでください。

セクションのプロパティ

プロパティ	値
section.fills	[{ type: 'SOLID', color: ARCH_PALE.X }]（左カラム）または ARCH_PALE.white（右カラム／図）
section.name	"" — 空の文字列。FigJam のタイトルバーラベルは付けません。タイトルは内部の H2 のみです。
内側のパディング（4辺すべて）	32（現在のデフォルト。リファレンスでは40〜50ですが、現時点では32を使用）
最初の子要素の位置	(32, 32)
幅（左カラム）	800
幅（右カラム／図）	図の親要素を変更した後、max(1200, diag.width + 64)
セクション間の垂直方向の間隔（ラッパー内）	64
Hug 動作	手動：子要素を追加した後、section.resizeWithoutConstraints(w, maxChildBottom + 32) を呼び出します。セクションは自動的に拡大しません。
ビルド中のプレースホルダー	スケルトンパスでは placeholder = true、セクションへの内容の追加が完了したら placeholder = false にします。

外側のラッパーと列の配置（厳守）

ボードには、外側のラッパー（ラベルなし、白）と図の列があります。

1. 列ラッパー — (_, 0) に配置するラベルなしの白い SECTION。上から順に、次の要素を含みます。
   • H1 プロジェクトタイトル（40px Inter Medium、チャコール）を (64, 64) に配置（＝セクションのパディング）
   • メタデータの本文行：Owner / Status / Last updated / Source（16px Inter Medium、チャコール）を (64, h1.y + h1.height + 16) に配置 — H1 の下に 16px の間隔、各本文セルの間に 32px の間隔
   • 本文行の下に 64px の間隔を空け、その後、左列の 6 つのセクションを 64px のガターで縦に配置
2. 図の列を (columnWrapperRight + 64, 0) に配置します。各図は、それぞれ独立した、ラップされていない白い SECTION です。**一番上の図の y は列ラッパーの y（＝0）に合わせます。**図は 64px のガターで縦に配置します。

メタデータは列ラッパーに含めます（独立したセクションにはしません）。テキスト関連の要素はすべて 1 つの列ラッパーに収めます。

定数：

• ラッパー内側のパディング（4 辺すべて）：64
• ラッパー内のセクション間の垂直方向の間隔：64
• ラッパーの右端から図の列の左端までの水平方向の間隔：64
• 図の列の上端は wrapper.y に合わせる（ラッパーの上端と同じ水平軸）
• 縦に並べた図セクション間の垂直方向の間隔：64（内側のガターと同じ）

const PAD = 64;
const leftIds = [/* all left-column section ids in order */];
const sections = [];
for (const id of leftIds) sections.push(await figma.getNodeByIdAsync(id));

// Compute bbox of the column in page coords
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
for (const s of sections) {
  minX = Math.min(minX, s.x); minY = Math.min(minY, s.y);
  maxX = Math.max(maxX, s.x + s.width); maxY = Math.max(maxY, s.y + s.height);
}

const wrapper = figma.createSection();
wrapper.name = "";                                                              // STRICT
wrapper.fills = [{ type: 'SOLID', color: WHITE }];                              // ARCH_PALE.white
wrapper.resizeWithoutConstraints((maxX - minX) + 2*PAD, (maxY - minY) + 2*PAD);
wrapper.x = minX - PAD;
wrapper.y = minY - PAD;

// Reparent + translate to keep visual positions
for (const s of sections) {
  const newX = (s.x - minX) + PAD;
  const newY = (s.y - minY) + PAD;
  wrapper.appendChild(s);
  s.x = newX;
  s.y = newY;
}

ラッパーにヘッダーはありません（内部に H2 はありません）。また、名前も付けません。これは純粋なコンテナーです。プロジェクトタイトルをここに重複して記載しないでください。タイトルはメタデータの帯に配置します。

ラッパーを作成した後で、図の列を配置します。

const wrapperRight = wrapper.x + wrapper.width;
const diagramX = wrapperRight + 64;       // 64px horizontal gap matches inter-section gutter
let y = wrapper.y;                          // align top with wrapper's top edge
for (const id of diagramSectionIdsInOrder) {
  const d = await figma.getNodeByIdAsync(id);
  d.x = diagramX;
  d.y = y;
  y += d.height + 64;                     // 64px vertical gutter between stacked diagrams
}

垂直方向の間隔（厳守）

間隔	ギャップ
セクションの上端 → H2（最初の子要素）	32（＝パディング）
H2 → 次の子要素（本文／イントロのコールアウト／H3／表／最初の列）	24
本文の段落 → H3	24
H3（サイズを問わず：40／32／24）→ 次の子要素（本文／表／リスト／列のコンテンツ）	24
本文 → 本文	24
リスト → 次のブロック	24
最後の子要素の下端 → セクションの下端	32（＝パディング）

子要素は常に prevChild.y + prevChild.height + 24 で配置してください。prevChild.y + 60 のような固定オフセットは使用しないでください。H3 には 3 種類のサイズ（40／32／24）があるため、固定オフセットは定義上誤りです。フォントサイズの設定後に、必ず prevChild.height を読み取ってください。

ヘッダーのフォントサイズを後から変更した場合は、後続の子要素を必ず再配置してください。h3.fontSize = 40 を設定するとノードの高さが増えます。サイズ変更前に次の子要素の y を計算していると、重なってしまいます。

表

• ヘッダーセルと本文セルの両方で Inter Bold 16px を使用します（Medium ではありません）。
• ヘッダーのテキストは #1E1E1E のチャコールとし、セクションの色合いに合わせた明るい塗りつぶしを設定します。
• 本文セルの塗りつぶしはデフォルトの白のままにし、テキストはチャコールにします。
• ヘッダーに白文字と濃い背景色を使わないでください。このボードスタイルには合いません。

図（右カラム）

useArchitectureLayoutCode: "FIGMA_DIAGRAM_2026" を指定して generate_diagram を実行すると、複数のページレベルノード（1～2 個のサブグラフ SECTION ＋単独の SHAPE_WITH_TEXT ＋ CONNECTOR）が生成され、単一のコンテナにはなりません。これらをセクションで囲むには、次の手順に従います。

1. 新しく作成されたページレベルノードをすべて収集します（既知の plan-section ID は除外します）。
2. バウンディングボックスを計算します。
3. bboxW + 64 × bboxH + 64 + 64 のサイズで新しい SECTION を作成します（HEADER_BLOCK = 40 H2 + 24 gap）。塗りは ARCH_PALE.white にします。
4. 各図のノードを再親化し、見た目のレイアウトを維持できるようローカル座標を変換します。
5. 重要 — 再親化した後、すべてのコネクタを削除して再作成します。 自分自身に再割り当てする方法（c.connectorStart = c.connectorStart）は信頼できません。短いコネクタは正しく再ルーティングされますが、長い折れ曲がりのあるコネクタは古い折れ点のウェイポイントを保持し、セクションの外へ数百ピクセル伸びることがあります。取得した仕様から削除して figma.createConnector() で再作成すれば、毎回きれいなルートになります。仕様の取得と再作成のパターンについては、blocks/diagram-section.md を参照してください。
6. コネクタラベル — fontName、fontSize、fills をすべて明示的に設定する必要があります。 新しいコネクタの text サブレイヤーには、使用可能なデフォルト値がありません。次の 4 項目をすべて設定します。c.text.fontName = { family: 'Inter', style: 'Medium' }、c.text.fontSize = 14、c.text.characters = label、c.text.fills = [{ type: 'SOLID', color: CHARCOAL }]。デフォルトの text.fills は []（空配列） なので、ラベルは透明に描画され、見えません。c.text.characters の読み戻しは正しく見えてしまうため、スクリーンショットで確認してください。

図セクションの規約：section.name = "" とし、タイトルとしてセクション内に H2 テキストノードを配置します（ボードの他の部分と統一します）。

使用しないもの（よくある誤ったデフォルト）

使用しないもの	代わりに使用するもの	理由
セクションの背景に #CDF4D3（FigJam lightGreen）	#EBFFEE（ARCH_PALE.green）	図の隣では彩度が高すぎます
セクションの背景に #C2E5FF（FigJam lightBlue）	#DBF0FF または #F5FBFF（ARCH_PALE.blue / blueLite）	同上
テーブルヘッダーに #874FFF（FigJam dark violet）	#DCCCFF（FigJam lightViolet）	参照例では濃色の背景に薄色ではなく、淡い背景に薄色を使用しています
濃色のテーブルヘッダーに白いテキスト	明るいヘッダーに #1E1E1E のチャコールテキスト	同上 — 淡い背景に淡い色を使う規約です
テーブルセルに Inter Medium	Inter Bold	参照例ではすべてのセルに Bold を使用しています
section.name = "Goals"（または空でない文字列）	section.name = ""	参照例では名前を空にし、内部の H2 をタイトルにしています
生成された図のサブグラフ 1 つだけを再親化する	ページレベルノード（SECTION、SHAPE、CONNECTOR）をすべて再親化する	アーキテクチャ図は単一ノードではありません
c.connectorStart = c.connectorStart で、すべてのコネクタが再ルーティングされると考える	再親化後、取得した仕様を使ってすべてのコネクタを削除して再作成する	長い折れ曲がりのあるコネクタは古い折れ点のウェイポイントを保持します。新しいルートを生成できるのは figma.createConnector() だけです
新しいコネクタに c.text.characters = label だけを設定する	c.text.fontName、c.text.fontSize、c.text.characters、c.text.fills をすべて設定する	デフォルト値は fontSize=未設定、fills=[]（空配列 → 透明）です。正しく読み戻せてもラベルは見えません

ステップのテンプレート

以下のすべてのステップでこの形式を使用します。ステップを読み、実行してください。

## Step N — <Name>  [Type: Research | Confirm | Write]
Inputs required: …
Ask if missing: …
Tools / refs loaded: …
Do: (3–6 action bullets)
Checkpoint: (Research → self-check; Confirm → AskUserQuestion; Write → screenshot + AskUserQuestion)

ステップは次の 3 種類です。

• 調査 — 読み取り専用です。チェックポイントはセルフチェックリストです。
• 確認 — ボードへの書き込みはなく、ユーザーの判断が必要です。チェックポイントは AskUserQuestion です。
• 書き込み — FigJam を作成・変更します。チェックポイントはスクリーンショット ＋ AskUserQuestion です。

---

ステップ 1 — コンテキストを収集する [調査]

必要な入力

• PRD のファイルパス、または貼り付けたテキスト。
• 任意：コードベースのエントリーポイント（ファイルパス、サービス名、ドキュメントのパス）。

不足している場合に確認すること

• 「PRD はどこにありますか？（パス、または貼り付け）」
• 「調査の根拠にできるコードベースのエントリーポイントはありますか？（パス／サービス／ドキュメント／『なし』）」

読み込むツール／参照資料

• Read、Glob、Grep。
• foundation/codebase-grounding.md。

実施内容

1. PRD を読みます。タイトル、課題、目標、対象外の内容、担当者、対象ユーザー、成功指標、ロールアウトのヒント、リスクを抽出します。
2. エントリーポイントが指定されている場合は、codebase-grounding.md に従います。対象は上限 20 ファイル、インポートの深さは 1 とし、CLAUDE.md／ARCHITECTURE.md／OWNERS まで上位をたどります。
3. tech-context オブジェクトを作成します：files_read、services、external_deps、key_modules、architecture_notes、ownership、expansion_truncated。

セルフチェック

• プロジェクトのタイトル、課題の説明、具体的な目標を少なくとも 1 つ、担当者（または「TBD」）、関連するサービス（または理由を添えた空のリスト）がそろっていること。
• ステップ 2 で候補セクションのカードを作成できるだけの情報があること。足りない場合は、前のステップに戻って確認します。

---

ステップ 2 — 候補セクションを提案する [確認]

必要な入力

• ステップ 1 の tech-context オブジェクト。

読み込むツール／参照資料

• section-catalog.md。
• AskUserQuestion。

実施内容

1. カタログ内の各セクションについて、ステップ 1 の内容に基づく実質的な内容があるかを判断します。空欄や水増しになるカタログ項目は省きます。
2. 条件を満たす候補ごとに、カードを作成します：
   • タイトル（カタログの名称）
   • 1 行の説明（このセクションに含める内容。PRD の具体的な内容に即した説明）
   • 提案理由（提案の根拠となる PRD の事実や tech-context の項目）
   • デフォルトのブロック構成（カタログに記載されたもの）
3. すべてのカードをチャットに表示します。
4. 候補が 4 件以下になるようにバッチごとに複数選択式の質問を作成し、AskUserQuestion を実行します（1 回の呼び出しにつき最大 4 つの質問、各質問の選択肢は 4 件、1 回の呼び出しで最大 16 件の候補）。各選択肢のラベルはセクションのタイトル、説明は 1 行の要約にします。

チェックポイント（AskUserQuestion）

• 上記の複数選択式の質問で、ユーザーが希望するセクションを選びます。選択された項目を approved_sections として保存します。
• セクションが 1 つも選択されなかった場合は、適切な終了メッセージを表示して停止します。ファイルは作成しません。

---

ステップ 3 — セクションごとの詳細調査 [調査]

必要な入力

• ステップ 2 の approved_sections、ステップ 1 の tech-context。

読み込むツール／参照資料

• Read、Grep、Glob（任意）。

実施内容

1. approved_sections の各セクションについて、カタログの項目を確認します。カタログには、そのセクションに必要な情報が定義されています（例：Dependencies には、チーム横断のサービス、外部依存関係、ブロッカーが必要です）。
2. セクションに必要な情報と、tech-context に含まれている情報を比較します。
3. セクションごとの不足情報リストを作成します。ユーザーが提供する必要のある具体的な情報を、回答可能な質問として記述します（「自分で調べてください」のような不足項目は不可）。

セルフチェック

• approved_sections の各項目について、ready（不足なし）または具体的で空でない不足情報リストのどちらかがあること。
• 不足情報は回答可能であること。「X についてもっと教えてください」のような曖昧な質問は避けます。

---

ステップ 4 — セクションごとのコンテンツとブロックの提案 [確認]

必要な入力

• ステップ 3 のギャップ一覧。

読み込むツール／参照

• AskUserQuestion。
• section-catalog.md。
• セクションのデフォルトの形状に対応するブロック参照（例：Dependencies の場合は blocks/table.md）。

実施内容（セクションごとに個別、または簡単な場合は少数をまとめて実施）：

1. ギャップ一覧を埋めます。文章には自由入力のプロンプトを、選択肢が限られる場合は AskUserQuestion を使います。
2. 次を提案します。
   • コンテンツ：実際に表示される箇条書き／行／付箋。
   • ブロックの形状：表示ブロック（本文の段落／テーブル／マルチカラム／付箋カラムなど）。section-catalog.md のデフォルトを使います。妥当な場合は別の形状も提示します（例：「テーブル形式とマルチカラムレイアウトのどちらにしますか？」）。
3. 短いプレビューを表示します。セクションタイトル＋本文の最初の行＋ブロックタイプの概要。
4. AskUserQuestion で質問します：「このコンテンツと形状を使用しますか？［はい／編集／このセクションをスキップ］」
5. 編集の場合は、自由入力の修正を受け付け、再表示して再度質問します。スキップの場合は、セクションを skipped としてマークし、ボードには書き込みません。

チェックポイント

• すべてのセクションが approved、edited+approved、または skipped になっています。ボードへの書き込みはまだありません。

---

ステップ 5 — FigJam ファイルの作成 [書き込み]

必要な入力

• approved_sections（スキップされていないもの）、プロジェクトタイトル、planKey（Figma チームプラン）。

読み込むツール／参照

• create_new_file MCP ツール。
• whoami MCP ツール（planKey が不明な場合）。
• use_figma（1 回）。
• figma-use（ステップ 5 以降はコンテキストに読み込み済み）。
• figma-use-figjam（プローブのために再読み込み）。
• AskUserQuestion。

実施内容

1. planKey を解決します。whoami を呼び出します。プランが 1 つの場合はそれを使います。複数ある場合は、どのチームを使うか AskUserQuestion で尋ねます。
2. { planKey, fileName: "<project title>", editorType: "figjam" } を指定して create_new_file を呼び出します。file_key と file_url を取得します。
3. 初回プローブを実行します（use_figma）。

const page = figma.currentPage;
return {
  rootName: figma.root.name,
  editorType: figma.editorType,
  pageCount: figma.root.children.length,
  firstPageName: figma.root.children[0].name,
  currentPageChildrenCount: page.children.length,
};

editorType === "figjam" で、ページが空であることを確認します。そうでない場合は停止して報告します。

チェックポイント（プローブ出力＋AskUserQuestion）

• プローブの戻り値と file_url を表示します。
• AskUserQuestion：「ファイルは <file_url> に作成されました。スケルトンに進みますか？［はい／キャンセル］」キャンセルの場合は停止し、空のファイルを残します。

---

ステップ 6 — スケルトンの作成 [書き込み]

必要な入力

• 分類順に並べた approved_sections、foundation/palette.md のパレット、foundation/layout.md のレイアウト定数。

読み込むツール／参照

• use_figma（1 回呼び出し）。
• figma-use-figjam/SKILL.md を再読み込み。
• blocks/section.md と blocks/metadata-strip.md を再読み込み。
• foundation/palette.md、foundation/layout.md。

実施内容

1. blocks/metadata-strip.md に従ってメタデータストリップを作成します（H1＋4 つの本文テキストをボード上の (0, 0)～(0, ~100) に配置）。
2. 承認された各セクションについて、blocks/section.md に従って最上位の SECTION を作成します。背景色は ARCH_PALE から選び、section.name = ""（タイトルバーのラベルなし — 厳守）、placeholder = true にします。左カラムのセクションには resizeWithoutConstraints(LEFT_COL_W, DEFAULT_H)、右カラムの図のセクションには resizeWithoutConstraints(RIGHT_COL_W_MIN, DEFAULT_H) を適用します。
3. 左カラムの各セクションを (0, SECTION_TOP_Y + cumulative_y) に配置します。右カラムの各セクションは (832, SECTION_TOP_Y + cumulative_y_right) に配置します。
4. 作成したすべてのノード ID を返します：{ createdNodeIds: { metadataStrip: {...}, sections: { <slug>: "<id>", ... } }, status: "skeleton-complete" }。（slug はパレットの参照とステップ 7 の入力に使う内部識別子です。section.name に書き込まれることはありません。）
5. await figma.currentPage.screenshot({ scale: 0.3 }) でインラインのスクリーンショットを撮影します。

チェックポイント（スクリーンショット＋AskUserQuestion）

• AskUserQuestion：「スケルトンに問題はありませんか？［はい／修正／キャンセル］」修正の場合は対象を絞った修正スクリプトを実行します。キャンセルの場合は停止します。

ステップ 7 — 内容の入力（セクションごとに 1 回呼び出し） [書き込み]

必須の入力

• 承認済みのコンテンツと各セクションのブロック構成。ステップ 6 のセクション ID。

読み込むツール／参照資料

• use_figma（セクションごとに 1 回呼び出し）。
• figma-use-figjam/SKILL.md を再読み込みします。
• このセクションで使用するブロック参照資料を再読み込みします。
  • blocks/section.md は常に読み込みます。
  • 本文／H3／リストがある場合は blocks/text-primitives.md。
  • 表がある場合は blocks/table.md。
  • 複数列の場合は blocks/multi-column-text.md。
  • ネストされたサブセクションがある場合は blocks/nested-section.md。
  • 強調表示された導入部がある場合は blocks/intro-callout.md。
  • 付箋がある場合は blocks/sticky-column.md。

実行内容（セクションごと）：

1. await figma.getNodeByIdAsync(sectionId) — 種類が SECTION であることを確認します。
2. コンテンツを構築します。最初に H2 ヘッダーを配置し、その後に承認済みのブロック構成に従って子要素を追加します。セクションに追加してから、x/y を設定します。
3. 付箋については、blocks/sticky-column.md に従って 2 段階でサイズを測定します。
4. section.resizeWithoutConstraints(LEFT_COL_W, computed_height)。
5. section.placeholder = false。
6. await section.screenshot() をインラインで実行します。
7. { mutatedNodeIds: [...], sectionHeight, screenshotIncluded: true } を返します。

チェックポイント（スクリーンショット + AskUserQuestion）

• セクションごとに AskUserQuestion：「セクション <name> は完了しましたか？［はい／このセクションを編集／残りをスキップ］」。編集する場合は対象を絞って修正します。残りをスキップする場合は入力ループを終了します（ユーザーが手動で仕上げます）。

---

左列の入力がすべて完了したら、再スタック処理を実行します（実際にサイズ変更された高さに基づいて累積 Y 座標を修正する use_figma の呼び出しを 1 回実行）：

let y = SECTION_TOP_Y;
for (const id of leftColumnSectionIdsInOrder) {
  const sec = await figma.getNodeByIdAsync(id);
  sec.y = y;
  sec.x = 0;
  y += sec.height + 32;
}
return { mutatedNodeIds: leftColumnSectionIdsInOrder };

---

次に、外側のラッパー処理を実行します（use_figma の呼び出しを 1 回実行）。左列のすべてのセクションを、ラベルのない白い外側の SECTION で囲みます（上記の視覚規約ブロックの「外側の列ラッパー」を参照）。これは必須です。省略しないでください。

---

ステップ 8 — 図 [書き込み]

必須の入力

• ステップ 2／4 の図の意図（現在の状態、目標の状態、0～N 個の主要フロー）。Mermaid の構成に使用する技術コンテキスト。

読み込むツール／参照資料

• generate_diagram を呼び出す前に、毎回 generate-diagram/SKILL.md を再読み込みします。
• ノードの付け替えで use_figma を呼び出す前に、毎回 figma-use-figjam/SKILL.md と blocks/diagram-section.md を再読み込みします。
• generate_diagram MCP ツール、use_figma。

実行内容（図ごと）：

1. use_figma：blocks/diagram-section.md に従って右列のセクションを作成します（白い塗り、H2 ヘッダー、placeholder = true）。
2. generate_diagram：技術コンテキストをもとに Mermaid を構成します。アーキテクチャ図では useArchitectureLayoutCode: "FIGMA_DIAGRAM_2026" を使用します。
3. use_figma：生成された図のノードを探し、セクションに付け替えます（section.appendChild(diag)）。H2 の下に配置し、セクションが収まるようにサイズを変更します。placeholder = false。
4. await section.screenshot() を実行します。

失敗時の処理：generate_diagram が失敗した場合は、セクションに "Diagram generation failed: <message>. Regenerate manually." と書かれたテキストのプレースホルダーを残します。次の図に進みます。

チェックポイント（スクリーンショット + AskUserQuestion）

• 図ごとに AskUserQuestion：「図 <name> は問題ありませんか？［はい／再生成／スキップ］」。

---

ステップ 9 — 最終確認と報告 [書き込み後、読み取り]

必須の入力

• ステップ 5 の file_url。

読み込むツール／参照資料

• use_figma（ページ全体のスクリーンショット用に 1 回呼び出し）。

実行内容

1. await figma.currentPage.screenshot({ scale: 0.25 }) — ボード全体を撮影します。
2. 確認します：2 列構成、重なりがないこと、placeholder = true のままのセクションがないこと、メタデータ欄が表示されていること。
3. 問題があれば、対象を絞った use_figma スクリプトで修正します。最初から再生成してはいけません。
4. チャットに投稿します：

✅ Project plan written to FigJam.
File: <file_url>
Sections: <N text + N diagram>
Files referenced during grounding: <count>

チェックポイント（スクリーンショット + AskUserQuestion）

• AskUserQuestion：「完了ですか、それとも調整しますか？［完了／調整］」。調整する場合は、ユーザーの依頼に応じて対象を絞った修正スクリプトを実行します。再生成は行いません。

運用ルール

• 1 回の use_figma 呼び出しにつき、論理操作は 10 件以下にしてください。
• すべての書き込みスクリプトで、createdNodeIds／mutatedNodeIds を必ず返してください。
• パレットの色はすべて hex/255 表記を使用してください（foundation/palette.md を参照）。
• 厳守：セクションの背景には FigJam 標準の SECTION パレットではなく、ARCH_PALE パレットを使用してください。 ARCH_PALE の色（#EBFFEE、#F8F5FF、#F5FBFF、#FFF7F0 など）は、generate_diagram が生成するアーキテクチャ図のサブグラフの囲みと視覚的に調和します。FigJam の SECTION パレット（#CDF4D3、#C2E5FF、#DCCCFF、#FFE0C2）は彩度が高すぎるため、図の横に配置すると色の衝突が目立ちます。foundation/palette.md を参照してください。
• 厳守：プロジェクト計画のすべてのセクション（左カラム、右カラム、入れ子の子セクション）で、section.name = "" にしてください。 ユーザー向けのタイトルは FigJam のセクションのタイトルバーラベルではなく、セクション内の H2 テキストノードとして表示します。参照ボードではセクション名は空です。空でない name を設定するとラベルが重複し、ボードが視覚的に煩雑になります。
• 確認／書き込みの各チェックポイントでは、内容を読み取る、編集する、またはキャンセルしてください。未回答の AskUserQuestion を無視して書き込みを進めてはいけません。
• use_figma スクリプトでエラーが発生した場合は、変更は適用されません。エラーを読み、修正して再試行してください。

トリガーフレーズ

「/generate-project-plan」、「対話型プロジェクト計画」、「プロジェクト計画」、「FigJam プロジェクト計画を作成」、「PRD から FigJam へ」。