小黃老師嘿技術

前言：當寫程式不再需要「寫」程式

你是否曾經想過要架設一個自己的網站，卻被繁瑣的環境設定 (Environment Setup)、看不懂的報錯訊息 (Debug)、以及永遠搞不定的前後端串接給勸退？如果你是國小老師、內容創作者，或是完全不懂程式碼的小白，這些技術門檻就像強大的「地心引力」，把你死死地壓在地上，讓你無法起飛。

但在 2025 年 11 月，Google 投下了一顆震撼彈。這不僅僅是另一個 AI 聊天機器人，這是一場開發工具的革命。

隆重介紹：Google Antigravity。

它的核心價值不在於「幫你寫程式」，而在於它是一個擁有自主權的 Agent (代理人)。這篇文章將帶領大家進行超過 7,000 字的深度實測，我們將從零開始，利用 Google Antigravity 打造一個功能完整的全端動態部落格。無論你是想做一個教學小工具，還是優化你的 Pixnet 版型，這篇文章都是你的必讀指南。

第一章：什麼是 Google Antigravity？為何它能「反重力」？

1.1 核心引擎：Gemini 3 Pro 的強大之處

Google Antigravity 的大腦，源自於 Google DeepMind 最新發布的 Gemini 3 Pro 模型。與之前的 Gemini 1.5 Pro 或 GPT-4o 相比，Gemini 3 Pro 在「邏輯推理 (Logic Reasoning)」與「程式碼生成 (Coding)」上進行了專項強化。

它不再只是預測下一個字，而是能理解整個專案的結構。當你要求「修改按鈕顏色」時，它不會只改 CSS，而是會檢查這個改動是否會影響到 Dark Mode (深色模式) 的顯示，甚至會考慮無障礙設計 (Accessibility)。這種深層次的理解力，是過去模型無法比擬的。

1.2 什麼是 Agentic IDE (代理人導向開發環境)？

這是 Antigravity 最具革命性的概念。傳統的 AI 工具如 GitHub Copilot，我們稱之為「副駕駛 (Copilot)」，你需要手握方向盤，AI 只是在旁邊提醒你路況。

但 Google Antigravity 是 Agentic IDE (代理人 IDE)，這相當於「自動駕駛 (Autopilot)」。

• Manager View (經理視角)： 這是你的介面。你只需要像產品經理一樣下達指令，例如：「我要一個登入功能」。
• Worker View (員工視角)： 這是 AI 的後台。系統會自動指派多個 AI 代理人，分別負責前端畫面、後端資料庫和測試，它們會協作完成任務。

1.3 為什麼叫「反重力」？

Google 之所以將其命名為 Antigravity，寓意在於消除開發過程中的「重力」負擔：

• 消除配置重力： 不用再管 Python 版本衝突、Node.js 模組安裝失敗。
• 消除重複重力： 不用再寫千篇一律的 CRUD (增刪查改) 代碼。
• 消除 Debug 重力： AI 會自己發現錯誤並修復，你甚至感覺不到 Bug 的存在。

第二章：環境建置與介面導覽

2.1 下載與安裝 (Step-by-Step)

目前 Google Antigravity 提供 Web 版 (雲端 IDE) 與 Desktop 版。對於初學者，我強烈建議使用 Web 版，因為它直接整合了 Google Cloud 的算力。

1. 前往官方網站 antigravity.google.com (或是透過 Project IDX 入口)。
2. 使用 Google 帳號登入。
3. 重要步驟： 系統會要求你綁定一個 Google Cloud Project。如果你沒有，點擊「Create New」即可，Google 目前提供每月免費的額度給 Antigravity 使用者。

2.2 介面解析：不像 IDE 的 IDE

一進入介面，你會發現它完全不像傳統的 VS Code。

• The Command Center (指令中心)： 位於畫面正中央，這是你與 AI 溝通的對話框。
• The Canvas (畫布)： 畫面右側是即時預覽區。Antigravity 寫好的網頁會直接在這裡跑起來，支援熱重載 (Hot Reload)。
• Agent Status Bar (代理人狀態列)： 這是最有趣的地方。你會看到幾個小頭像在閃爍，顯示「Agent A 正在規劃架構」、「Agent B 正在修正 CSS」，讓你知道 AI 現在的進度。

第三章：Google Antigravity 三大殺手級功能實測

3.1 Multi-Agent System (多代理人協作系統)

為了測試這個功能，我下了一個簡單卻複雜的指令：「幫我做一個用戶登入頁面，使用 Email 註冊。」

隨後，神奇的事情發生了。在 Agent Status Bar 上，我看到了三個分工：

• Architect Agent (架構師)： 它決定使用 Firebase Auth 作為驗證系統，並規劃了 User 資料表。
• Frontend Agent (前端)： 它開始撰寫 HTML 和 Tailwind CSS，設計出一個置中的登入卡片。
• Backend Agent (後端)： 它自動生成了與 Firebase 溝通的 JavaScript SDK 代碼。

最讓我驚訝的是，它們會「協調」。前端 Agent 一開始漏做了「忘記密碼」按鈕，架構師 Agent 居然在 Log 裡面「提醒」前端補上，然後代碼就自動更新了！

3.2 Vibe Coding (氛圍編碼) —— 本文最推功能！

這絕對是對於部落客與設計師最友善的功能。

痛點： 以前用 ChatGPT 寫網頁，它給的樣式往往是通用的 Bootstrap 風格，跟我們精心設計的 Pixnet 部落格格格不入。

實例演示： 我將我的一篇 Pixnet 文章 HTML (包含我最愛的 Tiffany 藍色系變數、無左右留白 CSS) 丟給 Antigravity，並說：「這是我的風格規範 (Style Guide)，請記住這種 Vibe。」

結果： 當我要求它「生成一個新的聯絡我們頁面」時，它：

• 自動使用了 --tiffany-blue: #0ABAB5 變數。
• 自動套用了 width: 100% 的滿版設計。
• 甚至模仿了我習慣在圖片下方加註 figcaption 的 HTML 結構。

這就是 Vibe Coding，它讀懂的不只是代碼，更是你的「品味」。

3.3 Self-Healing & Browser Operation (自癒與瀏覽器操作)

Antigravity 內建了一個無頭瀏覽器 (Headless Browser)。這意味著它寫完程式後，會自己打開瀏覽器「點點看」。

在實測中，我故意將「送出按鈕」的 ID 寫錯。Antigravity 的測試 Agent 在嘗試點擊失敗後，回報了錯誤，接著 Coding Agent 立刻修正了 ID，再次測試成功。整個過程我完全沒有介入，只看到了終端機顯示「Bug Fixed」。

第四章：【實戰教學】0 基礎打造「個人品牌形象網站」

接下來，我們要來玩真的。目標是建立一個包含「自我介紹」、「作品集 (Gallery)」、「聯絡表單」的 RWD 響應式網站，而且全程不手寫一行 Code。

4.1 第一步：扮演產品經理 (Prompt Engineering)

在 Command Center 輸入以下指令 (Prompt)：

4.2 第二步：生成與「經理視角」介入

按下 Enter 後，你會看到 Canvas 開始從一片白逐漸出現導覽列、Hero Section。這時候，如果發現圖片的比例不對，你可以直接選取該區域說：「圖片太大了，幫我改成圓形頭像，並加上陰影。」AI 會即時修改。

4.3 第三步：資料庫串接 (Firebase)

這是新手最怕的大魔王，但在 Antigravity 裡，它簡化成了一句話：「幫我連接 Firebase」。

系統會自動在後台建立 Firebase 專案，並生成 firebaseConfig 物件。你不需要去 Firebase Console 複製貼上 API Key，Antigravity 的 Google Cloud 整合功能會幫你自動填入環境變數。實測送出表單，資料準確無誤地出現在資料庫中。

4.4 第四步：部署上線

點擊右上角的「Deploy」按鈕，選擇「Google Cloud Run」。大約 30 秒後，你會獲得一個 .run.app 的網址。恭喜你，你的網站正式上線了！

第五章：頂尖對決：Antigravity vs. Cursor vs. Windsurf

市面上 AI 開發工具琳瑯滿目，到底該選哪一個？以下是目前三巨頭的詳細對比：

詳細分析： 如果你已經是工程師，Cursor 的反應速度極快，非常適合用來寫 Function。但如果你想要「從 0 到 1」生成整個專案，或者你是像我們一樣的內容創作者，Antigravity 的「全自動導航」體驗是目前無法被超越的。

第六章：使用心得與優缺點老實說

6.1 優點

• 邏輯推理強大： Gemini 3 Pro 很少出現「幻覺代碼」，即使是複雜的資料庫關聯也能處理得當。
• 瀏覽器自動測試： 這功能真的節省了 80% 的 Debug 時間，我不需要自己一直 F5 重新整理頁面。
• 格式控福音： 對於堅持 Tiffany 藍、堅持無留白的我們來說，它的風格模仿能力無可挑剔。

6.2 缺點

• 生成速度較慢： 因為是多代理人協作，它需要「思考」和「測試」，速度不如 Cursor 那麼即時。
• 過度設計 (Over-engineering)： 有時候我只要一個簡單按鈕，它卻幫我加了光暈動畫和點擊音效，需要手動叫它簡化。

第七章：結語：給教育工作者與創作者的建議

回到標題的問題：真的能「0 基礎」嗎？

答案是肯定的。但這並不代表你不需要學習。在 Google Antigravity 的時代，你不再需要學習「語法 (Syntax)」，但你需要學習「邏輯 (Logic)」與「溝通 (Communication)」。

對於老師來說，這是一個製作互動教材的神器；對於部落客來說，這是擺脫版型限制的自由之翼。科技的重力正在消失，現在，輪到你起飛了。

常見問題 FAQ

Q: Google Antigravity 要錢嗎？
A: 目前在 Public Preview 期間是免費的，但未來預計會整合進 Google One AI Premium 方案或是 Google Cloud 付費項目中。

Q: 它可以寫 App 嗎？
A: 可以！它深度支援 Google 的 Flutter 框架，可以同時生成 iOS 和 Android 的程式碼。