Communitygithub.com

muhdaliyan/zeer

利用 Google 的 Imagen 模型为网站、应用和创意项目生成高质量图片。当构建网站、落地页或任何需要自定义图片、logo、插图或视觉素材的项目时使用此技能。

zeer 是什么？

这是一个为 AI 代理（如 Claude Code、Cursor、Codex）设计的技能，用于无缝集成 Google 的 Imagen 模型（特别是 Imagen 4）到开发工作流中。它能够根据文本描述生成专业、高质量的照片级图片，自动保存到合适的项目目录，并支持多种应用场景，包括为网站生成英雄图、logo、插图和 UI 元素。该技能支持多种宽高比（如 1:1、16:9），并遵循最佳提示词工程实践来确保效果。它面向任何需要动态、按需视觉素材的开发项目——无论是构建落地页、移动应用还是完整的品牌设计系统。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/muhdaliyan/zeer/tree/HEAD/skills/image-generation
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

预览

来自技能 README

zeer preview

文档

目标

使用 Google 的 Imagen 4 模型生成专业、高质量的图片，并将其无缝集成到 Web 项目、应用程序或创意工作流中。自动将生成的图片保存到相应的项目目录。

功能

图片生成

  • 根据文本描述生成照片级写实图片
  • 为网站创建 logo、插图和图形
  • 生成英雄图、背景和视觉素材
  • 支持多种宽高比（1:1、4:3、16:9、9:16）
  • 每次请求生成 1-4 张图片
  • 高分辨率输出，带有 SynthID 水印

集成

  • 自动将图片保存到项目目录
  • 根据内容生成合适的文件名
  • 为 Web 项目（HTML、React 等）创建图片素材
  • 将图片组织到逻辑文件夹结构中

支持的风格

  • 摄影（人像、风景、产品拍摄）
  • 插画（数字艺术、素描、绘画）
  • logo 和品牌材料
  • UI 元素和背景
  • 历史艺术风格（印象派、装饰艺术等）

流程

当用户请求网站/项目并包含图片时

  1. 识别图片需求

    • 分析项目需求
    • 确定需要的图片类型（英雄图、logo、图标、背景）
    • 询问用户是否需要使用 Imagen 生成 AI 图片

  2. 确认图片生成

    • 提供选项：“是否希望我使用 Google 的 Imagen AI 模型生成自定义图片？”
    • 如果用户同意，继续生成
    • 如果用户拒绝，使用占位图片或跳过

  3. 生成图片

    • 根据项目上下文创建详细、具体的提示词
    • 针对每个用例使用合适的宽高比
    • 使用 generate_image 工具生成图片

  4. 保存与集成

    • 将图片保存到项目目录（例如 website-name/images/）
    • 使用描述性文件名（例如 hero-background.png、logo.png）
    • 更新 HTML/CSS/React 代码以引用生成的图片
    • 在代码中提供图片路径

直接图片生成请求

当用户直接要求生成图片时：

  1. 理解需求

    • 从用户请求中提取主题、风格和上下文
    • 确定合适的宽高比
    • 澄清任何模糊的细节

  2. 创建详细提示词

    • 遵循 Imagen 最佳实践构建全面的提示词
    • 包含主题、上下文、风格和质量修饰词
    • 保持提示词清晰且描述性强

  3. 生成并保存

    • 使用 generate_image 工具配合构建好的提示词
    • 保存到合适的目录
    • 向用户显示保存的图片路径

Imagen 提示词指南

提示词结构

[风格] 的 [主题] [上下文/背景] [补充细节]

摄影类提示词

  • 以“一张……的照片”或“一张……的摄影作品”开头
  • 添加相机细节：“35mm 人像”、“广角 10mm”、“微距镜头 60mm”
  • 包含光线描述：“黄金时刻”、“戏剧性光线”、“自然光”
  • 添加胶片类型：“黑白胶片”、“黑色电影风格”、“宝丽来”

插画类提示词

  • 指定艺术风格：“数字艺术”、“水彩画”、“铅笔素描”
  • 引用艺术运动：“印象派风格”、“装饰艺术”、“极简主义”
  • 添加质量修饰词：“高度详细”、“专业”、“获奖作品”

Logo 类提示词

  • 使用格式：“一个 [行业] 公司的 [风格] logo，背景为纯色。包含文字 [名称]。”
  • 风格：极简、现代、传统、几何、抽象
  • 文字保持在 25 个字符以内

质量修饰词

添加以下词语以获得更好效果：

  • “高度详细”
  • “专业”
  • “获奖作品”
  • “高分辨率”
  • “照片级写实”
  • “4K 质量”

宽高比

根据使用场景选择：

  • 1:1（正方形） - 社交媒体、头像、图标
  • 4:3（全屏） - 普通摄影、产品照片
  • 3:4（竖版） - 垂直布局、移动屏幕
  • 16:9（宽屏） - 英雄图、横幅、风景
  • 9:16（竖版） - 移动优先设计、故事

工具：generate_image

重要：这是一个演示用的模拟工具。实际实现需要：

  1. 具有 Imagen 访问权限的 Google Cloud API 密钥
  2. 集成 google.genai Python 库
  3. 正确的 API 配置

用法

generate_image(
    prompt="一个科技初创公司的现代极简 logo，背景为纯蓝色",
    aspect_ratio="1:1",
    number_of_images=1,
    output_dir="website/images",
    filename="logo.png"
)

参数

  • prompt（必填）：图片的详细文字描述
  • aspect_ratio（可选）："1:1"、"4:3"、"3:4"、"16:9"、"9:16"（默认："1:1"）
  • number_of_images（可选）：1-4（默认：1）
  • output_dir（可选）：保存图片的目录（默认："generated_images"）
  • filename（可选）：自定义文件名（默认：自动生成）

示例

示例 1：网站英雄图

用户：“为咖啡店创建一个落地页”

AI：“我将为你的咖啡店创建一个落地页。是否希望我使用 Google 的 Imagen AI 生成一张自定义英雄图？”

用户：“好的，请生成”

AI：[用以下提示词生成图片]
“一张舒适的咖啡店内景专业摄影照片，温暖光线，木质桌子，背景有咖啡机，氛围温馨，16:9 宽高比”

[保存到 coffee-shop/images/hero-background.jpg]
[更新 HTML 以使用该图片]

示例 2：Logo 生成

用户：“为我的健身应用 FitTrack 生成一个 logo”

AI：[用以下提示词生成]
“一个现代极简的健身公司 logo，背景为纯色。包含文字 FitTrack。几何形状，充满活力，专业”

[保存到 generated_images/fittrack-logo.png]

示例 3：多个素材

用户：“为我构建一个作品集网站并生成图片”

AI：“我将为你创建作品集网站。是否希望我使用 Imagen AI 生成自定义图片（英雄背景、头像占位图、项目缩略图）？”

用户：“是的，生成它们”

AI：[生成多张图片]
1. 英雄背景：“抽象几何图案，现代，专业，柔和色调，16:9”
2. 项目缩略图 1：“极简科技插画，干净线条，蓝白配色，4:3”
3. 项目缩略图 2：“创意设计模型，现代界面，专业，4:3”

[全部保存到 portfolio/images/]
[更新 HTML/CSS 以引用图片]

最佳实践

  1. 始终请求许可 - 在生成图片前，询问用户是否需要 AI 生成的图片
  2. 上下文感知提示词 - 调整提示词以匹配项目的风格和目的
  3. 合适的宽高比 - 选择适合用例的宽高比
  4. 描述性文件名 - 使用清晰、语义化的文件名（如 hero-bg.png，而非 image1.png）
  5. 结构化组织 - 将图片保存到逻辑目录（images/、assets/ 等）
  6. 质量优先 - 使用质量修饰词以获得专业效果
  7. 必要时迭代 - 如果用户不满意，优化提示词并重新生成

与前端项目的集成

使用此技能构建网站时：

  1. 首先创建图片目录
  2. 在编写 HTML/CSS 之前生成图片
  3. 在代码中使用相对路径：<img src="images/hero.jpg">
  4. 添加描述生成的图片的 alt 文本
  5. 考虑使用多种尺寸的响应式图片

限制

  • Imagen 仅支持英文提示词
  • 图片中的文字限制为 25 个字符
  • 生成的图片包含 SynthID 水印
  • 需要 Google Cloud API 访问权限
  • 根据 API 层级存在速率限制

说明

此技能与以下技能配合使用效果最佳：

  • frontend-design 技能，用于完整网站创建
  • code-helper 技能，用于项目设置
  • file-operations 技能，用于组织素材

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community