# Xhs HTML

将用户提供的文章、笔记、教程、SOP、清单、网页内容或本地文档，拆解并排版成小红书 3:4 多页图文 HTML。默认生成一个包含 6 张以上 1080×1440...

- Repository: https://github.com/SpaceZephyr/creator-buddy (1778 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-08-26
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add SpaceZephyr/creator-buddy --skill xhs-html -g -a claude-code -y`
Codex: `npx skills add SpaceZephyr/creator-buddy --skill xhs-html -g -a codex -y`
Cursor: `npx skills add SpaceZephyr/creator-buddy --skill xhs-html -g -a cursor -y`
Gemini CLI: `npx skills add SpaceZephyr/creator-buddy --skill xhs-html -g -a gemini-cli -y`

## Description

将用户提供的文章、笔记、教程、SOP、清单、网页内容或本地文档，拆解并排版成小红书 3:4 多页图文 HTML。默认生成一个包含 6 张以上 1080×1440 页面、可逐页截图的完整自包含 HTML；支持 62 种品牌设计风格，开工前向用户提供匹配的风格候选和 6/7/8/9 张页数方案供选择。适用于“做小红书图文”“把内容转成小红书卡片”“生成多页小红书 HTML”“做 3:4 知识卡片”“根据文章排成小红书组图”“做教程图文”“做可截图 HTML”等请求。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# XHS HTML

把用户内容变成一组可发布的小红书图文，而不是只做一张封面。

默认交付一个完整、自包含的 HTML。HTML 内按顺序放置多张 `.sheet`，每张固定为 1080×1440（3:4），用户可在浏览器中逐页截图。

## 核心交付

- 1 个完整 HTML，不把各页拆成多个 HTML。
- 至少 6 张图；常规提供 6、7、8、9 张四档，复杂内容可由用户指定更多。
- 第 1 张负责点击；第 2 张负责留人；中间页负责兑现；最后 1 张负责总结、验收或收藏。
- 使用同一套设计 token 保持整组一致，但允许页面布局随内容变化。
- 账号名默认只出现在首页；内页不重复品牌名、章节名、英文口号等无效元素。
- 优先交付 HTML。除非用户要求，不额外导出 PNG。

## 开工前必须确认的两项

若用户已经明确风格和页数，直接执行。否则在同一条消息里让用户选择：

### 1. 风格

根据内容赛道，从 `references/style-registry.md` 的 62 种风格中推荐 5 种，再加 1 个“智能匹配”：

```text
推荐风格
1. Apple, 白底留白、克制高级，适合教程和知识型内容
2. Notion, 米白纸感、轻卡片，适合清单和方法论
3. Stripe, 蓝紫商业感，适合财务、商业和数据内容
4. Linear, 深色科技感，适合 AI、工具和效率内容
5. Claude, 暖调编辑感，适合经验分享和认知内容
6. 智能匹配, 我根据内容替你选，并说明理由
```

推荐必须与赛道匹配，不照抄示例。用户指定某个品牌时直接采用。用户选择“智能匹配”或说“你定”时，先告知选中的风格和理由，再制作。

### 2. 页数

同时给出页数建议：

```text
图文张数
A. 6 张, 精简版：结论少、步骤短
B. 7 张, 标准版：一个完整方法或清单
C. 8 张, 实操版：可加入样例、模板和验收
D. 9 张, 深入版：适合完整 SOP 或多步骤教程
```

结合原文给出一个推荐档位和一句理由。未经用户选择，不擅自把长内容硬塞进 6 张；用户说“直接做”或“你定”时使用推荐档位。

## 内容拆解

先读完整内容，再建立页面结构。不要边读边排。

提取以下信息：

1. 目标读者：谁会因为这组图停下来。
2. 核心承诺：看完能完成什么具体动作。
3. 最小完整链路：准备 → 操作 → 结果 → 验收。
4. 可直接复用的材料：提示词、表格字段、命令、清单、模板、判断标准。
5. 必须删除的内容：重复铺垫、爹味教训、空泛鼓励、同义反复。

每组至少包含 3 种“可拿走的东西”，例如：

- 可复制提示词或话术
- 文件夹结构或字段表
- 操作步骤
- 示例输入与预期输出
- 验收清单
- 常见错误与修正方法

纯概念内容也要转成动作：概念是什么 → 在什么场景用 → 第一步怎么做 → 做完看什么结果。

## 页序

按内容选择结构，不机械套模板。详细模式见 `references/page-patterns.md`。

### 默认 8 张实操结构

1. 封面：人群 + 结果 + 主题，不堆目录。
2. 结果预览：读完能得到什么，建立继续滑动的理由。
3. 准备：输入材料、工具、文件夹或前置条件。
4. 规则：把任务口径、边界和字段写清。
5. 执行：给可复制的提示词、命令或操作。
6. 试跑：用小样验证，说明观察点。
7. 输出：展示应得到的文件、字段或成品。
8. 验收与复用：检查清单 + 下次如何重复使用。

### 页面密度

- 一页只讲一个主问题。
- 每页正文通常 70, 150 个中文字符；表格、代码和字段列表按视觉占用判断。
- 封面信息最少；内页可比封面更密，但必须保留明显留白。
- 先删次要说明，再压缩间距；不要把正文缩成难读的小字。
- 相邻两页避免使用完全相同的卡片阵列，保持节奏变化。

## 设计系统

制作前读取：

1. `references/xhs-html-guide.md`：单 HTML 多页结构、字号、安全区和校验规则。
2. `references/page-patterns.md`：教程、清单、方法论、故事的页序与页面组件。
3. `references/style-registry.md`：62 种风格和赛道匹配。
4. 用户选中离线预设时读取 `references/style-presets.md`；其他风格按 registry 拉取规范。

风格只决定颜色、字体气质、圆角、线条和装饰母题，不改变内容逻辑。不得为了“像某品牌”牺牲中文可读性。

### 视觉底线

The rest: https://github.com/SpaceZephyr/creator-buddy/blob/HEAD/xhs-Skills/xhs-html/SKILL.md