wechat-article-writer

WeChat Official Account Article Formatter

Trigger Methods

• Triggered when the user says '公众号文章', '写公众号', '公众号排版', '微信文章', '推文'
• The user provides a .md file or a writing topic + outline

Workflow

Phase 1 — Parse Input

• If it is a .md file path → parseMarkdown(text) parse
• If the user dictates a topic + outline → first generate Markdown content, then parse
• Automatically infer the article theme (tech/product/warm/zen)

Phase 2 — Layout Rendering

• wechat-render.js Render structured sections → WeChat-compatible HTML
• All styles use inline style="", prohibited: <style> blocks,<script>, external CSS
• Output:article.html(preview version, including <img>） + article-plain.html(Official Account paste version, images replaced with dashed placeholder boxes)

Phase 3 — Illustration Generation (via infographic-generator)

• buildSectionPageConfigs Generate an independent garden page configuration for each h2 section
• takeMultiPageScreenshots Screenshot via Playwright: vertical long (750×1334) + widescreen (1200×675 16:9)
• Save widescreen images to the {theme}/wide/ subdirectory
• buildImageMap Map widescreen images to each position in the article

Markdown Parsing Rules

Input Mode	Output Type
一、标题 二、标题	h2
1. 小节 2. 小节	h3
### text ## text	h3 / h2
- 要点 · 要点 1. 步骤	ul
> 引用	blockquote
**强调**	strong (accent color)
快速回顾 一句话总结 划重点	highlight
--- ***	separator
案例N： / short line with colon (8-50 characters)	h3
Natural paragraph heading (8-30 characters, contains !, ?, :, starts with Chinese/letter)	h2

Illustration Mapping Rules

Image	Insertion Position
hero	Below the article title
section-N	After the Nth h2
cta	End of the article

Default theme: apple (bright). Available: linear/apple/stripe/muji.

Output Directory Structure

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 Constraints

• All styles inline style="", no <style> blocks,<script>、<iframe>, event handlers
• Fonts: system font stack only
• Colors use 6-digit hex, not abbreviated
• Images must be uploaded to the WeChat material library before insertion; local paths are lost after pasting

File List

File	Role
wechat-full.js	One-stop orchestration entry (parse → illustrate → render)
wechat-md2html.js	Markdown parser
wechat-render.js	WeChat HTML renderer
wechat-themes.json	4 article themes
../infographic-generator/generate-garden-page.js	Illustration HTML generation (require dependency)
../infographic-generator/theme-recipes.json	Illustration theme CSS tokens