Xhs Article To Images logo

Xhs Article To Images

CommunityPopular
Pluviobyte
xhs-article-to-images

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

Overview

PublisherPluviobyte
Repositoryrnskill
Skill namexhs-article-to-images
Stars
1.6K
Forks
192
Bundled files
33
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 33 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by Pluviobyte on GitHub. Read the source before you install it.

Installation

Install the Xhs Article To Images AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/Pluviobyte/rnskill/tree/main/skills/xhs-article-to-images
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/Pluviobyte/rnskill.git /tmp/rnskill
mkdir -p .claude/skills
cp -r /tmp/rnskill/skills/xhs-article-to-images .claude/skills/xhs-article-to-images
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Xhs Article To Images in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Xhs Article To Images on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Xhs Article To Images is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

小红书长文转图片

把一篇 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
  • 全文模式下正文忠实于原文结构,只做断行和轻度润色;封面标题可写钩子。只有用户要「摘要版」时才大幅压缩
  • 不缩小字号塞内容,不让文字溢出或贴边
  • 不在图片里放使用说明、快捷键提示等与内容无关的文字

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Xhs Article To Images AI skill do?

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

Why use Xhs Article To Images on TypingMind?

Because you install it once and use it with any model. Xhs Article To Images is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Xhs Article To Images in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/Pluviobyte/rnskill/tree/main/skills/xhs-article-to-images. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Xhs Article To Images?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Xhs Article To Images?

As many as you like. As long as a model supports skills, you can use Xhs Article To Images with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Xhs Article To Images AI skill free?

It is published on GitHub by Pluviobyte. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇