zjp1997720/wechat-styler

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 品牌主题）- 默认主题

开源声明：这是一个示例品牌主题，展示如何把一套品牌系统（颜色 + 字体 + 版式人格）固化进 skill。它来自作者自己的品牌设计系统。你可以直接用，也可以参考它的结构，把 themes/zhijian.yaml 改成你自己的品牌主题（换颜色、换字体、换 top_label）。

特点：

• 基于 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. 自动处理代码块、引用块、列表等

工作流程

1. 读取 Markdown 文件

   • 解析 frontmatter（标题、摘要等）
   • 提取正文内容

2. 加载主题配置

   • 读取主题参数
   • 应用用户自定义参数

3. 转换为 HTML

   • Markdown → HTML 结构
   • 应用主题样式（内联）
   • 处理特殊元素（代码、图片、引用）

4. 输出文件

   • 生成完整 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 可以在浏览器中打开查看。

扩展新主题

步骤：

1. 在 themes/ 目录创建新主题配置文件：

   # 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'
   

2. 使用新主题：

   /wechat-styler article.md --theme my-theme
   

公众号兼容硬规则

以下规则由 scripts/validate.mjs 确定性执行，不依赖模型自觉。convert 产物自动校验；独立运行 node scripts/validate.mjs output.html 可复检（0 ERROR 退出 0，有 ERROR 退出 1，给 CI/自动化用）。

convert 采用软门策略：发现 ERROR 时文件照常生成（用户能先看效果），末尾打印红色报告明细；独立 validate 脚本才返回非零退出码。

ERROR 级（产物必须为 0，否则粘贴后会出问题）

1. 禁用标签：<style> / <script> / <link> / <iframe> / body 内 <meta> / <input>
   • 原因：公众号编辑器剥离，导致样式/脚本/外部资源失效
2. 禁用属性：class= / id= / contenteditable
   • 原因：公众号编辑器剥离，样式必须全部内联到 style
3. 禁用 CSS：position:fixed|absolute / display:grid|flex / @media / @keyframes
   • 原因：粘贴后错位、布局坍塌或被忽略
4. 禁用函数：rgba() / hsla()
   • 原因：背景色在编辑器中丢失，必须用 solid hex（如 #1B365D，非 rgba(27,54,93,0.8)）
5. 禁用外部字体：@font-face 的 url(...) 外部引用
   • 原因：加载失败降级，版式走样；用系统字体栈

WARN 级（建议修复，不阻断）

6. 图片无 alt：<img> 缺 alt 属性（无障碍 + 图床失效时的兜底）
7. 图片偏移风险：<img> 缺 margin:0 auto 或 display:block（粘贴后可能偏左）
8. 块级元素缺 style：<p> / <h2> / <blockquote> 缺 style 属性（粘贴后样式丢失）

convert.mjs 已内置的兼容策略（无需手动处理）

• 所有背景色使用 solid hex，不用 rgba()
• 外层 section / 内容 section / 文本 span 三层重复声明 background-color，降低粘贴后背景丢失
• 图片父级 text-align:center + 自身 margin:0 auto;display:block 双重兜底，防止偏移
• 所有样式内联，不使用 <style> 标签或外部 CSS

占位符机制

写作时图床还没准备好，但想先看排版效果？在 Markdown 里写占位符，convert 会渲染成居中虚线灰框：

这是一段正文。

【插入:文章开头的视频截图】

继续正文。

渲染效果：克制中性灰虚线框 + 居中灰字「📷 待补素材：xxx」，不抢正文视觉。图准备好后，把 【插入:xxx】 替换成 ![alt](url) 即可。

只支持独占一行的 【插入:xxx】（全角方括号）；行内不会触发，避免误伤正文。

示例

输入 Markdown：

---
title: 文章标题
summary: 文章摘要
---

## 章节标题

这是一段正文，包含**加粗**和`代码`。

![图片说明](https://example.com/image.png)

> 这是一段引用

输出 HTML：

• 完整的公众号可用 HTML
• 所有样式内联
• 可直接复制粘贴

技术实现

核心脚本： scripts/convert.mjs（转换）+ scripts/validate.mjs（公众号兼容性校验）

依赖：

• Node.js 18+
• marked（Markdown 解析）
• js-yaml（YAML 解析）

目录结构：

wechat-styler/
├── SKILL.md
├── scripts/
│   ├── convert.mjs          # Markdown → 公众号 HTML（软门调用 validate）
│   ├── validate.mjs         # 公众号兼容性校验（独立可运行 / 被 convert 引用）
│   └── generate-preview.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
│   └── zhijian.yaml
└── templates/
    └── base.html

---

最后更新： 2026-07-07 版本： 1.4.0 作者： 大鹏