gemini-image-gen

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Gemini Image Generator

Gemini 图片生成器

Generate contextual images for web projects using the Gemini API. Produces hero backgrounds, OG cards, placeholder photos, textures, and style-matched variants.

使用Gemini API为Web项目生成贴合场景的图片，可生成英雄区背景图、OG卡片图、占位照片、纹理图以及风格匹配的变体图。

Setup

设置

API Key: Set

GEMINI_API_KEY

as an environment variable. Get a key from https://aistudio.google.com/apikey if you don't have one.

bash

export GEMINI_API_KEY="your-key-here"

API密钥：将

GEMINI_API_KEY

设置为环境变量。如果没有密钥，可以从https://aistudio.google.com/apikey获取。

bash

export GEMINI_API_KEY="your-key-here"

Workflow

工作流程

Step 1: Understand What's Needed

步骤1：明确需求

Gather from the user or project context:

What: hero background, product photo, texture, OG image, placeholder
Style: warm/cool/minimal/luxurious/bold — check project's colour palette (input.css, tailwind config)
Dimensions: hero (1920x1080), OG (1200x630), square (1024x1024), custom
Count: single image or multiple variants to choose from

从用户或项目背景中收集以下信息：

类型：英雄区背景图、产品照片、纹理图、OG图、占位图
风格：暖色调/冷色调/极简/奢华/大胆风格——查看项目的调色板（input.css、tailwind配置文件）
尺寸：英雄区（1920x1080）、OG图（1200x630）、方形图（1024x1024）、自定义尺寸
数量：单张图片或多张可选变体图

Step 2: Build the Prompt

步骤2：构建提示词

Use concrete photography parameters, not abstract adjectives. Read references/prompting-guide.md for the full framework.

Quick rules:

Narrate like directing a photographer
Use camera specs: "85mm f/1.8", "wide angle 24mm"
Use colour anchors from the project palette: "warm terracotta (#C66A52) and cream (#F5F0EB) tones"
Use lighting descriptions: "golden-hour light from the left, 4500K"
Always end with: "No text, no watermarks, no logos, no hands"

使用具体的摄影参数，而非抽象形容词。完整框架可参考references/prompting-guide.md。

快速规则：

像指导摄影师一样描述需求
使用相机参数：比如"85mm f/1.8"、"广角24mm"
使用项目调色板中的颜色锚点：比如"暖陶土色（#C66A52）和奶油色（#F5F0EB）色调"
使用光线描述：比如"左侧的黄金时段光线，4500K"
结尾务必加上："无文字、无水印、无logo、无手部元素"

Step 3: Generate

步骤3：生成图片

bash

python3 plugins/design-assets/skills/gemini-image-gen/scripts/generate-image.py \
  --prompt "Soft-focus atmospheric background, warm gold and cream botanical elements, luxury spa aesthetic, wide landscape" \
  --output public/images/hero.png \
  --model gemini-2.5-flash-image

Multiple variants:

bash

python3 .../generate-image.py --prompt "..." --output public/images/hero.png --count 3

bash

python3 plugins/design-assets/skills/gemini-image-gen/scripts/generate-image.py \
  --prompt "Soft-focus atmospheric background, warm gold and cream botanical elements, luxury spa aesthetic, wide landscape" \
  --output public/images/hero.png \
  --model gemini-2.5-flash-image

生成多张变体图：

bash

python3 .../generate-image.py --prompt "..." --output public/images/hero.png --count 3

Produces hero-1.png, hero-2.png, hero-3.png

生成 hero-1.png、hero-2.png、hero-3.png


Style matching from a reference image:

```bash
python3 .../generate-image.py \
  --prompt "Same warm lighting and colour palette, but showing a massage treatment room" \
  --reference public/images/existing-hero.jpg \
  --output public/images/services-bg.png \
  --model gemini-3-pro-image-preview


根据参考图匹配风格生成：

```bash
python3 .../generate-image.py \
  --prompt "Same warm lighting and colour palette, but showing a massage treatment room" \
  --reference public/images/existing-hero.jpg \
  --output public/images/services-bg.png \
  --model gemini-3-pro-image-preview

Step 4: Post-Process (Optional)

步骤4：后期处理（可选）

Use the image-processing skill for resizing, format conversion, or optimisation:

bash

python3 plugins/design-assets/skills/image-processing/scripts/process-image.py \
  optimise public/images/hero.png --output public/images/hero.webp --width 1920

使用image-processing技能进行图片缩放、格式转换或优化：

bash

python3 plugins/design-assets/skills/image-processing/scripts/process-image.py \
  optimise public/images/hero.png --output public/images/hero.webp --width 1920

Step 5: Present to User

步骤5：向用户展示

Show the generated images for review. Read the image files to display them inline if possible, otherwise describe what was generated and let the user open them.

展示生成的图片供用户审核。如果可能，直接读取图片文件内联显示；否则，描述生成的内容并让用户自行打开查看。

Presets

预设模板

Starting prompts — enhance with project-specific context (colours, mood, subject):

Preset	Base Prompt
`hero-background`	"Wide atmospheric background, soft-focus, [colour tones], [mood], landscape 1920x1080"
`og-image`	"Clean branded card background, [brand colours], subtle gradient, 1200x630"
`placeholder-photo`	"Professional stock-style photo of [subject], natural lighting, warm tones"
`texture-pattern`	"Subtle repeating texture, [material], seamless tile, muted [colour]"
`product-shot`	"Product photography, [item] on [surface], soft studio lighting, clean background"

初始提示词——可结合项目特定背景（颜色、氛围、主题）进行优化：

预设名称	基础提示词
`hero-background`	"Wide atmospheric background, soft-focus, [colour tones], [mood], landscape 1920x1080"
`og-image`	"Clean branded card background, [brand colours], subtle gradient, 1200x630"
`placeholder-photo`	"Professional stock-style photo of [subject], natural lighting, warm tones"
`texture-pattern`	"Subtle repeating texture, [material], seamless tile, muted [colour]"
`product-shot`	"Product photography, [item] on [surface], soft studio lighting, clean background"

Model Selection

模型选择

Use case	Model	Cost
Drafts, quick placeholders	`gemini-2.5-flash-image`	Free (~500/day)
Final client assets	`gemini-3-pro-image-preview`	~$0.04/image
Style-matched variants	`gemini-3-pro-image-preview` + `--reference`	~$0.04/image

Verify current model IDs if errors occur — they change frequently.

使用场景	模型	成本
草稿、快速占位图	`gemini-2.5-flash-image`	免费（每日约500次调用）
最终客户资产	`gemini-3-pro-image-preview`	约0.04美元/张
风格匹配变体图	`gemini-3-pro-image-preview` + `--reference`	约0.04美元/张

如果出现错误，请验证当前模型ID——这些ID会经常更新。

Reference Files

参考文件

When	Read
Building effective prompts	references/prompting-guide.md

适用场景	参考文档
构建有效的提示词	references/prompting-guide.md