Huashu Wechat Image

< html

< head

< meta charset

"utf-8"

< style

• { margin : 0 ; padding : 0 ; box-sizing : border-box; } body { width : 1800px ; height : 766px ; background : #1A1A2E ; display : flex; flex-direction : column; justify-content : center; align-items : center; padding : 60px 400px ; /* 左右大padding确保内容在安全区 */ font-family : "PingFang SC" , "Hiragino Sans GB" , "Microsoft YaHei" , sans-serif; } .title { font-size : 96px ; font-weight : 900 ; color : #FFFFFF ; text-align : center; line-height : 1.3 ; letter-spacing : 4px ; } .subtitle { font-size : 36px ; font-weight : 400 ; color : #E2B714 ; text-align : center; margin-top : 30px ; } .accent-line { width : 200px ; height : 4px ; background : #E2B714 ; margin : 30px auto; } </ style

</ head

< body

< div class

"title"

Claude vs Codex </ div

< div class

"accent-line"

</ div

< div class

"subtitle"

重度用户的20分钟实战对比 </ div

</ body

</ html

正文信息图模板示例（4:3）：

< html

< head

< meta charset

"utf-8"

< style

• { margin : 0 ; padding : 0 ; box-sizing : border-box; } body { width : 1440px ; height : 1080px ; background : #F5F5F5 ; padding : 60px 80px ; font-family : "PingFang SC" , "Hiragino Sans GB" , "Microsoft YaHei" , sans-serif; } .heading { font-size : 56px ; font-weight : 800 ; color : #1A1A1A ; margin-bottom : 40px ; line-height : 1.3 ; } .item { display : flex; align-items : flex-start; margin-bottom : 28px ; gap : 20px ; } .num { font-size : 40px ; font-weight : 900 ; color : #4A90D9 ; min-width : 50px ; } .text { font-size : 32px ; color : #333 ; line-height : 1.5 ; } .highlight { color : #FF6B35 ; font-weight : 700 ; } </ style

</ head

< body

< div class

"heading"

Claude Code 五大优势 </ div

< div class

"item"

< span class

"num"

01 </ span

< span class

"text"

< span class

"highlight"

Agent模式 </ span

自主规划执行复杂任务 </ span

</ div

< div class

"item"

< span class

"num"

02 </ span

< span class

"text"

原生 < span class

"highlight"

终端集成 </ span

直接操作文件系统 </ span

</ div

< div class

"item"

< span class

"num"

03 </ span

< span class

"text"

< span class

"highlight"

多文件编辑 </ span

一次修改整个项目 </ span

</ div

</ body

</ html

3-A-2. 截图 npx playwright screenshot "file:///path/to/card.html" output.png
--viewport-size=[宽],[高] --wait-for-timeout=1000 封面： --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]: VISUAL REFERENCE: [一句话描述具体风格美学] CANVAS: 2.35:1 ultra-wide landscape, 1800x766 pixels, high quality rendering. SAFE ZONE: Center square (766x766) contains all key text and visuals. COLOR SYSTEM: [描述色彩情绪，不指定比例] TEXT RENDERING: Chinese text must be large, clear, readable. Title in center safe zone. 正文 Base Style Prompt： [Base Style]: VISUAL REFERENCE: [一句话描述具体风格美学] CANVAS: [16:9 landscape, 1920x1080 pixels / 4:3 landscape, 1440x1080 pixels], high quality rendering. COLOR SYSTEM: [描述色彩情绪] DARK MODE: Use medium-tone backgrounds, avoid pure white (#FFFFFF) and pure black (#000000). Per-Image Prompt： Create a [style] [cover/illustration] for a WeChat article about [topic].

[Base Style]

DESIGN INTENT: [用户看到后应该产生什么情绪/行为]

TEXT TO RENDER:

• Title: "[标题，封面≤10字，正文可少或无]"
• [其他文字]

[1-2句画面情绪描述，让 AI 自由发挥构图] 3-B-2. ✅ Prompt 确认 向用户展示即将使用的 prompt ，等待确认或修改。特别确认： 要渲染的文字内容是否正确 设计意图是否准确 是否有其他要求 3-B-3. 生成 export $(grep GEMINI_API_KEY ~/.claude/.env) &&
uv run /Users/alchain/Documents/写作/.claude/skills/wechat-image/scripts/generate_image.py
--prompt "[完整prompt]"
--filename "[timestamp]-wechat-[类型]-[描述].png"
--aspect [cover|wide|standard|square] --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 工具向用户展示生成结果。 检查项： 文字准确吗？（中文无乱码/错字） 比例正确吗？（封面 2.35:1、正文 16:9 或 4:3） 封面安全区：核心信息在中央正方形内？（封面特有） 深色模式：是否避免了纯白底和纯黑底？ 风格满意吗？ 问用户 ：满意 / 重新生成 / 调整 prompt？ Path C: 混合路径（全套配图推荐） 适用于全套配图： 封面用 AI 生成（抓眼球），正文信息图用 HTML 渲染（信息精确），正文氛围图用 AI 生成 。 执行顺序： 先按 Path B 生成封面 → 用户确认 从封面的配色/氛围提取一致的风格 正文氛围图用 Path B → 用户确认 正文信息图/数据图用 Path A → 用户确认 Step 4: 上传图床 python3 /Users/alchain/Documents/写作/tools/upload_image.py "[图片路径]" 返回 ImgBB 永久链接。 公众号文章必须使用网络链接 ，本地路径在发布后失效。 快速参考 封面安全区域 ┌─────────────────────────────────────┐ │ │ 766x766 │ │ │ 装饰区 │ 安全区域 │ 装饰区 │ 1800 x 766 │ │ （核心） │ │ └─────────────────────────────────────┘ ↑ 朋友圈裁切区域 ↑ 深色模式适配要点 底色用 #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 概念图 文末总结前 可选 收尾插图 决策流程图 用户需求 → Step 0 确定需求 ↓ Step 1 选风格（展示3个选项） ↓ Step 2 默认AI生成（仅精确数据表格走HTML） ↓ Step 3 生成 → 预览 → 用户确认 ├→ 满意 → Step 4 上传 ├→ 文字渲染有误 → 该张改用HTML兜底 └→ 不满意 → 调整prompt重新生成 相关 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》