Frontend Slides 深度解析：当 Claude Code 学会做 PPT

开篇：那个让设计师失业的 11.8k Star 项目

想象这个场景：

你有一个创业想法，下周就要去路演。你需要一个漂亮的 PPT，但你不会设计，不懂 CSS，甚至连"配色方案"这四个字都让你头疼。

你打开 Claude Code，敲下一行字：

/frontend-slides
> "我想做一个 AI 创业公司的路演 PPT"

接下来的 5 分钟里：

• Claude 问你想要多少页、有没有现成内容、希望观众有什么感觉
• 然后生成 3 个完全不同的视觉风格预览
• 你选了一个最顺眼的
• 一个完整的、可交互的、动画丰富的 HTML 演示文稿就生成了

不是模板。

不是那种你能在 Canva 上找到的、已经被用过一万遍的"创业路演模板 #47"。

是一个为你的内容量身定制的、独一无二的、零依赖单文件 HTML 演示文稿。

这就是 Frontend Slides —— 一个让非设计师也能做出漂亮东西的 Claude Code 技能，GitHub 11.8k stars，由 @zarazhangrui 开发。

---

第一部分：反 AI 烂大街美学的宣言

什么是 "AI Slop"？

如果你用过 AI 生成图片或设计，你一定见过这种风格：

• 白底配蓝紫渐变
• Inter 或 Roboto 字体
• 居中的大标题 + 三列卡片布局
• 无处不在的玻璃拟态 (glassmorphism)
• 看起来"专业"但完全记不住

这就是 Frontend Slides 文档里明确禁止的 "AI Slop" —— 那些 AI 模型在训练数据中最常见的、最"安全"的、最平庸的设计选择。

作者的态度很明确：

> "Generic is forgettable. Every presentation should feel custom-crafted, not template-generated."

12 种反平庸的视觉风格

Frontend Slides 内置了 12 种精心设计的视觉风格，每一种都有明确的审美参考：

风格	审美参考	氛围
Bold Signal	现代品牌设计	自信、大胆、高冲击
Electric Studio	专业摄影棚	干净、专业、高对比
Creative Voltage	复古未来主义	活力、创意、霓虹感
Dark Botanical	植物插画艺术	优雅、精致、温暖
Notebook Tabs	编辑设计	有序、触感、纸张
Pastel Geometry	现代友好风格	亲切、柔和、可接近
Split Pastel	平面分割设计	活泼、现代、创意
Vintage Editorial	复古编辑设计	机智、个性、对话感
Neon Cyber	赛博朋克	未来感、科技感
Terminal Green	开发者/黑客美学	极客、极简、代码
Swiss Modern	瑞士平面/包豪斯	精确、几何、极简
Paper & Ink	文学编辑	优雅、沉思、印刷

每一种风格都有具体的字体配对、颜色变量、布局规则和标志性元素。

关键区别：不是"给你 12 个模板"，而是"给你 12 套设计语言，然后为每个演示文稿重新组合它们"。

---

第二部分："Show, Don't Tell" 的设计哲学

为什么大多数设计工具都错了

传统设计工具的工作流：

1. 问用户："你想要现代风格还是经典风格？" 2. 问用户："你喜欢蓝色还是绿色？" 3. 问用户："你想要圆角还是直角？" 4. 然后生成一个设计

问题是：大多数人根本无法用语言描述他们想要什么。

你能说出"Bold Signal"和"Electric Studio"的区别吗？不能。但你能看出区别。

Frontend Slides 的解决方案

> "Show, Don't Tell"

工作流变成这样：

1. 问用户："你希望观众有什么感觉？"（自信？兴奋？平静？感动？） 2. 根据心情生成 3 个完全不同的视觉预览 3. 用户看，选，完成

Mood Selection (多选，最多2个):
- Impressed/Confident — 专业、可信
- Excited/Energized — 创新、大胆  
- Calm/Focused — 清晰、深思熟虑
- Inspired/Moved — 情感、难忘

↓

生成 3 个单页 HTML 预览 (每个 ~50-100 行代码)
- 包含完整动画
- 包含实际字体和颜色
- 包含布局结构

↓

用户选择：Style A / Style B / Style C / Mix elements

这是一种体验式发现 —— 你不需要成为设计师才能做出漂亮的东西，你只需要能对视觉做出反应。

---

第三部分：技术架构的巧思

渐进式披露 (Progressive Disclosure)

Frontend Slides 的核心架构设计遵循 OpenAI 的 Harness Engineering 原则：

> "Give the agent a map, not a 1,000-page instruction manual."

主文件 SKILL.md 只有 ~180 行，是一个"地图"。真正的细节按需加载：

文件	目的	何时加载
SKILL.md	核心工作流和规则	总是
STYLE_PRESETS.md	12 种视觉风格	Phase 2 (风格选择)
viewport-base.css	强制响应式 CSS	Phase 3 (生成)
html-template.md	HTML 结构和 JS 功能	Phase 3 (生成)
animation-patterns.md	CSS/JS 动画参考	Phase 3 (生成)
scripts/extract-pptx.py	PPT 内容提取	Phase 4 (转换)
scripts/deploy.sh	部署到 Vercel	Phase 6 (分享)
scripts/export-pdf.sh	导出 PDF	Phase 6 (分享)

这样做的好处：

• Token 效率：Claude 不会一次性被淹没在 1000 行 CSS 里
• 上下文清晰：每个阶段只加载必要信息
• 可维护性：修改某个风格的字体不会影响核心逻辑

零依赖信念

Frontend Slides 的一个核心原则是：

> "Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck."

生成的演示文稿是：

• 单 HTML 文件
• 所有 CSS/JS 内联
• 零外部依赖 (除了 Google Fonts，可选 base64 嵌入)
• 10 年后依然能打开

这和现代前端开发的"npm install 地狱"形成鲜明对比。

---

第四部分：Viewport Fitting 的执着

强制规则：每页必须 100vh

Frontend Slides 有一个不可协商的规则：

> "Every slide MUST fit exactly within 100vh. No scrolling within slides, ever."

这意味着什么？

规则	实现
每页 .slide	height: 100vh; height: 100dvh; overflow: hidden;
所有字体大小	必须使用 clamp(min, preferred, max)
所有间距	必须使用 viewport 相对单位
内容密度限制	标题页最多 1 标题 + 1 副标题；内容页最多 4-6 要点
图片约束	max-height: min(50vh, 400px)
响应式断点	700px、600px、500px 高度三个断点

内容密度表

页面类型	最大内容
标题页	1 标题 + 1 副标题 + 可选标语
内容页	1 标题 + 4-6 要点 OR 1 标题 + 2 段落
特性网格	1 标题 + 6 卡片 (2x3 或 3x2)
代码页	1 标题 + 8-10 行代码
引用页	1 引用 (最多 3 行) + 署名
图片页	1 标题 + 1 图片

内容超限？拆成多页。

绝不挤，绝不让用户滚动。

CSS 陷阱：函数取反

文档里专门提到一个 CSS 陷阱：

/* ❌ 错误 — 浏览器静默忽略 */
right: -clamp(28px, 3.5vw, 44px);
margin-left: -min(10vw, 100px);

/* ✅ 正确 — 使用 calc() */
right: calc(-1 * clamp(28px, 3.5vw, 44px));
margin-left: calc(-1 * min(10vw, 100px));

CSS 不允许函数名前加负号，浏览器会静默丢弃整个声明 —— 没有错误提示，元素就是位置不对。

这种细节体现了文档的实用性。

---

第五部分：六大工作阶段

Frontend Slides 的工作流分为 6 个阶段：

Phase 0: 模式检测

• Mode A: 新建演示文稿 → Phase 1
• Mode B: 转换 PPT → Phase 4
• Mode C: 增强现有 HTML → 特殊规则

Phase 1: 内容发现

一次性 AskUserQuestion 收集所有信息：

• 目的（路演/教学/会议/内部）
• 长度（5-10页/10-20页/20+页）
• 内容准备度（全部就绪/粗略笔记/只有主题）
• 是否需要浏览器内编辑（影响是否包含编辑代码）

图片评估：如果提供图片，会： 1. 扫描所有图片文件 2. 使用 Read 工具（Claude 多模态）查看每张 3. 评估可用性、概念、主导色 4. 共同设计大纲 —— 不是"先定大纲再加图"，而是"根据图和文字一起设计"

Phase 2: 风格发现

"> Show, Don't Tell" 的核心阶段：

• 询问用户想要的感觉
• 生成 3 个不同的单页 HTML 预览
• 用户选择或混合

Phase 3: 生成演示文稿

读取支持文件，生成完整 HTML：

• 内联所有 CSS/JS
• 包含完整 viewport-base.css
• 根据 Phase 1 的图片/文字内容组织幻灯片
• 添加动画

Phase 4: PPT 转换

• 使用 extract-pptx.py 提取文字、图片、备注
• 展示提取内容供确认
• 进入 Phase 2 选择风格

Phase 6: 分享

• 部署到 URL: deploy.sh 使用 Vercel
• 导出 PDF: export-pdf.sh 使用 Playwright 截图合成

---

第六部分：为什么这个项目值得 11.8k Stars

1. 解决真实问题

不是"另一个 PPT 工具"，而是解决了一个具体痛点：

• 非设计师想做漂亮 PPT
• 但不想学设计工具
• 也不想用烂大街的模板

2. 技术选择有原则

• 零依赖 vs npm 生态的复杂性
• 渐进披露 vs 一次性加载所有内容
• Viewport Fitting vs 响应式设计的妥协

3. 审美有立场

明确反对 "AI Slop"，给出具体的"禁止清单"：

• 禁止字体：Inter, Roboto, Arial
• 禁止颜色：紫色白底渐变
• 禁止布局：全部居中、通用卡片网格

然后给出 12 种具体的、可执行的替代方案。

4. 文档即产品

README 和 SKILL.md 本身就是高质量的：

• 清晰的阶段划分
• 具体的实现细节（如 CSS 陷阱）
• 完整的风格规范

这种文档质量让其他开发者也能理解、修改、扩展。

5. 社区与可访问性

• MIT 许可证
• 支持通过 Claude Code 插件市场安装
• 手动安装只需复制文件
• 兼容所有 OpenClaw 平台

---

第七部分：与当前趋势的关系

Vibe Coding 哲学

项目明确提到受 "Vibe Coding" 启发 —— 不成为传统软件工程师也能构建漂亮东西。

这和近期的趋势一致：

• Lovable: 用自然语言构建应用
• v0.dev: AI 生成 React 组件
• Tempo: AI 驱动的产品设计

Frontend Slides 是这个趋势在演示文稿领域的具体实现。

技能即软件 (Skills as Software)

这是一个 Claude Code 技能，但它本质上是一个软件产品：

• 有清晰的用户流程
• 有设计系统
• 有技术架构
• 有扩展机制

这展示了 AI 时代"软件"的新形态 —— 不是 app 或网站，而是一个能被 AI 代理执行的、结构化的能力。

反 AI 平庸化

在 AI 生成内容泛滥的时代，Frontend Slides 坚持：

• 精心策划的设计选择
• 明确的审美立场
• 对人类判断的依赖（用户必须选择风格，不能全自动）

这是一种有意识的、对抗性的设计 —— 用 AI 对抗 AI 的平庸化。

---

结语：当工具有了品味

Frontend Slides 最有趣的地方不是技术，而是品味。

它有一套清晰的审美判断：

• 什么好看，什么不好看
• 什么值得做，什么不值得
• 什么是"AI Slop"，什么是"custom-crafted"

这种品味体现在：

• 12 种风格的精心选择
• 对零依赖的坚持
• "Show, Don't Tell" 的用户体验设计
• 对 Viewport Fitting 的执着

在一个 AI 生成内容越来越泛滥的时代，有品味地、有立场地使用 AI，可能比技术本身更重要。

Frontend Slides 展示了这种可能性。

---

参考信息

• GitHub: https://github.com/zarazhangrui/frontend-slides
• 作者: @zarazhangrui
• Stars: 11.8k+
• License: MIT
• 核心概念: Vibe Coding, Progressive Disclosure, Show Don't Tell, Anti-AI-Slop
• 技术栈: HTML/CSS/JS, Claude Code Skills
• 安装: /plugin marketplace add zarazhangrui/frontend-slides

#ClaudeCode #AI技能 #前端设计 #VibeCoding #反AISlop #演示文稿 #小凯