Agent skill

Xhs Article To Images

by Pluviobyte in Pluviobyte/rnskill

把 Markdown 长文转成小红书 3:4(1080×1440)图片组的 Agent skill。内置五套设计皮肤(E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金)+ 女性向三主题(F 粉色王国 / G 乙游夜境 / H 吉卜力)× 多种页型;Agent 负责读文章、拆页和填 HTML,Playwright 渲染器负责逐张截图导出…

MITAuto-check passedTesting & QA

Install Xhs Article To Images

skills CLI
$ npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Pluviobyte/rnskill xhs-article-to-images --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Pluviobyte/rnskill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/xhs-article-to-images .claude/skills/xhs-article-to-images && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
xhs-article-to-images
GitHub stars
1.6k
Token cost
~985 tokens
SKILL.md length
215 words
Files
40 (incl. scripts, references, assets)
Skills in repo
45
Repo updated
First seen
Licence
MIT

At a glance

把 Markdown 长文转成小红书 3:4(1080×1440)图片组的 Agent skill。内置五套设计皮肤(E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金)+ 女性向三主题(F 粉色王国 / G 乙游夜境 / H 吉卜力)× 多种页型;Agent 负责读文章、拆页和填 HTML,Playwright 渲染器负责逐张截图导出…

  • Works in 6 steps: 输入确认 → 读文章 + 拆页规划 → 建任务文件夹 + 排版 → …
  • Tasks that involve Browser testing
  • SKILL.md covers 设计系统一览, 工作流 and 禁忌
  • Calls npx and node

What it does

Xhs Article To Images is an agent skill from Pluviobyte/rnskill. 把 Markdown 长文转成小红书 3:4(1080×1440)图片组的 Agent skill。内置五套设计皮肤(E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金)+ 女性向三主题(F 粉色王国 / G 乙游夜境 / H 吉卜力)× 多种页型;Agent 负责读文章、拆页和填 HTML,Playwright 渲染器负责逐张截图导出 PNG。当用户说"长文转图片"、"小红书长图"、"把这篇文章做成小红书图文/图片/卡片"、"文章转图片"、"用我的设计稿排版"、"转成 3:4 图组"、想要"女性向/少女风/粉色/乙游风/吉卜力风"排版时使用;用户给了一篇文章并提到发小红书时也应使用。

Its SKILL.md is about 990 tokens, which your agent loads only when the skill is triggered. The skill folder holds 43 other files, including scripts, reference files and assets (for example `README.md`, `package-lock.json` and `package.json`).

It sits in Testing & QA, covering Browser testing. It works with Xiaohongshu and Playwright. The repository describes itself as: 雪踏乌云的 AI Agent Skills 集合. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser testing

Example prompts

  • “把这篇文章做成小红书图文/图片/卡片”
  • “用我的设计稿排版”
  • “转成 3:4 图组”
  • “/xhs-article-to-images”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. 输入确认
  2. 读文章 + 拆页规划
  3. 建任务文件夹 + 排版
  4. 配图处理
  5. 渲染截图
  6. 自检 + 交付

What it can do on your machine

Read from SKILL.md and the folder at commit 83d1783. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Xhs Article To Images loads about 985 tokens when it runs, and up to ~3.9k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 215 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~985
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Pluviobyte/rnskill at commit 83d1783, republished under its MIT licence (© Pluviobyte). 215 words, ~985 tokens.

Download SKILL.mdSave it as .claude/skills/xhs-article-to-images/SKILL.md (or your agent's skills folder). This skill also uses 39 other files; get the full folder from GitHub.
name
xhs-article-to-images
description
把 Markdown 长文转成小红书 3:4(1080×1440)图片组的 Agent skill。内置五套设计皮肤(E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金)+ 女性向三主题(F 粉色王国 / G 乙游夜境 / H 吉卜力)× 多种页型;Agent 负责读文章、拆页和填 HTML,Playwright 渲染器负责逐张截图导出 PNG。当用户说"长文转图片"、"小红书长图"、"把这篇文章做成小红书图文/图片/卡片"、"文章转图片"、"用我的设计稿排版"、"转成 3:4 图组"、想要"女性向/少女风/粉色/乙游风/吉卜力风"排版时使用;用户给了一篇文章并提到发小红书时也应使用。

小红书长文转图片

把一篇 Markdown 文章(含图片)转成一组小红书 3:4 卡片图。流水线:读文章 → 选皮肤 → 拆页排版成 HTML → Playwright 截图 → 交付 PNG。

默认目标:全文重排版——把文章完整转成好看的图文卡片,不是 8 页精华摘要。主力页型是正文;段落有图就用图文;页型按需选用,不为凑花样硬塞金句/对比/清单页。

这个 skill 使用固定的五套皮肤 + 女性向三主题模板,不重新设计版式,目标是稳定复刻设计稿的样子。用户提到"皮肤/设计稿"或想要暖杏、雾松、黛墨、夜读、雅刊、粉色、乙游、吉卜力这类风格时用本 skill。

设计系统一览

  • 卡片基准 1080 × 1440(3:4),皮肤与页型全部由 assets/styles.css(A/B/C 三套皮肤)、assets/styles-d.css(D 独立体系)、assets/styles-e.css(E 独立体系)、assets/styles-fem.css(女性向三主题独立体系)定义
  • 五套设计皮肤:E 雅刊(默认)(暖白纸 + Newsreader 高对比衬线,作品集编辑感,封面需一张配图)/ A 暖杏奶咖(暖调爆款)/ B 雾松青(清爽治愈,封面需 16:9 配图)/ C 黛墨描金(编辑感)/ D 夜读鎏金(深墨鎏金,惊艳向)
  • 女性向三主题(femcard 体系,共用一套骨架,换主题改 t-pink/t-otome/t-ghibli 类名 + 同步替换卡内 .fem-deco 装饰块):F 粉色王国(童话甜粉,彩虹+城堡+云朵手绘装饰,圆体标题)/ G 乙游夜境(暗黑浪漫深色,银紫光边框+罗马环+月+蝴蝶,高对比衬线)/ H 吉卜力(治愈自然,太阳+胖云+飞鸟+山丘,清新衬线)。女性向主题自带封面横幅图槽与 16:9 图文图槽
  • 基础页型:封面、正文、清单、图文混排(16:9 图槽)、结尾号召;E 与女性向三主题另有可选页型:大字陈述(statement)、要点正文(points / idea)、三观对比(views)——只在内容天然适合时用,不是每篇必用
  • A/B/C 共用一套 HTML 骨架,换肤只改 skin-a/b/c 类名;D 用 dcard、E 用 ecard、女性向三主题用 femcard 独立类名体系,四套体系绝不混排
  • 完整 HTML 骨架在 assets/template.html,所有页型都有现成可拷的示例块

工作流

1. 输入确认

需要:文章路径(Markdown)。可选:皮肤指定、品牌区文案、页数偏好。信息够就直接开工,不要追问。

2. 读文章 + 拆页规划

读 references/content-mapping.md(皮肤选择标准、页型容量上限、文案改写要求都在里面),然后产出内部页计划。用户不指定皮肤时默认用 E 雅刊,只有用户点名其他皮肤、或明确让你自由挑选时才换:

text
皮肤:E 雅刊(默认)
P1  cover    钩子标题 + 导语
P2  body     §1 为什么选 Obsidian(第 1 页)
P3  body     §1 续(装不下就拆页)
P4  media    下载安装截图
P5  body     新建仓库 + git clone
P6  media    GitHub 创建仓库截图
...
Pn  body     最后一节
Pn+1 ending  (可选)CTA

按文章 H2/H3 顺序拆页;正文为主,有图用图文;超容量拆页,不删内容。页数通常 10–18(小红书上限 18)。用户说「摘要版 / N 页以内」才做压缩。开工前用一两句话说明皮肤和预计页数即可。

3. 建任务文件夹 + 排版

在当前项目中为每篇文章建立一个任务文件夹,推荐命名为 imgs-{标题}/:

imgs-Agent记忆/
├── index.html      ← 从 template.html 拷贝骨架后填内容
├── styles.css      ← 从 skill assets/ 拷贝
├── styles-d.css    ← 从 skill assets/ 拷贝
├── styles-e.css    ← 从 skill assets/ 拷贝
├── styles-fem.css  ← 从 skill assets/ 拷贝(女性向三主题)
├── assets/         ← 文章配图、封面图;并拷入 assets/avatar.png(品牌头像)
└── output/         ← 渲染产物 PNG(最终交付物)

HTML/CSS 是工程中间产物:发布后只需保留 output/ 里的 PNG,index.html、两个 CSS 和 assets 可以删掉(用户说"发布了/清理一下"时再删,不要主动删)。

排版要点:

  • 把四个 CSS(styles.css、styles-d.css、styles-e.css、styles-fem.css)和 template.html 拷进任务文件夹,把 template 改名 index.html,删掉用不到的示例卡,留下的卡按页计划填入真实内容
  • 每张卡的 id 按顺序命名:xhs-01、xhs-02…(渲染脚本按 id 命名 PNG)
  • 严格遵守 content-mapping.md 的每页容量上限,超了就拆页,禁止删内容凑页,不许缩字号
  • 文章里的图片拷贝/下载到任务 assets/,HTML 用相对路径引用
4. 配图处理
  • 文章自带图优先,放进图文混排页
  • 皮肤 E 的封面底部需要一张横幅配图(约 2.6:1 宽条裁切)、皮肤 B 的封面需要一张 16:9 横图:文章没有合适的就按 content-mapping.md 第五节的三选一流程(用户上传 / 网图 / AI 生成)处理一次
  • 如需 AI 生成配图,生成图只作为排版中间产物,存任务 assets/ 即可
5. 渲染截图
bash
npx xhs-render <任务目录>

# 或在本仓库根目录执行:
node scripts/render.cjs <任务目录>

脚本会打开 index.html,等字体就绪后把所有 .card / .dcard / .ecard / .femcard 节点按 id 逐张导出到 output/,并打印每张实际尺寸(应为 1080×1440)。需要 2 倍清晰度加 --scale 2。

6. 自检 + 交付

渲染完先自己用 Read 工具看一遍每张 PNG,检查:

  • 文字是否溢出卡片、压到品牌区或贴边
  • 配图裁切是否裁掉了人脸 / 关键信息(需要时给 <img> 加 object-position 调整再渲)
  • 每页下半部分是否大面积空白(正文页应填满;图文页空白可能来自大图,但不应是因为删光了字)
  • 页码、总页数是否对得上

有问题改 HTML 重渲,没问题再交付。交付时给出:任务文件夹路径、每张图的绝对路径、皮肤和页数说明、网图来源(如有)。

如项目有自己的内容管理约定,可以把任务目录路径、输出 PNG 路径和发布文案记录回对应笔记或 issue。

禁忌

  • 不混皮肤:一组图只用一套皮肤;A/B/C 的 card、D 的 dcard、E 的 ecard、女性向三主题的 femcard 四套类名体系不互换;女性向三主题之间也只能选一个(t-pink / t-otome / t-ghibli)
  • 不发明新版式、新配色:只用四份 CSS 里已有的类,需要微调也只在任务文件夹的 index.html 里加内联样式,不改 skill assets 里的 CSS
  • 全文模式下正文忠实于原文结构,只做断行和轻度润色;封面标题可写钩子。只有用户要「摘要版」时才大幅压缩
  • 不缩小字号塞内容,不让文字溢出或贴边
  • 不在图片里放使用说明、快捷键提示等与内容无关的文字

© Pluviobyte, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 39 other files (scripts, references, assets) in skills/xhs-article-to-images of Pluviobyte/rnskill.

  • SKILL.md
  • .gitignore
  • LICENSE
  • README.md
  • assets/avatar.png
  • assets/cover-hero.jpg
  • assets/media-1.jpg
  • assets/social/douyin.jpg
  • assets/social/xiaohongshu.jpg
  • assets/styles-d.css
  • assets/styles-e.css
  • assets/styles-fem.css
  • assets/styles.css
  • assets/template.html
  • package-lock.json
  • package.json
  • preview/assets/avatar.png
  • … and 23 more

Open the folder on GitHubat commit 83d1783

Compare with similar skills

Xhs Article To Images next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Xhs Article To Images compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Xhs Article To Images this skillPluviobyte/rnskill1.6k—~985Automated safety check: PassMIT
Xhs Auto PublisherDjangoPeng/agentic-ai152—~570Automated safety check: PassMIT
Xiaohongshu WriterEXboys/skilllite170—~737Automated safety check: PassMIT
Xhs Video Linksdragon-hh/ai-boshu-crawler106—~653Automated safety check: PassNone
Skill Xhs Comment ReplyZJU-REAL/Easel3.4k—~865Automated safety check: PassApache-2.0
Skill Xhs PublisherZJU-REAL/Easel3.4k—~726Automated safety check: PassApache-2.0

Similar skills

  • Xhs Auto Publisher

    DjangoPeng/agentic-ai

    面向云服务器的小红书图文自动发布 Skill。适用于需要在 Linux 云服务器上,通过 Playwright/CDP、二维码人工接管、登录缓存、龙虾代发飞书群图片消息、截图留痕与审计日志来完成小红书草稿或发布流程的场景。

    152 GitHub stars~570 tokensUpdated 3 mo ago
    Testing & QAAuto-check passed
  • Xiaohongshu Writer

    EXboys/skilllite

    小红书图文内容创作助手。必须传入 content(含 title、body、hashtags、thumbnail),建议 generatethumbnail=true。优先 Playwright HTML 截图生成封面,失败时回退 Pillow。

    170 GitHub stars~737 tokensUpdated 16 days ago
    Testing & QAAuto-check passed
  • Xhs Video Links

    dragon-hh/ai-boshu-crawler

    Extract Xiaohongshu user profile video/note links from a provided profile URL.

    106 GitHub stars~653 tokensUpdated 2 mo ago
    Testing & QAAuto-check passed
  • 小红书评论互动运营:列出我的笔记、抓取某条笔记下的评论、按画像语气逐条回复、以及删除评论 (含自己发的回复)。基于 Playwright + 持久化登录态,headless 即可运行,与 skill-xhs-publisher 共用同一登录态。评论抓取走接口响应拦截(稳);回复/删除走 DOM 文本定位(无坐标)+ 逐字符输入反检测; 带已回复去重、逐条间隔防风控、dry-run 预演。用…

    3.4k GitHub stars~865 tokensUpdated 2 days ago
    Testing & QAAuto-check passed
  • Skill Xhs Publisher

    ZJU-REAL/Easel

    将图文/视频内容发布到小红书(XHS)。基于 Playwright + 持久化登录态,headless 即可运行, 流程与选择器移植自成熟开源实现 xiaohongshu-mcp(含发布成功校验、上传完成等待、话题联想绑定、 新旧发布按钮兼容、反检测)。适用场景:发布图文笔记、发布视频、扫码登录、发布前预检。

    3.4k GitHub stars~726 tokensUpdated 2 days ago
    Testing & QAAuto-check passed
  • Web Application Testing

    anthropics/skills

    Official

    Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.

    180k GitHub starsUsed in 51 repos~966 tokens
    Testing & QAAuto-check passed

More from Pluviobyte/rnskill

All 45 skills in this repo
  • Motion Replica Builder

    Pluviobyte/rnskill

    Analyzes a reference video's layout, motion and timing over a chosen time range, then builds an original animated replica with new copy and assets plus a final video QC.

    1.6k GitHub stars~1.7k tokensUpdated 20 days ago
    Auto-check passed
  • Niulai Style Image Transfer

    Pluviobyte/rnskill

    Restyles photos, film stills or new scene descriptions in the rough low-budget 3D look observed in the 2026 animated film Niulai, with an iterative scoring loop.

    1.6k GitHub stars~1.3k tokensUpdated 20 days ago
    Auto-check passed
  • Skill Captions

    Pluviobyte/rnskill

    Renders, previews, validates and burns in production subtitles from QC-passed caption timing, with fixed dark or light caption styles scaled to the video size.

    1.6k GitHub stars~1.3k tokensUpdated 20 days ago
    Auto-check passed
  • Creates Chinese social-media video covers in 3:4 and 4:3 from registered styles and shared presenter assets, or swaps the person in a reference cover for a digital-human frame.

    1.6k GitHub stars~1.2k tokensUpdated 20 days ago
    Auto-check passed
  • Generates a HeyGen digital-human video layer using a fixed avatar profile, local narration and an approved circular avatar placement.

    1.6k GitHub stars~2.4k tokensUpdated 20 days ago
    Auto-check passed
  • Generates SRT, VTT and caption JSON for final narration audio or a merged video using Volcengine Doubao ASR word timestamps, with a quality gate before delivery.

    1.6k GitHub stars~1.1k tokensUpdated 20 days ago
    Auto-check: notes

Categories

Questions about Xhs Article To Images

What does Xhs Article To Images do?

把 Markdown 长文转成小红书 3:4(1080×1440)图片组的 Agent skill。内置五套设计皮肤(E 雅刊·默认 / A 暖杏奶咖 / B 雾松青 / C 黛墨描金 / D 夜读鎏金)+ 女性向三主题(F 粉色王国 / G 乙游夜境 / H 吉卜力)× 多种页型;Agent 负责读文章、拆页和填 HTML,Playwright 渲染器负责逐张截图导出…. Xhs Article To Images is an agent skill from Pluviobyte/rnskill.

When should I use Xhs Article To Images?

Xhs Article To Images fits situations like: tasks that involve Browser testing.

How do I install Xhs Article To Images in Claude Code?

Run `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -a claude-code`. Or copy the skill folder (skills/xhs-article-to-images in Pluviobyte/rnskill) into .claude/skills/xhs-article-to-images in your project. Claude Code loads it when a task matches its description.

How do I install Xhs Article To Images in Codex?

Run `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -a codex`. Or copy the skill folder (skills/xhs-article-to-images in Pluviobyte/rnskill) into .agents/skills/xhs-article-to-images in your project. Codex loads it when a task matches its description.

Can I use Xhs Article To Images in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Pluviobyte/rnskill --skill xhs-article-to-images -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/xhs-article-to-images, .gemini/skills/xhs-article-to-images, .github/skills/xhs-article-to-images and .opencode/skills/xhs-article-to-images in your project.

What does Xhs Article To Images need to run?

Going by SKILL.md and its folder, Xhs Article To Images needs the command-line tools its instructions call (npx and node). Our summary lists: Node.js.

Does Xhs Article To Images access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Xhs Article To Images safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Xhs Article To Images use?

Xhs Article To Images is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Xhs Article To Images use?

About 985 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.9k tokens, read only when the agent opens those files.

What are the alternatives to Xhs Article To Images?

Skills that share tags, products or a category with Xhs Article To Images: Xhs Auto Publisher (DjangoPeng/agentic-ai, 152 stars), Xiaohongshu Writer (EXboys/skilllite, 170 stars), Xhs Video Links (dragon-hh/ai-boshu-crawler, 106 stars) and Skill Xhs Comment Reply (ZJU-REAL/Easel, 3.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Xhs Article To Images?

Pluviobyte (a GitHub user) maintains it in Pluviobyte/rnskill, which has 1,639 GitHub stars. The repository holds 45 skills in this directory. The repository was last updated on September 21, 2026.

Source: Pluviobyte/rnskill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.