wechat-article-writer

name	wechat-article-writer
description	微信公众号文章写作和排版助手。输入主题+内容大纲→自动生成结构完整、排版精美的公众号文章（WeChat兼容HTML+行内样式），同时可配套调用infographic-generator生成4主题配图。触发词：'公众号文章','写公众号','公众号排版','微信文章','推文'。

微信公众号文章排版器

触发方式

• 用户说"公众号文章""写公众号""公众号排版""微信文章""推文"时触发
• 用户提供 .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 解析规则

输入模式	输出类型
一、标题 二、标题	h2
1. 小节 2. 小节	h3
### text ## text	h3 / h2
- 要点 · 要点 1. 步骤	ul
> 引用	blockquote
**强调**	strong（强调色）
快速回顾 一句话总结 划重点	highlight
--- ***	separator
案例N： / 带冒号短行(8-50字)	h3
自然段落标题（8-30字、含！，？：、中文/字母开头）	h2

配图映射规则

图片	插入位置
hero	文章标题下方
section-N	第 N 个 h2 之后
cta	文末

默认主题：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 不简写
• 图片先上传到微信素材库再插入，本地路径粘贴后丢失

文件清单

文件	角色
wechat-full.js	一站式编排入口（解析→配图→渲染）
wechat-md2html.js	Markdown 解析器
wechat-render.js	WeChat HTML 渲染器
wechat-themes.json	4 种文章主题
../infographic-generator/generate-garden-page.js	配图 HTML 生成（require 依赖）
../infographic-generator/theme-recipes.json	配图主题 CSS token