frontend-slides 是什么?

frontend-slides 是给本地 coding agent 使用的一套演示文稿技能说明与资源包。它指导 agent 先生成视觉预览,再产出固定 1920×1080 舞台的单页 HTML 演示;也能抽取 PPTX 的文本、图片和备注后重新排成网页幻灯片。它不是在线编辑器,也不是自动保证事实正确的内容生成服务。

⭐ 24,565 Stars 🍴 2,003 Forks JavaScript — 作者: zarazhangrui
来源:github.com/zarazhangrui/frontend-slides;https://github.com/zarazhangr… 查看 GitHub 仓库 → 📘 使用教程 →

为什么值得关注

v2.1.0 加入 34 套 bold templates、三种真实首屏预览、渐进式读取和更完整的 Claude Code 插件包装,同时把核心指令改成可被多种 coding agent 阅读。本页只使用官方 release、仓库文件与脚本作为证据。

来源:github.com/zarazhangrui/frontend-slides/releases/tag/v2.1.0

核心功能

视觉预览后再定风格

技能要求先做三张真实标题页预览,让用户从安全预设、bold template 与自定义方向中选择,再展开完整 deck。

来源:github.com/zarazhangrui/frontend-slides/blob/main/SKILL.md;https://gi…
固定 16:9 HTML 舞台

每页按 1920×1080 编写,整个舞台随浏览器统一缩放,避免手机或窄屏把页内布局重新流式排版。输出通常把 CSS/JS 内联到单个 HTML。

来源:github.com/zarazhangrui/frontend-slides/blob/main/SKILL.md;https://gi…
PPTX 内容抽取

extract-pptx.py 用 python-pptx 抽取文字、图片和 speaker notes,写出 JSON 与 assets;复杂图表、动画和母版并不会原样转换。

来源:github.com/zarazhangrui/frontend-slides/blob/main/scripts/extract-ppt…
PDF 导出与网页部署

export-pdf.sh 用 Playwright 启动本地 HTTP server、逐页截图再生成 PDF;deploy.sh 调用 Vercel CLI 做生产部署。两者都有依赖安装、文件读取或外部发布副作用。

来源:github.com/zarazhangrui/frontend-slides/blob/main/scripts/export-pdf.…

技术架构

SKILL.md 是工作流入口,按阶段读取 STYLE_PRESETS.md、viewport-base.css、html-template.md 与 animation-patterns.md;bold-template-pack 先读轻量索引和 preview,再只读被选中的 design.md。最终 deck 是浏览器直接打开的 HTML/CSS/JS。PPTX 转换脚本负责内容拆解,Playwright 脚本负责截图型 PDF,Vercel CLI 负责可选的公开部署;这些工具不属于零依赖的最终 HTML 本身。

来源:github.com/zarazhangrui/frontend-slides/blob/main/SKILL.md;https://gi…

项目知识图谱

知识图谱:项目核心节点(中心)+ 核心功能(内环六边形)+ 关键技术依赖(外环 chip) 新建 HTML deck 本身不需要前端构建链新建 HTML deck… PPTX 抽取需要 Python 与 python-pptxPPTX 抽取需要 P… PDF 导出需要 Node.js、npx 与 PlaywrightPDF 导出需要 No… URL 发布需要 Node.js、Vercel CLI 和 Vercel 账户URL 发布需要 No… 视觉预览后再定风格 固定 16:9 HTML 舞台 PPTX 内容抽取 PDF 导出与网页部署 frontend-slides 项目本体 核心功能 关键依赖

技术栈

语言Markdown 技能说明、HTML/CSS/JavaScript 输出、Python PPTX 抽取和 Bash 发布/导出脚本框架Claude Code 插件包装;其他具备文件和 shell 权限的 coding agent 可直接读取 SKILL.md
新建 HTML deck 本身不需要前端构建链PPTX 抽取需要 Python 与 python-pptxPDF 导出需要 Node.js、npx 与 PlaywrightURL 发布需要 Node.js、Vercel CLI 和 Vercel…
本地生成;可选 Vercel 生产发布;MIT 许可
来源:github.com/zarazhangrui/frontend-slides/blob/main/README.md;https://g…

快速上手

固定 v2.1.0,在临时目录阅读 SKILL.md 与它引用的资源,不先执行 deploy.sh 或 export-pdf.sh。用一份 5 页、已确认事实的简短提纲生成三张风格预览,选定方向后生成本地 HTML;逐页检查溢出、字体、图片来源、键盘导航和 16:9 缩放。需要 PDF 时在隔离目录安装固定版本 Playwright;需要公开链接时先审阅待上传文件,再由人明确批准 Vercel 生产部署。
来源:github.com/zarazhangrui/frontend-slides/releases/tag/v2.1.0;https://g…

使用场景

适合把已准备好的提纲、报告或 PPTX 内容做成浏览器演示,也适合快速比较多种视觉方向。对必须编辑原生 PowerPoint 对象、保留复杂动画/图表、严格离线且不能下载字体图片,或需要多人实时协作的场景,必须补充其他工具和人工检查。

来源:github.com/zarazhangrui/frontend-slides/blob/main/README.md;https://g…

优势与局限

优势

  • 先展示真实预览再选风格,降低仅靠文字描述审美的沟通成本
  • 固定 16:9 舞台和集中式 viewport CSS 便于跨屏保持版式
  • 风格索引、preview 与 design.md 分层读取,减少 agent 一次加载的上下文
  • 最终 HTML 可独立打开,核心资源和插件包装采用 MIT 许可

局限

  • 技能质量取决于执行它的 agent、提示、输入素材和人工审阅,仓库本身不会核验事实或版权
  • PPTX 抽取只覆盖常见文字、图片和备注,复杂图表、母版、视频与动画可能丢失
  • PDF 是 Playwright 逐页截图组合的静态结果,动画和可编辑对象不会保留
  • export-pdf.sh 会启动本地 server,并可能通过 npx 下载依赖;不应在含不可信 HTML 的高权限目录运行
  • deploy.sh 会安装/调用 Vercel CLI、登录账户并使用 --prod 发布,属于外部公开写入动作
  • 模板可能引用在线字体或图片;离线交付前要做网络请求审计并把必要资源本地化
  • 可选发布流程导向 Vercel 免费层,但没有返佣参数、付费模板或额度转售;未达到严重商业漏斗条件
来源:github.com/zarazhangrui/frontend-slides/blob/main/README.md;https://g…

最新版本

最新稳定版是 v2.1.0,发布于 2026-05-26。该版加入 bold template pack、改进风格预览和导出流程,并修复 Claude Code plugin 的自包含包装;使用时固定 tag,不直接把 main 当稳定版。

来源:github.com/zarazhangrui/frontend-slides/releases/tag/v2.1.0

实测与证据

status: docs_and_scripts_checked_not_executed  |  checked_at: 2026-09-23  |  environment: 核对官方 README、SKILL.md、v2.1.0 release、插件 manifest、PPTX 抽取、PDF 导出、Vercel 部署脚本和 MIT 许可证;未安装技能、运行脚本、生成 deck 或上传文件。  |  limitations: 没有验证安装兼容、模板渲染、移动端缩放、PPTX 保真度、PDF 页尺寸、字体/图片网络请求、脚本路径安全、Vercel 权限或任何 agent 的最终输出质量。  |  observed_output: 最新稳定 release 为 v2.1.0,发布时间 2026-05-26。插件 manifest 版本为 2.1.0。README 明确区分零依赖的 HTML 输出与需要 python-pptx、Playwright、Vercel CLI 的转换/导出/发布阶段。

来源:github.com/zarazhangrui/frontend-slides/releases/tag/v2.1.0;https://g…

同类项目对比

相比 Slidev,frontend-slides 更像一套让 coding agent 直接生成自包含 HTML 的设计流程,强调三张视觉预览和自由版式;Slidev 是基于 Markdown、Vue/Vite 的演示框架,组件、主题、开发服务器和可复现构建链更明确。想快速生成独特的单文件网页 deck,可试 frontend-slides;团队长期维护、版本化复用组件时,Slidev 更稳。

来源:github.com/zarazhangrui/frontend-slides;https://github.com/slidevjs/s…

总结评价

frontend-slides 适合做本地、可审阅的 HTML 演示初稿,但“零依赖”只适用于最终 HTML。先用小提纲验证版式和内容,再单独评估 PPTX 抽取与 PDF 导出;deploy.sh 会执行 Vercel 生产发布,必须放在最后并由人确认待上传文件。

来源:github.com/zarazhangrui/frontend-slides/blob/main/README.md;https://g…

常见问题

frontend-slides 真的零依赖吗?

最终生成的单文件 HTML 可以零构建运行,但 PPTX 抽取需要 python-pptx,PDF 导出需要 Node.js/Playwright,Vercel 发布还需要 CLI 和账户。

它能原样把 PPTX 转成网页吗?

不能保证原样。官方脚本主要抽取文字、图片和备注,再由 agent 重新设计;复杂图表、母版、视频、动画和可编辑对象可能无法保留。

运行 deploy.sh 会发生什么?

脚本会检查或安装 Vercel CLI、要求登录,然后用 --prod 把指定 deck 部署到公开生产 URL。这是外部发布动作,执行前要审阅文件并取得明确授权。

导出的 PDF 为什么没有动画?

export-pdf.sh 用 Playwright 把每一页截图后组合为 PDF,结果是静态画面。动画、交互和可编辑 HTML 元素不会进入 PDF。

非 Claude Code 的 agent 可以使用吗?

可以。v2.1.0 把核心说明写成 agent-neutral 的 SKILL.md;具备仓库读取、文件写入和必要 shell 能力的 agent 可以按同一流程执行,但插件命令只属于 Claude Code 包装。

资料与核验范围
本文依据项目公开资料整理。版本、安装命令和功能边界可能随上游更新,请以所列来源和项目当前版本为准。 资料核对时间: 2026-09-23 13:55.

参考材料:README、GitHub API、依赖文件