Xhs Article To Images — Documentation skill for Claude Code

xhs-article-to-images

把 Markdown 长文转成小红书 3:4 图片组的 Agent skill。

它不是传统的全自动 Markdown parser。推荐用法是：让 Codex / Claude 这类 Agent 读文章、按规则拆页、填入 HTML 模板，再用内置 Playwright 渲染器逐张导出 PNG。

效果预览

能做什么

• 输出 1080 x 1440 PNG，适合小红书 3:4 图文。
• 内置五套设计皮肤：E 雅刊（默认）、A 暖杏奶咖、B 雾松青、C 黛墨描金、D 夜读鎏金。
• 外加女性向三主题：F 粉色王国（童话甜粉）、G 乙游夜境（暗黑浪漫）、H 吉卜力（治愈自然），共用一套 femcard 骨架、换类名即换主题。
• 支持封面、正文、图文混排、清单、金句、大字陈述、要点正文、三观对比、结尾等页型。
• 默认走全文重排版：正文为主，有图用图文，超容量拆页，不把长文硬压成 8 页摘要。
• 提供 xhs-init 初始化任务目录，xhs-render 渲染截图。

安装

git clone https://github.com/bozhouDev/xhs-article-to-images.git
cd xhs-article-to-images
npm install
npx playwright install chromium

作为 Codex / Claude skill 使用时，把仓库链接到你的 skills 目录：

ln -s "$(pwd)" ~/.codex/skills/xhs-article-to-images
# 或：
ln -s "$(pwd)" ~/.claude/skills/xhs-article-to-images

快速使用

初始化一篇文章的任务目录：

npm run init:task -- ./work/my-article

编辑 `./work/my-article/index.html`：保留需要的卡片，填入文章内容，把图片放进 `./work/my-article/assets/`。

渲染 PNG：

npm run render -- ./work/my-article

输出文件会在：

./work/my-article/output/

需要 2 倍清晰度：

npm run render -- ./work/my-article --scale 2

预览图重渲

npm run render:preview

这会重新生成 `preview/output/*.pn