# Wechat Article Writer

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

- Skill: `konglong87/wechat-article-writer` (Agent Skill, multi-file: 43 files)
- Install (CLI): `npx skillmds@latest add konglong87/wechat-article-writer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/konglong87/wechat-article-writer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools
- Author: konglong87 (https://skillmd.com/u/konglong87)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/konglong87/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 解析规则

| 输入模式 | 输出类型 |
|----------|----------|
| `一、标题` `二、标题` | 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 |