延伸阅读
Antigravity 延伸阅读
已发布指南中列出的、关于使用 Antigravity 进行设计的教程、文档和演练。
Antigravity 
OpenDesign 用 Antigravity
在 OpenDesign
做设计。
如何在 OpenDesign 中使用 Antigravity 设计界面：以截图作为输入，通过集成浏览器检查每一次迭代，一个从 brief 到审核完成文件的注册流程任务，以及开始前需要了解的限制。
从 brief 到界面01 / Antigravity
您带来想法↗
“一个在我验证之前，先由浏览器
验证的注册流程。”
一个完整的 Antigravity 设计任务
一次 Antigravity 设计任务：从 brief 到界面
完整呈现一次任务：你交出的 brief 与约束、返回的产物，以及交付前仍需运行的检查。下方界面是为本页构建的示例，并非 Antigravity 的实际运行记录。
1设计 Brief 与约束条件
Brief为一款团队产品设计三步注册流程：账户、工作区、邀请团队成员。在交付前，用集成浏览器分别在桌面和手机宽度下验证每一步。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互步骤导航、行内校验、跳过邀请、键盘焦点顺序
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Antigravity 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Antigravity
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Antigravity 产物：1440px 与 390px 下的注册流程
4交付前审查
Layout
网格与间距
步骤条、表单和摘要都对齐 8px 网格；摘要高度始终不超过表单。
Hierarchy
视觉层级
先当前步骤，再问题，再字段；强调色只标记当前步骤。
Responsive
移动端布局
步骤条压缩为带当前标签的圆点；摘要变为单行合计。
Interaction
交互检查
返回上一步、触发一次校验错误、跳过邀请步骤。
Fit
Antigravity 适合的任务，以及不适合的任务
Antigravity 适合的场景
- 多模态截图 → UI。 Gemini 3.x 的图像理解能力可将参考图像转换为响应式标记，并据此检查结果。
- 集成浏览器验证。 Agent 驱动内置浏览器渲染 UI，并在各断点下进行检查，将结果作为 Artifacts 捕获。
- Editor View + Manager Surface。 在 Editor View 中亲自编码，或在 Manager Surface 中异步编排多个 Agent。
- 免费开始。 公开预览阶段个人用户免费使用，通过 Google 账号可获得宽松的 Gemini 3.x 速率限制。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 您没有该 Agent 所需的凭证。 需要：Google 账号（个人 Gmail），公开预览阶段免费。OpenDesign 不提供也不代理凭证。
- 您的团队使用 Cursor 或 Kiro 工作。 这些 Agent 各有自己的页面；工作区相同，配置方式不同。请参见相关 Agent。
兼容性
开始使用 Antigravity 前的要求
本指南涉及通过 OpenDesign 桌面应用连接的 Antigravity。已发布参考资料的核对日期为 2026 年 9 月 6 日。
工具范围Antigravity，由 Google 出品
Antigravity 是 Google 面向 Agent 优先设计的开发平台——一款 AI 驱动的 IDE，自主 Agent 可在编辑器、终端和集成浏览器中协同工作。它随 Gemini 3 一同进入公开预览。本页讲的是如何通过 OpenDesign 用 Antigravity 设计界面，而非 Antigravity 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证Google 账户（个人 Gmail），公开预览版中免费
Google 账户（个人 Gmail），公开预览版中免费。使用您的 Google 账户进行身份验证——凭据保留在您的机器上。本页不承诺配额或价格。
系统与版本桌面应用或源码
请查看下载页面获取桌面版安装包。源码快速入门中的 Node.js 和 pnpm 要求适用于从源码运行，而不适用于安装桌面软件包。最低兼容的 Antigravity 版本：此处未验证。
连接检查成功的标志
按照您已安装版本显示的连接说明操作，然后运行一个小任务。确认 Antigravity 已处理该任务且产物可以打开。仅完成下载并不代表已建立可用的连接。
从桌面应用开始
三步完成 Antigravity 设置
先下载，再针对您已安装的版本完成 Antigravity 设置，然后检查一个小结果。按此路径操作，无需从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备您的 Antigravity 连接
按照您已安装版本中的 Antigravity 说明操作。使用您的 Google 账户进行身份验证——凭据保留在您的机器上。
# 1. Download Antigravity for your OS (macOS, Windows, Linux) # from the official download page: antigravity.google/download # 2. Launch it and sign in agy # opens Antigravity; sign in with your Google account # 3. Accept the data-use policy, pick a theme, and open your project folder来自已发布指南中的 Antigravity 设置说明；请查阅厂商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Antigravity 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Antigravity 设计工作流
五步完成 Antigravity 设计工作流
同一个注册流程任务，从 brief 到验证文件的完整过程。每个步骤列出您提供的内容、Antigravity 完成的工作、OpenDesign 贡献的部分，以及您需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Antigravity阅读 brief 和项目的指令文件；遇到不明确之处会提出询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Antigravity在编写任何一行代码之前，先将 DESIGN.md 中的 token 和风格规则载入上下文。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Antigravity 编写一个自包含的 HTML 文件：布局、样式、交互以及稳定的挂钩点。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Antigravity规划各个区块，编写 HTML、CSS 和 JavaScript，运行该文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Antigravity阅读您在预览中给出的意见，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Antigravity就地应用更改并重新运行该文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Antigravity 设计资源
限制
Antigravity 的限制、手动检查与后备方案
- 范围本页介绍作为连接到 OpenDesign 的 Agent 的 Antigravity，而非 Antigravity 的全部功能。
- 使用限额使用限额和费用取决于你使用的凭证（Google 账号（个人 Gmail），公开预览期间免费）。本页不对免费额度做出任何保证。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Antigravity 与 OpenDesign 的常见问题
Antigravity 真的能完成设计工作吗？
可以——只要在上下文中提供审美 skill、设计系统和真实的参考图，Antigravity 就能产出生产级的响应式 UI，并且其多模态的 Gemini 3.x Agent 会在内置浏览器中验证输出结果。如果缺少这些上下文，它往往会退回到通用的外观，这正是 OpenDesign 所填补的空缺。
用 Antigravity 做设计需要付费吗？
Antigravity 目前处于公开预览阶段，个人使用免费，登录个人 Google 账号即可在 Gemini 3.x 上获得较为宽松的速率限制。无论哪种方式，OpenDesign 都不会代理你的凭证。
Antigravity 在设计方面具体好在哪里？
三点：其 Agent 运行在原生多模态的 Gemini 3.x 模型上，能很好地读取参考截图；它内置了 Agent 可驱动的浏览器以验证 UI；它还会呈现产物——截图和浏览器录屏——供你审查。审美判断仍来自你提供的设计系统、skill 和参考图。
前端设计该选 Antigravity 还是 Claude Code？
两者都很强。Claude Code 以能做出具体、深谙代码库的设计决策而知名；Antigravity 的优势在于其以 Agent 为核心的平台——多模态 Gemini 3.x、用于验证的内置浏览器，以及可供审查的产物。许多团队同时使用两者——OpenDesign 让你可以切换 Agent 而无需改变设计工作流。
如何验证 Antigravity 构建的结果？
Antigravity 内置了 Agent 可驱动的浏览器，因此它们能渲染 UI、在不同断点下检查，并将截图和浏览器录屏作为产物捕获下来。审查这些产物——并让 Agent 将其输出与你的参考图进行比对——是让结果保持符合规范的方法。
用 Antigravity 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。