效率与协作

Reveal.js 演示文稿技能

让编码代理直接生成精美、可直接在浏览器打开的 reveal.js HTML 演示文稿,无需构建步骤。

53/ 100
谨慎使用

价值存在,但可靠性、证据或控制措施仍有明显缺口。

查看评分依据 ↓
可直接使用于
Codex · Claude Code
Star 数
★ 415
最近更新
5 个月前
License
MIT
revealjshtml-presentationschartjscss-theming
+4decktapepuppeteerslide-scaffoldingfont-awesome

这个 Skill 能做什么,适合哪些场景?

这是一个面向 Claude Code 的编码代理技能,用于从自然语言描述生成专业的 reveal.js HTML 演示文稿。它会规划幻灯片结构、生成 HTML/CSS 脚手架、应用主题化配色与排版,并通过自动化脚本检测内容溢出、逐页截图复核。生成的演示文稿只需在浏览器打开即可放映,也可导出 PDF。该技能以 MIT 协议开源,可作插件或手动复制安装。

运行 create-presentation.js 脚本生成带占位符的 HTML 脚手架(支持单页、纵向堆叠、章节分隔页等结构);生成 styles.css 并通过 CSS 变量定制颜色、字体(强制使用 pt 字号);支持 Chart.js 图表(须先阅读 references/charts.md)、Font Awesome 图标、多栏网格布局、演讲者备注与渐进显示;用 check-overflow.js 检测溢出;用 decktape 逐页截图并要求代理逐张目检;最后提供 edit-html.js 供用户在浏览器中点击文本就地编辑。

适合
  • 需要快速制作季度业务回顾、含图表的演示的销售或分析师
  • 要为 SaaS 创业项目做路演 pitch deck 的创始人
  • 用自然语言描述即想得到可编辑 HTML 幻灯片而非 PPT 文件的用户
  • 希望幻灯片配色贴合主题与品牌、而非千篇一律默认样式的演讲者
  • 需要导出 PDF 或逐页截图核对版式的技术团队

如何安装这个 Skill?

使用前请注意
  • SKILL.md 与 package./README 关于溢出检查工具(Puppeteer vs Playwright)的描述互相矛盾,安装依赖前请先核实实际所需环境。
  • decktape 依赖作者私有 fork(github:ryanbbrown/decktape),非上游官方版本,存在供应链与维护风险。
  • check-charts.js 需要 cheerio,但 SKILL.md 未在安装说明中列出该依赖。
  • 核心渲染依赖 jsdelivr/cdnjs/Google Fonts 等海外 CDN,中国大陆网络下图表、字体、图标可能无法加载;edit-html.js 本地服务端口固定为 3456 且保存时无确认直接覆写文件,建议事先备份。
  • 发布者未经 FollowSkills 注册表验证,无版本变更日志,长期维护状况未知。
开始前你需要
Agent 需要具备
  • Shell / 命令行
  • 网络访问
  • 本地文件系统
需要预先安装
  • Node.js
  • Puppeteer (overflow checking)
  • Decktape (screenshots/PDF export)
  • Cheerio (Chart.js validation)

方式一(推荐):在 Claude Code 中执行 /plugin marketplace add ryanbbrown/revealjs-skill,然后 /plugin install revealjs@revealjs-skill,再运行 npm install --prefix ~/.claude/plugins/cache/revealjs 安装依赖。方式二(手动):将 skills/revealjs 文件夹复制到 ~/.claude/skills/(用户级)或 .claude/skills/(项目级),并在该目录运行 npm install。依赖包括 Puppeteer(溢出检测)、Decktape(截图/导出)和 Cheerio(图表校验)。

通用方式:手动安装到 Claude Code(macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/ryanbbrown/revealjs-skill.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/revealjs" ~/.claude/skills/
rm -rf "$tmp"

根据源仓库地址和 Skill 路径自动生成,只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式,请优先按作者说明操作;想只在当前项目中使用,把 ~/.claude/skills 换成项目里的 .claude/skills。

如何使用这个 Skill?

试试这样说

安装后,把下面任意一句发给 Agent 即可触发:

  • 制作一份关于可再生能源趋势的 10 页演示文稿
  • 为一家 SaaS 初创公司做一份 pitch deck

安装后直接用自然语言提出请求即可触发,例如:“制作一份关于可再生能源趋势的 10 页演示文稿”或“为一家 SaaS 初创公司做一份 pitch deck”。代理会规划结构、选定配色、生成 HTML/CSS、检测溢出并逐页截图复核。完成后可用 node <路径>/scripts/edit-html.js <目录>/presentation.html 在浏览器中点击文本就地修改;可用 ?export 参数禁用图表动画以获得干净的 PDF 渲染。

这个 Skill 有哪些优点和局限?

优点
  • 无需构建步骤,生成的 HTML 在浏览器直接打开即可放映,也可导出 PDF
  • 脚手架脚本节省 token,避免 LLM 重复生成样板代码
  • 自动溢出检测比人工截图排查更快、更可靠
  • 内置 18 套示例配色方案与内容导向的选色指导,避免千篇一律
  • 提供浏览器端所见即所得的文本编辑脚本,便于后续微调文案
局限
  • 依赖 Node.js、Puppeteer、Decktape 等多个本地工具链,安装配置有一定门槛
  • 强制要求逐页截图人工复核,生成较长演示文稿时流程耗时
  • README 与 SKILL.md 依赖描述不一致(一处提到 Playwright,另一处为 Puppeteer),且仓库未标注 Topics、也无测试套件
  • 仅针对 reveal.js 输出 HTML,不能生成 .pptx 等传统格式

这个 Skill 与同类方案有什么区别?

与相关 Skills 并排比较;分数均按同一 FSRS 标准得出。

Skill FS 评分 Star 数 最近更新 License
Reveal.js 演示文稿技能 本页 53 · 谨慎使用 ★ 415 5 个月前 MIT
PPT Agent 53 · 谨慎使用 ★ 910 4 个月前 NOASSERTION
slides-grab 导出技能 56 · 谨慎使用 ★ 1.2k 1 个月前 MIT
dom-to-pptx 49 · 谨慎使用 ★ 379 1 个月前 MIT
HTML 幻灯片转 PPTX 转换器 54 · 谨慎使用 ★ 648 1 个月前 —

该技能明确基于开源的 Reveal.js 框架(revealjs.com),在其之上增加了脚手架生成、CSS 变量主题、溢出检测、图表导出模式等代理友好能力。源材料未提及其他竞品。

FollowSkills 如何评估这个 Skill?

FollowSkills 评估 · FSRS-2.0
谨慎使用
53/ 100 五分制 2.7 / 5
1信任安全17 / 25 · 3.4/5

脚本仅进行本地文件读写,edit-html.js 本地服务器带路径穿越检查(filePath.startsWith(baseDir)),无网络回传、无凭据访问,权限符合最小化;但 /save 端点会无确认直接覆写用户 HTML 文件,无备份/回滚机制,且依赖多个第三方 CDN 与一个作者私有 GitHub fork(decktape),依赖来源透明度不足。

2可靠稳定9 / 20 · 2.3/5

关键脚本(create-presentation、check-overflow、check-charts)逻辑自洽、有参数校验与可读错误输出;但存在明显矛盾:SKILL.md 称溢出检查用 Puppeteer,package./README 却声明 Playwright,二者 API 不同(puppeteer.launch vs playwright),按文档执行可能直接失败;check-charts.js 依赖 cheerio 但未在任何文档的安装说明中列出;decktape 依赖作者私有 fork 且用法与上游不一致。扣分点:文档与依赖声明不一致、私有 fork、缺 cheerio 安装说明。

3适用触发8 / 15 · 2.7/5

description 明确触发词(slides、presentation、deck、slideshow)且界定'无构建步骤的 HTML 幻灯片',边界较清晰;但未声明不适配范围(如 PPTX 输出)、无中文相关支持说明,且核心渲染完全依赖 jsdelivr/cdnjs/Google Fonts 等海外 CDN,在中国大陆网络下可能无法正常渲染图表/字体/图标。

4规范维护9 / 15 · 3.0/5

MIT 许可清晰,文档分层良好(SKILL.md + references 渐进披露),脚本内嵌帮助与示例;但无版本号/变更日志(package. 只有 1.0.0),无维护责任与更新路径说明,无 FAQ 或已知限制章节,README 依赖描述与 SKILL.md 不一致。

5有效结果6 / 15 · 2.0/5

工作流完整(脚手架→填内容→溢出检查→截图审查→浏览器编辑),生成物为可直接打开的 HTML,边际价值明确(结构化脚手架+自动校验优于手写);但静态审阅无法验证实际输出质量,截图审查环节强依赖外部 decktape fork 与浏览器环境,代表性结果仅有作者自述的外链示例。

6证据核验4 / 10 · 2.0/5

所有源码与脚本均可在仓库内审计,声明与实现基本对应;但无提交的测试套件、无 CI 执行证据,示例演示为外部链接无法在静态审阅中核实,README 中的功能声明(动态视口颜色等)在提供的源文件中未见对应实现。

1 2 3 4 5 6

点击维度查看打分理由

评估于 2026年9月10日 审查版本 d0ccd344c4aa 评估证据[1][2][3][4][5][6][7][8][9][10]

证据充分度:低 — 主要依赖静态检查、作者材料或有限演示;适合发现线索,不适合做高风险决策。

查看完整评分方法 →

常见问题

除了 HTML 还能导出 PPT 吗?
不能生成 .pptx。输出是标准 HTML 演示文稿,可通过 decktape 导出为 PDF,但源材料未提及任何 PowerPoint 格式支持。
运行时需要联网吗?
需要。演示文稿从 CDN 加载 reveal.js,配色方案支持通过 @import 引入 Google Fonts,截图导出依赖 npx decktape,均需网络。
生成后如何修改文字?
运行 node scripts/edit-html.js presentation.html 启动本地服务器,在浏览器中点击任意文本即可就地编辑,保存后写回文件;按 Ctrl+C 停止服务。
图表有什么限制?
使用内置的 Chart.js 插件,SKILL.md 强制要求添加图表前先阅读 references/charts.md,图表必须使用 flexbox 容器并设置 maintainAspectRatio: false,否则可能溢出。

相关 Skills