为微信公众号文章生成高质量配图。支持封面图（2.35:1）、正文插图（16:9/4:3）、信息图。提供两条路径：AI生成（视觉创意型）和HTML渲染（文字精确型）。当用户提到"公众号配图"、"公众号封面"、"文章配图"、"正文插图"、"公众号图片"时使用此技能。

公众号配图工作流 ⚠️ 核心原则：先提案，后生成绝对不能跳过设计提案直接出图。正确流程：设计审美画像和提案格式见姊妹skill xhs image/SKILL.md ，公众号配图同样适用。核心参数图片类型尺寸比例 Playwright viewport AI Prompt 长宽比声明头条封面 1800 x 766 px 2.35:1 viewport size=1800,766 2.35:1 ultra wide landscape, 1800x766 pixels 正文宽图 1920 x 1080 px 16:9 viewport size=1920,1080 16:9 landscape, 1920x1080 pixels 正文方图 1440 x 1080 px 4:3 viewport size=1440,1080 4:3 landscape, 1440x1080 pixels 信息图 1080 x 自由自由 viewport size=1080,N 按内容定 Step 0: 确定配图需求 ✅ 用户确认向用户展示选项，等待确认：类型说明图片数量推荐路径 A. 仅封面头条封面图 1张 AI 生成 B. 正文配图章节配图，辅助阅读理解 3 8张 AI 生成为主 C. 全套配图封面 + 正文全部 4 10张 AI 生成为主 D. 纯信息图数据对比、流程图、清单 1 5张 AI 生成（精确数据表格用HTML兜底）问用户： 1. 做封面、正文插图、还是全套？ 2. 文章路径/内容是什么？（分析内容确定配图位置） 3. 总共需要几张图？配图数量建议文章长度推荐配图数包含 < 1500字 2 3张封面 + 1 2张正文 1500 3000字 4 6张封面 + 每个核心章节1张 3000 5000字 6 8张封面 + 章节图 + 信息图 5000字 8 10张不超过10张，避免过度打断 Step 1: 风格选择 ✅ 用户确认根据用户的文章类型，推荐 3 种风格供选择。按文章类型自动推荐文章类型第一推荐第二推荐第三推荐 AI工具评测极简专业编辑杂志数据信息图技术教程极简专业手绘白板编辑杂志产品发布编辑杂志大字报极简专业深度分析编辑杂志数据信息图极简专业个人故事 Snoopy温暖漫画温暖叙事编辑杂志行业观察大字报编辑杂志数据信息图向用户展示 3 个推荐风格，每个包含：风格名 + 一句话描述适用场景色彩倾向问用户：选哪个风格？或者你有自己想要的参考？完整风格库： references/style gallery.md Step 2: 选择生成路径 ✅ 用户确认根据内容特征推荐路径，向用户展示对比： Path A: HTML → 截图 Path B: AI 生成文字准确度 100%（代码控制）中文可能出错（需验证）布局控制像素级精确 AI 自由发挥视觉创意中（靠设计能力）高（AI 有创造力） API 成本零（纯本地）每张消耗 Gemini API 速度快（几秒）慢（10 30秒/张）适合文字多、数据多、清单、信息图封面、氛围图、创意插画可编辑性改 HTML 重新截图即可需要重新生成深色模式 CSS 直接控制配色需在 prompt 中声明 ⚠️ 花叔偏好：AI生成优先 HTML截图效果太平面、像PPT模板，缺少质感和设计感。AI生成的图片有丰富的视觉细节，品质远胜HTML。默认走AI生成路径，只有「必须逐字精确的复杂数据表格」才用HTML兜底。路径推荐规则图片类型推荐路径理由头条封面 AI 视觉冲击力强，质感好正文氛围/场景图 AI 创意性强正文信息图 AI AI能做出设计感的信息图流程图/步骤图 AI AI能加入视觉层次对比图 AI 视觉品质更高精确数据表格（10+单元格） HTML 唯一需要HTML的场景：大量精确数字默认推荐AI路径，不再逐次询问路径选择。 Step 3: 生成图片 Path A: HTML → Playwright 截图 3 A 1. 创建 HTML 根据选定风格和用户提供的内容，生成 HTML 文件。 HTML 模板要求：画布尺寸：根据图片类型选择（封面 1800x766，正文宽图 1920x1080，正文方图 1440x1080）字体： font family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans serif 深色模式友好：用 F5F5F5 代替纯白，用 1A1A2E 代替纯黑封面安全区：核心信息集中在中央正方形区域（766x766）封面大字报模板示例（2.35:1）：正文信息图模板示例（4:3）： 3 A 2. 截图封面： viewport size=1800,766 正文宽图： viewport size=1920,1080 正文方图： viewport size=1440,1080 3 A 3. ✅ 预览确认用 Read 工具向用户展示截图结果。问用户：文字内容对吗？布局和配色满意吗？封面的核心信息在安全区内吗？（封面图特有）需要调整什么？如需调整：修改 HTML → 重新截图 → 再次确认。（HTML 路径迭代成本极低） Path B: AI 生成（Gemini 3 Pro Image） 3 B 1. 构建 Prompt 封面 Base Style Prompt：正文 Base Style Prompt： Per Image Prompt： 3 B 2. ✅ Prompt 确认向用户展示即将使用的 prompt ，等待确认或修改。特别确认：要渲染的文字内容是否正确设计意图是否准确是否有其他要求 3 B 3. 生成 aspect cover → 2.35:1 头条封面 aspect wide → 16:9 正文宽图（默认） aspect standard → 4:3 正文方图 aspect square → 1:1 方图多张图可并行生成（ run in background=true ）。 3 B 4. ✅ 预览确认用 Read 工具向用户展示生成结果。检查项： 1. 文字准确吗？（中文无乱码/错字） 2. 比例正确吗？（封面 2.35:1、正文 16:9 或 4:3） 3. 封面安全区：核心信息在中央正方形内？（封面特有） 4. 深色模式：是否避免了纯白底和纯黑底？ 5. 风格满意吗？问用户：满意 / 重新生成 / 调整 prompt？ Path C: 混合路径（全套配图推荐）适用于全套配图：封面用 AI 生成（抓眼球），正文信息图用 HTML 渲染（信息精确），正文氛围图用 AI 生成。执行顺序： 1. 先按 Path B 生成封面 → 用户确认 2. 从封面的配色/氛围提取一致的风格 3. 正文氛围图用 Path B → 用户确认 4. 正文信息图/数据图用 Path A → 用户确认 Step 4: 上传图床返回 ImgBB 永久链接。公众号文章必须使用网络链接，本地路径在发布后失效。快速参考封面安全区域深色模式适配要点底色用 F5F5F5（浅灰）代替纯白底色用 1A1A2E（暗紫灰）代替纯黑正文字色用 595959 或 3F3F3F，不用纯黑 000000 避免阴影效果、白色边框使用低饱和度配色中文文字渲染（AI 路径特有）封面标题 ≤ 10 字正文图上文字 ≤ 20 字/行信息图文字用 HTML 渲染更可靠必须逐张验证字体推荐（HTML 路径特有）标题： "PingFang SC" Bold / "Microsoft YaHei" Bold 正文： "PingFang SC" Regular 商用安全替代：阿里巴巴普惠体、思源黑体花叔科技账号配色方案名底色主色强调色适用深色模式暖灰专业 F5F0EB D97706 4A90D9 AI工具、分享好极简专业 F5F5F5 4A90D9 FF6B35 教程、对比中暗夜金 1A1A2E E2B714 FFFFFF 产品发布好终端绿 1A1A1A 00FF41 888888 编程相关好 Golden Rules 封面核心信息放在中央正方形安全区正文图用中间色调背景（适配深色模式）信息图优先 HTML → 截图（文字精确）氛围图优先 AI 生成（创意性强）图片上传到图床获取永久链接同一文章插图风格统一每 800 1200 字配一张图每个 H2 章节至少一张配图位置策略位置必要性类型标题下方（封面）必须封面图 / 氛围图每个 H2 标题后推荐章节插图数据/对比处推荐信息图产品/工具介绍处可选截图 / AI 概念图文末总结前可选收尾插图决策流程图相关 Skills Skill 作用 xhs image 小红书配图（姊妹 skill） image to slides PPT 配图（风格库来源）参考文件 references/style gallery.md — 完整风格库与 prompt 模板 references/design guidelines.md — 公众号平台设计规范花叔出品 AI Native Coder · 独立开发者公众号「花叔」 30万+粉丝 AI工具与效率提升代表作：小猫补光灯（AppStore付费榜Top1）·《一本书玩转DeepSeek》

huashu-wechat-image