xhs-render

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

xhs-render — 小红书文案转图 + 配套文案

xhs-render — Xiaohongshu Copy to Image + Supporting Copy

用户提供需渲染的文案所在目录（或指定文档），Skill 完成：选模板 → 定位文档 → 创建工作目录 → LLM 设计 blocks.json 与 xhs-copy → 渲染成图并写入配套文案。

Users provide the directory (or specified document) where the copy to be rendered is located. The Skill will complete the following steps: Select Template → Locate Document → Create Working Directory → LLM Designs blocks.json and xhs-copy → Render to Images and Write Supporting Copy.

流程

Workflow

选模板（先与用户交互）：列出可选模板，询问用户选择，待用户确认后再继续。
- 可选：ing-minimal、ing-notion、ing-skillshare（Ing 品牌）；minimal、notion、skillshare（share 品牌）
- 示例：「可选模板：ing-minimal（Ing 品牌简约，推荐）、ing-notion（Ing 井字格知识风）、ing-skillshare（Ing 技能分享风）；minimal、notion、skillshare 为 share 品牌同款。请问用哪个？」→ 用户回复后记下，后续用
```
-t <所选>
```
定位文档：
- 用户指定文案目录（如
```
Agent-skills-share/daily-posts/YYYY-MM-DD-<skill-name>
```
  ）或具体文件
- 优先顺序：用户指定哪个就读哪个；未指定则默认
```
final.md
```
- 用户说「渲染 draft」→ 读
```
draft.md
```
  ；说「渲染 final」或未指定 → 读
```
final.md
```
  ；指定其他（如
```
my-copy.md
```
  ）→ 读该文档

创建工作目录：

python .cursor/skills/xhs-render/scripts/get_output_dir.py <文案目录> --source <source>

source：用户指定 draft 时用
```
draft
```
，指定其他自定义文档时用
```
custom
```
，否则
```
final
```

输出目录：

<文案目录>/xhs-render/from-{source}-v{N}/

（如

from-final-v1

、

from-draft-v1

）

LLM 设计 blocks.json 与 xhs-copy（一次产出）：
- 读取定位到的文档
- 角色：你是小红书配图设计专家，擅长把长文案重排成「有节奏、有冲击力」的视觉结构。严禁照抄原文——必须按屏上可读性重新提炼、缩写、造句。
- 任务：从文档中提炼核心信息，设计一套配图（blocks.json）及配套发帖文案（xhs-copy）
- blocks.json 刚性约束：
  - Cover：text 不得超过 2 行（约 20 字），只放金句或主卖点；必须体现安利的 skill 名称（如 find-skills），可在 title 或 text 中融入
  - 每块 text：建议 150–200 字，每页可含多条要点；多条要点之间必须用双换行（
```
\n\n
```
    ）分隔，否则会挤成一段、圆点无法分条；用短句、换行、关键词前置，让版面充实
  - 碎碎念块：若有 Agent 碎碎念、评价类内容，字数可适当增多（60–100 字），表达更饱满
  - ending 块：放致谢开发者，格式：
```
宝藏开发者：owner/repo
```
    +
```
传送门：https://skills.sh/...
```
    ，可加碎碎念；不放安装命令；安装命令写在 xhs-copy 文案中
  - 禁止：将文档的【】小节 1:1 映射为 block；在 title 里直接复制小节名（可创新改写）；在图片里放安装命令
  - 分几张图、每块 title/text/emoji 由你专业判断；页数可多可少，设计好、必要内容都有即可。避免同一张图内 title 与 emoji 重复。纯 hashtag 不生成图片
- xhs-copy：与配图配套的发帖文案，XHS-ready 纯文本——无
```
##
```
  、
```
**
```
  、
```
`
```
  ，可直接复制到小红书。链接用
```
[文字](url)
```
  。必须包含安装命令（npx skills add ...）。不含 hashtag（用户发布时自选）
- 输出：写入
```
<输出目录>/blocks.json
```
  与
```
<输出目录>/xhs-copy.md
```

渲染：

python .cursor/skills/xhs-render/scripts/render_images.py <输出目录>/blocks.json -t <用户所选模板> -o <输出目录>

Select Template (Interact with User First): List available templates and ask the user to select one. Proceed only after user confirmation.
- Available templates: ing-minimal, ing-notion, ing-skillshare (Ing brand); minimal, notion, skillshare (share brand)
- Example prompt: "Available templates: ing-minimal (Ing brand minimalist, recommended), ing-notion (Ing grid-style knowledge vibe), ing-skillshare (Ing skill sharing style); minimal, notion, skillshare are the same styles under the share brand. Which one would you like to use?" → Record the user's reply and use
```
-t <selected-template>
```
  in subsequent steps.
Locate Document:
- User specifies the copy directory (e.g.,
```
Agent-skills-share/daily-posts/YYYY-MM-DD-<skill-name>
```
  ) or a specific file
- Priority Order: Read the one specified by the user; default to
```
final.md
```
  if not specified
- If user says "render draft" → read
```
draft.md
```
  ; if user says "render final" or no specification → read
```
final.md
```
  ; if other file is specified (e.g.,
```
my-copy.md
```
  ) → read that document

Create Working Directory:

python .cursor/skills/xhs-render/scripts/get_output_dir.py <copy-directory> --source <source>

source: Use
```
draft
```
if user specifies draft,
```
custom
```
if user specifies other custom documents, otherwise
```
final
```

Output directory:

<copy-directory>/xhs-render/from-{source}-v{N}/

(e.g.,

from-final-v1

from-draft-v1

)

LLM Designs blocks.json and xhs-copy (Produce in One Go):
- Read the located document
- Role: You are a Xiaohongshu image layout expert, skilled in rearranging long copy into a visual structure that is "rhythmic and impactful". Strictly avoid copying the original text verbatim — you must re-refine, abbreviate, and rephrase based on on-screen readability.
- Task: Extract core information from the document, design a set of image layouts (blocks.json) and supporting post copy (xhs-copy)
- Rigid Constraints for blocks.json:
  - Cover: Text must not exceed 2 lines (approximately 20 characters), only include golden sentences or key selling points; must include the name of the Skill being promoted (e.g., find-skills), which can be integrated into the title or text
  - Text per block: Recommended 150–200 characters; multiple key points per page must be separated by double line breaks (
    \\n\\n
    ), otherwise they will be squeezed into one paragraph and bullet points cannot be distinguished; use short sentences, line breaks, and front-load keywords to make the layout substantial
  - Chatty block: If there are Agent chatty remarks or review content, the word count can be appropriately increased (60–100 characters) for more expressive content
  - Ending block: Include thanks to the developer, formatted as:
```
Treasure Developer: owner/repo
```
    +
```
Portal: https://skills.sh/...
```
    , can add chatty remarks; do not include installation commands; installation commands should be written in the xhs-copy
  - Prohibited: 1:1 mapping of the document's 【】sections to blocks; directly copying section names into titles (rewrite creatively instead); placing installation commands in images
  - The number of images, title/text/emoji for each block are determined by your professional judgment; the number of pages can be more or less as long as the design is good and all necessary content is included. Avoid repeating titles and emojis within the same image. Do not generate images for pure hashtags
- xhs-copy: Supporting post copy matched with the images, XHS-ready plain text — no
```
##
```
  ,
```
**
```
  ,
```
`
```
  ; can be directly copied to Xiaohongshu. Use
```
[text](url)
```
  for links. Must include the installation command (npx skills add ...). No hashtags (users can select them when publishing)
- Output: Write to
```
<output-directory>/blocks.json
```
  and
```
<output-directory>/xhs-copy.md
```

Render:

python .cursor/skills/xhs-render/scripts/render_images.py <output-directory>/blocks.json -t <user-selected-template> -o <output-directory>

blocks.json Schema

json

[
  {"index": 1, "total": N, "text": "...", "title": "...", "role": "cover", "emoji": "✨"},
  {"index": i, "total": N, "text": "...", "title": "", "role": "content", "emoji": ""},
  {"index": N, "total": N, "text": "...", "title": "", "role": "ending", "emoji": "📌"}
]

role: cover（仅第 1 块）| content | ending（若仅为 hashtag 则跳过渲染）
title、emoji：均可为空，由你判断
脚本按 blocks.json 渲染，纯标签页自动跳过

设计约束（LLM 设计时需遵守）：Cover text ≤ 2 行且须体现 skill 名；多要点用

\n\n

分隔；ending 放致谢开发者、不放安装命令；页数可多可少

json

[
  {"index": 1, "total": N, "text": "...", "title": "...", "role": "cover", "emoji": "✨"},
  {"index": i, "total": N, "text": "...", "title": "", "role": "content", "emoji": ""},
  {"index": N, "total": N, "text": "...", "title": "", "role": "ending", "emoji": "📌"}
]

role: cover (only for the first block) | content | ending (skip rendering if it's only hashtags)
title、emoji: Can be empty, determined by your judgment
The script renders according to blocks.json, and pure hashtag pages are automatically skipped

Design Constraints (Must be followed when designing with LLM): Cover text ≤ 2 lines and must include the Skill name; multiple key points separated by

\\n\\n

; ending block includes thanks to developer, no installation commands; number of pages can be flexible

xhs-copy 规范

xhs-copy Specifications

纯文本格式，存为
```
xhs-copy.md
```
，内容无 markdown 语法
与配图内容一致，可直接复制到小红书作为发帖正文
不含 hashtag（用户发布时自选）

Plain text format, saved as
```
xhs-copy.md
```
, no markdown syntax in content
Consistent with the image content, can be directly copied to Xiaohongshu as the post body
No hashtags (users can select them when publishing)

依赖

Dependencies

```
html2image
```
（
```
pip install html2image
```
）
Chrome 或 Edge 浏览器

```
html2image
```
(install via
```
pip install html2image
```
)
Chrome or Edge browser

模板

Templates

名称	说明
ing-minimal	Ing 品牌简约，页眉「线—Ing—线」，支持 LaTeX 数学公式（推荐）
ing-notion	Ing 井字格背景，知识卡片风，内容直接显示在网格上
ing-skillshare	Ing 技能分享风，点阵背景、< skills share 标签、Ing 水印、带圆点排版
minimal	share 品牌，与 ing-minimal 同款，水印为 share
notion	share 品牌，与 ing-notion 同款，水印为 share
skillshare	share 品牌，与 ing-skillshare 同款，水印为 share

纯标签页自动跳过，无页码。

Name	Description
ing-minimal	Ing brand minimalist style, header with "Line—Ing—Line", supports LaTeX mathematical formulas (recommended)
ing-notion	Ing grid background, knowledge card style, content displayed directly on the grid
ing-skillshare	Ing skill sharing style, dot matrix background, < skills share tag, Ing watermark, dot-based layout
minimal	Share brand, same style as ing-minimal, watermark is "share"
notion	Share brand, same style as ing-notion, watermark is "share"
skillshare	Share brand, same style as ing-skillshare, watermark is "share"

Pure hashtag pages are automatically skipped, no page numbers.

异常与处理

Exceptions and Handling

渲染失败时根据错误信息处理：缺 Python → 提示安装；缺 html2image → 询问用户是否安装，同意后

pip install html2image

再重试；pip 安装失败 → 提示可能版本冲突；其他 → 根据报错说明。不做预检查。

脚本、模板、参考文档均在本目录内。

When rendering fails, handle according to error messages: Missing Python → Prompt installation; Missing html2image → Ask user if they want to install, if agreed, run

pip install html2image

and retry; Pip installation failure → Prompt possible version conflict; Other errors → Explain based on the error message. No pre-checks are performed.

Scripts, templates, and reference documents are all located in this directory.