SkillFoxx

wechat-publisher skill

Claude skill that typesets an article for WeChat with cards and SVG infographics, uploads images and saves a draft

  • 121 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • Uses official WeChat account secrets and writes drafts into the account.
All reasons and checks

sakuraoxo-clio/wechat-publisherAuthor:sakuraoxo-clio

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/wechat-publisher

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • Uses official WeChat account secrets and writes drafts into the account.

This is third-party code. Review the repository files before installing.

What it does

wechat-publisher turns an article into a polished publication for a WeChat official account. Claude hand-writes HTML for the specific text using a component set: cards, numbered subheadings, dark quote blocks and inline SVG infographics (comparisons, timelines, flywheels) that do not use the image quota. An alternative mode takes Markdown and applies a fixed theme. Images in the text, whether local, remote or base64, are uploaded to WeChat automatically and links are replaced. For real photos `img2base64.ts` downloads the image, validates, compresses it to 1 MB and encodes it. A cover can be generated by an image model. The `publish.ts` script calls the official `draft/add` interface and returns the draft `media_id`, and you publish yourself in the console. The layout-only mode needs no API and no verified account.

Who it is for. Authors and editors of WeChat accounts who typeset articles with Claude and want to drop manual copying and re-uploading of images.

Good fit when

  • An article needs visual design with cards and infographics instead of solid text.
  • Images from the text should land in the WeChat media library on their own.
  • A finished piece goes to drafts with one `npx tsx publish.ts` command.
  • Quick Markdown layout with a fixed theme is needed.

Not a fit when

  • You have no verified account: draft upload is unavailable, though layout works.
  • You need publishing without manual review in the console.
  • The content is not for WeChat.

Example request

Typeset this article for WeChat with cards and an SVG comparison infographic and show a preview, without uploading a draft.

Limitations

Draft upload requires a verified service or subscription account with the `draft/add` permission and the machine's IP address on the console allowlist. API credentials live in `.env` modeled on `.env.example`, so protect that file. The script only places a draft and publication is manual through mp.weixin.qq.com. The description is in Chinese. The author requires keeping attribution and a link to the original repository in forks and retellings. The last commit dates from July 2026. The license is MIT.

How to disable. Delete the skill folder from the skills directory and the `.env` file with account keys. Reset the secret in the WeChat console.

FAQ

Is an account needed for layout?

No. The layout-only mode needs no API and no verified account: you paste the HTML into the editor by hand.

What is needed to upload drafts?

A verified account with the `draft/add` permission and the machine IP on the allowlist, then `npm install` in `scripts` and a `.env` with credentials.

How do I run it?

Run `npx tsx publish.ts <article.html> --title "Title" --author "Author"`, optionally with `--cover` or `--gen-cover`.

Does the skill publish the article itself?

No. It leaves a draft and returns the `media_id`, then you preview and publish in the console.

How do the two layout modes differ?

The main mode hand-builds HTML from a component library and the fallback applies a fixed theme to Markdown.

Discussion

No questions or reviews yet.

Skills

A skill that lays out WeChat articles: Markdown goes into a local preview page and copies out as ready rich text.

SkillMinimal access56

A WeChat article layout skill: turns Markdown into paste-ready HTML with inlined styles that survives pasting into the official account editor

SkillExtended access4.3K

Nine skills take a WeChat Official Account article from topic and text to layout and a draft in the backend

SkillBroad access738

Xiaowan WeChat Layout

xiaowan-wechat-layout-skill

A Codex skill that readies long articles for WeChat Official Accounts: phone-ready HTML, cover, summary and a pre-publish check.

SkillExtended access132

A personal set of Claude Code plugins: WeChat articles in 11 steps, a coding session log in Obsidian and article-to-TickTick tasks

PluginExtended access118

README in short

The project has two paths: layout with no API access and draft upload through the official WeChat interface. Components and SVG give pieces more visual variety.

README badge

Original SKILL.md

---
name: wechat-publisher
description: 把文章排版成微信公众号合规 HTML、自动上传图片、可选自动生成封面图，并通过官方 API 一键写入公众号草稿箱，用户只需在后台预览后发布。优先用组件化手写 HTML 做精排版，也支持 Markdown 快速排版。当用户提到「发布公众号」「推送到草稿箱」「公众号排版」「post to wechat」「微信公众号文章」时使用。
---

# WeChat Publisher — 文章一键进公众号草稿箱

把文章变成公众号草稿：排版 → 上传图片 →（可选）生成封面 → 写入草稿箱。用户在 `mp.weixin.qq.com` 后台预览满意后发布。

**排版分两种模式，默认用模式 A：**

| 模式 | 用法 | 适用 |
|------|------|------|
| **A 组件化手写 HTML（默认）** | Claude 照组件库手写带卡片/SVG 信息图的 HTML | 正式文章、要质感的内容 |
| B Markdown 快速排版（兜底） | 喂 `.md`，脚本套固定主题渲染 | 草稿、临时、对排版无要求 |

固定主题（`render.ts`）天花板有限——千篇一律、像文档。**正式文章一律走模式 A。**

## 两种交付方式（先看这个）

排好版后，有两条路把文章送进公众号。**默认先给「复制预览」，再主动问要不要一键入库**：

1. **复制预览（零门槛，谁都能用）** —— 把排好的 HTML 在浏览器打开，用户全选复制、手动粘进公众号编辑器即可。**不需要任何凭证、不需要认证公众号。** SVG 信息图和 base64 图片粘贴时公众号会自动收图。
2. **一键进草稿箱（需已认证公众号）** —— 通过官方 `draft/add` 接口直接写入，省掉复制粘贴和重新传图。需要凭证 + IP 白名单（见下）。

排版完成后，先交付预览，再问用户：「要不要我直接一键发到你的草稿箱？需要的话我带你配一次凭证（一次性，3 步）。」用户不需要就到此为止。

## 一键发布的凭证配置（仅「一键进草稿箱」需要）

前提：公众号为**已认证**服务号 / 订阅号（有 `draft/add` 权限）。带用户走三步：

1. **拿凭证**：让用户登录**自己的**公众号后台（mp.weixin.qq.com → 开发 → 基本配置），复制 AppID / AppSecret。
   - 默认（小白最快）：用户把 AppID / AppSecret 发来，你写进项目根目录的 `.env`（`WECHAT_APP_ID` / `WECHAT_APP_SECRET`）。**写完不要在对话里把 AppSecret 明文复述出来**；`.env` 已被 `.gitignore` 忽略，只留在本机。
   - DIY：用户也可自己把 `.env.example` 复制成 `.env` 填好，脚本会自动读取。
2. **填 IP 白名单**：运行 `curl -s https://api.ipify.org` 取本机公网 IP，直接把这串 IP 告诉用户，让他加进后台「IP 白名单」。（家庭宽带 IP 是动态的，变了要回去重填。）
3. **装依赖**：`cd scripts && npm install`；用自动生成封面再填 `OPENAI_API_KEY`。

不会操作的用户，指给详细图文教程 👉 https://sakuraoxo.feishu.cn/wiki/TuA7wvDjiiQZQVkGNp1cK6uynae

`.env` 缺失或报 `40164`/`48001` 时，按上面引导用户，**不要编造或猜测凭证**。

---

## 模式 A：组件化手写 HTML（默认）

### 流程

```
- [ ] Step 1: 读 references/components.md（组件库）和 references/article-template.html（骨架）
- [ ] Step 2: 复制 article-template.html 到文章目录，按内容设计、填充组件

Report a problem