Menu
把书（PDF/Markdown等）拆解成本地知识库，再据用户请求（全书概述/某主题/某章）生成可交互的HTML学习页。页面全程可点可探索。当用户想让一本书的某个主题以美观交互网页呈现、或做全书概览页时使用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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 处提及，内容较少，建议换主题或合并相关主题"，不硬凑 |