jianing1117/jianing-skills/wechat-formatter

Wechat Article Formatter

概述

文章写完，排版和封面还要再花半小时。这个 skill 把一篇 Markdown 文章按文章类型自动选版式和主色，转成能直接粘贴进公众号后台的排版，同时生成一张 900×383 的封面图。默认套用「加宁慢慢来」品牌视觉规范，想换风格可以 fork 来改。

默认排版标准：普通正文轻字重与适量字距，标题、列表和重点使用 Brand Kit；正文根容器仅加一次左右各 20px 的阅读留白，文末关注文案下放紧凑的蓝色小手。具体参数见 排版标准。公开版交付本地文件，按用户要求决定是否操作公众号。

输出内容

每次执行会生成两个文件，放在同一文件夹：

1. 微信公众号 HTML：wechat-[标题].html - 可直接复制粘贴到微信公众号后台
2. 微信封面图片：wechat-cover-[标题].png - 900x383px，2.35:1 比例

核心参考：

• 样式与品牌规范：本 SKILL.md 中的色板、排版约束和元素映射规则
• 文章转换脚本：scripts/md_to_wechat.py
• 封面生成脚本：scripts/generate_cover.py
• 底部卡片脚本：scripts/generate_footer_card.py
• 封面模板：templates/cover_template.html
• 文章模板：templates/article-*.html（三种文章类型的完整示例）

执行前先解析当前 Skill 目录为 SKILL_DIR，并为本次任务创建 OUTPUT_DIR。所有脚本和输出都通过这两个变量引用，不要硬编码用户名、桌面、主目录或 Obsidian 路径。

何时激活

以下表达均视为本 skill 触发信号：

• "帮我排版成公众号格式"
• "把这篇 md 转成推文"
• "生成微信公众号 HTML"
• "帮我做公众号排版"
• "转成可以粘贴到公众号的格式"
• "排版公众号"

品牌视觉规范（快速参考）

色板

色彩分配规则

按内容类型选主色，一篇文章只用一个色系：

• 天蓝系（知识 / 方法 / 工具 / 清单 / 教程）：
• 英文标签：展陈蓝 #607EA5
• 圆点 / 短线：天蓝 #B8D9EA
• 提示框：天蓝白 #EBF4F9 底 + TIP 标签
• 封面色签：天蓝 #B8D9EA

• 樱粉系（个人 / 情感 / 生活 / 随笔 / 观点）：
• 英文标签：展陈蓝 #607EA5（标签字不随主色变）
• 圆点 / 短线：樱粉 #E7C4C8
• 提示框：樱粉白 #F8EDEE 底 + NOTE 标签
• 封面色签：樱粉 #E7C4C8

自动判断文章类型

AI 读完文章后自动选择模板，不需要用户指定：

微信排版约束

1. 导出正文排版样式必须内联（inline style），不依赖 <style> 或 class；本地预览外壳可以使用 CSS，但不复制到微信，微信图片自身的 class 与属性保留
2. 不能引入外部字体。普通正文使用 Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif，300 字重；章节标题与品牌标签保留模板原有字体和字重。
3. 用户原文中的图片保留为占位提示框；长文自动插图由 AI 生成（见第 1.5 步）
4. 阅读留白只加一次：导出正文根容器 width:100%、box-sizing:border-box、margin:0、padding:0 20px；正文与图片共用边线。680px 上限和预览页留白由外壳控制，外壳不复制到微信。
5. 链接在公众号中不可点击，转换为加粗文字或脚注形式

默认工作流

第 0 步：确认输入

收到用户提供的 Markdown 文本后，先检查：

1. 文章是否以 Obsidian YAML frontmatter 开头（--- 包裹的 key-value 块）——直接跳过，不渲染
2. 文章是否有明确的 H1 标题
3. 文章结构（段落、标题层级、是否有列表/表格/引用/代码块）
4. 是否包含需要特殊处理的元素（图片、链接、数学公式）
5. 自动判断文章类型：根据结构选知识/清单/随笔模板和对应主色
6. 提取封面信息：主标题、英文副标题、描述文字、色签颜色

第 0.5 步：筛选重点句

AI 通读全文后，主动挑出少量最值得读者记住的句子：核心判断、容易误读的定义或数据口径、重要风险与行动建议。不要只照搬原稿已有的加粗，也不要机械地突出所有数字或整段文字；保留句子的必要限定，避免断章取义。用户指定强调或取消强调的句子优先。

在用于排版的 Markdown 副本中，用 ==**重点句**== 标记，原文措辞和数字不变。转换脚本负责呈现标记，语义筛选由 AI 完成。

知识/清单类的默认样式为 Brand Kit 天蓝白 `#EBF4F9` 底纹 + 近黑 `#171717` 加粗（700）。列表圆点仍用天蓝 #B8D9EA。从 Brand Kit 现有色组选择浅底；不把圆点的主蓝铺成正文底纹，不默认改成蓝色文字。用户明确要求其他样式时按其要求处理。

第 1 步：生成微信公众号 HTML

使用脚本转换（首选）：

SKILL_DIR="<已安装的 wechat-formatter 目录>"
OUTPUT_DIR="./outputs/wechat-<标题>"
mkdir -p "$OUTPUT_DIR"
 
python3 "$SKILL_DIR/scripts/md_to_wechat.py" \
  --input "文章.md" \
  --output "$OUTPUT_DIR/wechat-<标题>.html"

或直接传入文本内容进行转换（stdin 模式）：

python3 "$SKILL_DIR/scripts/md_to_wechat.py" \
  --output "$OUTPUT_DIR/wechat-<标题>.html"
# 然后将文章内容通过 stdin 传入

生成后，用 open 打开让用户查看：

open "$OUTPUT_DIR/wechat-<标题>.html"

第 1.5 步：自动插图（长文自动触发）

当文章正文超过 3000 字或包含 3 个及以上 H2 章节时，自动为文章生成品牌风格的配图，插入 HTML 中。短文（<3000 字且 <3 个 H2）不插图。

插图数量

插入位置

• 在 H2 章节之间插入，不在文章开头或结尾
• 均匀分布：如 2 张图 + 6 个章节，分别放在第 2 和第 4 章节之后
• 插图前后各留 margin:40px 0，与正文有呼吸空间

插图风格（严格遵循 brand-kit imagery-prompts.md）

三种风格按文章内容自动选择，不混用——一篇文章只用一种：

色相规则：插图只用文章主色——天蓝系文章用天蓝 #B8D9EA，樱粉系文章用樱粉 #E7C4C8。其余只有灰和白。

禁止项：满版深色、高饱和、插画、3D 渲染、霓虹、光泽反光、彩虹渐变、stock photo 感。

图片尺寸

• 宽度：680px（与正文等宽）
• 比例：16:9（680×383px）或 3:2（680×453px）
• 格式：PNG 或 JPG，单张 <500KB

生成方式

需要图片生成能力（如 DALL-E、Midjourney、Flux 等）。按以下优先级：

1. AI 直接生成（首选）：如果当前环境有图片生成能力，AI 根据章节内容 + 下面的提示词模板自动生成。
2. 输出提示词让用户生成（兜底）：如果当前环境没有图片生成能力，为每张插图输出完整的中英文提示词（遵循 brand-kit 06-imagery/imagery-prompts.md 格式），并在 HTML 中放占位框标注「请用以下提示词生成图片后替换」。

提示词模板（以摄影类为例，其他类型见 imagery-prompts.md）：

编辑式生活摄影。[根据章节内容描述一个具体场景]。
冷灰调，低饱和，只带一丝极淡的[主色名]（[主色 hex]）。
胶片颗粒，柔焦，大量留白。像韩国服装品牌的画册页。
680x383px，16:9。

Editorial lifestyle photograph. [scene description from section content].
Cool pale-grey cast, low saturation, only a whisper of [main color name] [hex].
Film grain, soft focus, generous negative space.
Like a lookbook page from a Korean fashion label.
No text, no logo. --ar 16:9 --stylize low

负面词（所有风格通用）：illustration, cartoon, 3D render, neon, glossy, high contrast, rainbow, busy background, stock photo, dark full-bleed, high saturation

插图的 HTML 格式

生成的图片保存到输出目录，在 HTML 中用以下格式嵌入：

<section style="margin:40px 0;text-align:center;">
  <img src="insert-01.png" alt="章节相关描述" style="width:100%;max-width:680px;border-radius:4px;display:block;margin:0 auto;">
</section>

注意：粘贴到微信公众号后台时，图片需要手动上传替换。HTML 中的 src 仅用于本地预览。

输出文件

插图文件与 HTML 和封面放在同一目录：

<OUTPUT_DIR>/
├── wechat-[标题].html
├── wechat-cover-[标题].png
├── insert-01.png              # 第 1 张插图
├── insert-02.png              # 第 2 张（如有）
└── insert-03.png              # 第 3 张（如有）

第 2 步：生成微信封面图片

使用封面生成脚本：

python3 "$SKILL_DIR/scripts/generate_cover.py" \
  --title "主标题" \
  --subtitle "英文副标题（大写，2-5 词）" \
  --description "描述文字" \
  --output "$OUTPUT_DIR/wechat-cover-<标题>.png"

生成后，用 open 打开让用户查看：

open "$OUTPUT_DIR/wechat-cover-<标题>.png"

封面设计规范：

• 尺寸：900 x 383 像素（微信标准 2.35:1 比例）
• 背景：展厅白 #FFFFFF（纯白，不用渐变，不加装饰元素）
• 左右 padding：72px，内容靠左对齐
• 布局（从上到下）：
• 右上角色签：48×4px 色条贴顶边，right:72px，颜色跟文章主色（天蓝 or 樱粉）
• 英文副标题：展陈蓝 #607EA5，11px，letter-spacing:5px，大写
• 主标题：宋体衬线（'Songti SC','Source Han Serif SC','Noto Serif CJK SC',serif），46px，近黑 #171717，font-weight:600，letter-spacing:3px，最大宽度 720px
• 描述：注脚灰 #77787A，14px，line-height:1.6，最大宽度 480px
• 底部品牌标识：wordmark（已内嵌为 base64，无外部依赖），左下角 bottom:32px;left:72px，高度 26px，opacity:0.8
• 字体对比：标题用宋体衬线，副标题和描述用无衬线，形成杂志感的软硬对比

第 3 步：组织输出文件

将所有文件放在同一文件夹：

<OUTPUT_DIR>/
├── wechat-[标题].html          # 公众号排版 HTML
├── wechat-cover-[标题].png     # 封面图片
├── insert-01.png              # 自动插图（长文才有）
├── insert-02.png              # 第 2 张（如有）
└── insert-03.png              # 第 3 张（如有）

第 4 步：手动构建（脚本不可用时的兜底）

如果脚本不可用，按照以下元素映射规则，逐一将 Markdown 转为内联 HTML。也可参考 templates/article-*.html 中的完整示例。

Markdown → 微信 HTML 元素映射规则

外层容器（所有内容的包裹层）

<section id="wechat-article" style="box-sizing:border-box;width:100%;margin:0;padding:0 20px;font-family:'PingFang SC','Noto Sans SC',-apple-system,sans-serif;color:#171717;background:#FFFFFF;border-radius:4px;">
  <!-- 内容 -->
</section>

H1 标题（文章主标题，通常在正文前，可选）

H1 一般不单独渲染为标题块，而是融入第一个段落，或者直接跳过（公众号标题在后台设置）。

H2 标题（章节大标题）

用英文标签 + 中文标题的组合，编号从 01 开始自动递增。不同模板用不同标签词和颜色。

知识类（CHAPTER）：

• 英文标签：11px，展陈蓝 #607EA5，letter-spacing:4px，font-weight:500
• 中文标题：22px，加粗，近黑 #171717
• 上间距 72px，与前段拉开距离

<section style="margin:72px 0 48px;">
  <p style="font-size:11px;color:#607EA5;letter-spacing:4px;margin:0 0 6px;font-weight:500;">CHAPTER 01</p>
  <p style="font-size:22px;font-weight:bold;color:#171717;line-height:1.5;margin:0;letter-spacing:0.5px;">章节标题文字</p>
</section>

清单类（POINT）：

• 英文标签：同上格式
• 中文标题：19px，加粗
• 上间距 56px

<section style="margin:56px 0 20px;">
  <p style="font-size:11px;color:#607EA5;letter-spacing:4px;margin:0 0 6px;font-weight:500;">POINT 01</p>
  <p style="font-size:19px;font-weight:bold;color:#171717;line-height:1.5;margin:0;letter-spacing:0.3px;">要点标题文字</p>
</section>

随笔类（ESSAY）：

• 不编号，只在文章开头出现一次 ESSAY 标签
• 标签用展陈蓝 #607EA5
• 段落之间用短线分隔，不用标题

<p style="font-size:11px;color:#607EA5;letter-spacing:4px;margin:0 0 24px;font-weight:500;">ESSAY</p>

H3 小节标题

标题下方一道 32px 天蓝短线作为视觉锚点（随笔类用樱粉 #E7C4C8）。

<p style="font-size:17px;font-weight:600;color:#171717;line-height:1.5;margin:48px 0 12px;letter-spacing:0.3px;">小节标题</p>
<div style="width:32px;height:3px;background:#B8D9EA;border-radius:2px;margin:0 0 20px;"></div>

H4 四级标题

与 H3 相同结构，共用短线样式。

<p style="font-size:17px;font-weight:600;color:#171717;line-height:1.5;margin:48px 0 12px;letter-spacing:0.3px;">四级标题文字</p>
<div style="width:32px;height:3px;background:#B8D9EA;border-radius:2px;margin:0 0 20px;"></div>

正文段落

<p style="font-size:16px;font-weight:300;font-family:Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#171717;line-height:1.9;margin:0 0 28px;letter-spacing:1px;text-align:justify;word-break:normal;overflow-wrap:break-word;">段落内容</p>

加粗（text）

公众号正文可以加粗，这是品牌规范 05 章「正文隐形」在公众号上的例外（2026-10-07 定）。加粗只用近黑，不变色。

<strong style="color:#171717;font-weight:bold;">加粗文字</strong>

重点高亮（==text==）

用于第 0.5 步选出的关键句。普通 **text** 仍只加粗，不自动加底纹；==text== 和 ==**text**== 都输出浅蓝底纹加粗。代码中的 == 保留为代码内容。

<span data-highlight="true" style="color:#171717;font-weight:700;background-color:#EBF4F9;">重点句</span>

文字跨行时，底纹跟随每一行文字，不扩展成整段色块。其他色系文章使用 Brand Kit 对应的浅底，保持一篇文章的配色一致。

无序列表（- item）

用品牌色的实际文字圆点，知识/清单类用天蓝 #B8D9EA，随笔类用樱粉 #E7C4C8。连续列表项紧凑排列。

<section style="margin:0 0 28px;">
<p style="font-size:16px;font-weight:300;font-family:Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#171717;line-height:2.2;margin:0;letter-spacing:1px;text-align:justify;word-break:normal;overflow-wrap:break-word;"><span data-marker="true" style="color:#B8D9EA;font-size:16px;margin-right:10px;">•</span>列表项一</p>
<p style="font-size:16px;font-weight:300;font-family:Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#171717;line-height:2.2;margin:0;letter-spacing:1px;text-align:justify;word-break:normal;overflow-wrap:break-word;"><span data-marker="true" style="color:#B8D9EA;font-size:16px;margin-right:10px;">•</span>列表项二</p>
<p style="font-size:16px;font-weight:300;font-family:Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#171717;line-height:2.2;margin:0;letter-spacing:1px;text-align:justify;word-break:normal;overflow-wrap:break-word;"><span data-marker="true" style="color:#B8D9EA;font-size:16px;margin-right:10px;">•</span>列表项三</p>
</section>

有序列表（1. item）

数字用展陈蓝 #607EA5，紧凑排列。