mcpField
S
sf-diagram-nanobananapro

sf-diagram-nanobananapro

github.com/jaganpro设计与 UI4241.3k 次安装26 周前更新
代码仓库

关于 sf-diagram-nanobananapro

sf-diagram-nanobananapro 是面向 Salesforce 用户的视觉生成技能，可用 Nano Banana Pro 制作图表、界面模型、架构插图或编辑图像。默认先通过提问收集需求，并支持先迭代草稿再生成高分辨率成品。

主要功能

  1. 01生成 ERD 和架构图
  2. 02制作 LWC 与 Experience Cloud 界面模型
  3. 03用自然语言编辑图像
  4. 04通过访谈构建提示词
  5. 05从草稿迭代到最终图像

适用场景

  1. 01创建 Salesforce 架构图
  2. 02起草 LWC 界面模型
  3. 03展示系统边界与流程
  4. 04修改已生成的图像

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jaganpro/sf-skills --skill sf-diagram-nanobananapro

安装后在 Claude Code 中输入/sf-diagram-nanobananapro确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

CREDITS.md
README.md
assets/architecture/
integration-flow.md
assets/erd/
core-objects.md
custom-objects.md
assets/lwc/
dashboard-card.md
data-table.md
record-form.md
assets/review/
apex-review.md
lwc-review.md
references/
architect-aesthetic-guide.md
examples-index.md
gemini-cli-setup.md
interview-questions.md
iteration-workflow.md
scripts/
check-prerequisites.sh
generate_image.py

详细介绍

sf-diagram-nanobananapro：Salesforce 可视化 AI 技能

当用户需要渲染后的视觉内容，而不是文本图表时，请使用此技能：例如 ERD、UI 模型图、架构示意图、可直接用于幻灯片的图片，或使用 Nano Banana Pro 编辑图片。

硬性门槛：先检查前置条件

使用此技能前，务必先运行前置条件检查：

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

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

适用任务

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

  • PNG / SVG 风格的图像输出
  • 渲染后的 ERD 或架构图
  • LWC 或 Experience Cloud 模型图 / 线框图
  • 超越 Mermaid 的视觉润色
  • 编辑先前生成的图片

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

先收集必要信息

请询问或推断：

  • 图像类型：ERD、UI 模型图、架构示意图或图片编辑
  • 主题范围及关键实体 / 系统
  • 目标质量：草稿、演示级还是生产级素材
  • 首选风格和宽高比
  • 用户希望使用快速模式，还是通过访谈构建提示词

访谈优先工作流

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

最少问题集
请求类型询问内容
ERD / 架构对象、视觉风格、用途、额外需求
UI 模型图组件类型、对象 / 上下文、设备 / 布局、风格
架构图系统、边界、协议、重点
图片编辑要保留的内容、要更改的内容、输出质量

问题库：references/interview-questions.md

快速模式默认值

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

  • 专业风格
  • 1K 草稿输出
  • 适用时包含图例
  • 先生成一张图片，再进行迭代

推荐工作流

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 模型图使用组件模板 + 用户上下文 + 一轮草稿迭代
架构示意图突出系统和流程，减少字段级细节
图片润色小幅修改时先使用 /edit，再重新生成
最终生产素材改用脚本生成 2K/4K 图片

示例：references/examples-index.md

输出／审核指南

生成后，执行以下一项：

  • 在预览中打开文件，进行视觉检查
  • 在编码会话中附加／读取图像，进行多模态审核
  • 在定稿前询问用户是否要调整布局、标注或颜色

先以低成本完成第一版；只有在构图确定后，才生成高分辨率输出。

跨技能集成

需求委派给原因
Mermaid 初稿或文本图表sf-diagram-mermaid更快地完成结构图绘制
ERD 的对象／字段发现sf-metadata准确地依据架构信息
将模型图转为真实组件sf-lwc设计完成后的实现
并行审核 Apex／触发器代码sf-apex后续代码质量检查

参考索引

从这里开始
视觉风格／示例

评分指南

分数含义
70+图像提示词／工作流选择出色
55–69可用的草稿，但需要迭代
40–54与请求部分契合
< 40契合度差；重新访谈并重建提示词

评论

支持 Markdown