网页内容转互动展示页面

将任意网页转化为适合自媒体讲解/深度阅读/快速分享的精美 HTML 页面。

核心设计理念

文字为主，图片为辅。

✅ 从图片中提取数据 → 转化为进度条/数字卡/步骤文字

✅ 图片缩为小参考图，附带说明文字

❌ 图片占满版面，没有文字解释

第零步：选择展示模式

在开始之前，先确定展示模式。判断优先级：

用户明确指定 → 直接使用
根据关键词推断：

用户说了什么	选择模式
录视频、录屏、OBS、课件、幻灯片	🎬 课件模式
讲清楚、讲透、深度、详细、来龙去脉	📖 深度讲解模式
快速了解、速览、一眼、5分钟	⚡ 速览卡片模式

无法判断 → 默认使用 🎬 课件模式，并在回复中告知用户"如需其他模式可指定"

三种模式简介

模式	模板文件	适合场景
🎬 课件	`templates/slideshow.md`	全屏分页，录视频/录屏
📖 深度讲解	`templates/explainer.md`	固定目录+文章流，分享链接/深度阅读
⚡ 速览卡片	`templates/quickview.md`	瀑布流卡片，快速浏览/截图分享

详细选择指南见 courseware-template.md。

第一步：抓取网页内容

使用 WebFetch 工具抓取用户提供的 URL，同时用 curl 保存原始 HTML：

TMPDIR=$(mktemp -d)
PAGE_HTML="$TMPDIR/page.html"
curl -sL -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36" "[URL]" -o "$PAGE_HTML"
echo "HTML 大小: $(wc -c < "$PAGE_HTML") bytes"

从抓取结果中提取：

网页标题、主体文本、段落结构、核心论点
关键数字指标（用于 Hero 区和大数字卡）

第二步：下载图片到本地

使用 scripts/extract-images.py 提取图片 URL，再用 scripts/download-images.py 批量下载：

SKILL_DIR="/Users/xiaowei/.cursor/skills/webpage-to-courseware"
IMG_DIR="$TMPDIR/images"

python3 "$SKILL_DIR/scripts/extract-images.py" "[原始URL]" < "$PAGE_HTML" > "$TMPDIR/image_urls.txt"
python3 "$SKILL_DIR/scripts/download-images.py" "$IMG_DIR" --from-file "$TMPDIR/image_urls.txt"

echo "✅ 图片保存至: $IMG_DIR"
ls -lh "$IMG_DIR"

第三步：视觉识别图片 → 文字化

对每张成功下载的图片，使用 Read 工具读取，重点是把图片内容转化为文字和数据：

Read(path="/tmp/xxx/images/00_abc12345.jpg")

按图片类型整理为结构化摘要：

图片类型	识别重点	在页面中的处理
数据图表（柱/折线/散点）	每个数值、坐标轴、趋势结论	转进度条+大数字，图片缩为参考图
对比表格	行列标题、具体数值、最值	转 HTML 对比条，图片缩为参考图
流程/架构图	节点、箭头、层级结构	转步骤卡片，图片缩为参考图
截图/产品图	界面文字、操作步骤	直接小图 + 文字说明
纯装饰/品牌图	—	忽略，不放入页面

第四步：整理内容大纲

汇总文字 + 图片识别结果，整理为与所选模式对应的大纲：

课件模式大纲：

封面（大标题 + 关键数字 pills）
目录（N 个知识点列表）
知识点1：[标题] → 左栏文字 + 右栏数字/进度条/小参考图
知识点2：...
总结（3-5 个要点卡片）

深度讲解大纲：

Hero（大标题 + 副标题 + 统计数字行）
§ 章节1：背景 → 完整段落 + 内联高亮块
§ 章节2：核心能力 → 段落 + 数字卡 + 特性列表
§ 章节3：数据对比 → 段落说明 + 进度条卡片
§ 章节4：技术原理 → 段落 + 引用 + 步骤流程
§ 总结：要点卡片 + 来源链接

速览卡片大纲：

Hero（标题 + 一句话 + 关键数字统计）
分组1：[主题] → 4-6 张混合类型卡片
分组2：[主题] → 3-4 张卡片
底部总结：3 个要点 + 来源

第五步：生成 HTML 页面

阅读对应模板文件，按规范生成完整单文件 HTML：

Tailwind CSS Play CDN（无需构建，<script src="https://cdn.tailwindcss.com"></script>）
tailwind.config 注入品牌色（根据网页主色调选择）
<style> 中只保留 4 类无法用 Tailwind 替代的 CSS：
- .anim/.fade-in/.fade-up：JS 驱动的进入动画
- .bar-fill：进度条宽度过渡（动态数值）
- @keyframes：浮动/弹跳等动画
- .dot.active / .toc-link.active：导航激活态
图片优先使用本地绝对路径；无法下载的用原始 URL

输出文件命名：

课件模式：courseware_[主题词].html
深度讲解：explainer_[主题词].html
速览卡片：quickview_[主题词].html

输出规范

完成后告知用户：

文件路径 + 使用的展示模式
图片：共下载 N 张，其中 M 张转化为可视化元素，K 张作为参考图保留
页面结构：共 N 页/N 个章节/N 张卡片

模板参考

模板索引 + 通用规范：courseware-template.md
课件模式详细规范：templates/slideshow.md
深度讲解模式规范：templates/explainer.md
速览卡片模式规范：templates/quickview.md