单文件数据故事长页（story-page-builder）
把「一个事件 / 一个人 / 一个梗」拆成机制的长文网页，全部内容装进一个 .html 文件：
零外链、双击可开、断网可读、可直接分享。设计系统与动效方案从实际交付样本
（isa，62KB→清洗后 46KB，14 个章节）实测提取，溯源见 references/。
何时用 / 何时不用
- 用：热点机制拆解、人物观察、梗的来龙去脉、课程作业里的"网页制作"、需要单文件交付的叙事长文。
- 不用：多页站点、要后端的数据看板、以图为主的相册页。
设计系统（关键值，完整表见 references/01-design-tokens.md）
| 项 | 值 |
|---|---|
| 底色 / 卡片 | #fbf9f5 / #ffffff（暖米白纸感，不是纯白） |
| 强调色 | 陶土橙 #c9764a（全页唯一主强调）；灰褐 #a08a72、薄荷 #6f9c86、砖红 #b4553f 各司其职 |
| 文字三级 | #2b2723 / #5c554d / #8e857a |
| 版心 | max-width: 920px（窄版式长文） |
| 圆角 / 阴影 | 18px；0 1px 2px rgba(43,39,35,.04), 0 8px 28px rgba(43,39,35,.06) |
| 字号档位 | 只有 5 档：26 / 16.5 / 14 / 12.5 / 11.5px，行高 1.75 |
| 插画 | 全部内联 SVG（首屏 200×220、分镜 100×100、循环图 560×150），不用位图 |
叙事骨架（真正难的部分，见 references/02-narrative-structure.md）
首屏(eyebrow+h1+导语+chips) → 一句话结论 → 素材区(带使用边界说明)
→ 为什么是TA(分镜×4) → 成因(×4) → 机制(聊天示意+循环图+引用)
→ 时间线 → 数字(×3) → 公共议题(卡×4) → 使用边界提醒 → 来源
写作三原则：每节标题是大白话答案；每节只有一个加粗观点句；
导语最后一句永远是「这份材料想拆的不是 TA，而是这套机制」（拆机制不拆人）。
动效与降级（见 references/04-motion-and-fallbacks.md，三条铁律）
- 初始隐藏必须门控在
html.js下——脚本失效页面也完整可读。 - 悬停用独立属性
translate，不与入场的transform冲突。 prefers-reduced-motion与无 IntersectionObserver 时，CSS/JS 双侧兜底。
另：图片onerror三级降级占位；data-to数字进视口自动滚动。
使用路径
路径 A：改模板手写（推荐，最终都走这条）
直接编辑 assets/template-story-page.html：所有【】占位替换成内容，
组件增删照抄 references/03-components.md。JS 会自动给每节分配入场动画，无需手写 reveal 类。
路径 B：先起骨架，再补组件
python scripts/story_page_kit.py new outline.json -o 草稿.html
outline.json（schema 见 examples/outline-demo.json）：title/subtitle/eyebrow/lede/chips/
sections(kicker+heading+paras+oneline)/sources。生成纯文字骨架后，按组件库手工补图形化组件。
清洗与交付（对 AI 生成器产物必做）
python scripts/story_page_kit.py clean isa -o isa.html # 实测清掉 424 处平台痕迹，62KB→46KB
python scripts/story_page_kit.py check isa.html # 外链/痕迹/缺资源/基础标签
python scripts/story_page_kit.py pack isa.html -o 交付包.zip
clean 会剥掉生成器私货：data-page-node-id（样本 353 处）、data-dm-ref、
__dm_* 调试样式块、已播完的 reveal in 类、进度条内联宽度、无扩展名文件名。
硬性约束
- 单文件自包含：不引 CDN/字体/图片；插画一律内联 SVG。
- 真实人物照片不进交付物：照片放同级
photos/且靠 onerror 降级；绝不 base64 内嵌真人照片。
涉及未成年人 / 私域内容时，.illus-note、.notice、导语伦理锚点三处必写（见样本页自身的处理）。 - 聊天记录只做结构示意：自定义角色与文本，页面内注明"非真实对话"；不复刻原文。
- 数字可核查：写"约 / 量级"，
data-to只放能对上来源的值；footer 逐条列来源。 - 不保留任何生成器痕迹：交付前
clean+check必须全绿（清单见references/05-delivery-checklist.md）。
交付前自检（速版）
- [ ] 双击打开无报错；断网再开一致
- [ ] 删掉 photos/ 后出现占位框，版面不塌
- [ ] 系统"减少动态效果"下无动画且内容全可见
- [ ] ≤760px 折行正常
- [ ]
check全绿，pack产物 ≤ 100KB（不含 photos）
目录
story-page-builder/
├── SKILL.md
├── references/
│ ├── 01-design-tokens.md # 色彩/字体/圆角/间距 + 取色逻辑
│ ├── 02-narrative-structure.md # 14 节叙事流 + 写作规则（页面价值的来源）
│ ├── 03-components.md # 11 类组件的标记结构
│ ├── 04-motion-and-fallbacks.md # 动效系统 + 三级降级
│ └── 05-delivery-checklist.md # 生成器痕迹清洗 + 交付清单
├── assets/
│ └── template-story-page.html # 自研单文件模板（全部组件 + 动效，占位内容）
├── examples/
│ ├── outline-demo.json # new 子命令的示例大纲
│ └── demo-output.html # 生成的骨架示例页
└── scripts/
└── story_page_kit.py # new / clean / check / pack 四合一
