杂志式长文 HTML

问题在哪

办公室里常见场景：一份两千字的 .md 或模型输出的长答，大家很难在碎片时间里真正读完。把 Markdown 机械转成「满屏卡片和盒子」的仪表盘式 HTML，往往更吵、更难读。这个技能的目标是把长文变成单文件、可离线打开的杂志式阅读页——有摘要、有稳定的阅读栏宽，必要时用一张图说清结构，而不是堆组件。

技能如何工作

它只产出一种固定版式（暖象牙底、近黑正文、单一陶土色强调、衬线标题 + 无衬线正文、阅读栏约 680px），样式来自 references/house-style.md，并对照 references/example.html 对齐 Anthropic 式输出。

运行前先区分模式：

• 模式 A：用户给出 .md 路径、@ 引用或粘贴的 Markdown → 同目录、同 basename 输出 .html
• 模式 B：用户是提问 → 直接生成 HTML，写入当前目录的 answer-{slug}.html

写 HTML 前会先通读全文再定结构，而不是逐条映射 Markdown 元素：

1. 用一句话结论填顶部的 .tldr
2. 拆成 3～7 个 <section>，章节够多时可加粘性目录
3. 对流程、架构、量级对比等更适合空间表达的内容，考虑内联 SVG、时间线或 .stats 条
4. 其余尽量用普通段落；表格、卡片、.note 只在内容确实需要时使用

页面要求自包含：样式内联、不引外链字体/脚本/图；交互优先用原生 <details>，避免无意义的嵌套盒子。

适用边界

• 不适合需要每篇文档换一套视觉品牌或多 accent 色的场景；一致性是设计前提。
• 结构组件有克制上限（例如 .note 建议一页最多一两处），滥用卡片/表格会把 prose 读感弄糟。
• 生成后应自检：目录锚点与 id 一致、lang 与界面文案语言匹配（如 zh-CN 用「目录/概览」），标题衬线字重、单一强调色是否达标。