用 Coding Agent 做 PPT，能到什么程度？我替你们试了 3 种风格。

Frontend Slides 是什么

一句话：让 Coding Agent 帮你生成漂亮的 HTML 演示文稿。

不是 Powerpoint 导出成图片那种——是真正的单文件 HTML 幻灯片，CSS 动画、字体排版、交互式导航，全在一页 HTML 里。

核心设计理念

  1. 零依赖：单个 HTML 文件，内嵌 CSS/JS，没有 npm，没有构建工具
  2. Show, Don’t Tell：不问你「喜欢什么风格」，直接生成 3 个风格预览给你看
  3. 反 AI 审美：不要紫色渐变 + 白色背景那种泛泛之作
  4. 固定 16:9 舞台：1920×1080 设计画布，整体缩放适配所有屏幕

内置 12 套风格预设

Dark 系：Bold Signal、Electric Studio、Creative Voltage、Dark Botanical

Light 系：Notebook Tabs、Pastel Geometry、Split Pastel

特殊风格：Vintage Editorial、Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink

外加 34 套 bold 模板（来自额外的 beautiful-html-templates 仓库）。

测试环境

为了做这个测评，我在本地环境跑了一轮：

项目 配置
机型 Mac mini（Apple Silicon）
Agent 框架 OpenClaw
模型 智谱 GLM-5.2
技能来源 github.com/zarazhangrui/frontend-slides
技能路径 ~/.agents/skills/frontend-slides/

测试流程

  1. 精读 SKILL.md 文档，理解设计理念和生成流程
  2. 选 3 个差异化的风格（暗色高冲击、文学质感、赛博未来）
  3. 每个风格生成一个 5 页演示文稿
  4. 使用 Puppeteer 截图记录
  5. 评估视觉、动画、可定制性和实用价值

实测：3 种风格、3 种感觉

风格 1：Bold Signal（暗色高冲击）

主题：AI 编程工具 2026 上半年趋势观察

这个风格的视觉语言：深色渐变背景 + 橙色高亮卡片 + 超大章节数字。Archivo Black 做标题字，Space Grotesk 做正文字。

每页的内容卡片颜色鲜明，导航面包屑在右上角，数字标号在左上角，布局干净。适合 Keynote / 路演讲座那种「每页一个核心观点」的场景。

数据页用网格布局展示三个关键数字，字号得体，阅读舒适。动画是渐入 + 上移的经典 reveal 效果。

适合场景：产品发布会、技术分享、路演 Pitch。

风格 2：Paper & Ink（文学质感）

主题：为什么写作是 AI 时代最重要的技能

这个风格完全不一样——奶油色纸张质感背景，Cormorant Garamond 衬线字体，拉引号装饰。整体感觉像一本书的扉页。

内容页面用了首字下沉（drop cap）的排版技巧，段落间距均匀，文字有呼吸感。跟 Bold Signal 那种「说重点」的感觉不同，Paper & Ink 让你想坐下来慢慢读。

适合场景：读书分享、思想性内容、个人博客配套演示。

风格 3：Neon Cyber（赛博朋克）

主题：The Future of AI Agents

这个最有视觉冲击力——深黑底色 + 青蓝色霓虹发光 + 扫描线特效 + 故障文字效果。Orbitron 大字 + JetBrains Mono 等宽代码字，赛博味拉满。

内容页的霓虹发光边框和网格背景，配合缓慢的呼吸动画，科技感十足。每个例子前面还有一个霓虹小标签（Code / Think / Act），视觉层级清晰。

适合场景：科技主题演讲、黑客松展示、AI/Web3 路演。

真正厉害的地方

试完三个风格，我觉得最让我惊喜的不是视觉本身，而是：

1. 风格差异度做得很好

三套完全不同的视觉语言，不是「换个颜色」的区别。说明风格预设体系的边界定义得清楚，每种风格有自己的排版系统、配色哲学和装饰语言。

2. 对 Coding Agent 友好

整个技能文档写了一千多行，但它的设计逻辑是不让 Agent 自由发挥，而是给 Agent 一套规则。从「Read this file for base CSS」「Read this for animations」「Only load design.md when user picks」——每一步都被拆成确定性操作，Agent 犯错空间小了很多。

这是很多 AI 工具类项目没做好的一点：不是 Agent 不够聪明，是你的指令不够结构化。

3. 生成的 HTML 质量扎实

每个 Demo 都是 30-40KB 的单文件，包含完整的 viewport 缩放到适配、键盘导航、触屏支持、打印样式、prefers-reduced-motion 无障碍支持。拿到就能用，不是玩具。

当然也有不足

  • 内容生成依赖模型能力：GLM-5.2 生成的 English 文案有轻微语法问题，用 Claude 或 GPT 应该更好
  • 不是所见即所得：你必须通过 Agent 来调整，不能拖拽修图
  • 文字排版偶尔溢出：第一版 Bold Signal 的字体大小偏大，需要在 prompt 里明确指定内容密度（speaker-led vs reading-first）

不过这些都不是技能本身的问题——跟传统 PPT 工具比，它的优势不在精调，在速度：从给主题到拿到演示文稿，5 分钟。

怎么用

如果你也用 Coding Agent（Claude Code / OpenClaw / Kimi Code / Codex CLI），直接把仓库链接给它：

1
https://github.com/zarazhangrui/frontend-slides

说一句「用 Frontend Slides 技能帮我做一个演示文稿」，它就会按流程走：问用途 → 生成 3 个风格预览 → 让你选 → 生成完整 HTML。

或者如果你用 Claude Code，可以直接装插件：

1
2
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

总结： Frontend Slides 不是 PPT 的替代品，但它是一个很好的「快速出稿工具」。当你需要快速生成一个好看的演示文稿，又不想花半小时调字体对齐，让 Agent 5 分钟搞定，然后你只需要改改内容——这种工作流是真的香。

关于作者：张咋啦

我一直关注她，视频号和 X 上经常刷到她的内容。她跟晓辉博士一样，都是我觉得值得推荐的 AI 博主——有品味，有思考，不跟风。思路清晰，表达利落，内容和作品都很有质感。

她的 GitHub 主页自我介绍是：「I don’t have a traditional engineering background (still don’t know how to write a single line of code), but with the help of coding agents, I’ve been able to turn lots of my ideas into reality. For me, code is a medium of self-expression.」

翻译一下：不会写代码，但靠 AI 编程助手把想法变成现实。

她做的东西：

项目 星数 做什么
frontend-slides 22.9k ⭐ Coding Agent 制作 HTML 演示文稿
follow-builders 5.4k ⭐ AI 开发者信息聚合
codebase-to-course 5k ⭐ 代码库转交互式 HTML 课程
beautiful-html-templates 3.2k ⭐ HTML 幻灯片模板库
tab-out 1.6k ⭐ 浏览器标签页管理

她还有 Substack 订阅号（4000+ 订阅）和 YouTube 教程。

值得 follow 的理由：

  1. 她证明了不会写代码也能做像样的开源项目——你去看她的代码库，结构清晰、注释完善，Coding Agent 帮她跨越了技术门槛，但产品感和设计感是她自己的
  2. 她做的东西都是「教 AI 做创意工作」这个方向——从 slides 到 course 到 podcasts，一直在探索用 Agent 产出创意内容
  3. 理念对味——她的 Substack 叫「Humanistic perspectives on AI」，主张 AI 工具应该帮助人表达，而不是替代人表达

一个不会写代码但做了 2.3 万星项目的人，她的下一步会做什么，挺让人好奇的。

参考链接：

  1. Frontend Slides: https://github.com/zarazhangrui/frontend-slides
  2. Zara Zhang GitHub: https://github.com/zarazhangrui
  3. Zara Zhang X: https://x.com/zarazhangrui
  4. Zara Substack: https://zarazhang.substack.com/
  5. beautiful-html-templates: https://github.com/zarazhangrui/beautiful-html-templates