版本、环境与工具说明
本文按 2026-05-05 的 Google Antigravity 和 Slidev 最新版本整理。产品界面、Agent 面板名称和 Slidev API 可能随版本更新变化，实际操作以你当前看到的版本为准。
使用 Antigravity 做 PPT 需要本地已安装 Node.js（建议 LTS v20+）。如果尚未安装，请先完成 Node.js 安装教程。
Antigravity 需要 Google AI Pro 或 Google AI Ultra 账号。能否使用还受地区、组织策略和产品开放状态影响。
Slidev 是开源项目，不需要额外账号或订阅，通过 npm 安装即可。
什么是 Slidev？为什么用 Antigravity 来做？
你可以把 Slidev 理解成一个面向开发者的 PPT 框架：用 Markdown 写内容，用 HTML 和 Tailwind CSS 做排版，用浏览器来演示。而 Antigravity 的 Agent 擅长生成和修改 Markdown、HTML 和 CSS，两者天然匹配。
一句话理解
Slidev 是一个基于 Markdown 的开发者演示文稿框架，支持代码高亮、逐条动画、暗色模式和 PDF 导出。配合 Antigravity Agent，你只需要提供大纲，Agent 就能生成完整的 slides.md 文件，包括布局、动画和自定义样式。
Antigravity + Slidev 能做什么
- 根据大纲自动生成完整的多页演示文稿
- 使用 Tailwind CSS 实现卡片、网格、表格等精美布局
- 添加 v-click 逐条进场动画，配合演讲节奏
- 内置暗色模式和代码高亮，适合技术分享
- 迭代修改文案、调整排版、更换配色方案
- 导出为静态网页或 PDF，适应不同演示场景
这篇教程适合谁
准备工作
How To
操作步骤
按顺序完成下面 6 个步骤，先确认入口和账号，再进行第一次安全可控的操作。
Step 01
让 Agent 创建 Slidev 项目
在 Antigravity 中打开你准备好的空文件夹，然后告诉 Agent 你要创建一个 Slidev 演示文稿项目。Agent 会帮你初始化 package.json、安装 @slidev/cli 和主题依赖、创建基础 slides.md 文件。
- 用 Antigravity 打开空文件夹
- 告诉 Agent 创建 Slidev 项目
- 确认 package.json 和 slides.md 已生成
- 确认依赖已安装（node_modules 目录存在）
让 Agent 初始化的指令
我要创建一个基于 Slidev 的演示文稿项目。请帮我初始化 package.json（包含 @slidev/cli 依赖及 build、dev 等脚手架命令），并创建一个包含最基础封面页的 slides.md 文件。
Step 02
向 Agent 描述 PPT 大纲和风格要求
把你的 PPT 主题、章节大纲、每一页的核心论点，以及风格偏好告诉 Agent。大纲越详细，Agent 生成的内容越贴近你的预期。例如：'我要做一份关于 XX 的技术分享 PPT，大纲如下：1. 封面标题 2. 章节一 3. 章节二……风格要求：暗色模式、现代极简、有逐条进场动画、16:9 比例。请生成完整的 slides.md。'
- 写清楚 PPT 主题和副标题
- 列出每一页的标题和核心要点
- 说明风格偏好（配色、暗色/亮色、动画）
- 说明目标受众（技术团队、管理层、客户）
给 Agent 的生成提示词模板
我要做一份关于 AI 的技术分享 PPT，大纲如下： 1. 封面：AI 时代下的研发效能变革 2. 目录页 3. 大众对 AI 的认知局限 4. 从 Chatbot 到 AI Agent 5. AI Agent 是什么？行业代表盘点 6. 时代冲击：产能、人才与范式 7. 产能放大：用同样的兵力打更多的仗 8. 人才结构变革：从流水线到超级个体 9. 开发范式重构：文档-执行-质询闭环 10. 研发模式对比（表格） 11. AI 浪潮下的机遇与挑战 12. 谢谢 / Q&A 风格要求：暗色模式、现代极简、有逐条进场动画、16:9 比例。请生成完整的 slides.md。
Step 03
Agent 生成完整的 slides.md
Agent 会根据你的大纲生成完整的 slides.md 文件，包括每页的 frontmatter（layout、transition）、HTML 和 Tailwind CSS 布局、v-click 逐条动画，以及自定义 CSS 动画效果。生成后先审查内容结构，不要急着调样式。
- 确认 slides.md 已生成
- 检查页数是否与大纲一致
- 浏览每页内容是否覆盖了核心论点
- 检查是否有明显的内容遗漏或错误
Step 04
启动本地预览
在终端中运行 npm run dev，Slidev 会在 localhost:3030 启动本地预览。用浏览器打开后，可以用方向键翻页、按 F 全屏、按 O 查看幻灯片概览。第一次预览重点看整体结构和内容是否正确。（查看视频中操作步骤）
- 点击顶部菜单栏的 Terminal -> New Terminal
- 在终端输入 npm run dev 回车
- 浏览器打开 http://localhost:3030
- 用方向键翻页确认每页内容
Step 05
向 Agent 反馈并迭代优化
预览后把需要修改的问题告诉 Agent：文案调性不合适、某一页内容超出屏幕、配色需要调整、动画节奏不对等。每次聚焦 1-2 个改动点，Agent 修改后立刻在浏览器中看效果（Slidev 支持热更新，保存后自动刷新）。
- 列出需要修改的具体问题
- 每次聚焦 1-2 个改动点
- Agent 修改后检查浏览器实时预览
- 反复迭代直到满意
常用修改提示词
第 5 页内容太长超出屏幕了，帮我压缩文案并改用更紧凑的布局，确保 16:9 全屏下不溢出。
把整份 PPT 的配色从暗色模式改成亮色模式，保持现有的卡片和网格布局不变。
目录页的条目不需要逐条动画，改成直接全部显示。第 3 页的列表保留逐条动画。
把第 8 页的纯文字对比改成表格形式，左列是传统模式，右列是 AI 模式，维度包括开发流程、知识获取、能力诉求和代码演进。
Step 06
导出静态文件、PDF 或 PPTX
演示文稿定稿后，运行 npm run build 导出为静态网页（dist 文件夹）。配合刚才配置的导出依赖，也可以运行 npm run export 导出为高清 PDF，或 npm run export:pptx 导出 PPTX 文件。静态网页可以直接用浏览器打开演示；PDF 适合打印和稳定分发；PPTX 方便发给没有环境的同事。导出 PDF/PPTX 需要较长时间，请耐心等待终端执行完毕。
- 发送提示词让 Agent 安装依赖并配置导出脚本
- 运行 npm run build 生成静态网页
- 运行 npm run export 导出高清 PDF 测试
- 运行 npm run export:pptx 导出 PPTX 文件
配置高清 PDF 与 PPTX 导出
我要进行 Slidev 的文件导出，请帮我配置高清 PDF 和 PPTX 的导出命令，并安装所需的底层依赖： 1. 安装导出依赖：帮我安装开发依赖 playwright-chromium（Slidev 导出 PDF/PPTX 必备，请直接运行命令安装）。 2. 修改/添加导出脚本：将 package.json 中的 "export" 命令修改为 "slidev export --scale 2" （确保导出的 PDF 分辨率为原来的 2 倍，更加清晰）。 3. 在 package.json 的 scripts 中新增一条命令 "export:pptx": "slidev export --format pptx" （用于直接导出可在 Office 中打开的 PPT 文件）。 4. 配置完成后，请提醒我运行 npm run export 或 npm run export:pptx 进行测试。
完成后你应该看到什么
如果下面几项都能完成，说明使用 Antigravity 做 PPT 的流程已经跑通，可以用于正式演示场景。你可以访问在线演示示例查看最终效果。
- Slidev 项目能正常运行，npm run dev 不报错。
- 浏览器中可以用方向键翻页，每页内容与大纲一致。
- v-click 逐条动画正常工作，按方向键能逐条展示内容。
- 暗色模式下字体、配色和对比度清晰可读。
- 全屏模式（按 F）下所有页面内容不溢出、不截断。
- npm run build 能成功导出 dist 文件夹，用浏览器打开正常显示。
安全边界
如果演示文稿包含公司内部数据、商业策略、客户信息或未公开产品计划，不要把这些内容提交到公开 Git 仓库，也不要在演示文稿中暴露 API Key、密码或内部系统地址。
使用 Antigravity 生成的内容需要人工审查事实准确性，尤其是涉及数据统计、市场分析和竞品对比时。AI 可能生成看起来合理但不准确的数据。
下一步可以看什么
常见问题与排错
Slidev 是什么？和 PowerPoint 有什么区别？
Slidev 是一个面向开发者的 Markdown 驱动演示文稿框架，用代码写幻灯片、用浏览器演示。和 PowerPoint 的区别是：Slidev 更适合代码展示和技术分享，PowerPoint 更适合图片密集和品牌设计要求高的商务演示。
Antigravity 能直接生成 PowerPoint 文件吗？
Antigravity 更擅长生成代码和 Markdown，搭配 Slidev 是最自然的方式。如果你确实需要 .pptx 文件，可以让 Agent 用 python-pptx 等库生成，但排版精度和视觉效果不如 Slidev。
npm run dev 启动失败怎么办？
先确认 Node.js 版本（建议 v20+），然后检查 node_modules 是否完整（可以删除后重新 npm install）。如果端口 3030 被占用，可以在 package.json 中修改 slidev 的启动端口。
某一页内容超出了屏幕高度怎么办？
告诉 Agent 你的问题，比如'第 X 页内容太长超出屏幕了，帮我压缩一下'。Agent 会精简文案、调小字号、改用更紧凑的布局，或者把内容拆分到两页。
怎么控制逐条动画的出现顺序？
Slidev 使用 <v-click> 包裹单个元素，使用 <v-clicks> 包裹多个子元素让它们逐条出现。每次按方向键或点击，下一个被 v-click 包裹的元素才会显示。
PPT 可以导出为 PDF 吗？
可以。运行 npm run export 即可导出为 PDF。这个功能依赖 Playwright，第一次运行时可能需要自动安装浏览器引擎。如果导出失败，可以先运行 npx playwright install chromium。
可以在没有 Node.js 的电脑上演示吗？
可以。先运行 npm run build 导出静态网页到 dist 文件夹，然后把整个 dist 文件夹拷贝到目标电脑，用浏览器直接打开 index.html 即可演示。
演示时能用键盘翻页吗？
可以。Slidev 支持方向键翻页（← →）、按 F 全屏、按 O 查看幻灯片概览、按 D 切换暗色/亮色模式。这些快捷键在演示时非常实用。
相关教程
Google Antigravity 接入 Gemini 教程
从官方入口安装 Google Antigravity、登录 Google 账号、确认 Gemini，并说明账号资格、支持地区和第一次 Agent 使用流程。
如何在 VS Code 中接入谷歌 AI
用 Gemini Code Assist 扩展把 Google AI 接入 VS Code，并说明什么时候需要再配置 Gemini API Key。
如何打开 Google Antigravity 并用它写产品计划
从官方入口打开 Google Antigravity、登录账号，到第一次用 Agent 写一份可评审的产品计划。
如何在 Windows 上准备 Node.js、Git 和 VS Code
从官方下载并安装 Node.js、Git 和 VS Code，完成终端验证，为后续 Codex、Cursor 或 OpenAI API 教程准备本地开发环境。