当前位置：首页>PPT>从 PDF 到网页 PPT,只需一个 OpenCode Skill(附完整代码)

从 PDF 到网页 PPT,只需一个 OpenCode Skill(附完整代码)

2026-04-06 11:57:08

本文目的是编写一个 skill，实现快速+免费地将 pdf 做成网页形式的 ppt。具体效果取决于你使用的网页模板，先看一下代码（见文末 github 仓库）中自带的效果之一，

使用的工具：OpenCode+skill。

OpenCode（开源 AI Coding Agent，支持任意模型如 Claude/GPT/Gemini 等）里的Skill是「可重用代理能力扩展包」，本质上是一份结构化的 Markdown 文档（SKILL.md），让 AI Agent 在需要时按需加载，从而精准执行复杂、重复的工作流。

0、制作 skill 简单流程

我们直接看创建一个 Skill 的流程，没几步。

1、创建文件夹

项目级：.opencode/skills/你的-skill-名称/
全局级：~/.config/opencode/skills/你的-skill-名称/（推荐全局，哪里都能用）

2、文件夹名 = Skill 名（必须一致）

命名规则：小写字母 + 数字 + 单个连字符，不能以-开头/结尾，不能连续--。
示例：math-interactive-visualizer

3、在文件夹内新建 SKILL.md（文件名全大写）

文件结构必须是：

---name: math-interactive-visualizer          # 必填，与文件夹名一致description: 用户给出数学公式，AI 自动生成专业美观的交互式网页，让学生通过拖拽、滑动实时理解公式（支持 LaTeX、参数交互、图形可视化、动画、测验等） # 必填，1-1024 字符，越具体越好license: MIT                               # 可选compatibility: opencode                    # 可选metadata:                                  # 可选  category: education  audience: students teachers---## What I do（详细说明 AI 要做什么）## When to use me（什么时候触发、需要问哪些澄清问题）## How to execute（具体执行步骤、推荐技术栈、输出规范）## Best Practices（美观、专业、代码规范等）## Examples（2-3 个真实案例）

4、测试与使用

在 OpenCode 中输入/math-interactive-visualizer（或直接描述需求，AI 会自动建议加载）。权限默认*": "allow"，可在opencode.json中精细控制。

1、牛刀小试

下面让我们来完整设计一个 Skill。Skill 名称为：math-interactive-visualizer。

使用场景：学生/老师输入一个数学公式（支持 LaTeX 或自然语言描述），AI 立即在当前目录生成一个math-viz/index.html单文件网页，专业、美观、响应式，包含交互控件、实时可视化、动画、解释和自测题，帮助学生「玩着学」。

下面是完整、可直接复制的SKILL.md内容：

---name: math-interactive-visualizerdescription: 用户给出任何数学公式（LaTeX 或文字描述），AI 生成一个专业、美观、响应式的单文件交互网页。页面使用现代设计（深色/浅色模式、流畅动画、Tailwind + Glassmorphism）、MathJax 渲染公式、Plotly.js/Chart.js 实时绘图、参数滑块、动画演示、自测小测验，让学生通过拖拽、滑动、点击直观理解公式。license: MITcompatibility: opencodemetadata:  category: education  tags: math visualization interactive learning---## What I do- 解析用户提供的公式（支持 LaTeX、方程、函数、几何、微积分、三角等）- 自动判断最佳可视化方式（曲线图、单位圆、3D 曲面、向量动画、参数方程等）- 生成一个完整的、单文件 `math-viz/index.html`，无需安装任何依赖（全部使用 CDN）- 页面必须专业美观：采用 Tailwind CSS（via CDN）+ Glassmorphism + 流畅 CSS 动画 + 深色/浅色自动切换- 核心交互功能：  - 公式实时编辑（MathJax + 简单输入框）  - 参数滑块（a、b、c、θ 等变量）  - 实时绘图（Plotly.js 或 Chart.js）  - 动画演示（函数轨迹、极限逼近、导数切线等）  - 关键性质高亮（零点、对称性、极值）  - 简短中文解释 + 英文术语对照  - 3-5 道互动小测验（即时反馈）- 输出后自动打开浏览器预览（使用 `open` 或提示用户）## When to use me当用户说「把这个公式做成交互网页」「帮我可视化 sin(x) + cos(2x)」「生成二次函数教学页面」「微积分极限演示」等场景时立即激活。  如果用户未明确目标年级/重点，主动询问：「是高中还是大学？重点想展示哪个性质（图形、极限、导数、积分）？需要包含测验吗？」## How to execute1. 在当前目录创建 `math-viz/` 文件夹2. 在里面生成 `index.html`（完整单文件，< 300KB）3. 使用以下技术栈（全部 CDN）：-TailwindCSS：https://cdn.tailwindcss.com-MathJax：https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js-Plotly.js：https://cdn.plot.ly/plotly-2.35.2.min.js-Lucideicons（可选）4. 代码必须干净、带注释、可直接部署到 GitHubPages 或 Vercel5. 页面结构：顶部导航 + 左侧公式面板 + 中间大可视化区 + 右侧解释/测验面板（移动端自动折叠）6. 始终使用中文界面（标题、按钮、解释），英文公式符号保留## BestPractices- 视觉：深色模式默认，玻璃拟态卡片，微光阴影，60fps 动画- 交互：所有参数实时更新，无延迟；添加「重置」「分享链接」按钮- 可访问性：键盘支持、屏幕阅读器友好、高对比度- 性能：不超过 3 个外部 CDN，懒加载 Plotly- 教育性：每张图都有「为什么这样动」的文字提示- 避免：不要用 React/Vue（保持单文件简单），不要嵌入后端## Examples**示例1** 用户输入：y = x²-4x + 3→ 生成二次函数网页：a/b/c 滑块、抛物线实时变化、顶点坐标、与 x 轴交点、拖动顶点动画、5 道测验**示例2** 用户输入：lim_{x→0} (sinx)/x→ 生成极限逼近动画：x 滑块、sinx/x 曲线 + 单位圆同步动画、表格数值逼近**示例3** 用户输入：sin(2θ) 的图像  → 生成单位圆 + 正弦波联动动画，θ 滑块，显示双角公式推导

快速上手这个 Skill

1、把上面内容保存到~/.config/opencode/skills/math-interactive-visualizer/SKILL.md

2、重启 OpenCode

3、输入：/math-interactive-visualizer 把 y = a sin(bx + c) + d 做成交互教学网页

4、AI 会自动创建文件夹并生成完美网页，你直接双击打开即可给学生用！

这个 Skill 做出来后，你以后只要说一句「用 math-visualizer 做这个公式」，就能得到一个可以直接发给学生、放在网页上、甚至嵌入微信公众号的交互教具，极大提升教学效率。

2、pdf2html

现在，我们正式来设计一个将 pdf 文件内容转化为漂亮网页的技能（skill）。

读取 pdf 文件，将内容做成网页，网页的风格随机参考该 skill 文件夹的子目录 templates 下的某个 html 模板文件。换句话说，做成什么样子我懒得跟大模型说了，让它直接参考模板。你也可以自己编辑或收集喜欢的模板放进去。

大致要求如下：

读取 PDF：支持用户直接拖入或指定路径（当前目录或绝对路径）。
随机模板风格：自动扫描 templates/ 子目录下的所有 .html 文件，随机挑选一个作为风格蓝本（你可以无限扩展模板）。
数学公式：自动识别 PDF 中的 LaTeX-like 公式（或用户标注），在网页中用 MathJax 完美排版（支持行内/块级）。
输出：生成一个完整、响应式、专业美观的单页网页（pdf-web/index.html），带目录、搜索、暗黑模式等现代体验。

SKILL.md

skill 我已经写好了，部分内容如下（完整的文件放在文末 github 仓库里）：

---name: pdf2htmldescription: 读取用户提供的 PDF 文件，提取结构化内容，随机选择 templates/ 目录下的一个 HTML 模板作为风格蓝本，生成专业美观的网页。所有数学公式自动使用 MathJax 渲染，支持标题、段落、表格、公式识别。license: MITcompatibility: opencodemetadata:  category: document  tags: pdf html converter mathjax template random---## What I do- 确认 PDF 文件路径（支持拖入或指定）- 使用 Python + pypdf（自动安装如果缺失）结构化提取文本、标题、段落、表格，并智能识别/保留数学公式为 LaTeX- 扫描 templates/ 目录下的所有 .html 文件，随机挑选一个- 将提取内容注入模板（替换占位符 {{title}}、{{content}}、{{mathjax}} 等）- 生成完整响应式网页：包含 MathJax CDN、目录导航、站内搜索、暗黑模式切换、打印优化- 输出到 `pdf-web/` 文件夹（可直接部署或打开）## When to use me当用户说「把这个 PDF 转成网页」「用模板生成 PDF 阅读器」「把论文做成网站」「保留公式转网页」时激活。澄清问题：「PDF 文件路径？需要突出哪些部分（摘要/公式/表格）？」## How to execute1. PDF 提取（优先自动）：   \```bash   python -c "   from pypdf import PdfReader   import sys   reader = PdfReader(sys.argv[1])   text = ''   for page in reader.pages:       text += page.extract_text() + '\n\n'   print(text)   " path/to/file.pdf   \```   （如果 pypdf 未安装，会自动提示 pip install --user pypdf）2. 模板处理：   - 列出 templates/*.html   - 使用 Python random.choice 随机挑选一个   - 读取模板内容，将 {{title}} 替换为 PDF 标题，{{content}} 替换为结构化 HTML（h1/h2/p/table + MathJax 包裹的公式）   - 确保模板中已包含 MathJax script 占位符 {{mathjax_script}}3. 输出：   - 创建 `pdf-web/index.html`   - 自动打开浏览器预览   - 生成 README.md 说明「此网页由 pdf-to-beautiful-webpage Skill 生成」