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 张；用户说“直接做”或“你定”时使用推荐档位。
内容拆解
先读完整内容，再建立页面结构。不要边读边排。
提取以下信息：
- 目标读者：谁会因为这组图停下来。
- 核心承诺：看完能完成什么具体动作。
- 最小完整链路：准备 → 操作 → 结果 → 验收。
- 可直接复用的材料：提示词、表格字段、命令、清单、模板、判断标准。
- 必须删除的内容：重复铺垫、爹味教训、空泛鼓励、同义反复。
每组至少包含 3 种“可拿走的东西”，例如：
- 可复制提示词或话术
- 文件夹结构或字段表
- 操作步骤
- 示例输入与预期输出
- 验收清单
- 常见错误与修正方法
纯概念内容也要转成动作：概念是什么 → 在什么场景用 → 第一步怎么做 → 做完看什么结果。
页序
按内容选择结构，不机械套模板。详细模式见 references/page-patterns.md。
默认 8 张实操结构
- 封面：人群 + 结果 + 主题，不堆目录。
- 结果预览：读完能得到什么，建立继续滑动的理由。
- 准备：输入材料、工具、文件夹或前置条件。
- 规则：把任务口径、边界和字段写清。
- 执行：给可复制的提示词、命令或操作。
- 试跑：用小样验证，说明观察点。
- 输出：展示应得到的文件、字段或成品。
- 验收与复用：检查清单 + 下次如何重复使用。
页面密度
- 一页只讲一个主问题。
- 每页正文通常 70–150 个中文字符；表格、代码和字段列表按视觉占用判断。
- 封面信息最少；内页可比封面更密，但必须保留明显留白。
- 先删次要说明，再压缩间距；不要把正文缩成难读的小字。
- 相邻两页避免使用完全相同的卡片阵列，保持节奏变化。
设计系统
制作前读取：
references/xhs-html-guide.md：单 HTML 多页结构、字号、安全区和校验规则。references/page-patterns.md：教程、清单、方法论、故事的页序与页面组件。references/style-registry.md：62 种风格和赛道匹配。- 用户选中离线预设时读取
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；绝对定位只用于背景装饰、页码和底部规则。
- 全组共用
:roottoken。 - 首页可使用
.cover，内页使用.head、.cards、.steps、.code-card、.checklist等组件。 - 添加
@media print，打印时一页一张且去掉页面间距。 - 输出中不得残留占位符、TODO、示例账号或未替换字段。
工作流
- 获取用户内容；若给的是本地文件或链接，先完整读取。
- 判断内容类型、受众、核心承诺和实操材料。
- 若风格或页数未明确，提供“5+1 风格”和“6/7/8/9 张”选择并等待确认。
- 先写页级大纲：每页标题、唯一任务、关键材料；检查是否循序渐进。
- 使用同一 HTML 生成全部
.sheet。 - 运行：
bashpython3 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
- 检查每页尺寸、溢出、安全区、可读性、重复元素和整组节奏；发现问题后修改 HTML 再检查。
- 交付 HTML 的绝对路径链接，并说明页数、风格和内容结构。用户只要 HTML 时不要附加 PNG。
质量闸门
满足全部条件才交付：
- 页面数量与用户选择一致，且不少于 6。
- 每页都是 1080×1440。
- 所有
.sheet无内容溢出。 - 第 1 张缩略图能读懂主题，第 2 张没有复述封面。
- 中间页至少包含 3 类可操作材料。
- 最后一页给出验收、复用或总结，不写空泛关注口号。
- 账号名只在首页出现，除非用户另有要求。
- 标题、正文、字段、文件名和数字没有错字或前后冲突。
- HTML 自包含、可离线打开、可连续截图。
边界
- 用户只给主题、没有足够内容时，先补齐内容骨架或请求原文，不用空话凑够 6 页。
- 需要插画、实拍或复杂场景图时，另用图像生成能力制作本地素材，再嵌入 HTML；本 Skill 的核心仍是文字排版与组图结构。
- 医疗、法律、金融收益类内容不制作确定性承诺。
- 不使用他人 Logo、商标或未授权素材冒充官方视觉。
