image-generation
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImage Generation Skill
图像生成Skill
Generate illustration images for blog posts, documentation, and technical articles using Google Gemini's Nano Banana 2 (gemini-3.1-flash-image-preview) model.
Prerequisite: must be set in environment variables.
GEMINI_API_KEY使用Google Gemini的Nano Banana 2（gemini-3.1-flash-image-preview）模型为博客文章、文档和技术文章生成插图。
前置要求： 必须在环境变量中设置。
GEMINI_API_KEYWhen to Use
使用场景
- User asks to generate an illustration, diagram, or concept image
- User is writing an article and needs visual explanations for concepts or workflows
- User explicitly asks for AI-generated images
- 用户要求生成插图、图表或概念图
- 用户正在撰写文章，需要为概念或工作流程提供可视化解释
- 用户明确要求AI生成图像
Step 1: Determine the Image Requirements
步骤1：确定图像需求
Before generating, clarify:
- What to illustrate — the concept, architecture, flow, or scene
- Language — default to English for both prompt and text in image. Only use other languages if the user explicitly requests it
- Save location — see "Output Path" section below
- Style/color preferences — if user has specific needs, otherwise use defaults
生成图像前，需明确：
- 要展示的内容 —— 概念、架构、流程或场景
- 语言 —— 提示词和图像中的文本默认使用英文。仅当用户明确要求时才使用其他语言
- 保存位置 —— 请参阅下方的“输出路径”部分
- 风格/颜色偏好 —— 如果用户有特定需求则按要求设置，否则使用默认值
Step 2: Craft the Prompt
步骤2：编写提示词
Default Style Prefix (always prepended unless user overrides)
默认风格前缀（除非用户覆盖，否则自动添加）
The script automatically prepends this style prefix:
Use a clean, modern color palette with soft tones. Minimalist flat illustration style with clear visual hierarchy. Professional and polished look suitable for technical blog articles. No photorealistic rendering. No excessive gradients or shadows.
脚本会自动添加以下风格前缀：
使用简洁、现代的配色方案，色调柔和。采用极简扁平化插图风格，视觉层次清晰。整体专业、精致，适合技术博客文章。不使用写实渲染，避免过多渐变或阴影。
Prompt Writing Guidelines
提示词编写指南
- Be specific and descriptive about the visual elements
- For technical concepts: describe the components, their relationships, and layout
- For architecture diagrams: list the layers/components and how they connect
- For flow diagrams: describe the steps and direction of flow
- If text labels are needed in the image, spell them out explicitly in the prompt
- Default language is English. Only write the prompt and request in-image text in another language if the user specifically asks
- 对视觉元素的描述要具体、详细
- 对于技术概念：描述组件、组件间的关系以及布局
- 对于架构图：列出层级/组件及其连接方式
- 对于流程图：描述步骤和流向
- 如果图像中需要文本标签，请在提示词中明确写出
- 默认使用英文。仅当用户明确要求时，才使用其他语言编写提示词和请求图像中的文本
Example Prompts
提示词示例
Architecture diagram:
A system architecture diagram showing: User sends query to an API Gateway,
which routes to a Vector Database (labeled "Milvus") and an LLM service.
The Vector Database returns relevant documents, which are combined with the
original query and sent to the LLM for final response generation.
Arrows show data flow direction. Each component is a rounded rectangle with
an icon and label.Concept illustration:
A visual comparison of keyword search vs semantic search. Left side shows
keyword search with exact word matching (highlighted matching words).
Right side shows semantic search with a brain icon understanding meaning
and connecting related concepts with dotted lines. A dividing line separates
the two approaches.架构图示例：
A system architecture diagram showing: User sends query to an API Gateway,
which routes to a Vector Database (labeled "Milvus") and an LLM service.
The Vector Database returns relevant documents, which are combined with the
original query and sent to the LLM for final response generation.
Arrows show data flow direction. Each component is a rounded rectangle with
an icon and label.概念示意图示例：
A visual comparison of keyword search vs semantic search. Left side shows
keyword search with exact word matching (highlighted matching words).
Right side shows semantic search with a brain icon understanding meaning
and connecting related concepts with dotted lines. A dividing line separates
the two approaches.Step 3: Generate the Image
步骤3：生成图像
Run the script:
bash
python ${CLAUDE_SKILL_ROOT}/scripts/generate_image.py \
--prompt "your prompt here" \
--output "/path/to/save/image.png"运行脚本：
bash
python ${CLAUDE_SKILL_ROOT}/scripts/generate_image.py \
--prompt "your prompt here" \
--output "/path/to/save/image.png"Default Parameters
默认参数
| Parameter | Default | Notes |
|---|---|---|
| Model | | Fastest with good quality |
| Aspect ratio | | Landscape (width:height = 3:2), ideal for article illustrations |
| Image size | | Good balance of quality and cost |
| Style | Minimal, clean, soft tones | Auto-prepended to prompt |
| Language | English | Prompt and in-image text |
| 参数 | 默认值 | 说明 |
|---|---|---|
| 模型 | | 速度最快且质量良好 |
| 宽高比 | | 横向（宽:height = 3:2），适合文章插图 |
| 图像尺寸 | | 在质量和成本间达到良好平衡 |
| 风格 | 极简、简洁、色调柔和 | 自动添加到提示词前 |
| 语言 | 英文 | 提示词和图像中的文本 |
Available Options
可用选项
--model Model ID (gemini-3.1-flash-image-preview, gemini-3-pro-image-preview, gemini-2.5-flash-image)
--aspect-ratio 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9, etc.
--image-size 512, 1K, 2K, 4K
--style-prefix Custom style prefix (replaces the default)
--no-style Skip default style prefix entirely--model Model ID (gemini-3.1-flash-image-preview, gemini-3-pro-image-preview, gemini-2.5-flash-image)
--aspect-ratio 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9, etc.
--image-size 512, 1K, 2K, 4K
--style-prefix Custom style prefix (replaces the default)
--no-style Skip default style prefix entirelyWhen to Change Defaults
何时修改默认值
| Scenario | Change |
|---|---|
| User wants higher quality | |
| User wants best quality | |
| Social media banner | |
| Portrait/vertical image | |
| Square image (icon, avatar) | |
| User has their own style | |
| Non-English content | Write prompt in target language, no parameter change needed |
| 场景 | 修改方式 |
|---|---|
| 用户想要更高质量 | |
| 用户想要最佳质量 | |
| 社交媒体横幅 | |
| 竖版图像 | |
| 方形图像 (图标、头像) | |
| 用户有自定义风格 | |
| 非英文内容 | Write prompt in target language, no parameter change needed |
Step 4: Determine Output Path
步骤4：确定输出路径
Follow this priority order to decide where to save the generated image:
按照以下优先级确定生成图像的保存位置：
Priority 1: Context from Current Conversation
优先级1：当前对话上下文
If the user is working on a specific markdown file or article:
- Check where existing images in that article are stored (look for image references in the
images/如果用户正在处理特定的markdown文件或文章：
- 查看该文章中现有图像的存储位置（在文件中查找
.md图像引用）目录。images/
Priority 2: Project Image Directory
优先级2：项目图像目录
If no specific article context but working within a project:
- Look for existing image directories: ,
images/,assets/,static/,img/figures/ - Save in the most appropriate existing directory
- If none exists, create an directory at the project root or under the relevant content directory
images/
如果没有特定的文章上下文，但处于某个项目中：
- 查找现有的图像目录：,
images/,assets/,static/,img/figures/ - 保存到最合适的现有目录中
- 如果没有现有目录，在项目根目录或相关内容目录下创建目录
images/
Priority 3: Fallback
优先级3：备选方案
If no clear project context:
- Save to the current working directory
- Use a descriptive filename:
concept-name-illustration.png
如果没有明确的项目上下文：
- 保存到当前工作目录
- 使用描述性文件名：
concept-name-illustration.png
Filename Convention
文件名规范
- Use lowercase with hyphens:
vector-search-architecture.png - Be descriptive: prefer over
rag-pipeline-overview.pngimage1.png - Match existing naming patterns in the project if any
- 使用小写字母，用连字符分隔：
vector-search-architecture.png - 描述性要强：优先使用而非
rag-pipeline-overview.pngimage1.png - 如果项目中有现有命名模式，请遵循该模式
Step 5: Verify the Result
步骤5：验证结果
After generating:
- Read the image file to visually verify it matches the user's request
- If the result is not satisfactory, refine the prompt and regenerate
- If the image will be inserted into a markdown file, suggest the markdown syntax:
生成图像后：
- 打开图像文件，视觉验证是否符合用户需求
- 如果结果不满意，优化提示词并重新生成
- 如果图像将插入到markdown文件中，建议使用markdown语法：
