sf-diagram-nanobananapro: Salesforce Visual 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 モックアップ、アーキテクチャ図、または画像編集
• 対象となるスコープと主要なエンティティ / システム
• 目標品質: ドラフト vs プレゼンテーション vs プロダクションアセット
• 優先スタイルとアスペクト比
• ユーザーがクイックモードまたはインタビュー駆動型プロンプト構築を望んでいるか

---

インタビューファースト ワークフロー

ユーザーが明確にクイック/シンプル/ただ生成してを指定していない限り、まず明確化の質問をしてください。

最小質問セット

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

質問バンク: references/interview-questions.md

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

ユーザーが「クイック」「シンプル」「ただ生成して」と言った場合、以下にデフォルト設定してください:

• プロフェッショナルスタイル
• 1K ドラフト出力
• 有用な場合は凡例を含める
• まず 1 つの画像を生成してから反復

---

推奨ワークフロー

1. 入力情報を収集

以下のいずれが必要かを判断します:

• オブジェクトリスト / メタデータ
• 目的: ドラフト vs プレゼンテーション vs ドキュメンテーション
• 希望する美学
• アスペクト比 / 解像度
• これが新規レンダリングか既存画像の編集か

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

---

出力 / レビューガイダンス

生成後、以下のいずれかを実行します:

• Preview で開いてビジュアルを検査
• コーディングセッションで画像を添付/読み込んでマルチモーダルレビューを実施
• 最終化前にレイアウト、ラベリング、カラーを反復するかどうかをユーザーに確認

最初のパスは低コストで保ち、構成が正しくなった後にのみ高解像度出力に投資します。

---

クロススキル統合

必要事項	委譲先	理由
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	不十分な適合; 再インタビューとプロンプト再構築