---

name: figjam-export description: "プロジェクトの構造をFigJamダイアグラムとして出力するためのプロンプトを生成する。Claude.ai のFigma Connector経由でFigJamに直接出力可能。トリガー：FigJamに出力、figjam、ダイアグラム生成、アーキテクチャ図、構成図を作って"

FigJam Export

現在のプロジェクトを分析し、Claude.ai（Figma Connector接続済み）に貼り付けることでFigJamダイアグラムを自動生成できるプロンプトを出力する。

前提条件

• Claude.ai で Figma Connector が接続済みであること
• 対応プラン: Claude Pro / Max / Team / Enterprise
• 参考: https://claude.com/connectors/figma

ワークフロー

Step 1: プロジェクト構造の分析

以下のソースから現在のプロジェクトの全体像を把握する:

1. CLAUDE.md — プロジェクト概要・構成・設計原則を読み取る
2. package.json（ルート + 各パッケージ） — 依存関係・スクリプト・技術スタック
3. ディレクトリ構造 — パッケージ構成・主要ファイル
4. .github/workflows/ — CI/CD パイプライン（存在する場合）
5. 設定ファイル — next.config., vite.config., tsconfig.json 等
6. デプロイ設定 — vercel.json, Dockerfile, launchd plist 等

Step 2: 情報の構造化

分析結果を以下の5層モデルで整理する:

レイヤー	内容	形状ヒント
Layer 1: 外部サービス	API、SaaS、クラウドサービス	クラウド形状
Layer 2: データ生成	スクリプト、CLI、バッチ処理	長方形
Layer 3: データストア	DB、JSON、ログファイル	シリンダー/ファイル
Layer 4: アプリケーション	Web、モバイル、CLIアプリ	角丸長方形（大）
Layer 5: 公開エンドポイント	URL、連携先プロダクト	六角形/ダイヤモンド

Step 3: プロンプト生成

テンプレート: references/prompt-template.md

上記テンプレートの各セクションを、Step 1-2 の分析結果で埋める。

Step 4: ファイル保存

生成したプロンプトを一時ファイルとして保存する:

{project-root}/docs/tmp-figjam-{対象の説明}-{YYYYMMDD}.md

例: docs/tmp-figjam-architecture-20260218.md

ファイル冒頭に以下のヘッダーを含める:

<!-- tmp: FigJam生成用プロンプト（{YYYY-MM-DD}生成） -->
<!-- 使い方: --- 以降を Claude.ai（Figma Connector接続済み）に貼り付け -->

Step 5: ユーザーへの案内

出力完了後、以下を案内する:

1. ファイルパスと使い方
2. Claude.ai への貼り付け範囲（--- 以降）
3. 生成後の調整方法（追加プロンプトで色・レイアウト変更可能）

ダイアグラムの種類

ユーザーの要望に応じて、以下の図を生成できる:

種類	説明	適したケース
アーキテクチャ全体図	5層モデルによる俯瞰図	プロジェクト全体の把握
データフロー図	データの流れに特化	パイプライン設計の説明
デプロイメント図	環境・インフラ構成	本番/ステージング構成
コンポーネント関係図	パッケージ/モジュール間の依存	リファクタリング計画
ユーザーフロー図	ユーザー操作の流れ	UX設計・レビュー
シーケンス図	時系列のやり取り	API連携の設計

デフォルトは「アーキテクチャ全体図」。ユーザーが種類を指定した場合はそれに従う。

デザインガイドライン

配色（デフォルト）

レイヤー	推奨色
外部サービス	紫系 / グレー
データ生成	オレンジ系
データストア	緑系
アプリケーション	青系（メインアプリは濃く）
公開エンドポイント	ティール / シアン系

レイアウト指示

• 上→下の5層フロー（各レイヤーをセクションで囲む）
• メインアプリケーションを最も大きく表示
• データフローは太い矢印、補助フローは細い矢印
• 定期実行ジョブはバッジ/ノートで表示（cron時刻、launchd間隔等）
• 各ノードに技術スタック名を副テキストで表示

参照

• FigJam Connector設定: references/figjam-setup.md
• プロンプトテンプレート: references/prompt-template.md

⚠️ よくある落とし穴

• Figma Connector 未接続で貼り付け: Claude.ai に Figma Connector が接続されていない状態でプロンプトを貼り付けても、FigJam ダイアグラムは生成されない。事前に https://claude.com/connectors/figma で接続状態を確認すること
• プロンプト全文を貼り付け: Claude.ai に貼り付けるのは --- 以降の部分のみ。ファイル冒頭のヘッダーコメント（<!-- tmp: ... -->）は貼り付け範囲に含めない
• 一時ファイルの放置: 生成したプロンプトは docs/tmp-figjam-*.md に保存されるが、使用後に削除しないとリポジトリに不要ファイルが蓄積する。FigJam 生成完了後に削除を促すこと
• 情報量が多すぎるダイアグラム: 全ファイル・全依存関係を1つの図に詰め込むと視認性が悪化する。5層モデルで適切に抽象化し、詳細は別図（データフロー図、コンポーネント図等）に分離する