用 Antigravity 做设计。

Antigravity 究竟是什么

Antigravity 是 Google 的 agent 优先开发平台——一个为自主 agent（而非侧边栏聊天机器人）干活而打造的 AI 驱动 IDE。它于 2025 年 11 月 18 日与 Gemini 3 一同发布，并在公开预览阶段面向个人免费开放，让你能把复杂的、跨多种工具的软件任务委托给一个跨编辑器、终端和集成浏览器运作的 agent。它的 agent 主要运行在 Google 的多模态 Gemini 3.x 模型上。

对于设计工作来说，有三点尤为突出。它的 agent 能读取截图并对真实布局进行推理，因为 Gemini 3.x 是原生多模态的。它能操控一个真实的浏览器，因此会渲染并验证自己构建的成果。它还会呈现 Artifacts——任务清单、方案、截图和浏览器录制——让你审阅的是看得见摸得着的产出，而非原始的工具日志。

• 编辑器视图 + 管理面板: 编辑器视图是一个熟悉的 AI IDE，带有 Tab 补全和内联命令；管理面板让你能跨工作区生成、编排并观察多个异步工作的 agent——是跑一个长时设计任务的理想之处。
• 集成浏览器 + Artifacts: Agent 可以在内置浏览器中操作，并产出你可以留下反馈的 Artifacts（截图、浏览器录制、任务清单、方案）——一套内建于平台、而非事后拼接上去的验证闭环。
• 免费上手: 用个人 Google 账号登录即可获得 Gemini 3.x 的宽松速率限额；该平台可在 macOS、Windows 和 Linux 上运行。

• 厂商：Google
• 凭证：Google 账号（个人 Gmail），公开预览期间免费
• 可执行文件：用 agy 启动；可在 macOS、Windows 和 Linux 上运行

为什么多模态 Gemini 和内置浏览器适合设计

Antigravity 的设计优势来自模型与平台的合力——但和每一个 agent 一样，品味仍然得由你来提供。

• 强大的多模态理解: 由于 Gemini 3.x 是原生多模态的，agent 能很好地读懂参考截图——把自己渲染出的成果与一张图片对照，而不是从一段文字描述里猜。
• 用集成浏览器来验证: Agent 操控一个真实的浏览器，因此会渲染 UI、跨各种状态检查它、揪出错乱的布局——并把结果捕获为一段你可以审阅的浏览器录制 Artifact。
• agent 会读取的规范: 把你的 tokens、组件和审阅规则写进 agent 的项目上下文，让它对照你的品牌来工作，而不是套用一套默认观感。

这条经验和每一个 agent 教给我们的一样：Antigravity 默认并不具备品味。当你给它约束——一套设计系统、一个审美 skill 和具体的参考图——它就能产出优秀的设计。Open Design 恰恰把这些输入打包好了，这正是两者契合的原因（下文详述）。

从零开始为设计工作搭建 Antigravity

下面是从一台干净的机器到一个能构建并验证 UI 的 Antigravity agent 的完整路径。预览期间应用内的具体菜单可能会变动，所以这里只讲你能放心依赖的层面。

# 1. 从官方下载页 antigravity.google/download
#    为你的操作系统（macOS、Windows、Linux）下载 Antigravity

# 2. 启动它并登录
agy               # 打开 Antigravity；用你的 Google 账号登录

# 3. 接受数据使用政策、选一个主题，并打开你的项目文件夹

# 4. 在编辑器视图或管理面板中启动一个 agent 任务，
#    选择一个 Gemini 3.x 模型（例如 Gemini 3.1 Pro）

• 编入你的设计规则: 把你的 tokens、基础组件和规范放进 agent 的项目上下文，让产出贴合一个品牌，而不是退回到一套千篇一律的观感。
• 使用集成浏览器: 让 agent 在 Antigravity 的内置浏览器中渲染，并跨各种断点检查产出——验证的是 UI 看起来是否正确，而不仅仅是构建有没有通过。

截图到 UI 的工作流

用 Antigravity 时最高杠杆的设计闭环，就是把一张参考图转化为可用的响应式 UI，并不断迭代直到吻合——靠多模态模型把产出与参考图对照，靠集成浏览器来验证它。

1. 从你手头最清晰的视觉参考出发——并纳入多种状态（桌面端和移动端、悬停、空态、加载态），而不只是一张大图。
2. 提示词要具体；含糊的提示词即便配上强力模型也只会产出千篇一律的 UI。
3. 把你的设计系统和规范留在 agent 的项目上下文里，并告诉它 tokens 和规范的基础组件在哪里。
4. 让 agent 在 Antigravity 的集成浏览器中渲染，并调整到各个断点来检查结果。
5. 通过让 agent 把自己的实现与截图对照来迭代——而不只是确认它能构建——并审阅它产出的浏览器录制和截图 Artifacts。

附上你的参考图、给出具体约束，然后让 agent 在浏览器里验证：

# 在一个 Antigravity agent 任务中，附上 reference-desktop.png 和
# reference-mobile.png，然后输入提示词：

用 React + Vite + Tailwind + TypeScript 实现这个设计。
复用我已有的设计系统组件和 tokens。
匹配间距、布局和层级；做成响应式。
在集成浏览器中渲染并迭代，直到它跨各个断点都与
参考图吻合，并把截图展示给我。

保持提示词小而聚焦，提交好的迭代、回退坏的迭代（回退时告诉 agent），这样每一轮都能在干净的基底上推进。

Agent 上下文、工具与 Artifacts

有三个扩展点让 Antigravity 适合持续的设计工作，而这三者都能干净利落地映射到一套开放的设计工作流上。

• 项目上下文: 持久化的项目规则是你设计规范的长久归宿——agent 在每个任务中都会读取的 tokens、基础组件和审阅清单，让产出始终贴合品牌。
• 集成浏览器 + 终端: Agent 跨编辑器、终端和内置浏览器操作，因此能收集参考、跑一个开发服务器，并验证渲染出的 UI，全程不必离开平台。
• 你来审阅的 Artifacts: 任务清单、实现方案、截图和浏览器录制让 agent 的工作清晰可读；你在 Artifact 上留下反馈，agent 据此吸收修正。

这些正是一套严肃的设计闭环所需的能力——也恰恰是 Open Design 被设计来编排（而非每个项目重新造一遍）的那类东西。

做设计时 Antigravity vs Codex vs Claude Code vs Cursor vs Gemini CLI

设计工作没有唯一赢家——每个 agent 各有所长，有经验的团队会把它们叠加使用。一个公允的总结：

社区反复得出的结论是：品味来自人——它们在没有 skill、参考和约束时都会退回到一套千篇一律的审美。这才是真正要解决的问题——而它是设计工具形态的，不是模型形态的。

常见坑，以及如何避免“AI 味”观感

对 AI 生成设计最常见的吐槽是它看起来千篇一律——柔和的渐变、悬浮的面板、过大的圆角、夸张的阴影，一股 Inter 字体配紫色、“一看就是 AI 做的”的味道。其他被反映的问题还包括移动端布局错乱，以及指令泄漏进 UI 文案。这些都不是 Antigravity 独有的；它们是任何 agent 在缺乏精选设计上下文时运行的必然结果。

• 加上一个审美 skill: 一个精选的设计 skill 会逼着 agent 确定一个真实的方向，而不是套用默认观感。
• 在集成浏览器中验证: 用多模态模型和 Antigravity 的内置浏览器跨各个断点渲染并自检，让布局不会在移动端悄无声息地崩掉。
• 提供 tokens 和参考: 真实的设计 tokens 和参考截图是撬动产出质量的最大单一杠杆。
• 把规则编入项目上下文: 把“不用大图卡片、最多两种字体、品牌优先的层级”这类风格规则，放在 agent 每个任务都会读到的地方。

注意，每一项缓解措施都是在给 agent 一份精选的设计上下文。逐个项目手工维护那份上下文，正是 Open Design 替你免去的苦活。

在 Open Design 中用 Antigravity 做设计

Open Design 正是上面那套工作流一再呼唤的开源设计层。它把 Antigravity 当作一等公民适配器，并用一套精选的 skill 与设计系统库、一条结构化的渲染流水线，以及一个本地桌面 UI 把它包起来——这样，让 Antigravity 变好的那份设计上下文从第一次运行起就在那儿，而不必每次都手工拼装。Open Design 是开源且本地优先的，这让这对搭档天然契合。

1. 安装 Open Design，并选择 Antigravity 作为你的 agent。
2. 用你的 Google 账号认证——凭证留在你的机器上，绝不经我们中转。
3. 挑一套设计系统和一个 skill，然后以一致的品味生成演示稿、原型和落地页。
4. 每一个 artifact 和 DESIGN.md 文件都存在你自己的仓库里，而非托管云端。

还是同一个 Antigravity agent、同一个 Google 账号——只是外面多了一套真实、可移植、开源的设计工作流。Open Design 本地优先且采用 Apache-2.0，因此你的工作或凭证没有任何东西会离开你的机器。

常见问题

1. 01 Antigravity 真的能做设计工作吗？ +

   能——只要上下文里有一个审美 skill、一套设计系统和真实的参考图，Antigravity 就能产出生产级的响应式 UI，而它多模态的 Gemini 3.x agent 会在集成浏览器中验证产出。缺了这份上下文，它就容易退回到一套千篇一律的观感，而这正是 Open Design 来填补的缺口。

2. 02 用 Antigravity 做设计需要付费吗？ +

   Antigravity 在公开预览阶段面向个人免费开放，用个人 Google 账号登录时可享 Gemini 3.x 的宽松速率限额。无论如何，Open Design 都绝不会中转你的凭证。

3. 03 Antigravity 具体为什么适合做设计？ +

   三点：它的 agent 运行在原生多模态、能很好读懂参考截图的 Gemini 3.x 模型上；它内置了一个 agent 可操控、用来验证 UI 的集成浏览器；它还会呈现 Artifacts——截图和浏览器录制——供你审阅。品味仍然来自你提供的设计系统、skill 和参考。

4. 04 前端设计该用 Antigravity 还是 Claude Code？ +

   两者都很强。Claude Code 以具体、理解代码库的设计决策见长；Antigravity 的优势在于它 agent 优先的平台——多模态 Gemini 3.x、用于验证的集成浏览器，以及可审阅的 Artifacts。许多团队两者并用——Open Design 让你能切换 agent 而无需改变你的设计工作流。

5. 05 我该如何验证 Antigravity 构建的成果？ +

   Antigravity 内置了一个 agent 可操控的集成浏览器，因此它们会渲染 UI、跨各个断点检查它，并把截图和浏览器录制捕获为 Artifacts。审阅这些 Artifacts——并让 agent 把自己的产出与你的参考对照——就是你让结果不偏离规范的方式。

6. 06 Open Design 与 Google 有关联吗？ +

   没有。Antigravity 是 Google 的产品；Open Design 是一个独立的开源项目，以一等公民适配器的形式支持它。Antigravity 和 Gemini 是 Google 的商标。

7. 07 我的文件和凭证安全吗？ +

   安全——Open Design 本地优先且采用 Apache-2.0。你的文件、artifact 和 DESIGN.md 都留在你自己的仓库里，而你的 Google 凭证由你的 agent 直接使用，绝不经由 Open Design 服务器中转。