菜单
把书（PDF/Markdown等）拆解成本地知识库，再据用户请求（全书概述/某主题/某章）生成可交互的HTML学习页。页面全程可点可探索。当用户想让一本书的某个主题以美观交互网页呈现、或做全书概览页时使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | book-to-webpage |
| description | 把书（PDF/Markdown等）拆解成本地知识库，再据用户请求（全书概述/某主题/某章）生成可交互的HTML学习页。页面全程可点可探索。当用户想让一本书的某个主题以美观交互网页呈现、或做全书概览页时使用。 |
把书变成可交互的学习页。两阶段：先拆全书成本地知识库（<书名>.kb/），再据请求生成单页 HTML。
<书名>.kb/），不生成 skill、不安装到 ~/.claude/skills/。<书名>.kb/ 知识库。本 skill 附带以下预制资产，Agent 在渲染时引用：
| 文件 | 作用 | 用法 |
|---|---|---|
templates/base.html | ①骨架层：页面壳、CSS 变量、布局、移动端断点、所有组件基础样式 | 抄，替换 {{...}} 槽位（含 {{theme_style}}/{{theme_name}}） |
templates/components.md | ②组件层：每个组件的 HTML/CSS/JS 范式 + 数据槽位 | 按 signature 挑范式，抄+填数据 |
templates/themes/ | ③主题层：4 个 .css（暖纸典藏/极简学术/夜读深空/东方水墨）+ README.md 目录 | 选一个，整段注入 {{theme_style}} |
scripts/extract.py | 提取器入口（复制自 book-to-skill） | 阶段 1 跑 |
scripts/extractor/ | 提取器包（复制自 book-to-skill） | 阶段 1 用 |
前提： 用户提供了书文件（PDF/Markdown/EPUB等）。
支持格式同 book-to-skill：.pdf、.epub、.docx、.txt、.md、.html、.rtf、.mobi、.azw。
无输入则提示：book-to-webpage 需要一本书的文件路径。
SCRIPT="$HOME/.claude/skills/book-to-webpage/scripts/extract.py"
python3 "$SCRIPT" <书文件路径> --mode text
产出 <workdir>/book_skill_work/full_text.txt + metadata.json。读 metadata.json 确认页数、字数、token、章节数。
如果提取失败，跑 python3 "$SCRIPT" --check 诊断依赖，给安装建议。
报页数/字数/预估 token 与价格，等用户确认再继续。
读 full_text 前 8000 字 + metadata 章节检测，识别：
全书 >50k token 时禁止整体读入。 用 grep 定位章节边界，sed 只切当前要写的那章：
grep -n -E "^\s*(第[一二三四五六七八九十百零0-9]+[章节回]|Chapter [0-9]+)" full_text.txt | head -60
sed -n '<start>,<end>p' full_text.txt
每章生成 <书名>.kb/chapters/ch<NN>-<slug>.md，字段：
自适应深度（默认中文社科书 = text + study = 1000-1800 token/章）：
| reference | study | |
|---|---|---|
| text | 800-1200 | 1000-1800 |
| technical | 1200-1800 | 2000-3000 |
glossary.md：全部术语序排，**术语** — 定义（第N章），≤1500 tokenpatterns.md：全部技术/模式，## 模式名 / 何时用 / 怎么做 / 权衡，≤2000 tokencheatsheet.md：决策层——决策规则（当X做Y因为Z）、决策树、权衡矩阵、阈值，≤1200 token关键改动：book-to-skill 这里生成 SKILL.md；我们生成 INDEX.md（知识库导航）。含：
提取结构非摘要；保留作者精确命名；密度优先于完整度；从业者口吻（"用 X 当 Y"）；前置重要内容；章节按需加载；绝不照抄原文。
<书名>.kb/
INDEX.md ← 知识库导航（常驻核心 ~4K）
chapters/ch<NN>-*.md ← 章节摘要
glossary.md patterns.md cheatsheet.md
full_text.md ← 原文（供阶段 2 grep）
metadata.json
这是本地知识库，不写到 ~/.claude/skills/，不生成 SKILL.md。
阶段 1 已生成 <书名>.kb/。如果不存在，先跑阶段 1。
INDEX.md 是常驻小核心（~4K），含 Core Frameworks + 章节索引 + 主题索引。章节文件按需加载，不全读。这与 book-to-skill 的查询机制一致；区别仅在我们把"文字回答"换成"交互 HTML"。
| 模式 | 触发条件 | 取材来源 | 产出 |
|---|---|---|---|
| ① 全书概述 | 用户说"概述全书/讲讲这本书"，无主题 | 读 INDEX.md Core Frameworks + cheatsheet | 概述页（骨架视图） |
| ② 主题聚合（默认） | 用户指定主题 / 说"做一页xxx" | 查主题索引 → 两级检索（§2.2） | 主题深度页 |
| ③ 单章深读（可选） | 用户指定章号 | 读该章摘要 + 该章原文 | 单章页 |
用户指定主题时，先 grep full_text.md 验证书中确有相关内容；命中 0 → 明确告知"本书未涉及该主题，建议尝试以下相关主题：…"，绝不瞎编。
HTML 页面内置全部 6 套主题（warm-paper/minimal/dark/ink-wash/vintage-editorial/paper-ink），通过右上角下拉菜单实时切换，默认使用 warm-paper。用户可在浏览器里自己切换，无需 Agent 生成前询问。
如果用户明确点名某主题（如"用极简风格"）→ 把 HTML 中 <body data-theme="..."> 的初始值设为对应主题，<select> 的 selected 同步调整。否则默认暖纸典藏。
6 套主题的完整 CSS（:root 基准 + 5 个 [data-theme="X"] 覆盖块）直接写入 HTML 的 <style> 中，不依赖外部文件。主题目录见 templates/themes/README.md。
第一级（结构化）：读 chapters/ 里主题索引指向的章节摘要
→ 框架/概念/反模式等结构化要点
第二级（原汁原味）：grep full_text.md 原文散落表述
→ 具体论述/作者原话/数据
合并去重重组 → 完整主题视图
两级都要：第一级保结构，第二级保全面。这是相对 book-to-skill（只读摘要）的强化，确保主题页囊括书中所有对该主题的论述。
按模式产出 JSON。meta.mode 字段标识模式，决定后续组件挑选。
theme 模式 JSON：
{
"meta": {"book": "...", "author": "...", "mode": "theme", "theme": "...", "sources": ["ch03","ch05"]},
"hero": {"eyebrow": "...", "title": "...", "lede": "...", "thesis": "..."},
"sections": [
{
"id": "past", "label": "过去20年",
"lead": "...",
"notes": [{"title": "需求被释放", "body": "..."}],
"signature": "causal_chain",
"chain": [{"id": "tax", "label": "分税制", "body": "..."}]
}
],
"questions": [{"title": "...", "hint": "..."}]
}
sections[].signature：决定该分区用哪个特色组件（causal_chain / type_selector / matrix / timeline / decision_tree / questions）sections[].lead：段首引语（衔接层，Agent 现写）overview 模式 JSON：
{
"meta": {"book": "...", "author": "...", "mode": "overview"},
"hero": {"eyebrow": "...", "title": "...", "thesis": "..."},
"frameworks": [{"name": "土地财政", "oneLine": "...", "when": "..."}],
"chapterMap": [{"ch": "ch01", "title": "...", "role": "..."}],
"conceptMap": [{"term": "土地财政", "links": ["ch03","ch05"]}],
"decisionRules": [{"when": "...", "do": "...", "because": "..."}]
}
每个顶层数组对应一个概述专用组件。
先判断内容性质，再选最合适的组件。 一套主题内容往往适配多种组件，Agent 需要根据内容的逻辑结构来挑选 1-2 个。
| 内容性质 | 判断依据 | 首选组件 | 备选 |
|---|---|---|---|
| 因果推进 | 有明显的"A→B→C→D"链条 | causal_chain | accordion |
| 历史演进 | 按时间顺序展开的事件 | timeline | story_card |
| 多类别并列 | 几类事物各有特点，适合分类比较 | type_selector | matrix |
| 多维权衡 | 需要对比选项在多个维度上的优劣 | matrix | before_after |
| 决策分叉 | "如果X则Y，如果A则B"的条件逻辑 | decision_tree | accordion |
| 案例叙事 | 有具体人物/事件/情境的生动故事 | story_card | quote_card |
| 政策/制度变迁 | 同一个事物在某个节点前后的状态对比 | before_after | timeline |
| 核心论述（分层） | "先给结论再给论证"，需控制信息密度 | accordion | decision_tree |
| 重要原话 | 需要保留作者精确表述、有冲击力的原文 | quote_card | story_card |
| 读者自检 | 从知识到行动的转化 | questions | decision_tree |
挑选逻辑：
story_card 呈现quote_cardtheme 模式固定：
overview 模式固定：
frameworks 卡片网格 + chapterMap + conceptMap + decisionRules从 templates/components.md 取对应范式，填入 JSON 数据。
每个带 data-source 的内容块（note / story / timeline-item / ba-col / accordion details / quote / explain / question）必须在内部末尾加上追问按钮：
<button class="deep-dive-btn" title="追问这个概念"
onclick="openDeepDive('{{概念名}}','{{data-source值}}')">?</button>
{{概念名}} = 该块的标题/核心概念（如 隐性担保、土地财政）{{data-source值}} = 与所在元素的 data-source 属性相同按钮默认 opacity:0，hover 父元素时浮现。点击后弹出全局遮罩层，用户输入追问内容，提交后自动将上下文 prompt 复制到剪贴板。
base.html 已内置完整 JS（openDeepDive() 函数 + overlay + toast），Agent 只需在组件内加这行 HTML。
每个内容块必须标注原文出处。 这既是学术诚信，也帮助读者溯源深入阅读。
第X章 第Y节 · 约第N-M页
例如：第二章 第二节 · 约第95-110页
A — Margin 标记（默认可见，低调）：
每个有出处的 HTML 元素加上 data-source 属性：
<article class="note" data-source="第二章 第二节 · 约第95-110页">
样式自动处理：左侧 3px 细色条（hover 变蓝）、hover 时弹出 tooltip 显示来源。
B — 全局"显示出处"开关：
页面右上角固定按钮 "显示出处"，点击后所有内容块下方浮现灰色小字出处行。base.html 已内置此按钮和 JS 逻辑（srcToggle → body.show-sources），Agent 无需额外处理。
data-sourcemetadata.json 取总页数，按章节在全文中的位置比例估算页码范围。例如 306 页的书，第 2 章从全文 13% 位置开始、26% 位置结束 → 约第 40-80 页三层叠加（关键！组件不够，还要衔接层）：
| 层 | 来源 | 谁做 | 占页面比例 |
|---|---|---|---|
| ① 骨架 | templates/base.html | 照抄，替换 {{lang}}/{{title}} 等 | ~20% |
| ② 组件 | templates/components.md 对应范式 | 照抄 + 填数据 | ~35% |
| ③ 衔接 | Agent 现写，受下方规则约束 | 生成：段首引语、过渡句、卡片标题重写 | ~45% |
衔接层写作规则（必须遵守，决定页面质量）：
拼装流程：
templates/base.html 骨架:root 默认变量（暖纸典藏）+ 5 个 [data-theme="X"] 覆盖块整段写入 <style>，并设 <body data-theme="warm-paper">（用户点名某主题则改初始值）；同时加入主题下拉菜单 HTML + JS（<select class="theme-picker"> + localStorage 记忆）{{lang}}（中文书="zh-CN"）{{title}} = 《书名》- 主题{{hero}}{{tabs}}（{{component_styles}} 里设置 tabs 列数）{{panels}}{{component_styles}} 设为组件专用 CSS{{component_scripts}} 设为所有交互 JS{{footer_note}} 设为脚注<书名>-<主题>.html<书名>-<主题>.md，与 HTML 同目录。内容含：Hero 标题/总论 + 各 Section 正文（去组件标记、纯可读叙事）+ 追问问题列表 + 出处来源标注。这是渲染前的那道完整叙事——不依赖 HTML 组件即可独立阅读，也方便后续引用/复用。JS 安全规则（CRITICAL — 违反会导致页面按钮全部失效）：
function() 而非 =>：箭头函数在脚本标签内可能导致解析差异。始终用 document.querySelectorAll(".tab").forEach(function(t){ ... });""："硬资产" 这种中文引号在 JS 字符串中可能被误读为字符串边界，导致 JS 执行中断。改为直接写 硬资产（去掉引号）或改用其他符号。var el = document.getElementById("x"); if (el) { el.onclick = ...; }var 声明变量：不用 const/let，最大化浏览器兼容性。生成 HTML 后，必须运行验证脚本：
node ~/.claude/skills/book-to-webpage/scripts/verify-page.js <输出文件路径>
该脚本自动检查：占位符残留、Tab 切换、Causal Chain、Type Selector、Accordion、Timeline、Before/After、Story Card、Quote Card、Questions、Source Toggle、移动端响应式、data-source 属性。
{{...}}、TODO、xxx、空数据块）data-source 属性，出处格式正确（"第X章 第Y节 · 约第N-M页"）rm -rf "<workdir>/book_skill_work"
页面布局/交互完全不变，只通过 CSS 变量换皮。templates/base.html 把字体/底色/纸面 tint/强调色全部抽成变量（--font-body/--font-display/--bg/--surface/--ink/--red/--blue/--green/--gold/…），组件 CSS 只引用变量、不写死颜色。
templates/themes/*.css）：warm-paper（暖纸典藏·默认）/ minimal（极简学术）/ dark（夜读深空）/ ink-wash（东方水墨）/ vintage-editorial（复古编辑）/ paper-ink（纸墨风）。详见 templates/themes/README.md。#f8f2e7、红蓝绿金强调、径向金光晕背景。:root 保存默认变量（暖纸典藏），5 个 [data-theme="X"] 选择器覆盖对应主题的全部变量+组件微调。<body data-theme="..."> 控制当前生效主题。| 场景 | 处理 |
|---|---|
| PDF 多级回退全失败 | 报错 + 跑 python3 scripts/extract.py --check + 安装建议 |
| 提取出空文本 | 提示"可能是扫描版，建议用 Nutrient OCR" |
| 用户主题书里没有 | 明确告知"本书未涉及该主题" + 列相关候选（grep 相邻关键词） |
| 主题内容过少（<3处提及） | 提示"仅 N 处提及，内容较少，建议换主题或合并相关主题"，不硬凑 |