用 Slidev 制作技术分享幻灯片

图片解读

第 1 张 图片证据整理

事实（可直接读出的文字、界面元素、数据与可见现象）

- 页面顶部（导航区）

- GitHub 标志（图标）。

- 右上角按钮：Sign in（可见）。

- 页面右侧有垂直滚动条的可见部分。

- 左上角有汉堡菜单图标（横三线）。

- 仓库标识与描述

- 顶部显示的仓库标识文本（蓝色可点链）："slidev[s?] / slidev"（中间的字符有一点不完全清晰，见“无法辨认”部分）。

- 旁有标签："Public"（公开）。

- 仓库描述：Presentation Slides for Developers

- 链接样式文字：sli.dev

- 许可证：MIT license

- 仓库统计（可见图标与数字）

- 43.9k stars

- 1.9k forks

- 旁有 Branches、Tags、Activity（均为可见标签/图标）

- 操作按钮 / 标签

- 星标按钮（Star）

- Notifications（铃铛图标与文字）

- 主导航标签栏

- Code（已选中/突出）

- Issues 157（带数字徽章）

- Pull requests 21

- Discussions

- Actions

- 还有一个省略号菜单按钮（…）

- 分支选择与文件操作

- 分支下拉/显示：main

- 右侧有 "Go to file" 按钮

- 绿色按钮：Code（带下拉箭头）

- 仓库提交信息（列表顶部）

- 头像 + 用户名/提交人：antfu

- 提交信息（可读）：chore: release v52.11.3（后方有一个绿色打钩）

- 提交哈希/时间信息：9d30081 · 2 weeks ago

- 文件/目录列表（按行可见条目，左侧文件夹图标）

- .github — 最右列摘要/时间：chore: update tokens — 2 months ago

- .vscode — 摘要（部分被截断）：feat(presenter): use screen capture … — 2 years ago

- assets — 摘要（部分被截断）：feat: rewrite VSCode extension (#15… — 2 years ago

- cypress — 摘要（部分被截断）：chore: migrate to named pnpm catal… — 10 months ago

- demo — 摘要（部分被截断）：docs: use LaTeX/KaTeX logo in starte… — 2 months ago

- docs — 摘要：chore: release v52.11.3 — 2 weeks ago

- 可见水印/覆盖

- 图片中央偏下有白色文字水印："小红书"（可见但半透明，覆盖在界面上）

- 其它可见 UI 现象

- 页面样式为 GitHub 仓库文件视图的典型布局（左侧/中部文件列表，顶部仓库信息与操作按钮）。

- 文件条目右侧的提交消息多为被截断显示（以省略号结尾）。

- 有若干图标（文件夹图标、分支/标签图标、星形等）可见但为图形，不逐字转录。

无法辨认或被截断的内容（明确标注）

- 顶部仓库所有者/组织名与仓库名之间的第一个词/字符不完全清晰：图中显示为 "slidev[s?] / slidev"（此处的第一个词或字符有部分被遮挡或字体微模糊，无法 100% 确认具体拼写）。

- 多处提交摘要文本末端被截断，示例包括：

- ".vscode" 行的提交摘要末端为 "use screen capture …"（省略号处完整内容无法辨认）。

- "assets" 行的提交摘要 "feat: rewrite VSCode extension (#15…"（后续数字/文字被截断）。

- "cypress" 行的提交摘要 "chore: migrate to named pnpm catal…"（被截断）。

- "demo" 行的提交摘要 "docs: use LaTeX/KaTeX logo in starte…"（被截断）。

- 右上角有若干小图标旁的小文字/计数（例如 Branches、Tags 图标旁的具体数字/状态）在图中未显示具体数值或被部分裁切，无法读出精确内容。

推测（基于画面但非直接可读的结论，标注为推测）

- 页面大概率是 GitHub 上某个公开仓库的“Code（文件）”视图页面（推测基于典型 GitHub 布局与可见元素）。

- 仓库名可能是 "slidev"（推测基于页面中多处出现的 "slidev" 文本）。

- 水印 "小红书" 可能表示图片来源或该截图曾在小红书平台被分享（推测）。

- 用户名 "antfu" 可能为最近一次提交者的 GitHub 名称（推测，基于旁边的头像与提交说明）。

SkillPI 作品解读

作品用途：

- 本条内容介绍的是 Slidev —— 一个可以用 Markdown 撰写演示文稿的工具，适合技术分享或需要展示代码、公式、流程图并且希望减少手动排版时间的场景。作者指出它支持代码高亮、实时预览、演讲者模式、LaTeX 公式、Mermaid 流程图与在幻灯片中嵌入 Vue 组件，并能导出 PDF/PNG/PPTX。

图片证据（来自截图的可读信息）：

- 截图为一个 GitHub 仓库的文件视图页面，仓库标识处可读到包含“slidev”的文本，仓库描述为“Presentation Slides for Developers”。可见仓库采用 MIT license。页面显示仓库统计项：43.9k stars、1.9k forks（图片中可读）。页面列出若干目录（.github、.vscode、assets、cypress、demo、docs 等），并显示近期提交信息（示例：antfu 提交 chore: release v52.11.3，9d30081 · 2 weeks ago）。图片上有“小红书”水印，表明截图可能来自小红书平台。

关联 Skill 的使用步骤（基于来源摘要中明确提到的操作）：

1) 创建项目：使用 npm init slidev 创建 Slidev 项目（来源中提及该命令）。

2) 编辑内容：在项目中用 Markdown 编写幻灯片内容，编辑后浏览器会自动刷新（来源描述基于 Vite 的热更新特性）。

3) 代码/公式/图表：在 Markdown 中插入代码块以获得代码高亮，使用 LaTeX（KaTeX/LaTeX 支持）书写公式，使用 Mermaid 绘制流程图。来源还提及可在幻灯片内嵌入 Vue 组件以实现交互效果。

4) 实时预览：可安装 VS Code 扩展，在编辑时看到实时预览（来源提到有 VS Code 扩展）。

5) 导出：完成后可导出为 PDF、PNG 或 PPTX（来源明确提及这些导出格式）。

复现前提（必须准备或验证的环境）：

- 需要 Node.js 与 npm（来源提及用 npm init slidev，意味着需有 npm 环境）。

- 建议的前端工具链（来源提到 Slidev 基于 Vue3 与 Vite），实际运行可能需要兼容的 Node 版本和依赖安装。

- 若要在 VS Code 中实时预览，需要安装作者提到的 VS Code 扩展（截图与摘要提到但未给出扩展全名）。

待核实项（来源未详述或截图未显示完全，需要进一步确认的信息）：

- 完整的安装与启动命令序列（例如是否还需运行 npm install / npm run dev，来源只给出 npm init slidev）。

- VS Code 扩展的确切名称与配置步骤（摘要提到“有个VS Code扩展”但未给出扩展标识或安装方法）。

- 在不同操作系统或 Node 版本下的兼容性与构建流程（来源未列出系统要求）。

- 嵌入 Vue 组件、导出为 PPTX 的详细实现和限制（例如是否保留交互、导出后如何呈现动画/脚本），来源仅笼统说明了支持嵌入与导出格式。

- 截图中若干提交摘要被截断，需查看原始仓库页面以验证那些提交信息的完整内容。