WeChat Styler - 公众号排版工具
将 Markdown 文章转换为优雅的公众号 HTML 格式，支持多主题切换。
效果预览
使用 2026-06-30 最近抓取的真实 WorkBuddy 文档节选生成，左侧为原始 Markdown，右侧为 zhijian 主题输出。
使用方式
# 基础用法（使用默认主题）
/wechat-styler path/to/article.md
# 指定主题
/wechat-styler path/to/article.md --theme kami
/wechat-styler path/to/article.md --theme magazine-ink
# 批量转换（支持 glob 模式）
/wechat-styler "articles/*.md" --theme kami
/wechat-styler "01_项目/内容创作/**/*.md" --theme magazine-ink
# 自定义参数
/wechat-styler path/to/article.md --theme kami --font-size 17 --accent-color "#1B365D"
# 输出到指定路径（单文件）
/wechat-styler path/to/article.md --output path/to/output.html
可用主题
0. zhijian（智见AI 品牌主题）- 默认主题
特点：
- 基于 DESIGN.md 品牌系统，暖纸感 × 顾问可信度
- 纸感背景 #F5F4ED，深暖陶行动色 #B85235，墨蓝结构色 #1B365D
- 三层字体策略：标题楷体（品牌感）、正文宋体（可读性）、UI 黑体（功能性）
- H2 左侧暖陶竖线，H3 墨蓝色，引用块 Human Accent 左线
- 代码块暖黑底 12px 圆角，行内代码墨蓝色浅蓝底
- 加粗和链接使用 #A04A2E（WCAG AA 安全暖色）
- 分隔线使用暖陶色短线居中
适用场景： 所有智见AI品牌内容 — 公众号文章、培训讲义、课程内容、方法论分享、AI 落地案例
参数：
font_family_cn: 'Source Han Serif SC','Noto Serif CJK SC','Songti SC',Georgia,serif
font_family_en: 'Georgia','Source Serif 4','Charter','Times New Roman',serif
font_size: 17
line_height: 1.58
accent_color: '#B85235'
accent_secondary: '#1B365D'
background_color: '#F5F4ED'
surface_color: '#FAF9F5'
text_color: '#141413'
heading_font: 'TsangerJinKai02','Source Han Serif SC','Noto Serif CJK SC','Songti SC',Georgia,serif
ui_font: 'Source Han Sans SC','Noto Sans CJK SC','PingFang SC',-apple-system,sans-serif
code_font: 'JetBrains Mono','SF Mono','Fira Code',Consolas,Monaco,'Source Han Serif SC',monospace
code_bg: '#30302E'
code_color: '#F5F4ED'
1. kami（紙感编辑排版）
特点：
- warm parchment 纸感背景：#f5f4ed
- ink-blue 单一强调色：#1B365D
- 中文标题使用衬线/楷体栈，正文使用稳定无衬线栈
- 温暖灰阶，不使用冷灰和纯白大底
- 标题左侧蓝色竖线、solid tag 背景、克制引用块
- 所有背景色使用 solid hex，并在外层、内容层、文本层重复声明，降低粘贴到公众号后背景丢失风险
适用场景： 公众号深度文章、商业分析、课程内容、正式说明文
参数：
font_family_cn: 'Inter','TsangerJinKai02','Source Han Sans SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',Arial,sans-serif
font_family_en: 'Newsreader','Source Serif 4','Source Serif Pro','Charter',Georgia,'Times New Roman',serif
font_size: 16
line_height: 1.55
accent_color: '#1B365D'
background_color: '#f5f4ed'
surface_color: '#faf9f5'
text_color: '#141413'
secondary_color: '#5e5d59'
heading_font: 'TsangerJinKai02','Source Han Serif SC','Noto Serif CJK SC','Songti SC','STSong',Georgia,serif
code_font: 'JetBrains Mono','SF Mono','Fira Code',Consolas,Monaco,'TsangerJinKai02','Source Han Serif SC',monospace
2. magazine 系列（电子杂志 × 电子墨水）
从 magazine-web-ppt 迁移来的 5 套预设，保留 ink / paper / tint 的杂志色彩关系，同时改造成微信公众号安全 HTML：不使用 rgba()，所有背景色均为 solid hex。
| 主题 | 命令 | 变体 | 字体 / 版式人格 |
|---|---|---|---|
| 墨水经典 | --theme magazine-ink |
ink-classic |
无衬线正文 + 衬线标题，细 rule、dash list、pull quote，通用杂志内页 |
| 靛蓝瓷 | --theme magazine-indigo |
indigo-research |
Inter/SF Pro 正文 + Source Serif 标题，左侧研究栏、note quote、技术代码块 |
| 森林墨 | --theme magazine-forest |
forest-fieldnote |
楷体/宋体正文 + 非虚构标题，居中标题、field note 引用、自然图片说明 |
| 牛皮纸 | --theme magazine-kraft |
kraft-archive |
宋体正文 + archive 标题盒，档案式引用、罗马数字有序列表、旧纸代码框 |
| 沙丘 | --theme magazine-dune |
dune-gallery |
Avenir 正文 + Didot/Bodoni 标题，右对齐画廊标题、gallery quote、极简图片说明 |
共同特点：
- 每个主题都有独立字体栈、字号、行距、段距、标题结构、列表 marker、引用块、代码块和图片说明。
- 分隔以留白、短淡线和局部标识为主；不会在每个章节之间自动插入整宽实线。
- 五个主题共享 magazine-editorial renderer 入口，但通过 magazine_variant 走不同结构分支，不只是替换颜色。
- 所有背景色都使用 solid hex，并在区块与文本 span 上重复声明 background-color，降低复制到公众号编辑器后背景色丢失的概率。
- 图片自身带 margin:0 auto 居中兜底，避免公众号编辑器复制后改写图片宽度导致图片靠左。
- 版式保留杂志感，但输出仍完全内联，可直接复制到公众号编辑器。
3. elegant（优雅复古）
特点：
- 中文：方正书宋（FZShuSong-Z01）
- 英文：Garamond
- 整体淡灰色背景
- 红色强调色系统
- 衬线标题 + 等宽代码
适用场景： 商业案例、深度分析、知识分享
参数：
font_family_cn: 'FZShuSong-Z01','Songti SC',STSong,serif
font_family_en: 'Garamond',serif
font_size: 16
line_height: 1.9
accent_color: '#cf4436'
background_color: '#f7f6f1'
heading_font: 'Noto Serif SC','Songti SC',STSong,Georgia,serif
code_font: 'JetBrains Mono','SF Mono',Menlo,Consolas,monospace
4. modern（现代简约）
特点：
- 无衬线字体
- 纯白背景
- 蓝色强调色
- 清晰现代
适用场景： 科技产品、教程、快讯
参数：
font_family_cn: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif
font_family_en: 'SF Pro Display','Helvetica Neue',sans-serif
font_size: 16
line_height: 1.8
accent_color: '#007aff'
background_color: '#ffffff'
heading_font: 'PingFang SC','Hiragino Sans GB',sans-serif
code_font: 'SF Mono',Menlo,Consolas,monospace
5. minimal（极简主义）
特点：
- 极简黑白
- 大量留白
- 灰色调
- 克制优雅
适用场景： 哲学思考、个人随笔、艺术评论
参数：
font_family_cn: 'Noto Sans SC','PingFang SC',sans-serif
font_family_en: 'Inter','Helvetica Neue',sans-serif
font_size: 15
line_height: 2.0
accent_color: '#333333'
background_color: '#fafafa'
heading_font: 'Noto Sans SC',sans-serif
code_font: 'JetBrains Mono',monospace
Renderer Presets
主题不只换颜色。每个主题绑定一个 Markdown 渲染人格，负责标题、正文、引用、列表、代码、图片说明的结构、字号、行高、间距和字重。
| Preset | 绑定主题 | 版式语气 |
|---|---|---|
zhijian-warm-paper |
zhijian |
品牌讲义：暖陶竖线标题、墨蓝三级标题、Human Accent 引用、暖黑代码块 |
kami-document |
kami |
纸感文档：正式、克制、标题左侧 ink-blue 竖线 |
magazine-editorial |
magazine-ink / magazine-indigo / magazine-forest / magazine-kraft / magazine-dune |
电子杂志家族：通过 magazine_variant 分别呈现 classic / research / fieldnote / archive / gallery 五种版式 |
elegant-essay |
elegant |
复古长文：居中标题、舒展行距、摘录式引用 |
modern-technical |
modern |
现代教程：无衬线层级、提示卡片、技术代码块 |
minimal-notes |
minimal |
极简笔记：低装饰、大留白、细线引用 |
公众号兼容硬规则： 所有 preset 输出均为 inline style；背景色使用 solid hex；外层 section、内容 section、文本 span 会重复声明 background-color。
主题参数说明
| 参数 | 说明 | 默认值 |
|---|---|---|
--theme |
主题名称 | zhijian |
--font-size |
正文字号（px） | 17 |
--line-height |
行高 | 1.58 |
--accent-color |
强调色（标题、链接） | #B85235 |
--background-color |
背景色，必须使用 solid hex | #F5F4ED |
--max-width |
内容最大宽度（px） | 640 |
--output |
输出文件路径 | 自动生成 |
输出规则
默认输出路径：
- 输入：path/to/article.md
- 输出：path/to/article_wechat.html
输出内容：
1. 完整的 HTML 文件
2. 内联样式（可直接复制到公众号）
3. 保留图片链接
4. 自动处理代码块、引用块、列表等
工作流程
-
读取 Markdown 文件
- 解析 frontmatter（标题、摘要等）
- 提取正文内容 -
加载主题配置
- 读取主题参数
- 应用用户自定义参数 -
转换为 HTML
- Markdown → HTML 结构
- 应用主题样式（内联）
- 处理特殊元素（代码、图片、引用） -
输出文件
- 生成完整 HTML
- 保存到指定路径
- 输出使用说明
主题预览
不确定选哪个主题？使用主题预览生成器对比所有主题效果：
# 生成所有主题的预览页面（使用默认示例文章）
node scripts/generate-preview.mjs
# 使用自定义文章生成预览
node scripts/generate-preview.mjs path/to/your-article.md
# 只预览指定主题（逗号分隔，无空格）
node scripts/generate-preview.mjs article.md --themes magazine-ink,magazine-indigo,magazine-forest,magazine-kraft,magazine-dune
# 自定义输出路径
node scripts/generate-preview.mjs article.md --themes kami,elegant --output /path/to/my-preview.html
预览页面会并排展示所选主题的效果，方便快速对比选择。生成的 preview.html 可以在浏览器中打开查看。
扩展新主题
步骤：
-
在
themes/目录创建新主题配置文件：
yaml # themes/my-theme.yaml name: my-theme description: 我的自定义主题 font_family_cn: 'Custom Font CN' font_family_en: 'Custom Font EN' font_size: 16 line_height: 1.8 accent_color: '#ff6b6b' background_color: '#f8f9fa' heading_font: 'Heading Font' code_font: 'Code Font' -
使用新主题：
bash /wechat-styler article.md --theme my-theme
注意事项
- 字体回退：所有字体都有完整的回退栈，确保在不同系统上都能正常显示
- 图片处理：保留原始图片链接，确保图床可访问
- 代码块：使用等宽字体 + 浅色背景
- 引用块：浅底或细左线，避免厚重边框
- 图片居中：图片同时使用父级
text-align:center和自身margin:0 auto，防止公众号编辑器复制后图片偏移 - 公众号兼容：所有样式内联，背景色使用 solid hex，避免 rgba / body 背景在编辑器中丢失
示例
输入 Markdown：
---
title: 文章标题
summary: 文章摘要
---
## 章节标题
这是一段正文，包含**加粗**和`代码`。
> 这是一段引用
输出 HTML：
- 完整的公众号可用 HTML
- 所有样式内联
- 可直接复制粘贴
技术实现
核心脚本： scripts/convert.mjs
依赖：
- Node.js 18+
- marked（Markdown 解析）
- js-yaml（YAML 解析）
目录结构：
wechat-styler/
├── SKILL.md
├── scripts/
│ └── convert.mjs
├── themes/
│ ├── elegant.yaml
│ ├── kami.yaml
│ ├── magazine-dune.yaml
│ ├── magazine-forest.yaml
│ ├── magazine-indigo.yaml
│ ├── magazine-ink.yaml
│ ├── magazine-kraft.yaml
│ ├── modern.yaml
│ └── minimal.yaml
└── templates/
└── base.html
最后更新： 2026-06-30
版本： 1.3.3
作者： 大鹏
