Antigravity OpenDesign

用 Antigravity
在 OpenDesign
做设计。

如何在 OpenDesign 中使用 Antigravity 设计界面:以截图作为输入,通过集成浏览器检查每一次迭代,一个从 brief 到审核完成文件的注册流程任务,以及开始前需要了解的限制。

本页内容 示例
  1. 示例
  2. 适用场景
  3. 兼容性
  4. 环境搭建
  5. 工作流
  6. 资源
  7. 局限性
  8. 常见问题

一个完整的 Antigravity 设计任务

一个 Antigravity 设计任务:从需求简述到界面

一个任务从交接一路追踪到完成检查:你交给 Antigravity 的需求简述与约束、它返回的产物,以及你在宣布完成之前仍需进行的审阅。下方界面是为此页面制作的说明性示例,并非一次真实记录的 Antigravity 运行。

1设计 Brief 与约束条件

Brief

设计一个三步式的团队产品注册流程:账户、工作区、邀请队友。在交接之前,请在集成浏览器中分别以桌面和手机宽度验证每一个步骤。

  • 设计系统OpenDesign 纸质画布 —— Albert Sans,单一绿色强调色
  • 断点1440px 桌面端,390px 移动端,且无横向滚动
  • 交互步骤导航、内联校验、跳过邀请的路径,以及键盘焦点顺序
  • 输出一个自包含的单一 HTML 文件,带有稳定的 data-od-id 钩子

2谁做什么:你、Antigravity 与 OpenDesign

  • 你

    你撰写需求简述、选择设计系统,并设定验收标准。

  • Antigravity

    Antigravity 规划布局,编写 HTML、CSS 和 JavaScript,然后按需修改。

  • OpenDesign

    OpenDesign 提供设计系统与技能,渲染预览,并将每个版本保存为项目文件。

  • 审查

    在交接之前,视觉层级、8px 网格上的间距、两个断点以及每一项交互都会接受检查。

3Antigravity 产物:1440px 与 390px 下的注册流程

Antigravity 产物:1440px 与 390px 下的注册流程 — 桌面端
示意性示例

4交付前审查

Layout

网格与间距

步骤条、表单和摘要均对齐 8px 网格;摘要的高度绝不超过表单。

Hierarchy

视觉层级

顺序依次读取为当前步骤、问题、字段;只有当前步骤带有强调色。

Responsive

移动端布局

在移动端,步骤条压缩为圆点并显示当前标签;摘要折叠为一行总计。

Interaction

交互检查

测试返回上一步、触发校验错误,以及跳过邀请步骤。

Fit

Antigravity 的用武之地 —— 以及不适用之处

Antigravity 适合的场景

  • 多模态截图 → UI。 借助 Gemini 3.x 的图像理解能力,一张参考图片会变成响应式标记,智能体会将其与原图进行核对。
  • 集成浏览器验证。 Antigravity 智能体驱动内置浏览器,跨断点渲染 UI,并将结果捕获为 Artifacts。
  • Editor View + Manager Surface。 在 Editor View 中亲手处理代码,或使用 Manager Surface 异步编排多个智能体。
  • 免费起步。 公开预览版对个人零收费,并通过 Google 账号提供慷慨的 Gemini 3.x 速率限制。

选择其他工作流的场景

  • 你需要可编辑的矢量文件。 Antigravity 的产物是 HTML,而不是可编辑的设计文档。若需要特定的素材格式,请另寻一套矢量工作流。
  • 你既没有参考,也没有约束。 没有设计系统或示例时,输出往往偏向泛泛的外观;先从撰写需求简述开始。
  • 你缺少该智能体所需的凭据。 需要:Google 账号(个人 Gmail),在公开预览版中免费。OpenDesign 既不提供也不代理凭据。
  • 你的团队使用 Cursor 或 Kiro。 这些智能体各有自己的页面;设置因智能体而异。参见 相关智能体。

兼容性

开始使用 Antigravity 前的要求

本页面介绍通过 OpenDesign 桌面应用连接的 Antigravity。参考资料核查于 2026 年 9 月 6 日。

工具范围Antigravity,由 Google 出品

Antigravity 是 Google 的智能体优先开发平台:一个 AI 驱动的 IDE,其中的自主智能体在编辑器、终端和集成浏览器中操作。它与 Gemini 3 一同进入公开预览。这里的重点是通过 OpenDesign 用 Antigravity 设计界面,而不是 Antigravity 自身的界面。OpenDesign 的 设置说明 列出了可用的智能体。

账户与身份验证Google 账号(个人 Gmail),免费期间

公开预览版。使用 Google 账号进行身份验证 —— 凭据保留在你的机器上。本页面不承诺任何配额或价格。

系统与版本桌面应用或源码

对于桌面版构建,请查阅下载页面。源码快速入门中的 Node.js 和 pnpm 要求,在从源码运行时才重要,而安装桌面安装包时则不然。最低兼容的 Antigravity 版本:此处未经验证。

连接检查成功的标志

使用你所安装版本显示的连接说明,然后尝试一个小任务。确认 Antigravity 处理了该任务,且产物可以打开。仅仅下载本身并不能证明连接可用。

从桌面应用开始

三步完成 Antigravity 设置

从下载开始,完成你所安装版本的 Antigravity 设置,然后测试一个小结果。遵循此路径不需要从源码构建 OpenDesign。

  1. 1

    下载 OpenDesign 桌面应用

    选择适合你机器的安装包,安装并启动应用。

    下载 OpenDesign
    检查点
    桌面应用可以打开。如果它已经安装,请继续下一步;无需再次下载。
  2. 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 设置说明;请在厂商文档中核实当前命令。

    检查点
    确认你打算使用的智能体和账号。如果其中任一不可用,请在尝试更大的任务之前先查阅兼容性说明。
  3. 3

    运行一个小型 Antigravity 任务

    把初始需求简述保持在小规模,这样你才能评判完整闭环,包括一次修改。

    入门 brief

    构建一个设置页面,包含个人资料表单和保存确认。应用我的设计规则。在桌面和移动宽度下验证它。

    检查点
    打开结果,测试保存状态,并要求做一处具体修改。生成只是开始审阅;它并不完成审阅。

如果你想从源码运行 OpenDesign,请改用 技术快速入门。

Antigravity 设计工作流

Antigravity 的五阶段设计闭环

一个注册流程任务,从最初的需求简述一路追踪到经过检查的 HTML 产物。每个阶段包括:你的输入、Antigravity 的动作、OpenDesign 的角色,以及仍由你负责的检查。

  1. 1

    设计 Brief

    三到六句平实的话。说明这个界面服务于谁、它必须达成什么,以及哪些平台重要。

    • 您起草需求简述。如果有参考截图,请附上。
    • Antigravity解析需求简述以及项目指令文件,并就任何含糊之处提问。
    • OpenDesign提供项目、提示界面,以及与该产物类型相匹配的技能。
    • 检查确保需求简述明确写出验收标准。在生成之前敲定它们,比事后补救代价更低。
  2. 2

    设计约束

    一套设计系统,加上一小份不可妥协的清单。这就是品牌专属作品与默认外观之间的分界线。

    • 您选择一套设计系统,指明断点,并列出必须出现的组件。
    • Antigravity在写下任何一行之前,先将 DESIGN.md 的 token 和姿态规则载入上下文。
    • OpenDesign提供设计系统库,并将你的选择绑定到技能模板中。
    • 检查检查 token 是否与品牌相符:单一强调色、正确的字体、正确的圆角。
  3. 3

    生成界面

    Antigravity 产出一个自包含的 HTML 文件 —— 其中包含布局、样式、交互和稳定的钩子。

    • 您等待,除非 Antigravity 提出澄清性问题。没有什么需要配置的。
    • Antigravity规划各个区块,编写 HTML、CSS 和 JavaScript,然后运行文件并修复失败之处。
    • OpenDesign将工件写入项目文件夹并为其建立索引,以便可以预览。
    • 检查还没有。评估渲染后的文件,而不是源文件。
  4. 4

    预览

    OpenDesign 按你指定的宽度渲染文件。设计真正被评判的正是这一点。

    • 你更改宽度,测试交互,并直接在元素上评论。
    • Antigravity收集你的预览评论并准备下一版修订。
    • OpenDesign提供预览渲染并暴露 data-od-id 目标,以便评论和编辑可以附加。
    • 检查检查层级、对比度、390px 下的溢出、焦点状态,以及强调色是否被克制使用。
  5. 5

    修订与验证

    指向预览元素以请求更改。每次修订都会以新文件形式送达,因此没有任何内容会被无痕覆盖。

    • 你将评论转化为具体请求,并决定任务何时完成。
    • Antigravity就地应用请求的更改并重新运行文件。
    • OpenDesign将各个版本并排保留,并在完成后导出图像或 HTML。
    • 检查先仅重新检查更改区域,然后在每个断点处完整检查整个页面一次。

资源

Antigravity 设计资源

限制

Antigravity 的限制、手动检查和回退路径

  • 范围这里的覆盖范围是 Antigravity 作为接入 OpenDesign 的代理,而不是整个 Antigravity 功能集。
  • 使用限额使用限制和成本取决于你带入的凭据(Google 账户(个人 Gmail),在公开预览中免费)。本页不主张免费配额。
  • 网络本地项目文件并不意味着离线推理。在输入敏感信息之前,请检查你的代理的提供商设置和数据政策。
  • 输出为 HTML这些工件是 HTML 文件,而不是矢量设计文档。
  • 人工审查你在预览中审查可访问性、真实内容、品牌契合度和交互正确性。任何代理自检都只是第一遍。
  • 后备方案当代理不可用或任务失败时,请查阅你所安装版本的连接说明和身份验证。在更改配置之前,保留错误信息和最后可用的工件。

常见问题

关于 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 究竟是什么
Antigravity 是 Google 的智能体优先(agent-first)开发平台 —— 一个由 AI 驱动的 IDE,其设计宗旨是让自主智能体、而非侧边栏聊天机器人来完成工作。它于 2025 年 11 月 18 日与 Gemini 3 一同发布,公开预览期间面向个人用户免费开放,让你可以把复杂的多工具软件任务委托给一个在编辑器、终端和集成浏览器中协同运作的智能体。它的智能体主要运行在 Google 的多模态 Gemini 3.x 模型之上。

在设计工作方面,三个特性尤为突出。由于 Gemini 3.x 原生多模态,智能体能够读取截图并针对实际布局进行推理。它能驱动真实浏览器,因此可以渲染并验证自己构建的内容。它还会呈现 Artifacts —— 任务列表、计划、截图和浏览器录屏 —— 让你审查切实可见的产出,而不是原始的工具日志。

编辑器视图 + 管理界面:编辑器视图是一个熟悉的 AI IDE,具备标签页补全和内联命令;管理界面则让你可以派生、编排并观察多个智能体在各工作区中异步协作 —— 这是运行长时间设计任务的天然场所。

集成浏览器 + Artifacts:智能体可以在内置浏览器中操作,并产出 Artifacts(截图、浏览器录屏、任务列表、计划),你可以对其留下反馈 —— 验证闭环内建于平台之中,而非事后拼装。

免费起步:使用个人 Google 账号登录即可在 Gemini 3.x 上获得宽松的速率限额;该平台可在 macOS、Windows 和 Linux 上运行。

凭据:Google 账号(个人 Gmail),公开预览期间免费

二进制:通过 agy 启动;可在 macOS、Windows 和 Linux 上运行

厂商:Google
为什么多模态 Gemini 和内置浏览器契合设计工作
Antigravity 在设计上的优势来自模型与平台的结合 —— 但正如任何智能体一样,品味仍然必须由人来提供。

强大的多模态理解:由于 Gemini 3.x 原生多模态,智能体能够很好地读取参考截图 —— 将自身渲染的产出与图像比对,而不是凭文字描述去猜测。

用于验证的集成浏览器:智能体驱动真实浏览器,因此能渲染 UI、跨状态检查,并捕捉断裂的布局 —— 同时把结果捕获为可审查的浏览器录屏 Artifact。

智能体会读取的约定:把你的 token、组件和评审规则编码进智能体的项目上下文,让它依照你的品牌而非默认外观来工作。

品味来自你提供的三类输入:一套设计系统、一项 skill 和真实的参考图。

这堂课每个智能体都在教:Antigravity 默认并没有品味。当你给它约束 —— 一套设计系统、一项审美 skill 和具体参考 —— 它才能产出好的设计。OpenDesign 恰好把这些输入打包好了,这也是二者契合的原因(详见下文)。
从零开始为设计工作设置 Antigravity
以下是从一台干净的机器到拥有一个能够构建并验证 UI 的 Antigravity 智能体的完整路径。预览期间应用内的具体菜单可能会有变动,因此这里保持在你可以依赖的层面。

配置顺序:下载 → 用 Google 登录 → 打开你的项目 → 添加设计规则和一项 skill → 使用集成浏览器进行验证。

编码你的设计规则:把你的 token、基础组件和约定放进智能体的项目上下文,让产出符合品牌,而不是退回到通用外观。

使用集成浏览器:让智能体在 Antigravity 的内置浏览器中渲染,并跨断点检查其产出 —— 验证 UI 看起来正确,而不仅仅是构建通过。

关于命令和特定版本的细节请参阅当前的配置章节,这些内容可能会变化。

# 1. 为你的操作系统下载 Antigravity(macOS、Windows、Linux) # 从官方下载页面:antigravity.google/download # 2. 启动并登录 agy # 打开 Antigravity;使用你的 Google 账号登录 # 3. 接受数据使用政策,选择一个主题,并打开你的项目文件夹 # 4. 在编辑器视图或管理界面中启动一个智能体任务, # 选择一个 Gemini 3.x 模型(例如 Gemini 3.1 Pro)
这是上一份指南中的历史命令示例;请在所链接的厂商文档中核实当前语法。
将截图转化为 UI:工作流
使用 Antigravity 最高杠杆的设计循环,是把一张参考图变成可运行、自适应的 UI,并不断迭代直至匹配 —— 依靠多模态模型把产出与参考比对,依靠集成浏览器进行验证。

从你手头最清晰的视觉参考开始 —— 并包含多种状态(桌面端和移动端、悬停、空状态、加载中),而不只是一张主视觉图。

提示词要具体;模糊的提示词即使在强模型下也只会产出通用 UI。

把你的设计系统和约定保留在智能体的项目上下文中,并告诉它 token 和规范基础组件位于何处。

让智能体在 Antigravity 的集成浏览器中渲染,调整尺寸到各个断点以检查结果。

通过让智能体把其实现与截图比对来进行迭代 —— 而不仅仅是确认它能构建 —— 并审查它产出的浏览器录屏和截图 Artifacts。

附上你的参考图并给出具体约束,然后让智能体在浏览器中验证:

保持提示词简短聚焦,提交好的迭代、回退差的迭代(回退时告知智能体),这样每一轮都建立在干净的基础上。

# 在 Antigravity 的智能体任务中,附上 reference-desktop.png 和 # reference-mobile.png,然后提示: 用 React + Vite + Tailwind + TypeScript 实现这个设计。 复用我现有的设计系统组件和 token。 匹配间距、布局和层级;让它自适应。 在集成浏览器中渲染并迭代,直到它在各断点上 与参考一致,并把截图展示给我。
这是上一份指南中的历史命令示例;请在所链接的厂商文档中核实当前语法。
智能体上下文、工具与 Artifacts
三个扩展点让 Antigravity 适用于持续的设计工作,而且这三者都能干净地映射到开放式设计工作流上。

项目上下文:持久化项目规则是设计约定的长期归宿 —— 智能体在每个任务中都会读取其中的 token、基础组件和评审清单,从而让产出保持贴合品牌。

集成浏览器 + 终端:智能体在编辑器、终端和内置浏览器中协同操作,因此它们可以收集参考、运行开发服务器并验证渲染出的 UI,而无需离开平台。

你审查的 Artifacts:任务列表、实现计划、截图和浏览器录屏让智能体的工作变得可读;你在 Artifact 上留下反馈,智能体据此纳入修正。

这些是一套严肃设计循环所需的能力 —— 正是 OpenDesign 旨在统筹编排、而不是按项目重复造轮子的东西。
Antigravity、Codex、Claude Code、Cursor 和 Gemini CLI 用于设计:如何比较
设计工作没有唯一的赢家 —— 每个智能体各有不同的强项,经验丰富的团队会把它们叠加使用。一个公允的总结:

Antigravity —— 智能体优先的 IDE,配备多模态 Gemini 3.x、用于自我验证的集成浏览器,以及可审查的 Artifacts;预览期间免费 —— 异步多智能体构建,并内置对 UI 的浏览器验证

Codex —— 借助前端 skill 实现出色的视觉打磨;沙箱化异步构建 —— 委托式异步构建和可移植的 AGENTS.md 规则

Claude Code —— 具体的设计决策(十六进制色值、间距、字体)和具备代码库感知的 UX —— 前端推理与大上下文重构

Cursor —— 带实时预览和内联编辑的可视化「边构建边看」循环 —— IDE 内紧凑的迭代式 UI 观察工作

Gemini CLI —— 基于多模态 Gemini 的开源终端智能体,具备 1M token 上下文和免费额度 —— 截图密集型的终端工作,以及把整套设计系统保持在上下文中

社区反复得出的结论是:品味来自人类:若没有 skill、参考和约束,它们全都会退回到通用审美。这才是真正要解决的问题 —— 而它是设计工具形态的问题,不是模型形态的问题。

智能体 —— 设计强项 —— 最适合用于
常见陷阱与避免“AI 垃圾”外观
关于 AI 生成设计最常见的抱怨是它看起来千篇一律 —— 柔和的渐变、悬浮面板、过大的圆角、夸张的阴影,以及一种「一看就是 AI 做的」Inter 字体加紫色的调性。其他被报告的问题还包括移动端布局错乱以及指令渗入 UI 文案。这些都不是 Antigravity 独有的;它们是任何智能体在没有精心策划的设计上下文下运行时会出现的状况。

添加一项审美 skill:一项精心策划的设计 skill 会迫使智能体确定一个真实的风格方向,而不是默认外观。

在集成浏览器中验证:利用多模态模型和 Antigravity 的内置浏览器跨断点渲染并自查,这样布局就不会在移动端悄悄断裂。

提供 token 和参考:真实的设计 token 和参考截图是对产出质量影响最大的单一杠杆。

把规则编码进项目上下文:把「不要主视觉卡片、最多两种字体、品牌优先的层级」这类规则放在智能体每个任务都会读取的地方。

请注意,每一项缓解措施都是关于给智能体一份精心策划的设计上下文。按项目手工维护这份上下文,正是 OpenDesign 消除的苦差事。
在 OpenDesign 内使用 Antigravity 进行设计
OpenDesign 正是上述工作流一直在呼唤的开源设计层。它把 Antigravity 当作一等适配器,并将其包裹在精心策划的 skill 和设计系统库、结构化的渲染管线以及本地桌面 UI 之中 —— 因此让 Antigravity 表现出色的设计上下文从第一次运行起就在那里,而无需每次手工拼装。OpenDesign 是开源且本地优先的,这让二者的搭配浑然天成。

安装 OpenDesign 并选择 Antigravity 作为你的智能体。

使用你的 Google 账号进行认证 —— 凭据保留在你的机器上,绝不经过我们代理。

挑选一套设计系统和一项 skill,然后以一致的品味生成演示文稿、原型和落地页。

每一份产物和 DESIGN.md 文件都存放在你自己的仓库中,而不是托管云上。

同样的 Antigravity 智能体,同样的 Google 账号 —— 外加围绕它的一套真实、可移植、开源的设计工作流。OpenDesign 是本地优先且采用 Apache-2.0 许可,因此你的工作和凭据不会有任何东西离开你的机器。
OpenDesign 与 Google 有任何关联吗?
没有。OpenDesign 是独立的;Antigravity 和 Gemini 是 Google 的商标。