1. 簡介
在本程式碼研究室中，您將透過 AI 輔助設計與以代理程式為優先的開發環境，建構可部署於正式環境的網站。您將使用 Google Stitch 生成高擬真度 UI，然後透過 Model Context Protocol (MCP) 將其連線至 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 以上版本)
事前準備
- 在 Google Cloud 控制台的專案選取器頁面中，選取或建立 Google Cloud 專案。
- 確認 Cloud 專案已啟用計費功能。瞭解如何檢查專案是否已啟用計費功能。
Google Cloud 抵免額：如要透過 Google Cloud 專案使用 Antigravity，請透過這個連結兌換免費的 Google Cloud 抵免額。請按照這裡的操作說明啟用抵免額並建立新專案。
- 前往 stitch.withgoogle.com，確認可以登入。
- 確認已安裝 Antigravity IDE (可前往 antigravity.google 安裝)。
2. 在 Google Stitch 中建立設計
代理程式需要遵循視覺「真實來源」。編寫程式碼前，我們必須先定義美學。
- 存取平台：前往 stitch.withgoogle.com。
- 選取專案類型：在主要資訊主頁上，找到「開始新設計」切換按鈕。按一下「網頁」，確保設計已針對瀏覽器版面配置進行最佳化。
- 選擇模型：按一下提示方塊內的模型下拉式選單 (目前顯示 3.0 Flash)。請務必選取 Gemini 3，以取得最先進的推理和版面配置生成功能。
- 描述你的構想：在標示為「描述你的設計」的文字區域中，輸入提示：
「為名為 LaunchPad 的太空科技新創公司設計現代化的軟體即服務 (SaaS) 到達網頁。使用午夜藍和霓虹紫的色調。加入主要內容區塊，內含「開始使用」按鈕、3 欄功能格線，以及玻璃擬物化定價表。" 5. 生成：點選「箭頭」圖示 (模型選取器旁邊) 開始生成程序。6. 調整及命名：使用者介面生成後，請在頂端標題中為專案命名。呼叫 LaunchPad。您可以在 IDE 之前使用對話側欄，調整任何特定元素。
[!TIP] 你也可以從
「試試這些提示」
章節，快速瞭解相關資訊。
3. 設定 Antigravity MCP
如要讓 Antigravity Agent「讀取」設計，您必須產生安全的 API 金鑰，並新增 Stitch MCP 伺服器。
產生 Stitch API 金鑰
- 在 Google Stitch 中，按一下右上角的個人資料相片。
- 從下拉式選單中選取「Stitch 設定」。
- 前往「API 金鑰」部分。
- 按一下「建立金鑰」按鈕。
- 複製金鑰：立即複製產生的金鑰並妥善保存。下一個步驟會用到這項資訊。
在 Antigravity 中設定 Stitch MCP
- 開啟 Antigravity IDE。
- 開啟「代理程式管理工具」
隨時按下 CMD+E 鍵 (Mac) 或 CTRL+E 鍵 (Windows)，即可在代理程式管理員和編輯器之間切換，也可以透過選單列右上方的「開啟編輯器」和「開啟代理程式管理員」按鈕切換。。
- 按一下「+ 開啟工作區」。
如要在工作區內發起新對話，請選取「發起對話」分頁中的所需工作區，或按一下側欄中工作區名稱旁的加號按鈕。
- 按一下「Open New Workspace」(開啟新工作區)，然後命名工作區
LaunchPad-Project並選取本機目錄。這樣可確保 Agent 有特定的根資料夾來架構檔案，不會讓其他專案雜亂無章。
設定 Stitch MCP
- 在新的工作區中，返回「代理程式管理員」 (Mac 按下 CMD+E 鍵，Windows 按下 CTRL+E 鍵)，然後選取「MCP 伺服器」。
透過編輯器代理程式窗格頂端的「...」下拉式選單，開啟 MCP 商店。
Antigravity 支援 Model Context Protocol (MCP)，這項標準可讓編輯器安全地連結至本機工具、資料庫和外部服務。這項整合功能可為 AI 提供即時脈絡資訊，而不僅限於編輯器中開啟的檔案。
MCP 可做為 Antigravity 和 Google Stitch 之間的橋樑。Antigravity 不必手動匯出設計符記，也不必將十六進位代碼和版面配置中繼資料複製到編輯器，而是能透過 MCP 在需要時直接從 Stitch 專案擷取設計 DNA。
- 搜尋「Stitch」，然後按一下「安裝」。
- 系統提示時，請將 Stitch API 金鑰貼到設定欄位。
- 驗證：在代理程式即時通訊中輸入：
List my Stitch projects.如果傳回LaunchPad，表示您已準備就緒。
- 驗證：在 Agent 對話中輸入：
List my Stitch projects.。如果 Agent 傳回LaunchPad，表示橋接器已設定成功。
4. 擷取設計背景資訊
現在，代理程式需要擷取設計中繼資料，確保程式碼準確無誤。
- 在 Antigravity 對話中輸入：「Use the Stitch MCP to fetch the ‘LaunchPad’ project. 擷取調色盤和字體排版，然後在我的根目錄中生成
DESIGN.md檔案。 - 檢查：開啟新建立的
DESIGN.md，查看代理程式擷取的十六進位碼和版面配置規則。
5. 實作 (建構)
使用代理程式將設計轉換為可運作的 React 應用程式。
- 提供「建立」提示：
「我想立即建構這個完整網站。使用 React 和 Tailwind CSS。確保元件是模組化。完成後，請執行開發伺服器，並在整合式瀏覽器中向我展示。」2. 觀察代理：代理會在終端機中搭建專案架構、在編輯器中編寫元件，並在整合式瀏覽器中開啟預覽畫面。
6. 檢查及修正
驗證輸出內容，並使用代理程式修正任何視覺差異。
- 比較整合式瀏覽器輸出內容與原始 Stitch 設計。
- 如有任何元素 (例如按鈕邊框間距或字體粗細) 不符，請提示代理程式：「『開始使用』按鈕的邊框間距略有差異。請參閱 Stitch 設計並更新 Tailwind 類別。」
- 代理程式會重新擷取設計內容，並立即套用修正。
7. 摘要與後續行動
恭喜！您已成功使用 Antigravity 和 Stitch MCP，縮小高保真設計與實用程式碼之間的差距。
您所做事項的摘要：
- 使用 Gemini 3 在 Stitch 中設計 UI。
- 產生安全的 API 金鑰，並設定 Antigravity MCP。
- 使用自主代理程式建構及驗證 React + Tailwind 網站。