📦 web-ai-image-generation — 基于网页的AI图像生成

Web AI 生图 当用户需要通过 Gemini、ChatGPT 等网页端 AI 服务生成图片时，使用这个 skill。

能力说明 这个 skill 通过浏览器自动化打开真实的 Gemini / ChatGPT 网页，复用浏览器 profile 中的登录态，提交生图提示词，等待图片生成，并把图片保存到本地目录。

适合以下场景： 不直接调用 Gemini / OpenAI 图片 API，而是复用网页端账号能力。 自动生成 AI 封面图、营销图、短视频封面或其他提示词图片。 需要复用网页登录状态，减少重复登录。 需要处理 blob: 图片、Google 托管图片或 ChatGPT estuary/content 图片下载。

文件结构 web-ai-image-generation/ ├── SKILL.md ├── DEPENDENCIES.md ├── requirements.txt └── scripts/ └── ai_image_playwright.py

说明： scripts/ai_image_playwright.py：命令行脚本，包含 Gemini / ChatGPT 生图、等待、下载逻辑。 requirements.txt：Python 包依赖。 DEPENDENCIES.md：Python、Playwright、浏览器和系统环境安装说明。

默认目录 默认输出到当前 skill 目录下的运行时目录。默认 profile 和输出目录为： skills/web-ai-image-generation/.runtime/profile skills/web-ai-image-generation/.runtime/output

重要说明 浏览器通过 Playwright 的 launch_persistent_context() 启动 persistent context，并复用指定用户数据目录中的登录态。 首次使用全新 profile 时，需要在弹出的浏览器里手动登录 Gemini 和/或 ChatGPT。后续运行会自动复用该 profile 中保存的登录状态。

安装依赖 详见 DEPENDENCIES.md。 快速安装： python -m pip install -r requirements.txt python -m playwright install chromium

命令行用法 Gemini 生图 python scripts/ai_image_playwright.py \ --platform gemini \ --prompt "一张竖屏 3:4 的短视频封面，主题是 AI 自动剪辑" \ --output-dir ./output

ChatGPT 生图 python scripts/ai_image_playwright.py \ --platform chatgpt \ --prompt "一张电影海报风格的 AI 短视频封面" \ --output-dir ./output

使用内置封面提示词构造 如果不传 --prompt，可以传 --title 和 --description，脚本会自动构造短视频封面提示词： python scripts/ai_image_playwright.py \ --platform gemini \ --title "AI 自动剪辑教程" \ --description "如何用 AI 自动生成短视频" \ --output-dir ./output

指定独立登录态目录 python scripts/ai_image_playwright.py \ --platform chatgpt \ --prompt "一张科技感产品海报" \ --profile-dir ~/.ai-image-playwright/chatgpt-profile \ --output-dir ./output

工作流概览

• 启动浏览器

使用 playwright.async_api.async_playwright()。 通过 launch_persistent_context() 启动 Chromium persistent context。 当前实现使用 headless=False，需要桌面环境。 默认优先尝试 /usr/bin/google-chrome，不存在则回退到 Playwright Chromium。 启动后根据平台打开 Gemini 或 ChatGPT。 如果跳转到登录页，会等待用户在浏览器中手动登录。

• Gemini 生图流程

打开 https://gemini.google.com/app。 尝试点击生图入口，支持 制作图片、生成图片、Create image、Generate image 等文本。 将提示词输入到 Gemini 的富文本输入框。 点击发送按钮或按 Enter。 轮询页面中的大尺寸图片，判断图片是否生成完成。 下载图片时优先处理： blob: 图片：通过页面内 Canvas 提取。 googleusercontent.com / gstatic.com 图片：通过 Playwright request 下载。

• ChatGPT 生图流程

打开 https://chatgpt.com/。 尝试点击生图入口，支持 生成图片、Create image、Generate image 等文本。 将提示词输入到 ChatGPT composer。 点击发送按钮或按 Enter。 轮询页面中的图片候选，识别生成图。 ChatGPT 生成图常见特征： URL 包含 chatgpt.com/backend-api/estuary/content。 alt 包含 已生成图片。 CSS class 包含特定图片布局特征。 ChatGPT 域名下的大尺寸图片。 下载 estuary/content 图片时使用 page.request.get()，这样可以携带当前 Playwright context 的登录 cookie。 如果 HTTP 下载失败，则尝试 Canvas 提取。

提示词规则 脚本支持两种提示词来源。

• 直接传入完整提示词

如果传入 --prompt，脚本会原样发送该提示词，不做改写： python scripts/ai_image_playwright.py \ --platform gemini \ --prompt "生成一张 3:4 竖屏封面，主题是 AI 自动剪辑，科技感，标题清晰"

• 使用标题和描述自动构造封面提示词

如果不传 --prompt，脚本会使用 --title 和 --description 调用内置 build_prompt() 构造提示词。 当前模板含义是： 要求生成短视频竖屏封面图。 比例为 3:4。 主题来自 --title。 如果有 --description，会补充视频内容说明。 要求标题文字必须清晰醒目，并包含原始标题。 要求适合手机信息流。 要求构图自然、有设计感、高清高质量。 明确禁止生成 APP 界面、手机边框、点赞评论按钮、状态栏或导航栏。 模板生成的提示词大致如下： 请为短视频生成一张竖屏封面图片（3:4比例），主题是：{title}。{desc_part} 要求：标题文字必须清晰醒目并包含：'{title}'；画面适合手机信息流；构图自然、有设计感、高清高质量；不要包含 APP 界面、手机边框、点赞评论按钮、状态栏或导航栏。

图片下载与保存 默认输出目录在当前 skill 文件夹下： skills/web-ai-image-generation/.runtime/output 也可以通过 --output-dir 指定其他目录。 保存流程： 生图完成后，脚本扫描页面中的所有 img。 根据平台筛选生成图片候选： Gemini：优先选择尺寸大于约 400x400 的大图。 ChatGPT：优先识别 chatgpt.com/backend-api/estuary/content、已生成图片、大尺寸 ChatGPT 图片等候选。 最多取最新 4 张候选图。 按平台和序号保存为 JPEG 文件。 文件名示例： gemini_image_1.jpg gemini_image_2.jpg chatgpt_image_1.jpg chatgpt_image_2.jpg 下载策略： ChatGPT 的 chatgpt.com/backend-api/estuary/content 图片使用 page.request.get() 下载，可以携带当前登录 cookie。 Gemini 的 googleusercontent.com / gstatic.com 图片也使用 page.request.get() 下载。 如果图片是 blob:，或 HTTP 下载失败，会尝试在页面内用 Canvas drawImage() 提取，再通过 toDataURL('image/jpeg', 0.95) 转为 JPEG base64，最后在 Python 端解码写入文件。 文件小于约 10KB 会被认为无效并删除。 脚本运行成功后会在标准输出打印保存的图片路径。

调用建议 如果要在其他流程里调用这个 skill： 传入平台、提示词、输出目录、profile 目录。 由外部流程决定如何使用生成后的图片。 不要把 API Key 或账号凭据写入脚本。 对 platform 做严格校验，只允许 gemini 和 chatgpt。

常见问题 找不到“制作图片”或“生成图片” 可能原因： 网页语言与选择器不匹配。 Gemini / ChatGPT UI 更新。 当前账号没有生图入口。 处理建议： 增加更多语言的选择器。 截图确认页面状态。 检查账号是否具备生图能力。

页面生成了图片但下载失败 可能原因： 图片跨域导致 Canvas 读取失败。 图片 URL 需要登录 cookie。 图片 URL 规则发生变化。 处理建议： ChatGPT 图片优先使用 page.request.get()。 Gemini 增加更多图片域名白名单。 必要时使用页面截图作为兜底方案。

一直等待直到超时 可能原因： 没有成功切换到生图模式。 提示词触发安全策略。 页面出现错误提示，但代码没有识别。 处理建议： 检查页面错误文案。 增加对“生成失败”“无法生成”等状态的检测。 调整等待策略，不只依赖图片数量稳定。

后续优化建议 增加截图和 HTML dump，便于排查 UI 变化。 把等待逻辑改成“生成中状态消失 + 图片出现”。 对无桌面服务器支持 xvfb 或