微信公众号封面生成器
从标题和主题描述出发,生成完整的微信公众号封面配图(AI 底图 + 文字合成)。
触发条件
- 用户提到"公众号封面"、"封面配图"、"头图"、"文章封面"、"公众号配图"
- 用户说"生成/做/制作一张封面",且上下文是微信文章
- 用户提供标题并要求生成配图
工作流程
第一步:收集参数
从用户输入中提取以下参数:
| 参数 | 说明 | 默认值 |
|---|---|---|
title |
文章标题(支持换行,用 | 分隔上下两行) |
必填 |
ratio |
封面比例 | 2.35:1(头条封面) |
style |
视觉风格描述 | 由标题主题推断 |
output_name |
输出文件名 | 基于标题自动生成 |
支持的封面比例:
- 2.35:1 — 公众号头条封面(推荐,1880×800)
- 16:9 — 二条/次条封面(1280×720)
- 1:1 — 正方形封面(1024×1024)
- 自定义比例
若用户未指定比例,默认使用 2.35:1。
若用户只给了标题未给风格描述,根据标题内容自动推断合适的视觉主题和风格。
第二步:生成 AI 底图
调用 ImageGen 工具(通过 DeferExecuteTool)生成底图。
Prompt 构造规则:
1. 以"WeChat official account cover design"开头
2. 包含封面比例信息(如"cinematic 2.35:1 wide aspect ratio")
3. 根据标题主题设计画面内容和视觉元素
4. 指定色调、光照和风格
5. 明确"文字区域留白"以便叠加标题
6. 使用英文 Prompt(ImageGen 对英文理解更好)
ImageGen 参数:
- prompt: 构造的英文描述
- size: 根据比例选择最接近的尺寸(见下表)
- quality: "high"
- revise: true(开启 Prompt 改写提升质量)
- output_dir: 当前工作目录
尺寸映射表:
| 目标比例 | ImageGen size | 实际尺寸 |
|---|---|---|
| 2.35:1 | 1280x720 | 后续裁剪 |
| 16:9 | 1280x720 | 直接使用 |
| 1:1 | 1024x1024 | 直接使用 |
> 注意:ImageGen/混元生图 API 对分辨率有限制(仅支持预定义列表),无法直接生成 2.35:1。
> 对于 2.35:1 需求,先生成 1280x720 底图,再在 HTML Canvas 中裁剪为 1880x800。
第三步:合成封面(HTML Canvas)
使用 assets/cover_generator.html 模板,将 AI 底图与标题文字合成为最终封面。
操作步骤:
1. 将 AI 生成的底图文件名记为 {base_image}
2. 读取 assets/cover_generator.html 模板
3. 替换模板中的占位符:
- {{IMAGE_SRC}} → 底图文件名
- {{CANVAS_W}} → 目标宽度
- {{CANVAS_H}} → 目标高度
- {{TITLE_LINE_1}} → 标题第一行
- {{TITLE_LINE_2}} → 标题第二行(可选)
- {{TITLE_COLOR}} → 标题颜色(默认白色)
- {{SUBTITLE_COLOR}} → 副标题颜色(默认金色 #FFD700)
- {{OUTPUT_NAME}} → 输出文件名
- {{INFO_TEXT}} → 信息描述文本
4. 将渲染后的 HTML 写入工作目录
5. 通过 preview_url 打开预览
标题分行规则:
- 若标题含 | 分隔符,按分隔符分行(如"一年白扔近9万:|这笔账,90%的小老板从没算过")
- 若标题超过 12 个字且无分隔符,根据语义断句自动分行
- 第一行为主标题(白色,大字号),第二行为副标题(彩色,略小字号)
- 若标题较短(≤12字),不分行,居中显示
字体选择: Microsoft YaHei > SimHei > PingFang SC > sans-serif
第四步:交付
- 通过
preview_url预览 HTML 封面 - 通过
deliver_attachments交付文件:
- 合成后的 HTML 文件(用户可在浏览器中下载 PNG/JPG)
- AI 原始底图 - 告知用户操作方式:
- 在预览窗口中点击"下载 PNG"或"下载 JPG"按钮
- 下载的文件即最终封面,可直接上传到公众号
Prompt 模板库
根据文章主题选择合适的底图 Prompt 模板:
财务/商业类
A professional business cover with [具体元素]. Dramatic financial scene with [关键物体] as the focal point.
Dark navy and charcoal background with subtle charts and data streams. Gold and crimson accents.
Cinematic lighting, professional commercial illustration style, high detail, 8k quality
科技/数字化类
A futuristic tech cover featuring [具体元素]. Glowing neon circuits and holographic displays on dark background.
Electric blue and cyan color palette. Clean modern tech illustration, depth of field, 8k quality
生活/情感类
A warm lifestyle cover with [具体元素]. Soft natural lighting, bokeh background with warm tones.
Inviting and relatable atmosphere. Editorial photography style, shallow depth of field, high quality
知识/教育类
An educational cover featuring [具体元素]. Clean modern design with books, lightbulbs or graduation elements.
Blue and white color scheme. Professional infographic style, clear visual hierarchy, high quality
通用模板
A visually striking [主题] cover design. [主要视觉元素] as the central focus.
[色调描述] background with complementary accent colors.
Professional editorial illustration, dramatic composition, cinematic lighting, high detail
调色板参考
| 风格 | 主色 | 强调色 | 背景 |
|---|---|---|---|
| 商务专业 | 深蓝 #1a1a3e | 金色 #FFD700, 红色 #e94560 | 深色渐变 |
| 科技未来 | 电蓝 #00b4d8 | 青色 #4ecdc4 | 深色 |
| 温馨生活 | 暖橙 #ff8a5c | 米白 #faf3e0 | 暖色 |
| 知识教育 | 蓝色 #2563eb | 白色 #ffffff | 浅色 |
| 紧急警示 | 红色 #dc2626 | 黄色 #fbbf24 | 深灰 |