使用 Antigravity 和 Stitch MCP 將設計稿轉換為程式碼

1. 簡介

在本程式碼研究室中，您將結合 AI 輔助設計和代理優先開發環境，建構可部署於正式環境的網站。您將使用 Google Stitch 生成細緻的 UI，然後透過 Model Context Protocol (MCP) 將 UI 連線至 Antigravity IDE。最後，您將使用自主代理擷取「設計 DNA」，並實作像素完美的 React 應用程式。

執行步驟

  • 在 Stitch 中生成 UI：在 Google Stitch 中使用自然語言建立完整網頁設計。
  • 透過 MCP 橋接：使用 Model Context Protocol 將 Antigravity 連線至 Stitch 專案。
  • 自主實作：使用 Antigravity 的「代理程式分頁」，擷取設計權杖並搭建 React/Tailwind 專案。
  • 驗證及修正：使用整合式瀏覽器，根據原始設計「檢查」程式碼。

課程內容

  • 如何使用 Google Stitch 快速設計高保真 UI 原型。
  • 如何在 Antigravity IDE 中設定 MCP 伺服器。
  • 如何使用自主代理程式，將視覺設計中繼資料轉換為模組化程式碼。

軟硬體需求

  • Chrome 網路瀏覽器
  • 已安裝 Antigravity IDE
  • Google Stitch 帳戶
  • Stitch API 金鑰
  • 在本機安裝 Node.js (v18 以上版本)

事前準備

  1. 在 Google Cloud 控制台的專案選取器頁面中，選取或建立 Google Cloud 專案。
  2. 確認 Cloud 專案已啟用計費功能。瞭解如何檢查專案是否已啟用計費功能。
  3. 前往 stitch.withgoogle.com，確認可以登入。
  4. 確認已安裝 Antigravity IDE (可前往 antigravity.google 安裝)。

2. 在 Google Stitch 中建立設計

代理程式需要遵循視覺「事實來源」。編寫程式碼前，我們必須先定義美學。

  1. 存取平台：前往 stitch.withgoogle.com。
  2. 選取專案類型：在主要資訊主頁上，找到「開始新設計」切換按鈕。按一下「網頁」，確保設計已針對瀏覽器版面配置進行最佳化。
  3. 選擇模型：按一下提示詞輸入框中的模型下拉式選單 (目前顯示 3.0 Flash)。請務必選取「Gemini 3」，以取得最先進的進階推論和版面配置生成功能。
  4. 描述你的構想：在標示為「描述你的設計」的文字區域中，輸入提示：

「為名為 LaunchPad 的太空科技新創公司設計現代化 SaaS 到達網頁。使用午夜藍和霓虹紫調色盤。加入主要內容區塊，內含「開始使用」按鈕、3 欄功能格線和玻璃擬物化定價表。5. 生成：按一下箭頭圖示 (模型選取器旁)，開始生成程序。6. 調整及命名：使用者介面生成後，請在頂端標題中為專案命名。呼叫　LaunchPad。您可以在 IDE 之前使用對話側欄，微調任何特定元素。

ce283054cd30c7ab.png

[!TIP] 你也可以從

「試試這些提示」

章節，快速瞭解如何開始使用。

3. 設定 Antigravity MCP

如要讓 Antigravity Agent「讀取」設計，您必須產生安全的 API 金鑰，並新增 Stitch MCP 伺服器。

產生 Stitch API 金鑰

  1. 在 Google Stitch 中，按一下右上角的個人資料相片。
  2. 在下拉式選單中選取「Stitch 設定」。
  3. 前往「API 金鑰」部分。
  4. 按一下「建立金鑰」按鈕。
  5. 複製金鑰：立即複製產生的金鑰並妥善保存。下一個步驟會用到這項資訊。

36788921796d1e67.png

在 Antigravity 中設定 Stitch MCP

  1. 開啟 Antigravity IDE。
  2. 開啟「代理程式管理員」

隨時按下 CMD+E 鍵 (Mac) 或 CTRL+E 鍵 (Windows)，即可在「Agent Manager」和編輯器之間切換，或透過選單列右上方的「Open Editor」和「Open Agent Manager」按鈕切換。。

  1. 按一下「+ 開啟工作區」。

如要在工作區內發起新對話，請選取「發起對話」分頁中的所需工作區，或按一下側欄中工作區名稱旁的加號按鈕。

45e7241be5552e42.png

  1. 按一下「Open New Workspace」(開啟新工作區)，然後命名工作區 LaunchPad-Project 並選取本機目錄。這樣可確保 Agent 有特定的根資料夾可架構檔案，不會讓其他專案雜亂無章。

d84ba507939a5efc.png

設定 Stitch MCP

  1. 在新的工作區中，返回 Agent Manager (Mac 為 CMD+E 鍵，Windows 為 CTRL+E 鍵)，然後選取「MCP Servers」。

透過編輯器代理程式窗格頂端的「...」下拉式選單，開啟 MCP 商店。

b59dd8ef11d807f9.png

Antigravity 支援 Model Context Protocol (MCP)，這項標準可讓編輯器安全地連結至本機工具、資料庫和外部服務。這項整合功能可為 AI 提供即時脈絡，而不僅限於編輯器中開啟的檔案。

MCP 可做為 Antigravity 和 Google Stitch 之間的橋梁。Antigravity 不必手動匯出設計符記，也不必將十六進位代碼和版面配置中繼資料複製到編輯器，而是能透過 MCP 在需要時直接從 Stitch 專案擷取設計 DNA。

  1. 搜尋「Stitch」，然後按一下「安裝」。
  2. 系統提示時，請將 Stitch API 金鑰貼到設定欄位。
  3. 驗證：在代理程式即時通訊中輸入：List my Stitch projects.。如果傳回 LaunchPad，表示您已準備就緒。

e067eefacac21766.png

  1. 驗證：在 Agent 對話中輸入：List my Stitch projects.。如果 Agent 傳回 LaunchPad，表示橋接器已設定成功。

4dade2a8d2c8a9ea.png

4. 擷取設計背景資訊

現在，代理程式需要擷取設計中繼資料，確保程式碼準確無誤。

  1. 在 Antigravity 對話中輸入：「Use the Stitch MCP to fetch the ‘LaunchPad’ project. Extract the color palette and typography, then generate a DESIGN.md file in my root directory.
  2. 檢查：開啟新建立的 DESIGN.md，查看代理程式擷取的十六進位代碼和版面配置規則。

c472fdc2cc466bbb.png

5. 實作 (建構)

使用代理程式將設計稿翻譯成可運作的 React 應用程式。

  1. 提供「建立」提示：

「I want to build this full website now. 使用 React 和 Tailwind CSS。確保元件是模組化。完成後，請執行開發伺服器，並在整合式瀏覽器中向我展示。」2. 觀察代理：代理會在終端機中搭建專案架構、在編輯器中編寫元件，並在整合式瀏覽器中開啟預覽畫面。

6. 檢閱及修正

77bf3890cf221728.png

驗證輸出內容，並使用代理程式修正任何視覺差異。

  1. 比較整合式瀏覽器輸出內容與原始 Stitch 設計。
  2. 如有任何元素 (例如按鈕邊框間距或字體粗細) 不符，請提示代理程式：「『開始使用』按鈕的邊框間距略有差異。請參閱 Stitch 設計並更新 Tailwind 類別。」
  3. 代理程式會重新擷取設計內容，並立即套用修正。

7. 摘要與後續步驟

恭喜！您已成功使用 Antigravity 和 Stitch MCP，縮小高保真設計與實用程式碼集之間的落差。

您所執行的操作摘要：

  • 使用 Gemini 3 在 Stitch 中設計 UI。
  • 產生安全的 API 金鑰，並設定 Antigravity MCP。
  • 使用自主代理程式建構及驗證 React + Tailwind 網站。