使用 Google Antigravity 一键生成原型图以及企业官网实战
Eric通过实战演示，用 Google Antigravity 一键生成原型图和企业官网，附测试用的提示词和代码仓库。
Google Antigravity 是 Google 最新发布（2025年11月）的一款 “agent-first”（智能体优先）AI 驱动的 IDE。它在前端开发能力上表现尤为突出。接下来，我将通过实战演示如何生成原型图和企业官网，并分享我测试时使用的提示词和代码仓库。
Antigravity 是什么？
Agent-First 架构
Antigravity 的核心在于多个 AI 智能体（agents）的协同工作。它不像传统的智能补全插件那样仅提供代码建议，而是将 agent 视为“真正的开发者”——它们可以规划任务、执行代码，甚至验证结果。
Artifacts（产物机制）
Antigravity 会为 agent 的行为生成 “Artifacts”（产物），包括任务列表、实现计划、屏幕截图、浏览器录屏、验证结果等。这些产物不仅能帮助用户“可视化” agent 的具体工作，还提供了对 agent 自主行为的审查机制。
Agent 管理视图（Manager View）
除了普通的编码视图（Editor View），Antigravity 还提供了一个 “Manager” 界面，用于管理多个 agent。你可以同时让不同的 agent 在不同的工作空间（workspace）执行任务：例如一个负责写代码，一个负责写文档，另一个负责测试。
多模型支持
虽然是由 Google 推出，但它并不局限于使用 Gemini 模型：当前还支持 Gemini 3 Pro、Claude Sonnet 4.5 以及 GPT-OSS（开源模型）。
免费预览 (Public Preview)
- 发行时是公开预览 (public preview) 版本。
- 支持 Windows、macOS、Linux 平台。
- “慷慨”的配额：根据官网介绍，配额（rate limit）每 5 小时刷新一次。
Antigravity 的亮点
- 透明度更高：通过 Artifacts，用户可以清晰地看到 agent 的思考和操作过程，而不仅仅是接收代码结果——这大大增强了信任感。
- 真正的自动化：agent 不仅仅是给出代码片段，而是能真正完成一个完整的功能（feature），包括编写代码、测试和验证。
- 多 agent 并行：非常适合复杂项目或大型团队，可以让多个 agent 同时处理不同的任务。
- 强大的浏览器集成能力：agent 能操作浏览器进行 E2E 测试和 UI 验证，这在众多 AI-IDE 中是非常独特的。
- 低成本门槛（预览期）：免费且无需自行配置 LLM（除非想接入自己的模型），这对开发者来说极具吸引力。
安装
前往官网下载对应系统的版本，并按照指引完成配置。由于 Google Antigravity 也是基于 VS Code 构建的编辑器，如果你熟悉 VS Code 或 Cursor 等 IDE，基本上可以无缝衔接上手。
切记开启 TUN 模式，否则可能会卡在 Google Login 步骤，无法进入主界面。
实战
原型图生成
我将使用我之前文章 用 Cursor 一步搞定 UI 原型图：有交互、可扩展、易维护（附教程） 中的提示词，你可以直接复制进行测试。
你是一名精通 UI 设计和产品规划的全栈工程师，你的目标是完成一个"健身普拉提"iOS App 的开发。
你的核心任务是输出一套完整的APP原型图（HTML页面形式）来辅助后续的开发任务。
核心执行点：
- 明确功能与页面： 请你构思并确定"健身普拉提"App的核心功能模块。基于这些模块，规划出需要设计的HTML页面清单。
- 产品与UI/UX设计：
- 以产品经理的视角规划APP的关键功能、页面流程和交互逻辑。
- 以设计师的视角输出符合现代iOS App风格的、美观且用户友好的UI/UX。
技术规范：
- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript（用于基础交互）。
- 图片素材请使用 Unsplash。
- 代码应简洁，注重可读性。
输出要求：
- 创建一个包含多个 HTML 页面的原型。
- 主页面命名为 index.html，它可以整合或跳转到其他页面。
- 非主页面HTML文件使用其对应的核心功能名称进行命名（英文，例如 courses.html, profile.html）。
- 每个页面均需采用 iOS App 的风格生成。
- index.html 中，每行展示两个主要功能模块的入口或页面预览。
- 所有输出（包括代码内注释和页面文本）永远用简体中文。
- 请以顶级UX的眼光和审美标准，创造令人满意的设计。
请直接开始设计并输出上述要求的HTML原型页面代码，从 index.html 开始，然后是其他你规划的核心功能页面。Gemini 3 Pro 模型的能力和审美确实出色， 一次性就能完成整个 UI 界面的生成。
我选用的是 Planning 模式和 Gemini 3 Pro (High) 模型。它会先生成一个 task.md，其中包含完整的任务清单；开始执行时，还会生成一个 implementation_plan.md 文件，详细列出目标、技术栈和实现步骤等。
效果图：
官网
先使用整理的提示词：
使用 Next.js 16、Tailwind 4 以及 shadcn/ui 帮我完成一个软件开发工作室的企业官网，具体要求如下：
1. 导航栏包含首页、我们的服务、联系我们、关于我们
2. 网站底部 Footer 包含资源、公司、法律
3. 使用 tailark 官网中的营销组件，让界面更加合理美观，例如：在首页完成 Hero Section、Services Section、 Call To Action 等 blocks
4. 页面中保证每个 block 居中展示生成的项目架构：
初次生成的效果图：
接着使用 Fast 模式，让 Google Antigravity 继续美化，提示词如下：
帮我继续美化官网，加入黑夜模式。第二次生成的效果图：
结语
Gemini 3 Pro 在前端的表现真的非常强悍，所有的测试几乎都是一遍生成出想要的结果。
Google Antigravity 支持 Planning 和 Fast 两种模式。你可以先使用 Planning 模式完成复杂任务或从零开始的项目，然后使用 Fast 模式进行微调或修复 Bug。
本文图片被压缩后显示效果不佳，可以直接下载本文的代码或者自行测试：
