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

参数

Flag	Required	Default	Description
--prompt, -p	Yes	-	Detailed image description
--output, -o	No	auto-generated	Output file path
--aspect-ratio, -a	No	1:1	1:1, 16:9, 9:16, 4:3, 3:4, 2:3, 3:2
--model, -m	No	gemini-3-pro-image-preview	Model to use
--output-dir, -d	No	current directory	Output 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

工作流程

Detect Need - Identify visual content requirements (hero, illustrations, backgrounds)
Invoke Skill - Use the Skill tool with
```
skill: "image-generation"
```
immediately
Analyze Context - Understand project style and brand
Craft Prompt - Build detailed prompt using the formula above
Generate - Run the CLI script with optimized parameters
Integrate - Place image in project with proper references

检测需求 - 识别视觉内容需求（Hero图、插图、背景）
调用技能 - 立即使用技能工具，指定
```
skill: "image-generation"
```
分析上下文 - 理解项目风格和品牌调性
撰写提示词 - 使用上述公式构建详细提示词
生成图片 - 运行CLI脚本并使用优化后的参数
集成图片 - 将图片放入项目并添加正确引用

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