Wechat Article Writer

微信公众号文章排版器

触发方式

• 用户说"公众号文章""写公众号""公众号排版""微信文章""推文"时触发
• 用户提供 .md 文件或写作主题+大纲

工作流

Phase 1 — 解析输入

• 如果是 .md 文件路径 → parseMarkdown(text) 解析
• 如果用户口述主题+大纲 → 先生成 Markdown 内容，再解析
• 自动推断文章主题（tech/product/warm/zen）

Phase 2 — 排版渲染

• wechat-render.js 渲染结构化 sections → WeChat 兼容 HTML
• 所有样式使用行内 style=""，禁止 <style> 块、<script>、外部 CSS
• 输出：article.html（预览版，含 <img>） + article-plain.html（公众号粘贴版，图片用虚线占位框替换）

Phase 3 — 配图生成（通过 infographic-generator）

• buildSectionPageConfigs 为每个 h2 section 生成独立花园页面配置
• takeMultiPageScreenshots 通过 Playwright 截图：竖长（750×1334）+ 宽屏（1200×675 16:9）
• 宽屏图存入 {theme}/wide/ 子目录
• buildImageMap 将宽屏图映射到文章各位置

Markdown 解析规则

配图映射规则

默认主题：apple（明亮）。可用：linear/apple/stripe/muji。

输出目录结构

output/
├── article.html             ← 图文混排预览（含真实 <img>）
├── article-plain.html       ← 公众号粘贴版（图片为虚线占位框）
├── 插入指南.md               ← 图片位置对照表
└── screenshots/{theme}/
    ├── {theme}-hero.png     ← 竖长头图
    ├── {theme}-section-N.png ← 竖长章节图
    ├── {theme}-cta.png      ← 竖长尾图
    └── wide/                ← 宽屏版（公众号文章实际引用）
        ├── {theme}-hero-wide.png
        ├── {theme}-section-N-wide.png
        └── {theme}-cta-wide.png

WeChat 约束

• 所有样式行内 style=""，无 <style> 块、<script>、<iframe>、事件处理器
• 字体仅系统字体栈
• 颜色用 6 位 hex 不简写
• 图片先上传到微信素材库再插入，本地路径粘贴后丢失

文件清单