sf-diagram-nanobananapro

sf-diagram-nanobananapro：Salesforce ビジュアル AI スキル

テキストの図ではなく、ERD、UI モックアップ、アーキテクチャのイラスト、スライド用画像、Nano Banana Pro を使った画像編集など、レンダリングされたビジュアルが必要な場合にこのスキルを使用します。

必須条件：最初に前提条件を確認

このスキルを使用する前に、必ず前提条件の確認を実行してください。

~/.claude/skills/sf-diagram-nanobananapro/scripts/check-prerequisites.sh

前提条件を満たさない場合は、処理を中止し、次のセットアップガイドを案内してください。

• references/gemini-cli-setup.md

---

このスキルが担当するタスク

次のような要望には sf-diagram-nanobananapro を使用します。

• PNG / SVG 形式の画像出力
• レンダリングされた ERD やアーキテクチャ図
• LWC や Experience Cloud のモックアップ／ワイヤーフレーム
• Mermaid では表現しきれないビジュアルの仕上げ
• 以前に生成した画像の編集

次のような要望には、別のスキルを案内してください。

• Mermaid またはテキストのみの図 → sf-diagram-mermaid
• ERD 用のメタデータの調査 → sf-metadata
• モックアップ作成後の LWC 実装 → sf-lwc
• Apex のレビュー／実装 → sf-apex

---

事前に収集する必要があるコンテキスト

次の内容を質問するか、推測してください。

• 画像の種類：ERD、UI モックアップ、アーキテクチャのイラスト、画像編集
• 対象範囲と主要なエンティティ／システム
• 目標品質：下書き、プレゼンテーション用、または本番用アセット
• 希望するスタイルとアスペクト比
• クイックモードを希望するか、質問を重ねてプロンプトを組み立てるか

---

質問を先に行うワークフロー

ユーザーがクイック／シンプル／そのまま生成を明示的に求めていない限り、まず確認の質問をしてください。

最低限の質問項目

リクエストの種類	確認する内容
ERD／スキーマ	オブジェクト、ビジュアルスタイル、目的、追加要素
UI モックアップ	コンポーネントの種類、オブジェクト／コンテキスト、デバイス／レイアウト、スタイル
アーキテクチャ画像	システム、境界、プロトコル、強調する点
画像編集	残すもの、変更するもの、出力品質

質問一覧：references/interview-questions.md

クイックモードのデフォルト設定

ユーザーが「クイック」、「シンプル」、「そのまま生成」と言った場合は、次をデフォルトにします。

• プロフェッショナルなスタイル
• 1K の下書き出力
• 有用な場合は凡例を追加
• 最初に画像を 1 枚生成し、その後に反復

---

推奨ワークフロー

1. 入力を収集する

次のうち、必要なものを判断します。

• オブジェクトリスト／メタデータ
• 目的：下書き、プレゼンテーション用、ドキュメント用
• 希望する美的表現
• アスペクト比／解像度
• 新規レンダリングか、既存画像の編集か

2. 具体的なプロンプトを作成する

よいプロンプトでは、次の内容を指定します。

• 主題と対象範囲
• 構成／レイアウト
• 色の扱い
• ラベル／凡例／関連線
• 出力品質の目標

3. まず高速な下書きを生成する

gemini --yolo "/generate 'Professional Salesforce ERD with Account, Contact, Opportunity; clean legend; white background; Salesforce-style colors'"

4. 最終版の前に反復する

自然言語で編集内容を指示します。

gemini --yolo "/edit 'Move Account to center, thicken relationship lines, add legend in bottom right'"

5. 出力を細かく制御するには Python スクリプトを使う

高解像度が必要な場合や、編集対象を明示的に指定する場合は、スクリプトを使用します。

uv run scripts/generate_image.py \
  -p "Final production-quality Salesforce ERD with legend and field highlights" \
  -f "crm-erd-final.png" \
  -r 4K

反復の詳細ガイド：references/iteration-workflow.md

---

デフォルトのスタイルガイド

ERD では、ユーザーが別のスタイルを希望しない限り、architect.salesforce.com の美的表現をデフォルトにします。

• 濃い色の枠線と明るい塗りつぶしのカード
• クラウド固有のアクセントカラー
• 明瞭なラベルと関連線
• プレゼンテーションに適した余白と階層構造

スタイルガイド：references/architect-aesthetic-guide.md

---

よくあるパターン

パターン	デフォルトのアプローチ
ビジュアル ERD	利用可能であればメタデータを取得し、まず下書きをレンダリングする
LWC モックアップ	コンポーネントテンプレートとユーザーコンテキストを使い、下書きを 1 回反復する
アーキテクチャのイラスト	システムとフローを強調し、フィールド単位の詳細を減らす
画像の調整	再生成する前に /edit で小さな変更を加える
本番用の最終アセット	スクリプトによる 2K／4K 生成に切り替える

例：references/examples-index.md

---

出力／レビューの指針

生成後、次のいずれかを行ってください。

• ファイルをプレビューで開いて目視で確認する
• コーディングセッションに画像を添付／読み込んで、マルチモーダルレビューを行う
• 最終決定の前に、レイアウト、ラベル、色について調整するかユーザーに確認する

最初の試作は低コストに抑え、構成が固まってから高解像度の出力にのみコストをかけてください。

---

スキル間の連携

ニーズ	委任先	理由
Mermaid の初稿またはテキスト図	sf-diagram-mermaid	構造的な図をより速く作成できるため
ERD のオブジェクト／項目の調査	sf-metadata	正確なスキーマに基づけるため
モックアップを実際のコンポーネントに変換する	sf-lwc	設計後の実装を行うため
Apex／トリガーコードを並行してレビューする	sf-apex	コード品質の確認を後続で行うため

---

リファレンスマップ

まずはこちら

• references/gemini-cli-setup.md
• references/interview-questions.md
• references/iteration-workflow.md

ビジュアルスタイル／例

• references/architect-aesthetic-guide.md
• references/examples-index.md
• assets/erd/
• assets/lwc/
• assets/architecture/
• assets/review/

---

スコアガイド

スコア	意味
70+	優れた画像プロンプト／ワークフローの選択
55–69	使用可能なドラフトだが、反復が必要
40–54	リクエストとの部分的な一致
< 40	適合性が低い。再度ヒアリングし、プロンプトを作り直す