不会 CSS 也能做出惊艳 PPT！Frontend Slides这个开源 Claude Code 技能让 AI 帮你生成 12 种风格演示文稿，告别千篇一律的紫渐变
不会 CSS 也能做出惊艳 PPT！Frontend Slides这个开源 Claude Code 技能让 AI 帮你生成 12 种风格演示文稿，告别千篇一律的紫渐变
💡 每次做 PPT 都在 Powerpoint 里拖来拖去，最后做出来还是那个味儿？Frontend Slides 让你用一句话描述需求，AI 生成 3 种风格预览让你挑——12 套精心设计的视觉预设、零依赖单 HTML 文件、还能把 PPT 直接转成网页演示，这才是 AI 时代做幻灯片的正确姿势。
目录
- 1. 项目简介
- 2. 核心亮点：5 大理由爱上它
- 3. 12 套视觉风格全览
- 4. 动画系统：让幻灯片"活"起来
- 5. 架构设计：渐进式披露
- 6. 使用方式：从创建到分享
- 7. 快速安装
- 8. 适用场景与优缺点
- 9. 总结
📌 1. 项目简介
做演示文稿这件事，长期以来只有两条路：要么用 PowerPoint/Keynote 拖拽排版，要么用 reveal.js/Slidev 写代码。前者费时费力还容易做得丑，后者门槛高且调试痛苦。
Frontend Slides给出了第三条路——让 AI 帮你做，你只需要"看"和"选"。
它是一个 Claude Code 技能（Skill），专门用来创建动画丰富的 HTML 演示文稿。最妙的是它的"Show, Don’t Tell"理念：不需要你用语言描述"我想要什么风格"，而是直接生成 3 种视觉预览让你对比选择——看一眼胜过千言万语。
🎯 一句话定义：Claude Code 技能，一句话生成惊艳 HTML 演示文稿——12 种风格、零依赖、PPT 可转。
- 🔗 GitHub 地址：https://github.com/zarazhangrui/frontend-slides
- 📜 开源协议：MIT
- 👤 作者：@zarazhangrui
- 🛠️ 运行环境：Claude Code CLI
- 💡 灵感：Vibe Coding 哲学——不做传统软件工程师，也能构建美好事物
🏆 2. 核心亮点：5 大理由爱上它
① 🎨 Show, Don’t Tell——视觉风格发现
这是 Frontend Slides 最独特的设计。
传统方式：你告诉 AI"我想要简洁现代的风格"，AI 猜来猜去，做出来还是千篇一律。
Frontend Slides 方式：AI 直接生成 3 种风格预览，你用眼睛选——“说不清喜欢什么没关系，看到就知道了。”
② 🚫 零依赖——单 HTML 文件
❌ 不需要 npm install ❌ 不需要 Webpack/Vite ❌ 不需要 React/Vue ❌ 不需要任何构建工具生成的演示文稿是单个 HTML 文件，所有 CSS/JS 全部内联。这意味着：
- 双击就能打开，任何浏览器都能运行
- 10 年后照样能用（React 2019 年的项目？祝你好运）
- 随时分享、随时部署
③ 🔄 PPT 一键转换
已有 PowerPoint 文件？直接转成网页演示：
- 提取所有文字、图片和备注
- 展示提取内容让你确认
- 让你挑选视觉风格
- 生成包含所有原始素材的 HTML 演示
④ 🛡️ Anti-AI-Slop——反 AI 审美
“Bye-bye, purple gradients on white.”
Frontend Slides 明确拒绝以下 AI 生成内容的通病：
| ❌ 不使用 | 原因 |
|---|---|
| Inter / Roboto / Arial | 太通用，毫无个性 |
#6366f1通用靛蓝色 | AI 生成内容的标准配色 |
| 白底紫渐变 | AI 生成的审美重灾区 |
| 千篇一律的居中英雄区 | 毫无记忆点 |
| 写实插画 + 滥用毛玻璃 | 廉价感满满 |
每个预设都有独特的字体搭配、配色方案和布局语言——让人一眼就记住，而不是一眼就忘掉。
⑤ 📐 生产级代码质量
生成的不是一次性原型，而是可维护的生产级代码：
- ✅ 响应式设计——手机/平板/电脑都能看
- ✅ 无障碍支持——可访问性合规
- ✅ 代码注释完善——方便后续修改
- ✅ CSS 变量管理——一键换色
🎨 3. 12 套视觉风格全览
🌙 暗色主题（4 套）
| 风格 | 气质 | 布局特色 | 字体搭配 |
|---|---|---|---|
| Bold Signal | 自信、高冲击力 | 深色渐变 + 鲜艳色块卡片 + 大号章节编号 | Archivo Black + Space Grotesk |
| Electric Studio | 干净、专业 | 上下分屏（白+蓝）+ 品牌角标 | Manrope 全家桶 |
| Creative Voltage | 活力、复古现代 | 电光蓝左 + 深色右 + 霓虹黄点缀 + 半调纹理 | Syne + Space Mono |
| Dark Botanical | 优雅、精致 | 居中内容 + 柔和渐变圆 + 暖色点缀 | Cormorant（衬线）+ IBM Plex Sans |
Bold Signal的标志性元素——鲜艳的橙色卡片作为视觉焦点，配合大号章节编号（01/02/03），在深色背景上极具冲击力：
--card-bg:#FF5722;/* 鲜艳橙 */--bg-primary:#1a1a1a;/* 深色底 */Creative Voltage更是大胆——电光蓝配霓虹黄，半调纹理图案增加质感，Script 字体增添创意气息：
--bg-primary:#0066ff;/* 电光蓝 */--accent-neon:#d4ff00;/* 霓虹黄 */☀️ 浅色主题（4 套）
| 风格 | 气质 | 布局特色 | 字体搭配 |
|---|---|---|---|
| Notebook Tabs | 编辑风格、有序 | 奶油纸卡片 + 右侧彩色标签页 + 活页孔装饰 | Bodoni Moda + DM Sans |
| Pastel Geometry | 友好、亲切 | 白卡片 + 右侧竖向彩色胶囊标签 | Plus Jakarta Sans |
| Split Pastel | 活泼、现代 | 桃色/薰衣草双色竖分 + 圆角徽章 | Outfit |
| Vintage Editorial | 俏皮、有个性 | 奶油底 + 几何图形点缀 + 粗边框 CTA | Fraunces + Work Sans |
Notebook Tabs极具辨识度——在深色背景上放置奶油色纸卡片，右侧有薄荷绿/薰衣草/粉色/天蓝/奶油黄五种标签页，左侧还有活页孔装饰：
--tab-1:#98d4bb;/* 薄荷绿 */--tab-2:#c7b8ea;/* 薰衣草 */--tab-3:#f4b8c5;/* 粉色 */--tab-4:#a8d8ea;/* 天蓝 */--tab-5:#ffe6a7;/* 奶油黄 */🎭 特色主题（4 套）
| 风格 | 气质 | 布局特色 | 字体搭配 |
|---|---|---|---|
| Neon Cyber | 未来感、科技 | 粒子背景 + 霓虹辉光 + 网格图案 | Clash Display + Satoshi |
| Terminal Green | 开发者、极客 | 扫描线 + 闪烁光标 + 代码语法高亮 | JetBrains Mono |
| Swiss Modern | 精确、包豪斯 | 可见网格 + 非对称布局 + 几何图形 | Archivo + Nunito |
| Paper & Ink | 文学、典雅 | 首字下沉 + 引用拉出 + 优雅横线 | Cormorant Garamond + Source Serif 4 |
Terminal Green特别适合技术分享——GitHub 深色底 + 终端绿文字，扫描线效果、闪烁光标，一秒穿越到黑客帝国：
--bg-primary:#0d1117;/* GitHub Dark */--accent-green:#39d353;/* Terminal Green */✨ 4. 动画系统：让幻灯片"活"起来
Frontend Slides 有一套完整的动画-情感映射系统，根据你想要的氛围匹配动画效果：
| 想要的感觉 | 动画方案 | 视觉暗示 |
|---|---|---|
| 🎬 戏剧/电影感 | 慢速淡入(1-1.5s) + 大缩放(0.9→1) + 视差滚动 | 深色背景 + 聚光灯效果 + 全出血图片 |
| 🚀 科技/未来感 | 霓虹辉光 + 故障/乱码效果 + 网格揭示 | 粒子系统 + 网格图案 + 等宽字体 + 青/品红/电蓝 |
| 🎉 活泼/友好 | 弹性缓动(弹簧物理) + 浮动/摆动 | 圆角 + 粉彩/亮色 + 手绘元素 |
| 💼 专业/商务 | 微妙快速动画(200-300ms) + 干净切换 | 藏青/石板灰/炭灰 + 精确间距 + 数据可视化 |
| 🧘 平静/极简 | 极慢微妙运动 + 柔和淡入 | 大量留白 + 柔和色调 + 衬线字体 |
| 📰 编辑/杂志 | 交错文字揭示 + 图文交织 | 强字体层级 + 引用拉出 + 打破网格的布局 |
入场动画（4 种基础模式）
| 动画 | 代码 | 适用场景 |
|---|---|---|
| 淡入 + 上滑 | opacity:0 → 1+translateY(30px) → 0 | 最通用，适合大多数场景 |
| 缩放进入 | opacity:0 → 1+scale(0.9) → 1 | 强调重点内容 |
| 左侧滑入 | opacity:0 → 1+translateX(-50px) → 0 | 时间线、步骤展示 |
| 模糊进入 | opacity:0 → 1+blur(10px) → 0 | 戏剧性揭示 |
背景特效（3 种）
| 特效 | 效果 | 适合风格 |
|---|---|---|
| 渐变网格 | 多层径向渐变叠加，制造深度感 | Dark Botanical / Neon Cyber |
| 噪点纹理 | 内联 SVG 噪点，增加质感 | Vintage Editorial / Paper & Ink |
| 网格图案 | 微弱结构线条，秩序感 | Electric Studio / Swiss Modern |
交互动效
- 3D 倾斜悬浮：鼠标移动时卡片跟随倾斜，增加深度感
- 滚动吸附：
scroll-snap-type: y mandatory实现幻灯片式滚动
🏗️ 5. 架构设计：渐进式披露
Frontend Slides 的架构设计遵循OpenAI 的 Harness Engineering 原则——“给 Agent 一张地图，而不是一本 1000 页的说明书”。
核心文件只有 180 行的SKILL.md，其他文件按需加载：
| 文件 | 用途 | 加载时机 |
|---|---|---|
SKILL.md | 核心工作流和规则 | 始终加载（技能调用时） |
STYLE_PRESETS.md | 12 套精选视觉预设 | 第 2 阶段（风格选择时） |
viewport-base.css | 强制响应式 CSS 基础 | 第 3 阶段（生成时） |
html-template.md | HTML 结构和 JS 功能 | 第 3 阶段（生成时） |
animation-patterns.md | CSS/JS 动画参考 | 第 3 阶段（生成时） |
scripts/extract-pptx.py | PPT 内容提取 | 第 4 阶段（转换时） |
scripts/deploy.sh | 部署到 Vercel | 第 6 阶段（分享时） |
scripts/export-pdf.sh | 导出为 PDF | 第 6 阶段（分享时） |
为什么这样设计？
- 🧠节省上下文窗口：不需要一次性加载所有信息
- ⚡按需加载：只有用到时才读取对应文件
- 🎯精准指引：Agent 在每个阶段只需要当前阶段的指令
🚀 6. 使用方式：从创建到分享
创建新演示文稿
/frontend-slides > "我想为我的 AI 创业项目做一个融资路演 PPT"工作流程：
- 📝 询问内容（幻灯片、要点、图片）
- 🎭 询问期望感觉（令人印象深刻？兴奋？平静？）
- 👀 生成 3 种视觉风格预览供你对比
- ✍️ 用你选定的风格创建完整演示文稿
- 🌐 在浏览器中打开
转换 PowerPoint
/frontend-slides > "把我的 presentation.pptx 转成网页幻灯片"工作流程：
- 📦 提取所有文字、图片和备注
- ✅ 展示提取内容让你确认
- 🎨 让你挑选视觉风格
- 🔄 生成包含所有原始素材的 HTML 演示
分享演示文稿
方式一：部署到在线 URL
bashscripts/deploy.sh ./my-deck/# 或bashscripts/deploy.sh ./presentation.html使用 Vercel 免费套餐，一行命令部署到永久可访问的 URL——手机/平板/电脑都能看。
方式二：导出为 PDF
bashscripts/export-pdf.sh ./my-deck/index.htmlbashscripts/export-pdf.sh ./presentation.html ./output.pdf使用 Playwright 逐页截图（1920×1080）并合成 PDF。自动安装依赖。
📦 7. 快速安装
方式一：插件市场（推荐）
两条命令搞定：
/plugin marketplaceaddzarazhangrui/frontend-slides /plugininstallfrontend-slides@frontend-slides然后在 Claude Code 中输入/frontend-slides即可使用。
方式二：手动安装
# 克隆到 Claude Code 技能目录gitclone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides方式三：复制文件
mkdir-p~/.claude/skills/frontend-slides/scriptscpSKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/cpscripts/extract-pptx.py ~/.claude/skills/frontend-slides/scripts/环境要求
| 功能 | 需求 |
|---|---|
| 基本使用 | Claude Code CLI |
| PPT 转换 | Python + python-pptx |
| 在线部署 | Node.js + Vercel 账号（免费） |
| PDF 导出 | Node.js（Playwright 自动安装） |
⚖️ 8. 适用场景与优缺点
✅ 适合你，如果……
- 你不是设计师，但想做出有设计感的演示文稿
- 你用 Claude Code，想快速生成高质量幻灯片
- 你厌倦了 PowerPoint 的模板审美
- 你需要把 PPT 转成可在线分享的网页
- 你做技术分享/产品路演/创意提案
- 你追求零依赖、长期可用的文件格式
❌ 可能不适合，如果……
- 你不使用 Claude Code（核心依赖）
- 你需要复杂的嵌入对象（Excel 图表/视频等）
- 你需要多人协作编辑
- 你必须使用原生 PPT 格式交付
- 你需要精细到像素级的排版控制
优缺点对比
| 维度 | 评分 | 说明 |
|---|---|---|
| 🎨 视觉质量 | ⭐⭐⭐⭐⭐ | 12 套精选预设，Anti-AI-Slop，远超普通模板 |
| 🚀 易用性 | ⭐⭐⭐⭐ | 一句话创建 + 视觉预览选择，但需要 Claude Code |
| 🔧 可定制性 | ⭐⭐⭐⭐ | 代码全开放+注释完善，可深度修改 |
| 📦 零依赖 | ⭐⭐⭐⭐⭐ | 单 HTML 文件，10 年后照样能打开 |
| 🔄 PPT 转换 | ⭐⭐⭐⭐ | python-pptx 提取，保留图文内容 |
| 📤 分享能力 | ⭐⭐⭐⭐ | Vercel 一键部署 + PDF 导出 |
| 💃 动画效果 | ⭐⭐⭐⭐ | 情感映射动画系统，6 种氛围 + 4 种入场 |
| 🌐 响应式 | ⭐⭐⭐⭐⭐ | viewport-base.css 强制响应式基础 |
📚 9. 总结
Frontend Slides不是又一个 PPT 模板网站——它是一个重新定义"做幻灯片"这件事的 AI 技能：
- Show, Don’t Tell→ 不用语言描述风格，用眼睛选择
- Anti-AI-Slop→ 12 套独特预设，告别千篇一律的紫渐变
- 零依赖→ 单 HTML 文件，10 年后照样能用
- 渐进式架构→ 180 行核心 + 按需加载，遵循 Harness Engineering
- 动画-情感映射→ 6 种氛围感觉 → 自动匹配动画方案
- PPT 转换 + 一键部署→ 完整工作流，从创建到分享
🌟推荐指数：⭐⭐⭐⭐½（4.5/5）
- 适合：Claude Code 用户、非设计师、技术分享者、追求审美的创业者
- 亮点：Show-Don’t-Tell + Anti-AI-Slop + 零依赖 + 12 套精选风格
- 不足：强依赖 Claude Code；不支持原生 PPT 格式输出；复杂嵌入对象有限
一句话总结：如果你用 Claude Code，又想做有审美的演示文稿——装上这个技能，从此告别 PowerPoint 模板审美。
📢 项目链接：https://github.com/zarazhangrui/frontend-slides
📦 插件市场：/plugin marketplace add zarazhangrui/frontend-slides
💡 灵感来源：Vibe Coding 哲学
标签：#ClaudeCode #PPT #HTML #演示文稿 #VibeCoding #AI生成 #前端