zarazhangrui/frontend-slides · 上手攻略
- 仓库：zarazhangrui/frontend-slides
- 链接：https://github.com/zarazhangrui/frontend-slides
- 分类：agent
- 作者：Tom
- 更新：2026-07-06
这是什么
frontend-slides 是一个编程 Agent 技能（skill），用于让 AI 编程助手（Claude Code、Codex 等）帮你从零创建精美的 HTML 网页版幻灯片——无需你懂 CSS 或 JavaScript，也不需要任何设计基础。它的核心理念是"展示而非描述"（show, don't tell）：你不需要用文字描述审美偏好，它会直接生成多套视觉风格预览让你选，选了之后才生成完整幻灯片。
它以 Claude Code 插件（plugin）的形式分发，同时也提供手动安装到本地 skills 目录的方式，支持 Claude Code、Kimi Code、Codex、OpenCode、Gemini CLI 等多种编程 Agent。
解决什么问题
| 痛点 | frontend-slides 的解法 |
|---|---|
| 不会 CSS/HTML，想做演示但只能套 PowerPoint | 直接用自然语言描述需求，Agent 生成网页幻灯片 |
| AI 生成的设计太千篇一律（紫色渐变白底） | 内置 Anti-AI-Slop 设计风格，拒绝模板感 |
| 不确定自己到底想要什么风格 | 先生成多套视觉预览，选了再生成完整版 |
| 有现成的 .pptx 文件，想转成网页版 | 内置 PPT 导入脚本，一键转换 |
| 想在生成的幻灯片里加动画效果 | 内置动画模式（animation-patterns.md） |
快速安装
方式一：Claude Code 插件安装（推荐）
Claude Code 用户可以直接从插件市场安装，这是最简单的方式。执行以下两条命令（分两次发送，不要一次粘贴两条）：
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
安装完成后，再执行：
/plugin install frontend-slides@frontend-slides
⚠️ 注意：必须使用 HTTPS URL，不可用
zarazhangrui/frontend-slides这种短格式，否则 Claude Code 可能尝试 SSH 方式安装（需要 GitHub 在 known_hosts 里）。
安装成功后，使用方式：
/frontend-slides:frontend-slides
> "我要做一个 AI 创业路演的 PPT"
方式二：手动安装到本地 skills 目录（其他 Agent 或非 Claude Code 环境）
# 1. 创建目录
mkdir -p ~/.claude/skills/frontend-slides/scripts
# 2. 克隆仓库
git clone https://github.com/zarazhangrui/frontend-slides.git /tmp/frontend-slides
# 3. 复制核心文件到 skills 目录
cp /tmp/frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
cp /tmp/frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
cp /tmp/frontend-slides/viewport-base.css ~/.claude/skills/frontend-slides/
cp /tmp/frontend-slides/html-template.md ~/.claude/skills/frontend-slides/
cp /tmp/frontend-slides/animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R /tmp/frontend-slides/bold-template-pack ~/.claude/skills/frontend-slides/
cp /tmp/frontend-slides/scripts/*.py ~/.claude/skills/frontend-slides/scripts/
方式三：让其他 Agent 直接使用
如果你用的不是 Claude Code，只需要把仓库地址发给 Agent，让它读取 SKILL.md 即可：
"请阅读这个仓库的 SKILL.md，然后帮我用 frontend-slides 技能做一个关于 XX 的演示文稿：https://github.com/zarazhangrui/frontend-slides"
核心用法
创建新幻灯片（从零）
/frontend-slides:frontend-slides
> "我要做一个 AI 创业路演 PPT，主题是 AI 代码助手，目标用户是独立开发者"
Agent 会： 1. 询问内容细节（有哪些要点、是否需要图片） 2. 生成 3 套视觉风格预览（包含安全预设 + Bold 模板 + 1 个自选 wildcard） 3. 你选择喜欢的风格 4. Agent 生成完整的 HTML 幻灯片并自动在浏览器打开
从 PowerPoint 转换
/frontend-slides:frontend-slides
> "把我的 presentation.pptx 转成网页幻灯片"
Agent 会：
1. 用内置 extract-pptx.py 脚本提取 PPT 中的文字、图片、备注
2. 展示提取结果供你确认
3. 让你选视觉风格
4. 生成完整的 HTML 演示文稿
核心文件说明
| 文件 | 作用 |
|---|---|
SKILL.md |
主技能定义，Agent 的使用指南 |
STYLE_PRESETS.md |
安全设计预设（12 种风格方向） |
bold-template-pack/ |
34 种大胆设计系统（Bold Design Systems） |
viewport-base.css |
基础 CSS 框架 |
html-template.md |
HTML 模板结构 |
animation-patterns.md |
动画效果模式 |
scripts/extract-pptx.py |
PPT → HTML 转换脚本 |
scripts/deploy.sh |
部署脚本 |
scripts/export-pdf.sh |
导出 PDF 脚本 |
设计风格预览
安全预设（STYLE_PRESETS.md）
共 12 种安全风格，部分示例：
- Bold Signal — 自信高冲击，深色卡片配亮色点缀
- Electric Studio — 简洁专业，分割面板布局
- Creative Voltage — 活力感，复古现代，蓝电光 + 霓虹
- Dark Botanical — 优雅精致，植物绿 + 暖米色
- Notebook Tabs — 杂志风，彩色标签页
- Pastel Geometry — 友好亲切，圆角几何
- Neon Cyber — 未来感，粒子背景，霓虹光效
- Terminal Green — 开发者风格，黑客终端美学
- Swiss Modern — 极简包豪斯，几何感
- Paper & Ink — 文学感，大写首字母 + 引用块
Bold Design Systems（34 种大胆模板）
来自 beautiful-html-templates，是可选的进阶设计包。部分示例：
- Neo-Grid Bold — 编辑新野兽派，霓虹黄 + 纸白
- Editorial Tri-Tone — 三色编辑，砖红 + 芥末 + 深酒红
- Creative Mode — 彩纸画布，多色自信
- Cobalt Grid — 电蓝斜体 + 网格纸背景
- Vellum — 深海军 + 暖黄斜体，学院感
- Emerald Editorial — 杂志封面风格，翡翠 + 海军 + 纸感
- 8-bit Orbit — 像素艺术霓虹街机风
- Sakura Chroma — 日系卡带包装美学
- Stencil Tablet — 骨纸 + 六色大地调，考古感
- Blue Professional — 奶油纸 + 电蓝，专业干净
⚠️ 注意：Bold 模板数量多，Agent 在风格探索阶段只加载预览索引和小预览卡，选择某个 Bold 模板后才加载完整设计系统，确保不会一次加载 34 套模板导致 Token 浪费。
典型适用场景
- 创业路演 / 融资 PPT：快速从零生成专业感网页幻灯片，告别 PowerPoint
- 技术分享 / 会议演讲：输出纯 HTML，可直接上传到任何静态托管
- 内部汇报：把现有 .pptx 一键转成网页版，分享链接即可观看
- 个人作品集展示：用 Bold 设计系统打造有个性的展示页
- 教学课件：动画效果适合做技术教程、操作演示
- AI 开发者：给 Agent 配这个 skill，让它帮你出演示文稿
技术细节
- 输出格式：单个 HTML 文件，内联 CSS/JS，零依赖
- 比例：固定 16:9 宽屏
- 可访问性：生产级可访问性标注
- 浏览器兼容性：现代浏览器（Chrome、Firefox、Safari、Edge）
- 代码质量：注释完整，可直接修改定制
- 字体：使用 Google Fonts CDN，需要网络连接；离线使用可能需要自行下载字体文件
坑与注意
| 坑 | 说明 |
|---|---|
| 需要网络（首次） | Google Fonts CDN 需要外网访问；纯离线环境需手动下载字体 |
| Bold 模板切换 | 风格预览阶段用小预览图，选定后才加载完整 CSS；不要在预览阶段要求加载全套模板 |
| Claude Code 版本要求 | 插件系统需要较新版本的 Claude Code；老版本可能不支持 /plugin 命令 |
| Agent Token 消耗 | 多轮风格选择对话会消耗较多 Token，建议提前想好内容再开始 |
| PPT 转换质量 | 复杂动画和墨迹可能无法完美还原，以文字+图片内容为主 |
| 导出 PDF | scripts/export-pdf.sh 需要 puppeteer 或类似工具（需额外安装） |
| 非 Claude Code Agent | 插件安装方式仅限 Claude Code；其他 Agent 用手动目录安装或直接让 Agent 读 SKILL.md |
与同类对比
| 工具 | 技术栈 | 设计质量 | 难度 | AI 集成 | 导出格式 |
|---|---|---|---|---|---|
| frontend-slides | HTML/CSS（手写质量） | ⭐⭐⭐⭐⭐ 极高 | ⭐ 极简 | ✅ 原生 Agent 插件 | HTML、PDF |
| Gamma.app | AI 在线生成 | ⭐⭐⭐⭐ | ⭐⭐ | ✅ | 在线链接、PPT、PDF |
| Beautiful.ai | 在线编辑器 + AI | ⭐⭐⭐⭐ | ⭐⭐ | ✅ | 在线、PPT |
| Marp | Markdown → 幻灯片 | ⭐⭐⭐ | ⭐ | ❌ | HTML、PDF、PPTX |
| reveal.js | HTML 幻灯片框架 | ⭐⭐⭐ | ⭐⭐⭐ | ❌ | HTML |
| Slidev | Vue + Markdown | ⭐⭐⭐⭐ | ⭐⭐⭐ | ❌ | HTML |
核心差异：frontend-slides 最大的优势是深度 AI Agent 集成——不是让你自己用工具，而是让 AI 编程助手帮你从零生成，整个对话式设计探索过程是其他工具没有的。输出的是干净、手写感的 HTML，而非模板化产物。
一句话推荐结论
frontend-slides 把"让 AI 帮你做演示文稿"这件事做到了极致——它不是另一个 PPT 替代工具，而是你编程 Agent 的一个专业设计技能；通过多轮视觉预览和 46 种预设风格，让不懂设计的人也能拿到专业级网页幻灯片，特别适合创业路演、技术分享和快速原型输出。