Article Pipeline Skill

从 GitHub 仓库 → 公众号草稿箱的完整文章生产流程。

流程总览

1. 获取仓库信息（gh repo view / gh api readme）
2. 按写作规则写稿（references/writing-rules.md）
3. 跑 pipeline（banned check → HTML → 封面 → 预检 → dry-run）
4. 用户确认后发布

Step 1: 获取仓库信息

gh repo view <owner/repo> --json name,description,url,stargazerCount,primaryLanguage,licenseInfo,homepageUrl,createdAt,updatedAt
gh api repos/<owner/repo>/readme --jq '.content' | base64 -d

• README 太简短时，读 docs 下的核心文档（architecture.md、guide 等）
• marketplace 类仓库用 raw.githubusercontent.com 拉 JSON 文件

Step 2: 写稿

创建目录并写 Markdown：

mkdir -p content/<slug>/imgs

写作规则见 references/writing-rules.md。核心约束：

• 不提 stars、不提作者/赞助、不引用其他文章
• 禁用对比脚手架句式（完整清单见 references/banned-patterns.md）
• 安装方式只保留一条最简命令
• 每条特性讲完「是什么」要讲「带来什么效果」
• 结语收束，不预告下一篇

Step 3: 跑 pipeline

bash scripts/article-pipeline.sh \
  --input content/<slug>/<slug>.md \
  --theme ai-tech \
  --cover

Pipeline 五步：banned 检查 → ai-tech HTML → 紫色封面（无 badge）→ 预检 → dry-run。

banned 检查失败时按报告逐条修复，重跑直到通过。

Step 4: 预览与发布

open content/<slug>/<slug>.wechat-publisher.html
open content/<slug>/imgs/cover.png

用户确认后发布：

cd wechat-publisher && bun scripts/wechat-publish.ts \
  /绝对路径/content/<slug>/<slug>.wechat-publisher.html \
  --cover /绝对路径/content/<slug>/imgs/cover.png

可选：流程图配图

文章需要架构图时：

1. 手写 SVG（紫蓝配色，参考 Loop Engineering 流程图风格）
2. python3 wechat-publisher/scripts/render-svg-cover.py --svg x.svg --out x.png --size WxH
3. Markdown 里引用 PNG（公众号不支持 SVG）

可选：原始图片来源配图

需要引用来源文章/仓库的原始图表时（benchmark 图、对比表截图、产品图），按以下流程：

1. 提取来源图片 URL

# 博客类页面：抓页面里的图片链接，过滤 logo/头像
curl -sL --max-time 30 "<来源URL>" | \
  grep -oE '(https?:)?//[^"'"'"' ]+\.(png|jpg|jpeg|webp|gif)' | \
  grep -v -E 'logo|icon|favicon|avatar' | sort -u

• Next.js 站（Cursor 等）：正文图常走 /_next/image?url=... 代理，需要从 url= 参数里解码真实地址；og:image 也可作为兜底
• Sanity/Webflow/Framer 托管的图（Anthropic、LangChain、TypeSafe）：直接下载即可
• GitHub 仓库：README 里的图从 raw.githubusercontent.com 拿

2. 下载到文章 imgs 目录

curl -sL --max-time 30 -o content/<slug>/imgs/<name>.png "<图片URL>"

命名规则：chart-N.png（图表）、ts-N.png（来源缩写）、产品图用语义名（如 cursor-start.png）。

3. 检查尺寸挑图

python3 -c "
import struct
with open('imgs/x.png','rb') as f: data = f.read(24)
w, h = struct.unpack('>II', data[16:24])
print(w, h)
"

• 宽图（如 2000x800）通常是对比表/曲线，竖图常是多面板指标图
• 无法预览图片时，按宽高比推断内容并嵌在对应章节；让用户在浏览器预览确认，不对再换
• 400x400 的小图多为图标/头像，跳过

4. 深浅色变体选择

来源提供 dark/light 两个版本时（如 cost-per-dark.png / cost-per-light.png），选 light——公众号文章是浅色背景。

5. 嵌入并重新生成

# Markdown 中加
![](imgs/<name>.png)

# 重新生成 HTML（pipeline 或单独跑 formatter）
wechat-article-formatter/.venv/bin/python \
  wechat-article-formatter/scripts/markdown_to_html.py \
  --input content/<slug>/<slug>.md --theme ai-tech \
  --output content/<slug>/<slug>.wechat-publisher.html

注意事项

• 已发布的文章加图后需重新发布——公众号侧是新建草稿（旧草稿要手动删），腾讯社区侧同理
• 腾讯社区发布器会自动上传正文里的本地图片
• 引用的图保留在来源语境中使用（介绍该产品的文章），不裁切篡改

故障处理

References

• 写作规则
• 禁用句式清单