# Xhs HTML

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

- Skill: `spacezephyr/xhs-html` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add spacezephyr/xhs-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/spacezephyr/xhs-html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: spacezephyr (https://skillmd.com/u/spacezephyr)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/spacezephyr/xhs-html

---


# 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 拉取规范。

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

### 视觉底线

- 画布：1080×1440，比例 3:4。
- 首图标题：88–128px；内页标题：60–76px。
- 正文：36–44px；辅助信息不低于 30px。
- 左右安全边距建议 80–96px，上下保留足够截图安全区。
- 白底风格使用深色正文；深色风格使用高对比浅色正文。
- 一页强调色不超过 1 个，装饰母题不超过 1 类。
- 不依赖外链字体、外链 CSS 或在线图片；离线打开必须保持版式。
- 不在每页重复账号名、栏目名、英文口号和同义页标题。

## HTML 工程约束

以 `assets/xhs-template.html` 为骨架：

- `body` 只负责把所有页面纵向排列并留出预览间距。
- 每页使用 `<section class="sheet">`，固定 `width:1080px;height:1440px;overflow:hidden`。
- 页面内部使用正常文档流、Grid 或 Flex；绝对定位只用于背景装饰、页码和底部规则。
- 全组共用 `:root` token。
- 首页可使用 `.cover`，内页使用 `.head`、`.cards`、`.steps`、`.code-card`、`.checklist` 等组件。
- 添加 `@media print`，打印时一页一张且去掉页面间距。
- 输出中不得残留占位符、TODO、示例账号或未替换字段。

## 工作流

1. 获取用户内容；若给的是本地文件或链接，先完整读取。
2. 判断内容类型、受众、核心承诺和实操材料。
3. 若风格或页数未明确，提供“5+1 风格”和“6/7/8/9 张”选择并等待确认。
4. 先写页级大纲：每页标题、唯一任务、关键材料；检查是否循序渐进。
5. 使用同一 HTML 生成全部 `.sheet`。
6. 运行：

```bash
python3 scripts/check_contrast.py --tokens path/to/index.html
node scripts/render_xhs.mjs --html path/to/index.html --out-dir /tmp/xhs-check --strict
```

7. 检查每页尺寸、溢出、安全区、可读性、重复元素和整组节奏；发现问题后修改 HTML 再检查。
8. 交付 HTML 的绝对路径链接，并说明页数、风格和内容结构。用户只要 HTML 时不要附加 PNG。

## 质量闸门

满足全部条件才交付：

- 页面数量与用户选择一致，且不少于 6。
- 每页都是 1080×1440。
- 所有 `.sheet` 无内容溢出。
- 第 1 张缩略图能读懂主题，第 2 张没有复述封面。
- 中间页至少包含 3 类可操作材料。
- 最后一页给出验收、复用或总结，不写空泛关注口号。
- 账号名只在首页出现，除非用户另有要求。
- 标题、正文、字段、文件名和数字没有错字或前后冲突。
- HTML 自包含、可离线打开、可连续截图。

## 边界

- 用户只给主题、没有足够内容时，先补齐内容骨架或请求原文，不用空话凑够 6 页。
- 需要插画、实拍或复杂场景图时，另用图像生成能力制作本地素材，再嵌入 HTML；本 Skill 的核心仍是文字排版与组图结构。
- 医疗、法律、金融收益类内容不制作确定性承诺。
- 不使用他人 Logo、商标或未授权素材冒充官方视觉。