一键在 Manus 中运行任何 Skill

webpage-to-courseware

星标21

分支5

更新时间2026年5月6日 14:33

将网页内容转化为精美互动展示页面。提供网页URL和可选的展示模式，自动抓取全文与图片（下载本地后视觉识别），生成文字为主、图片为辅的展示页面。支持三种模式：课件（录视频/录屏）、深度讲解（分享阅读）、速览卡片（快速浏览）。触发关键词：转课件、网页转课件、生成课件、网页讲解、速览、深度解读、webpage to courseware。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

xiaoweidotnet

xiaoweidotnet/suifeng-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

网页内容转互动展示页面

将任意网页转化为适合自媒体讲解/深度阅读/快速分享的精美 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

同仓库更多 Skills

同仓库

explainer-narrative-flow

xiaoweidotnet/suifeng-skills

把任意主题（技术概念、框架、API、产品、算法、流程等）讲成新手能一口气读懂的「深度讲解」内容，输出可为 HTML 长页、Markdown 文章或其它格式。核心方法是「懂→用→慎」三幕递进动线：先用生活类比建立直觉，再给真实应用，最后才讲限制与风险，并按主题类型自适应选节。当用户要求新手向解读、通俗讲解、生活化比喻、把文档讲清楚、调整讲解顺序、消除重复章节、或做成可分享的 explainer 时触发。关键词：深度讲解、新手向、通俗解读、生活类比、讲解动线、explainer、递进结构、把概念讲清楚。

2026-05-2921

mobile-app-mockup

xiaoweidotnet/suifeng-skills

从 PRD 文档或产品描述自动生成高保真移动端 App 原型 HTML 页面。Use when the user provides a PRD, product requirements doc, feature description, or app idea and wants to generate high-fidelity mobile app prototypes, create UI mockups, visualize product features as mobile screens, or build interactive HTML prototypes. Also triggers on "原型图", "高保真原型", "mockup", "app prototype", "UI 设计稿", "手机界面", "移动端原型", or when user pastes product requirements and asks for visual output. Covers the full pipeline — UX analysis, interface planning, UI design, HTML implementation with iPhone 15 Pro device frames.

2026-05-2821

api-doc-infer

xiaoweidotnet/suifeng-skills

根据产品说明、页面描述、模块功能、数据库表结构、字段清单、业务规则推理出 RESTful API 接口设计文档，包含接口名称、HTTP 方法、路径、入参、出参、校验规则和 Mermaid 流程图。当用户提到"推理接口"、"设计接口"、"API 文档"、"接口设计"、"推断接口"、"帮我设计接口"、"推导 API"、"根据表结构生成接口"时使用此技能。也适用于用户给出页面、模块、表结构或碎片化需求，需要产出接口文档的场景。

2026-05-0621

html-to-miniprogram-page

xiaoweidotnet/suifeng-skills

将完整的HTML网页设计稿（含CSS、图片资源）转化为微信小程序原生页面（WXML/WXSS/JS）。Use when the user wants to: (1) Convert an HTML design/mockup to a WeChat Mini Program page, (2) Transform web frontend code to WXML/WXSS, (3) Port a web UI layout to mini-program with 1:1 visual fidelity, (4) Generate mini-program pages from HTML/CSS snippets or screenshots. 特别注意小程序顶部导航栏（自定义/系统默认）和底部tabBar的配置差异，项目使用Skyline渲染器。

2026-05-0621

page-to-e2e

xiaoweidotnet/suifeng-skills

根据用户提供的页面地址（URL 或路由路径）为该页面生成完整的 Playwright e2e 测试，覆盖页面上所有可见功能（筛选、表格、按钮、弹窗、跳转、导出等）。先询问使用真实 API 还是 Mock 数据两种模式，再读取组件源码推断功能点，最后生成并运行测试。适用于用户说“给这个页面生成 e2e”“测一下 /xxx 页的功能”“写 playwright 测试”“为 xxx 页补 e2e”等场景。

2026-05-0621

planning-and-task-breakdown

xiaoweidotnet/suifeng-skills

将 spec 或需求拆解为有序、可执行的任务列表。当用户有一份 spec 需要落地、感觉任务太大无从下手、需要评估工作量、或需要编排并行工作时使用。触发词：拆任务、任务拆解、出计划、实施计划、排期、task list、plan。

2026-05-0621

name	webpage-to-courseware
description	将网页内容转化为精美互动展示页面。提供网页URL和可选的展示模式，自动抓取全文与图片（下载本地后视觉识别），生成文字为主、图片为辅的展示页面。支持三种模式：课件（录视频/录屏）、深度讲解（分享阅读）、速览卡片（快速浏览）。触发关键词：转课件、网页转课件、生成课件、网页讲解、速览、深度解读、webpage to courseware。
argument-hint	[网页URL] [可选：课件\|讲解\|速览]
allowed-tools	WebFetch, Bash, Read, Write, GenerateImage

网页内容转互动展示页面

将任意网页转化为适合自媒体讲解/深度阅读/快速分享的精美 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