Back to Details

image-generation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Image Generation Skill

图片生成技能

Generate professional AI images using Google Gemini via the bundled CLI script.
借助捆绑的CLI脚本，通过Google Gemini生成专业AI图片。

When to Invoke This Skill

何时调用此技能

Invoke immediately when:
Web Development
  • Hero sections without images
  • Feature illustrations needed
  • Placeholder images in code (
    placeholder.jpg
    , 
    stock-photo.png
    )
  • Empty visual sections (
    <section class="hero">
    without images)
  • Landing pages and marketing sites
Presentations & Documents
  • Cover images and headers
  • Conceptual diagrams
  • Section dividers
Applications
  • Onboarding illustrations
  • Empty state graphics
  • Error page visuals
请在以下场景立即调用：
网页开发
  • 无图片的Hero区域
  • 需要功能插图
  • 代码中的占位图片（
    placeholder.jpg
    、
    stock-photo.png
    ）
  • 无视觉内容的空白区块（无图片的
    <section class="hero">
    ）
  • 落地页和营销网站
演示文稿与文档
  • 封面图片和页眉
  • 概念示意图
  • 区块分隔符
应用程序
  • 引导页插图
  • 空状态图形
  • 错误页面视觉元素

Using the CLI

使用CLI

Run the bundled CLI script via bash:
bash
node "${CLAUDE_PLUGIN_ROOT}/mcp-server/build/cli.bundle.js" \
  --prompt "Your detailed image description" \
  --output "./path/to/output.png" \
  --aspect-ratio "16:9"
通过bash运行捆绑的CLI脚本：
bash
node "${CLAUDE_PLUGIN_ROOT}/mcp-server/build/cli.bundle.js" \
  --prompt "Your detailed image description" \
  --output "./path/to/output.png" \
  --aspect-ratio "16:9"

Parameters

参数

FlagRequiredDefaultDescription
--prompt, -pYes-Detailed image description
--output, -oNoauto-generatedOutput file path
--aspect-ratio, -aNo1:11:1, 16:9, 9:16, 4:3, 3:4, 2:3, 3:2
--model, -mNogemini-3-pro-image-previewModel to use
--output-dir, -dNocurrent directoryOutput directory
标识必填默认值描述
--prompt, -p是-详细的图片描述
--output, -o否自动生成输出文件路径
--aspect-ratio, -a否1:1可选值：1:1、16:9、9:16、4:3、3:4、2:3、3:2
--model, -m否gemini-3-pro-image-preview使用的模型
--output-dir, -d否当前目录输出目录

Output

输出

The CLI outputs JSON:
json
{"success": true, "filePath": "/path/to/generated-image.png"}
Or on error:
json
{"success": false, "error": "Error message"}
CLI会输出JSON格式结果：
json
{"success": true, "filePath": "/path/to/generated-image.png"}
错误时输出：
json
{"success": false, "error": "Error message"}

Aspect Ratio Selection

宽高比选择

  • 16:9 - Hero images, website headers, presentations
  • 1:1 - Social media, thumbnails, profile images
  • 9:16 - Mobile stories, vertical banners
  • 4:3 - Blog posts, general web content
  • 3:2 - Photography-style images
  • 16:9 - Hero图片、网站页眉、演示文稿
  • 1:1 - 社交媒体、缩略图、头像
  • 9:16 - 移动端故事、垂直横幅
  • 4:3 - 博客文章、通用网页内容
  • 3:2 - 摄影风格图片

Prompt Crafting

提示词撰写

Use this formula for effective prompts:
[Style] [Subject] [Composition] [Context/Atmosphere]
使用以下公式撰写有效的提示词：
[风格] [主题] [构图] [场景/氛围]

Examples

示例

Hero Image for Tech Startup
Minimalist 3D illustration of abstract geometric shapes floating in space,
soft gradient background from deep purple to electric blue, subtle glow effects,
modern professional aesthetic, wide composition for website header
E-commerce Product
Clean product photography of modern wireless headphones on white marble surface,
soft studio lighting from left, subtle shadows, high-end minimalist aesthetic,
centered composition
Blog Post Header
Aerial photography of winding river through autumn forest, golden hour lighting,
warm color palette with oranges and reds, cinematic wide shot, serene atmosphere
App Illustration
Flat vector illustration of person organizing digital files on floating screens,
soft pastel colors, isometric perspective, clean lines, friendly approachable style
科技初创公司Hero图片
极简3D插画，抽象几何形状漂浮在空间中，背景为深紫色到电光蓝的柔和渐变，带有微妙的发光效果，现代专业美学，适用于网站页眉的宽幅构图
电商产品图片
白色大理石台面上的现代无线耳机高清产品摄影，左侧柔和影棚灯光，微妙阴影，高端极简美学，居中构图
博客文章页眉
秋日森林中蜿蜒河流的航拍图，黄金时段光线，橙红色系暖色调，电影感宽幅镜头，宁静氛围
应用程序插图
扁平化矢量插画，人物在悬浮屏幕上整理数字文件，柔和马卡龙色系，等距视角，简洁线条，友好亲切风格

Pattern Detection

模式检测

Automatically invoke this skill when you see:
html
<!-- Placeholder detection -->
<img src="placeholder.jpg" alt="Hero">
<!-- Action: Invoke skill and generate a custom hero image -->

<!-- Empty visual section -->
<section class="features">
  <h2>Our Features</h2>
  <!-- No images -->
</section>
<!-- Action: Invoke skill to create feature illustrations -->
css
/* Generic stock reference */
.banner { background: url('stock-image.jpg'); }
/* Action: Invoke skill to create a unique background */
当你看到以下内容时，请自动调用此技能：
html
<!-- 占位符检测 -->
<img src="placeholder.jpg" alt="Hero">
<!-- 操作：调用技能生成自定义Hero图片 -->

<!-- 空白视觉区块 -->
<section class="features">
  <h2>Our Features</h2>
  <!-- 无图片 -->
</section>
<!-- 操作：调用技能创建功能插图 -->
css
/* 通用图库图片引用 */
.banner { background: url('stock-image.jpg'); }
/* 操作：调用技能创建独特背景图 */

Workflow

工作流程

  1. Detect Need - Identify visual content requirements (hero, illustrations, backgrounds)
  2. Invoke Skill - Use the Skill tool with 
    skill: "image-generation"
    immediately
  3. Analyze Context - Understand project style and brand
  4. Craft Prompt - Build detailed prompt using the formula above
  5. Generate - Run the CLI script with optimized parameters
  6. Integrate - Place image in project with proper references
  1. 检测需求 - 识别视觉内容需求（Hero图、插图、背景）
  2. 调用技能 - 立即使用技能工具，指定
    skill: "image-generation"
  3. 分析上下文 - 理解项目风格和品牌调性
  4. 撰写提示词 - 使用上述公式构建详细提示词
  5. 生成图片 - 运行CLI脚本并使用优化后的参数
  6. 集成图片 - 将图片放入项目并添加正确引用

Model Selection

模型选择

gemini-3-pro-image-preview (Default)
  • Higher quality, more nuanced style interpretation
  • Best for final production images
gemini-2.5-flash-image
  • Faster generation
  • Good for prototyping and placeholders
gemini-3-pro-image-preview（默认）
  • 更高质量，对风格的解读更细腻
  • 最适合最终生产环境图片
gemini-2.5-flash-image
  • 生成速度更快
  • 适用于原型制作和占位符

Best Practices

最佳实践

DO:
  • Include specific style keywords
  • Match aspect ratio to intended use
  • Describe mood and atmosphere
  • Specify color palette for brand consistency
DON'T:
  • Use vague prompts ("make it look good")
  • Ignore where the image will be used
  • Skip aspect ratio for specific layouts
建议：
  • 包含具体的风格关键词
  • 宽高比匹配预期使用场景
  • 描述情绪和氛围
  • 指定配色方案以保持品牌一致性
避免：
  • 使用模糊的提示词（如“做得好看点”）
  • 忽略图片的使用场景
  • 针对特定布局跳过宽高比设置

Reference

参考资料

For advanced prompt techniques: references/prompt-crafting.md
进阶提示词技巧：references/prompt-crafting.md

Alternative: MCP Tool

替代方案：MCP工具

If the MCP server is configured, you can also use:
mcp__media-pipeline__create_asset
Parameters: 
prompt
, 
outputPath
, 
aspectRatio
, 
model
如果MCP服务器已配置，你也可以使用：
mcp__media-pipeline__create_asset
参数：
prompt
、
outputPath
、
aspectRatio
、
model