公众号文章配图一体化创作
概述
本技能实现从文章原文到带配图的微信公众号排版 HTML的端到端工作流。核心能力：分析文章结构 → 规划配图位置 → 生成韩系 Clova 风格矢量插图（支持中文关键词）→ 部署图片到公网 → 组装微信排版 HTML。
与 wechat-article 技能的关系：wechat-article 负责纯文字排版（无配图），本技能在其基础上增加了配图生成+公网部署+图片嵌入的完整链路。排版规范（色彩体系、字号体系、章节标题格式、预览页面结构）直接复用 wechat-article 的 references/wechat-formatting-guide.md。
与 microscene-illustration 技能的关系：本技能调用 microscene-illustration 的风格规范生成插图，并在此基础上增加了中文关键词融入的能力。
视觉风格
插图采用韩系 Clova 干净矢量风格（对标 Naver Clova / Samsung / Kakao）：
- 主体配色：蓝
#0052D9+ 青#2BB1C6+ 黄#F4C430 - 背景：纯白
#FFFFFF+ 灰色简笔线稿场景（#CCCCCC-#999999） - 立体感：灰白渐变体现光影，背景场景不上彩色
- 人物：精致面部细节（眼镜、五官清晰、自然肤色
#F5D0B0） - 关键词：可在白板、便利贴、屏幕、盾牌等元素上融入中文短词（2-4 字效果最佳）
详细的风格规范和 Prompt 模板见 references/illustration-keywords-guide.md。
工作流程
Step 1：文章分析与配图规划
收到文章原文后：
- 通读全文，提取核心主题、章节结构、关键场景
- 规划配图，按以下原则：
- 头图 1 张（文章开篇或第一个章节后）
- 段间配图每 200-400 字 1 张（根据文章长度，通常 3-5 张）
- 每张图对应文章中的具体场景/角色/概念 - 输出配图清单（表格形式）：
| # | 位置 | 场景描述 | 主体人物 | 关键词（可选） |
|---|---|---|---|---|
| 1 | 头图 | xxx | xxx | xxx |
| ... | ... | ... | ... | ... |
-
告知积分消耗：每张图 5-10 积分，总计 = 张数 × 5-10
-
询问用户确认：配图数量、是否需要中文关键词、配图风格偏好
Step 2：生成配图
2.1 确认关键词方案
若用户选择融入关键词，为每张图规划：
- 关键词内容（2-4 个中文字符，如「AI赋能」「市场解读」「安全」）
- 关键词位置（白板上 / 便利贴上 / 电脑屏幕上 / 盾牌上 / 文件夹上）
- 关键词颜色（通常蓝色 #0052D9 主色或黑色 #333333）
2.2 组装 Prompt
按以下结构组装每张图的 ImageGen prompt：
clean vector illustration, modern Korean corporate style, pure white background (#FFFFFF),
[主体人物描述：人数、服装颜色、动作、表情、面部细节],
[关键词融入描述：如 the whiteboard has Chinese characters AI赋能 written on it in large blue marker],
main subject colored in blue (#0052D9), cyan (#2BB1C6), and yellow (#F4C430),
background scene: [灰色简笔画场景描述],
background scene drawn as simple gray line sketches only NOT colored,
gray lines (#CCCCCC to #999999) and white shading showing depth and lighting,
vector art, no texture
详细 Prompt 组装规则和示例见 references/illustration-keywords-guide.md。
2.3 调用 ImageGen
重要：并发限制
ImageGen 有平台并发限制，同时发起 3 张以上可能失败。执行策略：
- 逐张生成（推荐）：1 张完成后再发下一张，成功率最高
- 最多并行 2 张：如果赶时间可 2 张并行，失败后自动降级为逐张
- 失败的图：间隔几秒后重试，通常第二次能成功
调用参数：
{
"prompt": "<组装好的 prompt>",
"size": "1536x1024",
"quality": "high",
"output_dir": "<工作目录>/article-images"
}
> 尺寸默认 1536x1024（4:3 横版，适合公众号段间配图）。头图可考虑 1024x1536（3:4 竖版）。
2.4 检查图片效果
生成后逐张查看图片，确认：
- 中文关键词是否清晰（偶有错字需告知用户后期 PS 修正）
- 风格是否一致（蓝青黄主体 + 灰色背景场景）
- 场景是否与文章内容匹配
Step 3：部署图片到公网
公众号编辑器不支持本地图片路径，必须将图片部署到公网 URL。
3.1 创建 index.html
在图片目录下创建 index.html（作为 CloudStudio 部署入口）：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Article Images</title></head>
<body>
<img src="image1.png" />
<img src="image2.png" />
<!-- ... -->
</body></html>
3.2 调用 CloudStudio 部署
使用 workbuddy_cloudstudio_deploy 工具：
{
"directory": "<工作目录>/article-images",
"port": 3000
}
部署成功后获得公网域名，如：https://xxxx.bj3.agentos-app.net
3.3 构建图片公网 URL
https://<cloudstudio-domain>/<image-filename>
例如：https://xxxx.bj3.agentos-app.net/clean_vector_illustration__mod_2026-08-05T07-43-47.png
3.4 部署失败处理
CloudStudio 部署偶发 fetch failed 或 exec failed 错误：
- 重试 2-3 次：通常第二次或第三次成功
- 清理后重试：删除 index.html 后重新创建再部署
- 最终 fallback：告知用户手动上传图片到公众号素材库
Step 4：组装微信排版 HTML
4.1 加载排版规范
加载 wechat-article 技能的 references/wechat-formatting-guide.md，按其规范组装 HTML。
4.2 使用 HTML 模板
使用本技能的 assets/article-template.html 作为预览页面骨架。模板包含：
- 手机预览框（415px 外框 + 375px 内容区）
- 悬浮底部工具栏（一键复制 + 查看源码）
- 文章内容占位区（<div id="article-content"> 内为文章 HTML）
4.3 嵌入图片
图片以 <section> 包裹，居中显示，不加图注文字（除非用户要求）：
<section style="margin: 24px 0; text-align: center;">
<img src="https://<cloudstudio-domain>/<image-filename>" alt="<场景描述>" style="max-width: 100%; border-radius: 4px; display: inline-block;" />
</section>
4.4 排版组件
根据文章内容使用以下排版组件（详细代码见 wechat-formatting-guide.md）：
- 章节标题（序号 + / + 主标题 + 副标题）
- 正文段落（蓝色强调文字 + 黄色高亮背景）
- H3 小节标题
- 蓝色信息提示框（background-color: #EBF0FF; border-left: 4px solid #0052D9）
- 黄色价值提示框（background-color: #FFF8E1; border-left: 4px solid #FED000）
- 分割线
- 引用块
Step 5：交付
最终输出：
- 预览 HTML 文件：写入工作目录，用
present_files展示 - 5 张配图 PNG：一并展示（可选）
- 使用说明：
- 在预览面板点击「一键复制到公众号」
- 粘贴到公众号后台编辑器
- 微信会自动抓取公网图片并转存
- CloudStudio 沙箱地址有时效性，建议尽快粘贴
关键词融入指南
AI 模型文字渲染能力
| 文字类型 | 渲染准确度 | 建议 |
|---|---|---|
| 英文短词（AI、VIP、DATA） | ⭐⭐⭐⭐⭐ | 放心使用 |
| 数字（15min、99.42%） | ⭐⭐⭐⭐⭐ | 放心使用 |
| 中文短词（2-4 字） | ⭐⭐⭐⭐ | 效果好，偶有错字 |
| 中文长句（5+ 字） | ⭐⭐ | 不推荐，大概率乱码 |
关键词位置模板
| 位置 | Prompt 写法 | 效果 |
|---|---|---|
| 白板大字 | the whiteboard has Chinese characters XX written on it in large blue marker |
最佳，清晰醒目 |
| 便利贴 | yellow sticky notes with Chinese characters XX written on them |
好，自然融入 |
| 电脑屏幕 | the screen displays Chinese characters XX at the top center in blue |
好，科技感 |
| 盾牌/标牌 | the shield has Chinese characters XX written on it in bold blue |
好，醒目 |
| 文件夹 | a yellow folder with Chinese characters XX written on it |
好，自然 |
详细的 Prompt 模板和完整示例见 references/illustration-keywords-guide.md。
参考文档
| 文档 | 用途 | 加载时机 |
|---|---|---|
references/illustration-keywords-guide.md |
插图风格规范、Prompt 模板、关键词融入技巧、完整示例 | Step 2 生成配图时加载 |
assets/article-template.html |
预览页面 HTML 骨架模板 | Step 4 组装 HTML 时加载 |
wechat-article/references/wechat-formatting-guide.md |
微信排版组件库、兼容性规则、预览页面规范 | Step 4 排版时加载 |
注意事项
- 积分消耗：每张图 5-10 积分，生成前必须告知用户总计消耗
- 并发限制：ImageGen 平台有并发限制，推荐逐张生成，最多并行 2 张
- CloudStudio 时效性：公网地址有时效性，部署后建议尽快复制粘贴到公众号
- 中文关键词：2-4 字效果最佳，5 字以上可能乱码，生成后需检查
- 图片水印：ImageGen 默认在右下角生成「AI 生成 WORKBUDDY」水印
- 不加图注：默认不在图片下方添加说明文字，除非用户明确要求
- 微信图片抓取：粘贴到公众号编辑器时，微信会自动抓取公网图片并转存到自己的服务器，CloudStudio 地址失效后不影响已粘贴的文章
