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

# 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，由 <span class="mention-invalid">@zarazhangrui</span> 开发。 --- ## 第一部分：反 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 陷阱： ```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 - **作者**: <span class="mention-invalid">@zarazhangrui</span> - **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 #演示文稿 #小凯