revealjs-skill：用自然语言创建精美 Reveal.js 演示文稿

本文介绍 revealjs-skill，一个用于 Claude Code 的 skill，让你可以用自然语言创建精美的 Reveal.js HTML 演示文稿。

项目简介

revealjs-skill 是一个 Claude Code 的 skill，让你能够通过自然语言描述来创建精美、专业的 Reveal.js HTML 演示文稿。无需手动编写 HTML 和 CSS，只需告诉 Claude 你想要什么样的演示文稿，它就能自动生成。

该项目在 GitHub 上已获得 154+ stars，由 Ryan Brown 开发维护。

核心特性

• 专业主题和配色方案 - 内置多种精美的主题和调色板
• 多栏布局 - 支持复杂的多栏页面布局
• 标注框和样式组件 - 提供多种预设的样式组件
• Chart.js 集成 - 内置数据可视化图表支持
• Font Awesome 图标 - 支持丰富的图标库
• 演讲者备注 - 支持添加演讲者备注
• 动画和过渡效果 - 内置多种幻灯片切换动画
• 自定义 CSS 样式 - 支持自定义样式调整

无需构建步骤 - 直接打开生成的 HTML 文件即可在浏览器中查看，也可以导出为 PDF。

技术栈

• JavaScript (77.8%) - 主要开发语言
• CSS (22.2%) - 样式文件
• Reveal.js - 演示文稿框架
• Chart.js - 数据可视化
• Font Awesome - 图标库

依赖项

安装指南

方式一：插件安装（推荐）

在 Claude Code 中添加 marketplace 并安装插件：

/plugin marketplace add ryanbbrown/revealjs-skill
/plugin install revealjs@revealjs-skill

安装依赖（用于溢出检查和 PDF 导出）：

npm install --prefix ~/.claude/plugins/cache/revealjs

方式二：手动安装

将 skills/revealjs 文件夹复制到 Claude Code 的 skills 目录：

# 用户级安装（所有项目可用）
cp -r skills/revealjs ~/.claude/skills/

# 或项目级安装
cp -r skills/revealjs .claude/skills/

安装依赖：

npm install

使用示例

安装完成后，只需用自然语言告诉 Claude Code 你想要创建的演示文稿：

"Create a 10-slide presentation about renewable energy trends"
"Make a pitch deck for a SaaS startup"
"Build a quarterly business review presentation with charts"

Claude Code 会：

1. 根据你的内容规划幻灯片结构
2. 选择合适的配色方案和设计
3. 生成 HTML 和 CSS 文件

示例演示

查看在线示例：revealjs-skill 示例演示

项目链接

• GitHub 仓库：github.com/ryanbbrown/revealjs-skill
• 示例演示：在线查看
• 许可证：MIT

总结

revealjs-skill 是 Claude Code 生态中一个非常实用的工具，特别适合需要快速创建专业演示文稿的用户。通过自然语言交互，你可以轻松生成包含图表、动画、多栏布局的精美演示文稿，无需关心底层 HTML/CSS 的实现细节。如果你经常使用 Reveal.js 或需要制作技术演示，这个 skill 值得一试。