sf-diagram-nanobananapro: Salesforce 视觉 AI 技能 (Salesforce Visual AI Skill)

当用户需要渲染后的视觉图像而非文本图表时使用此技能：实体关系图、UI 线框图、架构示意图、可直接用于幻灯片的图像，或使用 Nano Banana Pro 进行图像编辑。

硬性门槛：先决条件优先 (Hard Gate: Prerequisites First)

在使用技能前，始终运行先决条件检查：

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

如果先决条件检查失败，请停止并引导用户参考以下设置指南：

• references/gemini-cli-setup.md

何时由此技能处理 (When This Skill Owns the Task)

当用户需要以下内容时，使用 sf-diagram-nanobananapro：

• PNG / SVG 格式的图像输出
• 渲染后的实体关系图或架构图
• Lightning Web Component 或 Experience Cloud 的线框图/原型图
• 超越 Mermaid 的视觉润色
• 对先前生成的图像进行编辑

当用户需要以下内容时，转交其他技能处理：

• Mermaid 或纯文本图表 → sf-diagram-mermaid
• 用于实体关系图的元数据发现 → sf-metadata
• 在线框图之后进行 LWC 实现 → sf-lwc
• Apex 审查 / 实现 → sf-apex

首先需要收集的上下文 (Required Context to Gather First)

询问或推断：

• 图像类型：实体关系图、UI 线框图、架构示意图或图像编辑
• 主题范围及关键实体/系统
• 目标质量：草稿、演示用还是最终交付资产
• 首选样式和宽高比
• 用户希望快速模式，还是通过访谈驱动构建提示词

访谈优先工作流 (Interview-First Workflow)

除非用户明确要求快速/简单/直接生成，否则先提出澄清性问题。

最少问题集 (Minimum question set)

问题库：references/interview-questions.md

快速模式默认值 (Quick mode defaults)

如果用户说“快速”、“简单”或“直接生成”，默认使用：

• 专业风格 (professional style)
• 1K 分辨率草稿输出 (1K draft output)
• 有帮助时包含图例 (legend included when helpful)
• 先生成一张图，然后迭代

推荐工作流 (Recommended Workflow)

1. 收集输入 (Gather inputs)

决定需要以下哪些内容：

• 对象列表 / 元数据 (object list / metadata)
• 用途：草稿 vs 演示 vs 文档 (purpose: draft vs presentation vs documentation)
• 期望的美学风格 (desired aesthetic)
• 宽高比 / 分辨率 (aspect ratio / resolution)
• 是全新渲染还是对现有图像的编辑 (whether this is a fresh render or edit of an existing image)

2. 构建具体的提示词 (Build a concrete prompt)

好的提示词应指定：

• 主题和范围 (subject and scope)
• 构图 / 布局 (composition / layout)
• 色彩处理 (color treatment)
• 标签 / 图例 / 关系线 (labels / legends / relationship lines)
• 输出质量目标 (output quality goal)

3. 先生成快速草稿 (Generate a fast draft first)

gemini --yolo "/generate '专业的 Salesforce 实体关系图，包含客户、联系人、商机；干净图例；白色背景；Salesforce 风格配色 (Professional Salesforce ERD with Account, Contact, Opportunity; clean legend; white background; Salesforce-style colors)'"

4. 最终确认前进行迭代 (Iterate before final)

使用自然语言编辑：

gemini --yolo "/edit '将客户移到中心，加粗关系线，在右下角添加图例 (Move Account to center, thicken relationship lines, add legend in bottom right)'"

5. 使用 Python 脚本控制最终输出 (Use the Python script for controlled final output)

当需要更高分辨率或明确的编辑输入时使用脚本：

uv run scripts/generate_image.py \
  -p "最终生产级 Salesforce 实体关系图，带图例和字段高亮 (Final production-quality Salesforce ERD with legend and field highlights)" \
  -f "crm-erd-final.png" \
  -r 4K

完整迭代指南：references/iteration-workflow.md

默认样式指南 (Default Style Guidance)

对于实体关系图，除非用户另有要求，默认采用 architect.salesforce.com 美学风格：

• 深色边框 + 浅色填充卡片 (dark border + light fill cards)
• 云平台特有的强调色 (cloud-specific accent colors)
• 清晰的标签和关系线 (clean labels and relationship lines)
• 适合演示的留白和层级 (presentation-ready whitespace and hierarchy)

样式指南：references/architect-aesthetic-guide.md

常见模式 (Common Patterns)

示例：references/examples-index.md

输出 / 审查指导 (Output / Review Guidance)

生成后，执行以下操作之一：

• 在预览中打开文件进行视觉检查 (open the file in Preview for visual inspection)
• 在编码会话中附加/读取图像进行多模态审查 (attach/read the image in the coding session for multimodal review)
• 询问用户是否要在定稿前对布局、标签或颜色进行迭代 (ask the user whether to iterate on layout, labeling, or color before finalizing)
• 保持首轮低成本；仅在构图正确后才投入高分辨率输出 (Keep the first pass cheap; only spend on high-res output after the composition is right.)

跨技能集成 (Cross-Skill Integration)

参考地图 (Reference Map)

从这里开始 (Start here)

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

视觉风格 / 示例 (Visual style / examples)

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

评分指南 (Score Guide)