用 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 伺服器中轉。