sf-diagram-nanobananapro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

sf-diagram-nanobananapro: Salesforce Visual AI Skill

sf-diagram-nanobananapro: Salesforce视觉AI技能

Visual content generation and AI sub-agent for Salesforce development using Gemini CLI with Nano Banana Pro extension.

基于Gemini CLI与Nano Banana Pro扩展，为Salesforce开发提供视觉内容生成与AI子代理功能。

⚠️ IMPORTANT: Prerequisites Check

⚠️ 重要提示：前置条件检查

Before using this skill, ALWAYS run the prerequisites check first:

bash

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

If the check fails, DO NOT invoke this skill. The user must fix the missing prerequisites first.

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

bash

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

若检查不通过，请勿调用本技能。用户必须先修复缺失的前置条件。

Requirements

必要条件

Requirement	Description	How to Get
macOS	Required for Preview app image display	Built-in
GEMINI_API_KEY	Personal API key for Nano Banana Pro	https://aistudio.google.com/apikey
Gemini CLI	Command-line interface for Gemini	`npm install -g @google/gemini-cli`
Nano Banana Extension	Image generation extension	`gemini extensions install nanobanana`

必要条件	说明	获取方式
macOS	用于Preview应用显示图片，为必需项	系统内置
GEMINI_API_KEY	Nano Banana Pro所需的个人API密钥	https://aistudio.google.com/apikey
Gemini CLI	Gemini的命令行界面	`npm install -g @google/gemini-cli`
Nano Banana Extension	图像生成扩展	`gemini extensions install nanobanana`

Optional (for 4K/editing via Python script)

可选（用于4K分辨率/通过Python脚本编辑）

Requirement	Description	How to Get
uv	Fast Python package runner	`curl -LsSf https://astral.sh/uv/install.sh \| sh`

必要条件	说明	获取方式
uv	快速Python包运行器	`curl -LsSf https://astral.sh/uv/install.sh \| sh`

Setting Up API Key

API密钥配置

Add to

~/.zshrc

(DO NOT commit to version control):

bash

export GEMINI_API_KEY="your-personal-api-key"
export NANOBANANA_MODEL=gemini-3-pro-image-preview

添加至

~/.zshrc

（请勿提交到版本控制系统）：

bash

export GEMINI_API_KEY="your-personal-api-key"
export NANOBANANA_MODEL=gemini-3-pro-image-preview

Core Capabilities

核心功能

1. Visual ERD Generation

1. 可视化ERD生成

Generate actual rendered ERD diagrams (not just Mermaid code):

Query object metadata via sf-metadata
Generate visual diagram with Nano Banana Pro
Display in macOS Preview app (default)
Default style: architect.salesforce.com aesthetic (see below)

生成可直接查看的ERD图（而非仅Mermaid代码）：

通过sf-metadata查询对象元数据
借助Nano Banana Pro生成可视化图表
默认在macOS Preview应用中显示
默认样式：遵循architect.salesforce.com的设计风格（详见下文）

2. LWC/UI Mockups

2. LWC/UI原型设计

Generate wireframes and component mockups:

Data tables, record forms, dashboard cards
Experience Cloud page layouts
Mobile-responsive designs following SLDS

生成线框图与组件原型：

数据表格、记录表单、仪表板卡片
Experience Cloud页面布局
遵循SLDS的移动端响应式设计

3. Gemini Code Review (Sub-Agent)

3. Gemini代码审查（子代理）

Parallel code review while Claude continues working:

Apex class/trigger review for best practices
LWC component review for accessibility
SOQL query optimization suggestions

在Claude继续工作的同时并行进行代码审查：

Apex类/触发器的最佳实践审查
LWC组件的可访问性审查
SOQL查询优化建议

4. Documentation Research (Sub-Agent)

4. 文档调研（子代理）

Parallel Salesforce documentation research:

Look up API references and limits
Find best practices and patterns
Research release notes

并行进行Salesforce文档调研：

查询API参考与限制
查找最佳实践与模式
调研版本说明

🎨 Default Visual Style: Architect.salesforce.com

🎨 默认视觉风格：Architect.salesforce.com

All ERD diagrams now default to the official Salesforce architect.salesforce.com aesthetic.

所有ERD图默认采用官方Salesforce architect.salesforce.com的设计风格。

The Signature Look: Dark Border + Light Fill

标志性外观：深色边框 + 浅色填充

Property	Value
Border	Solid 2px in cloud's brand color
Fill	Same hue at ~25% opacity (translucent)
Corners	Rounded (8-12px radius)
Text	Dark gray/black on light fill

属性	值
边框	2px实线，采用云产品品牌色
填充	同色系，透明度约25%（半透明）
圆角	圆角设计（8-12px半径）
文字	浅填充背景上使用深灰/黑色文字

Cloud-Specific Colors (Auto-Detected)

云产品专属配色（自动检测）

Cloud	Border Color	Detect By Objects
Sales Cloud	`#0B827C` (Teal)	Lead, Opportunity, Quote, Campaign
Service Cloud	`#9E2A7D` (Magenta)	Case, Knowledge, Entitlement
Platform	`#5A67D8` (Purple)	Account, Contact only
Industries	`#BA4383` (Pink)	ServiceTerritory, WorkType

云产品	边框颜色	检测依据对象
Sales Cloud	`#0B827C` （青绿色）	Lead, Opportunity, Quote, Campaign
Service Cloud	`#9E2A7D` （品红色）	Case, Knowledge, Entitlement
Platform	`#5A67D8` （紫色）	仅Account、Contact
Industries	`#BA4383` （粉色）	ServiceTerritory, WorkType

Standard Elements

标准元素

Element	Description
Page Title	"[Cloud Name] Overview Data Model" at top
Header Banner	Salesforce logo + "[CLOUD] Overview"
Legend Bar	ENTITIES + RELATIONSHIPS notation
Entity Boxes	Name + API name + bullet fields
Relationship Lines	Labeled ("child of", "parent of")
Footer	Copyright + Last modified date

See

resources/architect-aesthetic-guide.md

for full specification.

元素	说明
页面标题	顶部显示“[云产品名称] 概览数据模型”
头部横幅	Salesforce标志 + “[CLOUD] 概览”
图例栏	标注ENTITIES（实体）与RELATIONSHIPS（关系）
实体框	包含名称、API名称及字段列表
关系线	标注“child of（子对象）”、“parent of（父对象）”
页脚	版权信息 + 最后修改日期

完整规范请查看

resources/architect-aesthetic-guide.md

。

🔄 Draft → Final Workflow (Cost-Effective Iteration)

🔄 草稿→终稿工作流（高性价比迭代）

For complex visuals, iterate at low resolution before generating the final:

Phase	Resolution	Purpose	Time	Method
Draft	1K	Quick feedback, prompt refinement	~3s	CLI or Python
Iteration	1K	Style/layout adjustments	~3s	CLI `/edit` or Python
Final	4K	Production-quality output	~10s	Python script only

对于复杂视觉内容，先以低分辨率迭代，再生成终稿：

阶段	分辨率	目的	耗时	方式
草稿	1K	快速获取反馈、优化提示词	~3秒	CLI或Python
迭代	1K	调整样式/布局	~3秒	CLI `/edit` 或Python
终稿	4K	生产级质量输出	~10秒	仅Python脚本

Recommended Workflow

Example: Draft to Final

示例：草稿到终稿

bash

undefined

bash

undefined

Step 1: Draft (fast, cheap)

步骤1：生成草稿（快速、低成本）

gemini --yolo "/generate 'Account-Contact ERD with blue boxes'" open ~/nanobanana-output/*.png # Review

gemini --yolo "/generate 'Account-Contact ERD with blue boxes'" open ~/nanobanana-output/*.png # 查看结果

Step 2: Iterate with /edit

步骤2：使用/edit迭代优化

gemini --yolo "/edit 'Add Opportunity, use thicker arrows'"

Step 3: Final at 4K (requires Python script)

步骤3：生成4K终稿（需Python脚本）

uv run scripts/generate_image.py
-p "Account-Contact-Opportunity ERD, blue boxes, thick arrows, legend"
-f "crm-erd-final.png"
-r 4K open ~/nanobanana-output/crm-erd-final.png

---

uv run scripts/generate_image.py
-p "Account-Contact-Opportunity ERD, blue boxes, thick arrows, legend"
-f "crm-erd-final.png"
-r 4K open ~/nanobanana-output/crm-erd-final.png

---

Image Editing with /edit

图像编辑：使用/edit命令

Refine existing images with natural language instructions:

bash

undefined

通过自然语言指令优化现有图像：

bash

undefined

Edit the most recent generated image

编辑最近生成的图像

gemini --yolo "/edit 'Move Account box to center, make relationship arrows thicker'"

Common editing commands

常见编辑命令

gemini --yolo "/edit 'Add a legend in the bottom right corner'" gemini --yolo "/edit 'Change background to light gray'" gemini --yolo "/edit 'Add Salesforce Lightning blue (#0176D3) to headers'"

undefined

gemini --yolo "/edit 'Add a legend in the bottom right corner'" gemini --yolo "/edit 'Change background to light gray'" gemini --yolo "/edit 'Add Salesforce Lightning blue (#0176D3) to headers'"

undefined

Editing via Python Script (with resolution control)

通过Python脚本编辑（支持分辨率控制）

bash

uv run scripts/generate_image.py \
  -p "Add legend in bottom right, use SLDS colors" \
  -i ~/nanobanana-output/previous-erd.png \
  -f "erd-with-legend.png" \
  -r 2K

bash

uv run scripts/generate_image.py \
  -p "Add legend in bottom right, use SLDS colors" \
  -i ~/nanobanana-output/previous-erd.png \
  -f "erd-with-legend.png" \
  -r 2K

Artistic Styles & Variations

艺术风格与变体

The CLI extension supports style modifiers for creative control:

bash

undefined

CLI扩展支持风格修饰符，实现创意控制：

bash

undefined

Apply artistic styles

应用艺术风格

gemini --yolo "/generate 'Salesforce ERD' --styles=modern,minimalist"

Available styles

可用风格

photorealistic, watercolor, oil-painting, sketch, pixel-art

anime, vintage, modern, abstract, minimalist

Generate multiple variations

生成多个变体

gemini --yolo "/generate 'Dashboard mockup' --count=3 --variations=color-palette"

Reproducible output with seed

通过种子值生成可复现的输出

gemini --yolo "/generate 'Account ERD' --seed=42"

---

gemini --yolo "/generate 'Account ERD' --seed=42"

---

🎤 Interview-First Workflow (Recommended)

🎤 优先访谈工作流（推荐）

Before generating any image, Claude MUST ask clarifying questions using
AskUserQuestion
.

This ensures high-quality output by gathering requirements upfront rather than guessing.

在生成任何图像前，Claude必须使用
AskUserQuestion
提出澄清问题。

通过提前收集需求而非猜测，确保输出高质量内容。

Automatic Interview Triggers

自动触发访谈的场景

User Request	Interview Questions
ERD, data model, schema	Objects, Style, Purpose, Extras
LWC, component, mockup, wireframe	Component type, Object, Context, Style
Architecture, integration, flow	Diagram type, Systems, Protocols, Elements

用户请求	访谈问题
ERD、数据模型、架构	对象范围、风格、用途、额外需求
LWC、组件、原型、线框图	组件类型、关联对象、使用场景、风格
架构、集成、流程	图表类型、涉及系统、协议、元素

Interview Flow

访谈流程

User: "Generate an ERD for my org"
        │
        ▼
┌─────────────────────────────────────────────────────────┐
│  Claude invokes AskUserQuestion with 4 questions:       │
│                                                         │
│  Objects: [Core CRM / Sales Cloud / Service Cloud / Custom]  │
│  Style:   [Professional / Whiteboard / Technical / Minimalist]│
│  Purpose: [Documentation 4K / Quick draft 1K / Presentation]  │
│  Extras:  [Legend / Field names / Color-code] (multi-select)  │
└─────────────────────────────────────────────────────────┘
        │
        ▼
Claude builds optimized prompt from answers
        │
        ▼
Generate image with gathered requirements

用户："为我的组织生成ERD图"
        │
        ▼
┌─────────────────────────────────────────────────────────┐
│  Claude调用AskUserQuestion，提出4个问题：                │
│                                                         │
│  对象范围：[核心CRM / Sales Cloud / Service Cloud / 自定义对象]  │
│  风格：   [专业风格 / 白板手绘风格 / 技术细节风格 / 极简风格]│
│  用途：   [文档（4K） / 快速草稿（1K） / 演示]  │
│  额外需求：  [包含图例 / 显示字段名 / 按对象类型配色]（可多选）  │
└─────────────────────────────────────────────────────────┘
        │
        ▼
Claude根据回答构建优化后的提示词
        │
        ▼
根据收集的需求生成图像

Example Questions for ERD

ERD图示例问题

Question 1: "Which objects should be included in the ERD?"
- Core CRM (Account, Contact, Opportunity, Case) ← Recommended
- Sales Cloud (Lead, Campaign, Quote, Order)
- Service Cloud (Case, Knowledge, Entitlement, Asset)
- Custom objects (I'll specify)

Question 2: "What visual style do you prefer?"
- Professional (clean lines, SLDS colors) ← Recommended
- Whiteboard (hand-drawn, casual)
- Technical (with field names)
- Minimalist (simple boxes)

Question 3: "What's the primary purpose?"
- Documentation (4K quality)
- Quick draft (1K, fast iteration) ← Recommended for first attempt
- Presentation slides
- Architecture review

Question 4: "Any special requirements?" (multi-select)
- Include legend
- Show field names
- Color-code by object type
- None

问题1："ERD图中需要包含哪些对象？"
- 核心CRM（Account、Contact、Opportunity、Case）← 推荐
- Sales Cloud（Lead、Campaign、Quote、Order）
- Service Cloud（Case、Knowledge、Entitlement、Asset）
- 自定义对象（我将具体说明）

问题2："你偏好哪种视觉风格？"
- 专业风格（简洁线条、SLDS配色）← 推荐
- 白板手绘风格（手绘效果、休闲风格）
- 技术细节风格（包含字段名）
- 极简风格（简单方框）

问题3："主要用途是什么？"
- 文档（4K质量）
- 快速草稿（1K，便于快速迭代）← 首次尝试推荐
- 演示幻灯片
- 架构评审

问题4："有特殊需求吗？"（可多选）
- 包含图例
- 显示字段名
- 按对象类型配色
- 无

Skip Interview (Quick Mode)

跳过访谈（快速模式）

To skip questions and use defaults, include these keywords:

"quick" →
```
"Quick ERD of Account-Contact"
```
"simple" →
```
"Simple LWC mockup"
```
"just generate" →
```
"Just generate an architecture diagram"
```

Quick mode uses: Professional style, 1K resolution, legend included.

若要跳过问题并使用默认设置，可在请求中包含以下关键词：

"quick" →
```
"Quick ERD of Account-Contact"
```
"simple" →
```
"Simple LWC mockup"
```
"just generate" →
```
"Just generate an architecture diagram"
```

快速模式默认使用：专业风格、1K分辨率、包含图例。

Full Question Reference

完整问题参考

See

docs/interview-questions.md

for:

Complete question sets for all image types
Answer-to-prompt mapping tables
Default values for skip mode

查看

docs/interview-questions.md

获取：

所有图像类型的完整问题集
回答到提示词的映射表
跳过模式的默认值

Workflow Patterns

工作流模式

Pattern A: Visual ERD Generation

模式A：可视化ERD生成

Trigger: User asks for visual ERD, rendered diagram, or image-based data model

Workflow: 0. Run Interview (unless "quick" mode) - Ask about objects, style, purpose, extras

Run prerequisites check
Query object metadata via sf-metadata (if org connected)
Build Nano Banana prompt using interview answers + object relationships
Execute Gemini CLI with
```
/generate
```
command (requires --yolo flag)
Open result in macOS Preview app using
open
command

Example:

bash

undefined

触发条件：用户请求可视化ERD图、可查看的图表或基于图像的数据模型

工作流: 0. 运行访谈（除非使用"quick"模式）- 询问对象范围、风格、用途、额外需求

运行前置条件检查
若已连接组织，通过sf-metadata查询对象元数据
结合访谈回答与对象关系，构建Nano Banana提示词
执行Gemini CLI的
```
/generate
```
命令（需添加--yolo参数）
使用
open
命令在macOS Preview应用中打开结果

示例:

bash

undefined

Generate image

生成图像

gemini --yolo "/generate 'Professional Salesforce ERD diagram showing:

Account (blue box, center)
Contact (green box, linked to Account with lookup arrow)
Opportunity (yellow box, linked to Account with master-detail thick arrow) Include legend. Clean white background, Salesforce Lightning style.'"

gemini --yolo "/generate 'Professional Salesforce ERD diagram showing:

Account (blue box, center)
Contact (green box, linked to Account with lookup arrow)
Opportunity (yellow box, linked to Account with master-detail thick arrow) Include legend. Clean white background, Salesforce Lightning style.'"

Open in macOS Preview (DEFAULT)

默认在macOS Preview中打开

open ~/nanobanana-output/[generated-file].png

undefined

open ~/nanobanana-output/[generated-file].png

undefined

Pattern B: LWC Mockup

模式B：LWC原型设计

Trigger: User asks for component mockup, wireframe, or UI design

Workflow: 0. Run Interview (unless "quick" mode) - Ask about component type, object, context, style

Load appropriate template from
```
templates/lwc/
```
Customize prompt using interview answers + template
Execute via Nano Banana
Open in Preview app

触发条件：用户请求组件原型、线框图或UI设计

工作流: 0. 运行访谈（除非使用"quick"模式）- 询问组件类型、关联对象、使用场景、风格

从
```
templates/lwc/
```
加载合适的模板
结合访谈回答与模板，自定义提示词
通过Nano Banana执行生成
在Preview应用中打开结果

Pattern C: Parallel Code Review

模式C：并行代码审查

Trigger: User asks for code review, second opinion, or "review while I work"

Workflow:

Run Gemini in background with JSON output
Claude continues with current task
Return Gemini's findings when ready

Example:

bash

gemini "Review this Apex trigger for:
   - Bulkification issues
   - Best practices violations
   - Security concerns (CRUD/FLS)
   Code: [trigger code]" -o json

触发条件：用户请求代码审查、第二意见或"在我工作时进行审查"

工作流:

在后台运行Gemini并输出JSON结果
Claude继续当前任务
准备就绪后返回Gemini的审查结果

示例:

bash

gemini "Review this Apex trigger for:
   - Bulkification issues
   - Best practices violations
   - Security concerns (CRUD/FLS)
   Code: [trigger code]" -o json

Pattern D: Documentation Research

模式D：文档调研

Trigger: User asks to look up, research, or find documentation

Workflow:

Run Gemini with documentation query
Return findings with sources

触发条件：用户请求查找、调研或获取文档

工作流:

运行Gemini执行文档查询
返回调研结果及来源

Commands Reference

命令参考

Image Generation

图像生成

bash

undefined

bash

undefined

Generate image from prompt (MUST use --yolo for non-interactive)

根据提示词生成图像（非交互式模式必须使用--yolo参数）

gemini --yolo "/generate 'description'"

Images are saved to ~/nanobanana-output/

图像将保存至~/nanobanana-output/

undefined

undefined

Image Display

图像显示

bash

undefined

bash

undefined

Open in macOS Preview app (default)

在macOS Preview应用中打开（默认方式）

open /path/to/image.png

Open most recent generated image

打开最近生成的图像

open ~/nanobanana-output/$(ls -t ~/nanobanana-output/*.png | head -1)

View inline in Claude Code conversation (multimodal vision)

在Claude Code对话中内联查看（多模态视觉）

Use the Read tool → /path/to/image.png

使用Read工具 → /path/to/image.png

---

---

Cross-Skill Integration

跨技能集成

Skill	Integration	Usage
sf-diagram-mermaid	Enhance Mermaid with visual rendering	"Convert this Mermaid ERD to a visual diagram"
sf-metadata	Get object/field data for ERDs	Query org before generating ERD
sf-lwc	Generate component mockups	"Mockup for the AccountList component"
sf-apex	Review Apex code via Gemini	"Get Gemini's opinion on this trigger"

技能	集成方式	使用场景
sf-diagram-mermaid	将Mermaid图转换为可视化图像	"将这个Mermaid ERD图转换为可视化图表"
sf-metadata	为ERD图获取对象/字段数据	生成ERD图前查询组织数据
sf-lwc	生成组件原型	"为AccountList组件生成原型"
sf-apex	通过Gemini审查Apex代码	"获取Gemini对这个触发器的评价"

Helper Scripts

辅助脚本

Script	Location	Purpose
`check-prerequisites.sh`	`scripts/`	Verify all requirements before use
`generate_image.py`	`scripts/`	Direct API script for 4K resolution and image editing

脚本	位置	用途
`check-prerequisites.sh`	`scripts/`	使用前验证所有必要条件
`generate_image.py`	`scripts/`	直接调用API的脚本，支持4K分辨率与图像编辑

Template Usage

模板使用

ERD Templates (

templates/erd/

)

ERD模板（

templates/erd/

）

```
core-objects.md
```
- Standard CRM objects
```
custom-objects.md
```
- Custom data model

```
core-objects.md
```
- 标准CRM对象模板
```
custom-objects.md
```
- 自定义数据模型模板

LWC Templates (

templates/lwc/

)

LWC模板（

templates/lwc/

）

```
data-table.md
```
- Lightning datatable mockups
```
record-form.md
```
- Record form mockups
```
dashboard-card.md
```
- Dashboard card mockups

```
data-table.md
```
- Lightning数据表格原型模板
```
record-form.md
```
- 记录表单原型模板
```
dashboard-card.md
```
- 仪表板卡片原型模板

Architecture Templates (

templates/architecture/

)

架构模板（

templates/architecture/

）

```
integration-flow.md
```
- Integration architecture diagrams

```
integration-flow.md
```
- 集成架构图模板

Review Templates (

templates/review/

)

审查模板（

templates/review/

）

```
apex-review.md
```
- Apex code review prompts
```
lwc-review.md
```
- LWC review prompts

```
apex-review.md
```
- Apex代码审查提示词模板
```
lwc-review.md
```
- LWC组件审查提示词模板

Troubleshooting

故障排除

Prerequisites Check Failed

前置条件检查失败

Run

scripts/check-prerequisites.sh

and fix each issue:

No API Key: Set GEMINI_API_KEY in ~/.zshrc (personal key from aistudio.google.com)
No Gemini CLI: Install with npm
No Nano Banana: Install extension via gemini CLI

运行

scripts/check-prerequisites.sh

并修复每个问题：

无API密钥：在~/.zshrc中设置GEMINI_API_KEY（从aistudio.google.com获取个人密钥）
无Gemini CLI：通过npm安装
无Nano Banana扩展：通过gemini CLI安装扩展

Image Not Opening

图像无法打开

Ensure you're on macOS (Preview app is macOS-only)
Check the file path exists:
```
ls ~/nanobanana-output/
```
Try opening manually:
```
open ~/nanobanana-output/[filename].png
```

确保使用macOS系统（Preview应用仅支持macOS）
检查文件路径是否存在：
```
ls ~/nanobanana-output/
```
尝试手动打开：
```
open ~/nanobanana-output/[filename].png
```

API Key Errors

API密钥错误

Ensure GEMINI_API_KEY is exported in current shell
Verify key is valid at https://aistudio.google.com/apikey
Check billing is enabled on Google Cloud project

确保GEMINI_API_KEY已在当前Shell中导出
在https://aistudio.google.com/apikey验证密钥有效性
检查Google Cloud项目是否已启用计费

Security Notes

安全注意事项

⚠️ NEVER commit your GEMINI_API_KEY to version control

Store API key in
```
~/.zshrc
```
only (not in project files)
The key is personal and tied to your Google account billing

⚠️ 请勿将GEMINI_API_KEY提交到版本控制系统

仅在
```
~/.zshrc
```
中存储API密钥（不要存放在项目文件中）
该密钥为个人所有，与你的Google账户计费绑定

sf-diagram-nanobananapro

Original

Translation

sf-diagram-nanobananapro: Salesforce Visual AI Skill

sf-diagram-nanobananapro: Salesforce视觉AI技能

⚠️ IMPORTANT: Prerequisites Check

⚠️ 重要提示：前置条件检查

Requirements

必要条件

Optional (for 4K/editing via Python script)

可选（用于4K分辨率/通过Python脚本编辑）

Setting Up API Key

API密钥配置

Core Capabilities

核心功能

1. Visual ERD Generation

1. 可视化ERD生成

2. LWC/UI Mockups

2. LWC/UI原型设计

3. Gemini Code Review (Sub-Agent)

3. Gemini代码审查（子代理）

4. Documentation Research (Sub-Agent)

4. 文档调研（子代理）

🎨 Default Visual Style: Architect.salesforce.com

🎨 默认视觉风格：Architect.salesforce.com

The Signature Look: Dark Border + Light Fill

标志性外观：深色边框 + 浅色填充

Cloud-Specific Colors (Auto-Detected)

云产品专属配色（自动检测）

Standard Elements

标准元素

🔄 Draft → Final Workflow (Cost-Effective Iteration)

🔄 草稿→终稿工作流（高性价比迭代）

Recommended Workflow

推荐工作流

Example: Draft to Final

示例：草稿到终稿

Step 1: Draft (fast, cheap)

步骤1：生成草稿（快速、低成本）

Step 2: Iterate with /edit

步骤2：使用/edit迭代优化

Step 3: Final at 4K (requires Python script)

步骤3：生成4K终稿（需Python脚本）

Image Editing with /edit

图像编辑：使用/edit命令

Edit the most recent generated image

编辑最近生成的图像

Common editing commands

常见编辑命令

Editing via Python Script (with resolution control)

通过Python脚本编辑（支持分辨率控制）

Artistic Styles & Variations

艺术风格与变体

Apply artistic styles

应用艺术风格

Available styles

可用风格

photorealistic, watercolor, oil-painting, sketch, pixel-art

photorealistic, watercolor, oil-painting, sketch, pixel-art

anime, vintage, modern, abstract, minimalist

anime, vintage, modern, abstract, minimalist

Generate multiple variations

生成多个变体

Reproducible output with seed

通过种子值生成可复现的输出

🎤 Interview-First Workflow (Recommended)

🎤 优先访谈工作流（推荐）

Automatic Interview Triggers

自动触发访谈的场景

Interview Flow

访谈流程

Example Questions for ERD

ERD图示例问题

Skip Interview (Quick Mode)

跳过访谈（快速模式）

Full Question Reference

完整问题参考

Workflow Patterns

工作流模式

Pattern A: Visual ERD Generation

ERD Templates (
`templates/erd/`
)

ERD模板（
`templates/erd/`
）

LWC Templates (
`templates/lwc/`
)

LWC模板（
`templates/lwc/`
）

Architecture Templates (
`templates/architecture/`
)

架构模板（
`templates/architecture/`
）

Review Templates (
`templates/review/`
)

审查模板（
`templates/review/`
）