---

🚀 我用 Google Antigravity 做了一個實驗：

讓 AI 自己做出一個完整的網站分析產品

過去一年，AI coding 工具越來越多: GitHub Copilot、Cursor、Replit、Claude Code…

但今天試了 Google 最新推出的 Antigravity IDE + Gemini 3，
我真心覺得：

這是我第一次看到「AI 能自己跑完整個專案」的工具。 不只是幫你寫 code，而是能用 Browser Agent 自己操作網站、測試、整合、驗證。

於是我做了一個小實驗：
我想看看 AI 能不能「自己」做出一個完整的工具。

結果，它真的做到了。

我將過程全部記錄下來，也做了一段完整操作影片。
這篇文章就是這個實驗的完整紀錄（含 Prompt 與規格）。

---

🎯 實驗目標：讓 AI 100% 自己完成一個產品

我的需求其實很簡單：

做一個能輸入網址 → 自動分析網站健康度 → 產生行銷/SEO報告的工具。

這包含：

• Performance 指標（TTFB / FCP / Load Time）
• SEO 基本檢查（Title / Meta / H1 / Alt）
• Screenshot 截圖
• AI Insights（自動生成診斷）
• Radar Chart
• Animated Score
• CTA/Conversion Risk
• Revenue Impact（根據速度預估流失營收）
• SERP 預覽
• CTR 建議（AI 生成標題/描述）
• Content Freshness & Decay
• 重複內容/Thin content 偵測

而我自己要做的事情只有：

✔ 準備 SPEC.md

✔ 給 Antigravity 第一串 Prompt
✔ 審查它的計畫
✔ 等它自己開始跑
✔ 看它完成整個產品
✔ 錄影 Browser Agent 的測試過程

真的就是這樣。

---

🧠 Antigravity 做了什麼？

它的 Browser Agent 做了以下事：

• 自動開瀏覽器
• 自己輸入我給的網址
• 自己分析 DOM
• 自己抓 Performance API
• 自己截圖
• 自己 highlight alt tags / H1
• 自己產 SSE JSON
• 自己更新 React 前端
• 自己建立 API
• 自己跑測試
• 自己產出 walkthrough 報告

你沒看錯，
整個產品是 Antigravity 自己寫、自己測、自己跑。

---

🎬 Demo：AI 自己操作 IDE、跑專案的畫面

---

🧩 我給 Antigravity 的初始 Prompt

下面這串 Prompt，就是讓 AI 自己跑完整開發的關鍵。

(你可以複製使用，開源參考)

你現在是一位資深 AI/ML 工程師，正在使用 Antigravity IDE，具備以下能力：

- 可以操作 editor、terminal、browser
- 可以規劃並拆解任務給多個 agent
- 每個重要步驟都會產生 artifacts（計畫書、log、截圖）

我想開發一個獨立部署的 Web 工具，名稱暫定為「Site Health AI Auditor」，功能是：

1. 使用者在前端輸入一個網址（URL）
2. 後端啟動 headless browser，實際載入該頁面
3. 量測「頁面速度 / 渲染相關指標」，例如：
- 首次位元組時間（TTFB）
- 首次內容繪製（FCP）
- 主要內容載入（LCP，如果可行）
- DOMContentLoaded 時間
- 總載入時間（load event）

4. 同時做基本 SEO 檢查：
- 是否有 <title>，長度是否合理
- 是否有 <meta name="description">
- 是否有 <link rel="canonical">
- 是否有 <h1> 標題
- <img> 是否有 alt（統計缺少 alt 的張數即可）

5. 擷取該頁面截圖
6. 回傳一份 JSON 結果給前端，包含：
- performance 指標（數值）
- SEO 檢查結果（boolean + 建議文字）
- 截圖 URL（或 base64 placeholder，之後可換成實際檔案）
7. 前端 UI 將這些結果可視化：
- 一張網站縮圖（截圖）
- 一個「Performance / Speed」區塊（數值＋簡短文字描述）
- 一個「SEO 健康報告」區塊（用卡片或列表展示缺失與建議）

請你：
1. 先在 repo 中建立一份 SPEC.md，整理這個工具的需求與架構設計，包含：
- 技術選型（建議使用 TypeScript + Node.js + React；headless browser 可用 Playwright 或 Puppeteer，請你自行選擇一個並說明原因）
- 專案目錄結構（frontend / backend 或 monorepo）的規劃
- 後端 API 設計（至少一個 /api/audit endpoint）
- 前端畫面構成與資料流

2. 完成 SPEC.md 後，向我簡短說明你的設計，再自行開始實作：
- 建立專案骨架
- 實作後端 audit 邏輯（headless browser 開啟 URL、量測指標、檢查 DOM、輸出 JSON）
- 實作前端輸入 URL + 顯示結果的 UI
- 在 terminal 中跑必要的測試或試跑，確保至少一個 demo URL 可以成功返回結果

3. 在實作過程中：
- 把每一階段的計畫、重要決策、測試結果，整理成 artifacts
- 優先讓專案可以在本機 npm install && npm run dev 或類似指令下就跑起來

4. 如果有不確定的細節，請先依照你認為對一般 Web app 最合理的做法自己假設，不要一直停下來問問題。

最後目標：
- 我可以在本機啟動這個專案（前後端），打開瀏覽器輸入一個網址，就能看到：
  - 該頁面的截圖
  - 一組基本的 Performance 指標
  - 一份 SEO 基本健康檢查報告。

先從撰寫 SPEC.md 開始，寫好後展示內容給我，接著再開始依照 spec 實作。

---

🏗️ 專案成果：Site Health AI Auditor

下面是 AI 為我產生的工具界面：

---

🌐 1. Overall Score（整體健康度）

• Performance: xx
• SEO: xx
• Overall Score: xx
  （以動畫呈現）

---

🔍 2. Advanced Marketing Insights（AI 行銷洞察）

✔ SERP Preview

模擬 Google 搜尋結果上你的頁面會怎麼呈現：

• title 長度是否會被截斷
• meta description 是否太短/太長
• favicon 是否有成功讀

✔ Revenue Impact

根據 Load Time 推估：

「可能導致每月少多少營收」

非常打到電商痛點。

✔ Content Freshness

抓出：

• 文章最後更新時間
• Decay Risk（低/中/高）

✔ Conversion Risks

截圖上直接標：

• CTA 是否不在 fold 內
• Header 過度複雜
• 字體過小

✔ CTR Improvement

AI 自動生成：

• 高點擊版 title/description
• 品牌版
• 短句強 SEO 版

這部分真的會讓行銷、電商的人看到眼睛亮起來。

---

📸 3. Screenshot Preview（含 Highlight Issues）

AI 會自動：

• 找出 missing alt tags（紅色框）
• 找出 H1（藍色框）
• 用 hover 放大 screenshot

這部份非常適合做 landing page 或 SEO 顧問工具。

---

📊 4. Radar Chart

五維分析：

• Speed
• SEO
• Structure
• A11y
• Metadata

（由 AI 自己做動畫與渲染）

---

🧪 Browser Agent 的自動測試能力

Antigravity 最扯的地方是：

我沒有為這個專案寫任何測試。 Browser Agent 自己跑完整的整合測試。

它做了：

• 到實際網址操作
• DOM extraction
• screenshot 校驗
• performance 校驗
• JSON schema 比對
• 前端渲染驗證
• 產出一份 walkthrough 報告給我

---

🛠️ 技術架構（AI 自己生成）

Antigravity 為我建立了完整 monorepo：

site-health-ai-auditor/
├── client/ (React + Vite)
├── server/ (Express + Playwright)
├── SPEC.md
└── package.json

---

🧵 Antigravity 所代表的未來：

AI 從「補碼工具」正式躍升為「能自己跑流程的工程師」

這次實驗讓我確認一件事：

下一代的 AI Coding，不只是生成程式碼，而是能像一個 junior/mid engineer 一樣“自行跑完任務”。

Antigravity 最大的差異：

✔ 可以操作 editor
✔ 可以操作 terminal
✔ 可以操作 browser
✔ 可以同時協作多 agent
✔ 可以產生 artifacts（計畫、報告、截圖、錄影）
✔ 可以自己檢查結果、修正
✔ 可以跑 end-to-end task

這已經不是「coding assistant」。
這是 AI 自動化工程平台。

---

🙋‍♀️ 你想要我把這個專案開源嗎？

如果想，請在留言區打「+1」！🔥

我可以整理 完整 repository

如果你有想讓 AI 做的 side project，也歡迎丟給我一起玩 😄

---

📮 結語

今天只是我第一次深度用 Antigravity。
但已經讓我覺得：

這個東西不是 coding tool，是未來的「AI Developer Runtime」。

如果你有興趣，我將繼續寫：

• 大專案 AI 開發流程
• 如何讓 AI 幫你做 RAG / Agent / SaaS
• Agent 模式設計比較與實驗

歡迎訂閱網站、收藏我的文章並分享給更多有興趣的朋友！

---