用 Claude Skills 一键发布微信公众号

如果你维护过微信公众号，一定经历过这样的流程：在编辑器里精心排版好文章，复制到公众号后台，发现格式全乱了；图片需要一张张重新上传；代码块变成了纯文本；调好的间距和字号又要重新设置。每次发布一篇技术文章，光排版就要花半小时。

我一直在用 Markdown 写博客，为了解决这个问题，折腾了一套基于 Claude Skills 的自动化发布工作流。现在整个流程只需要一句话——"帮我把这篇文章发到公众号"，Claude 会自动完成渲染、排版、图片上传和草稿提交。

这篇文章记录完整的搭建过程，你可以直接复用。

如果你还不了解 Skills 是什么，建议先看《Claude Skills 是什么》；如果想了解更多 Skill 的创建和使用方法，可以参考《Claude Skills 实战指南》。

前置条件

在开始之前，确保你具备以下条件：

条件	说明
Claude Code	需要安装 Claude Code CLI，官方安装指南
微信公众号	需要已认证的公众号，并获取 AppID 和 AppSecret
Node.js	运行时环境，Skill 脚本通过 `npx -y bun` 执行

微信 API 凭据的获取路径：登录 mp.weixin.qq.com → 左侧菜单「设置与开发」→「基本配置」→ 复制开发者 ID（AppID）和开发者密码（AppSecret）。

注意：AppSecret 只在重置时显示一次，请妥善保存。同时需要在「基本配置」中将服务器 IP 加入白名单。

安装 Skill

baoyu-post-to-wechat 托管在 GitHub，通过 Claude Code 的 Skill 安装命令一键安装：

claude skill install jimliu/baoyu-skills --skill baoyu-post-to-wechat

安装完成后，项目中会生成以下文件结构：

your-project/
├── .agents/skills/
│   └── baoyu-post-to-wechat/
│       ├── SKILL.md              # Skill 核心指令
│       ├── scripts/
│       │   ├── wechat-api.ts     # API 发布脚本
│       │   ├── wechat-browser.ts # 浏览器发布脚本
│       │   └── md/               # Markdown 渲染引擎
│       │       ├── render.ts
│       │       └── themes/       # 主题 CSS 文件
│       └── references/           # 详细参考文档
└── skills-lock.json              # Skill 版本锁定

skills-lock.json 记录了已安装 Skill 的来源和版本哈希，确保团队成员使用相同版本：

{
  "version": 1,
  "skills": {
    "baoyu-post-to-wechat": {
      "source": "jimliu/baoyu-skills",
      "sourceType": "github",
      "computedHash": "cb28e409..."
    }
  }
}

配置

配置分两步：API 凭据和偏好设置。

API 凭据

创建 .baoyu-skills/.env 文件，填入微信公众号的凭据：

# 项目级配置（仅当前项目生效）
mkdir -p .baoyu-skills
cat > .baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

也可以放在用户目录下，让所有项目共享：

# 用户级配置（所有项目生效）
mkdir -p ~/.baoyu-skills
cat > ~/.baoyu-skills/.env << 'EOF'
WECHAT_APP_ID=你的AppID
WECHAT_APP_SECRET=你的AppSecret
EOF

凭据查找的优先级：环境变量 > 项目级 .baoyu-skills/.env > 用户级 ~/.baoyu-skills/.env。

安全提示：.baoyu-skills/.env 包含敏感信息，务必将 .baoyu-skills/ 加入 .gitignore，避免意外提交到版本库。

偏好设置（EXTEND.md）

在 .baoyu-skills/baoyu-post-to-wechat/EXTEND.md 中配置默认偏好。我自己的配置：

# WeChat Publishing Preferences

## Default Settings

- default_theme: yudesk
- default_author: yux

支持的配置项：

配置项	默认值	说明
`default_theme`	`default`	渲染主题（default、grace、simple、yudesk）
`default_publish_method`	`api`	发布方式（api 或 browser）
`default_author`	空	默认作者名
`need_open_comment`	`1`	是否开启评论
`only_fans_can_comment`	`0`	是否仅粉丝可评论

配置的优先级：CLI 参数 > 文章 frontmatter > EXTEND.md > Skill 默认值。

写文章

用标准 Markdown 格式写文章就行。我的博客用了 MDX 自定义组件（BlogImage、QuoteCard、VideoEmbed 等），Skill 会在发布时自动将它们转换为标准 Markdown，不需要手动处理。

转换规则：

MDX 组件	转换结果	示例
`<BlogImage>`	`![alt](src)` + 图片说明	图片 + 斜体 caption
`<QuoteCard>`	`> 引用内容 — 作者`	引用块
`<VideoEmbed>`	`> 🎬 视频标题 + 链接`	引用块 + 视频链接
`<ArticleCard>`	`> 📄 文章标题 + 链接`	引用块 + 文章链接
`<GlossaryCard>`	`> 📖 术语：定义`	引用块
`<ProfileCard>`	`姓名 — 角色`	粗体文本

此外，博客内部链接（/blog/...、/docs/...）会自动转为纯文本，import/export 语句会被移除。这意味着可以直接把博客的 MDX 文件拿来发布，不需要维护两份内容。

文章 frontmatter

文章的 frontmatter 中以下字段会被用于发布：

---
title: 文章标题
author: 作者名
description: 文章摘要（用于公众号的文章摘要）
coverImage: cover.png  # 封面图（本地路径或 URL）
---

如果不提供封面图，Skill 会按以下顺序查找：frontmatter 中的 coverImage/featureImage/cover/image → 文章目录下的 imgs/cover.png → 文章中第一张图片。

发布

一切准备就绪后，发布非常简单。

方式一：对话式发布

在 Claude Code 中直接说：

帮我把 content/blog/my-article.mdx 发到公众号

Claude 会自动识别意图，加载 baoyu-post-to-wechat Skill，按流程执行：加载偏好 → 判断文件类型 → 渲染 HTML → 上传图片 → 提交草稿。

方式二：命令行发布

也可以直接调用脚本：

npx -y bun .agents/skills/baoyu-post-to-wechat/scripts/wechat-api.ts article.md --author yux

支持的参数：

参数	说明
`--theme <name>`	主题：default、grace、simple、yudesk
`--author <name>`	作者名（最多 16 字符）
`--summary <text>`	文章摘要（最多 128 字符）
`--cover <path>`	封面图路径
`--dry-run`	仅渲染不发布，用于预览

发布流程解析

执行发布时，背后经历了以下步骤：

Markdown 文件
    │
    ▼
① MDX 预处理：BlogImage → ![]()，QuoteCard → blockquote ...
    │
    ▼
② Markdown 渲染：marked 引擎 + highlight.js 代码高亮
    │
    ▼
③ 主题应用：base.css + yudesk.css，CSS 变量解析
    │
    ▼
④ CSS 内联：juice 将 <style> 转为 inline style（微信要求）
    │
    ▼
⑤ 图片上传：遍历 <img>，上传到微信 CDN，替换 src
    │
    ▼
⑥ 封面处理：上传封面图，获取 thumb_media_id
    │
    ▼
⑦ 提交草稿：调用 draft/add API，保存到公众号草稿箱

几个关键的技术细节：

CSS 内联：微信公众号不支持 <style> 标签和外部样式表，所有 CSS 必须内联到元素的 style 属性上。Skill 使用 juice 库自动完成，同时将 CSS 变量（如 var(--md-primary-color) → #0F4C81）和 calc() 表达式替换为实际值。
图片上传：微信要求文章中的所有图片都存储在微信 CDN 上。Skill 会遍历 HTML 中的每个 <img> 标签，将本地图片或外部 URL 图片上传到微信素材库，然后用微信 CDN 的 URL 替换原始 src。
品牌元素：发布时会自动添加品牌头图和尾图，保持公众号文章的视觉统一。

进阶：自定义主题

Skill 内置了 4 个主题：default（经典）、grace（优雅）、simple（简洁）、yudesk（技术博客）。如果想创建自己的主题，只需在 themes/ 目录下添加一个 CSS 文件。

以我用的 yudesk 主题为例，它的设计理念是"简洁、专业、代码友好"：

/* yudesk 主题核心样式 */

/* 标题：居中、深色 */
h1, h2 { text-align: center; color: #1a1a1a; font-weight: bold; }

/* 段落：适当字距，灰色文字 */
p { letter-spacing: 0.05em; color: #555; }

/* 引用块：左侧主色边线 */
blockquote { border-left: 3px solid var(--md-primary-color); background: var(--blockquote-background); }

/* 代码块：GitHub 风格，浅灰背景 */
pre.code__pre { background: #f6f8fa !important; border: 1px solid #e1e4e8; border-radius: 4px; }

/* 行内代码：主色调 */
code { color: var(--md-primary-color); background: rgba(15, 76, 129, 0.08); }

创建自定义主题的步骤：

在 .agents/skills/baoyu-post-to-wechat/scripts/md/themes/ 下新建 my-theme.css
参考 yudesk.css 编写样式（覆盖 h1~h6、p、blockquote、pre、code、table 等元素）
在 EXTEND.md 中设置 default_theme: my-theme，或发布时指定 --theme my-theme

主题 CSS 中可以使用 CSS 变量 var(--md-primary-color)、var(--md-font-size) 等，渲染引擎会在 CSS 内联阶段自动将它们替换为实际值。

var(--md-primary-color) → #0F4C81
hsl(var(--foreground))  → #3f3f3f
calc(16px * 1.3)        → 21px

这一步是自动完成的，不需要手动处理。

完整流程总结

从写作到发布的完整流程：

步骤	操作	说明
1. 写文章	用 Markdown/MDX 写内容	可以使用博客的 MDX 组件，会自动转换
2. 安装 Skill	`claude skill install jimliu/baoyu-skills`	仅首次需要
3. 配置凭据	填写 `.baoyu-skills/.env`	仅首次需要
4. 配置偏好	编辑 EXTEND.md	可选，设置默认主题/作者
5. 发布	"帮我发到公众号" 或 `npx -y bun ... wechat-api.ts`	一键完成
6. 检查	登录 mp.weixin.qq.com → 内容管理 → 草稿箱	预览后点击发布

文章发布后会保存到公众号草稿箱（不会直接发表），可以在后台预览和编辑后再正式发布。

用 Claude Skills 一键发布微信公众号

前置条件

安装 Skill

配置

API 凭据

偏好设置（EXTEND.md）

写文章

文章 frontmatter

发布

方式一：对话式发布

方式二：命令行发布

发布流程解析

进阶：自定义主题

踩坑记录

代码块在手机端换行

摘要超长被截断

封面图不能少

CSS 变量兼容

完整流程总结

延伸阅读

评论