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 个“智能匹配”：

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

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

2. 页数

同时给出页数建议：

图文张数
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. 运行：

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、商标或未授权素材冒充官方视觉。