古法编程

使用 Google Gemini 快速生成 UI 占位图与设计素材

解决前端开发中缺乏临时素材的痛点：通过集成 Google Gemini 的图像生成模型，让 AI 在代码会话中直接生成并保存 UI 占位图、文档插图或概念原型图。

为什么需要这个技能

在构建前端界面或编写技术文档时，开发者经常需要临时的图像素材。手动在素材库中寻找或在第三方绘图工具中生成并下载图片，会打断开发心流。

Imagen 技能允许 AI 直接调用 gemini-3-pro-image-preview 模型，根据文本描述在本地生成 PNG 图片。这意味着你可以在一个对话流中完成“设计描述 -> 生成图片 -> 写入 HTML/CSS 路径”的完整闭环，极大地提升原型开发效率。

适用场景

  • 前端原型开发：需要 Hero Image、用户头像占位图或 App 图标时。
  • 技术文档编写：为 README 或文档创建简单的概念示意图或架构视觉化表达。
  • 设计资产快速迭代：快速尝试不同的视觉风格或生成 UI 资产草图。
  • 概念可视化：将抽象的架构想法转化为直观的视觉图像。

核心工作流

  1. 输入提示词：向 AI 描述所需的图像内容（例如：“一个极简主义的音乐播放器图标”）。
  2. 调用接口：AI 调用 Google Gemini API 并配置图像生成参数。
  3. 本地存储：生成的图像自动保存到指定路径（默认当前目录）。
  4. 路径反馈：AI 返回图片的本地文件路径，以便开发者直接在代码中引用。

快速使用示例 

# 基础使用：生成一张日落时分的未来城市天际线图
python scripts/generate_image.py "A futuristic city skyline at sunset"

# 指定输出路径：生成一个音乐播放器的极简图标并保存到资产文件夹
python scripts/generate_image.py "A minimalist app icon for a music player" "./assets/icons/music-icon.png"

# 自定义尺寸：生成 2K 分辨率的高清风景图
python scripts/generate_image.py --size 2K "High resolution landscape" "./wallpaper.png"

环境要求：

  • 必须配置 GEMINI_API_KEY 环境变量。
  • 安装 Python 3.6+ 环境。

下载和安装

下载 imagen 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐