從聊天機器人到 AI Agent：
認識 Antigravity 與環境準備
不用死背語法、不必害怕終端機。學會用「產品經理」的視角指揮 AI 工程師，循序漸進打造《今天學AI》教學知識分享與活動報名全端網站。
為什麼學了 ChatGPT，還是做不出完整網站？
傳統對話 AI（如網頁版 ChatGPT）
＝「只動口、不動手的軍師」
- 只能生出零碎的程式碼片段，你要自己複製貼上建檔
- 看不到你電腦裡的資料夾結構，常給出對不起來的路徑
- 畫面跑不出來或報錯時，你要來回截圖、自己當傳聲筒
- 只要超過三、四個檔案，新手就會在複製貼上中迷路
AI 代理人（Google Antigravity）
＝「有手有腳、坐你旁邊的實習工程師」
- 直接讀寫專案：自動幫你建資料夾、創檔案、改程式碼
- 代跑終端機指令：自動幫你安裝套件、啟動本地預覽伺服器
- 親自開瀏覽器驗收：自己打開網頁點按鈕、看畫面有沒有跑版
- 直連雲端部署：寫完直接幫你推上 GitHub 並部署到 Vercel
拆解 Antigravity 的四大核心超能力
讀寫專案檔案庫
能看懂整個專案的資料夾結構，自動建立新檔案或精準修改指定行數，並提供「紅刪綠增（Diff）」對照表讓你審核。
安全沙盒內執行指令
不用自己背複雜的命令列。AI 會在隔離保護的沙盒中代為執行環境檢查、套件安裝與版本紀錄。
瀏覽器實測與自我除錯
寫完網頁後，AI 能啟動內建瀏覽器親自點擊報名按鈕、檢查後端回應，看到紅字報錯會自己修到好。
外掛技能書與萬用插頭
可隨時加裝「品牌設計手冊（Skills）」與「外部系統連接器（MCP / Plugins）」，直通資料庫與雲端主機。
角色重新定義：你不是碼農，你是「產品總監」
在 Antigravity 時代，做出一個好網站的關鍵不再是「背熟語法」，而是掌握以下三階段協作循環：
定義目標與規格
告訴 AI：這個網站要給誰看？有哪些區塊？例如《今天學AI》要有「最新教學文章」與「工作坊報名表單（含姓名、信箱、場次）」。
規劃步驟與撰寫程式
Antigravity 先提出施工計畫（Plan），經你同意後，自動生成前端畫面、後端 API 路由與資料庫儲存邏輯。
畫面檢視與測試放行
打開網頁看配色順不順眼、字會不會太小、試填一筆報名資料看有沒有存進後台。不滿意就繼續開口微調！
全端開發六個階段：循序打造《今天學AI》官方網站
假設你是一位 AI 教師，我們將透過六個漸進階段，從零打造一個能分享 AI 教學資訊並接收學員活動報名（含後端資料庫記錄）的正式網站：
| 階段 | 《今天學AI》網站進度（明線） | 解鎖 Antigravity 裝備（暗線） | 階段具體產出 |
|---|---|---|---|
| 階段一 | 單頁首頁原型＋工作坊倒數計時器 | 介面巡禮、沙盒權限、@ 與 / 指令 | 單檔互動網頁 index.html |
| 階段二 | 定立網站完整規格與交接制度 | 專案鐵三角（AGENTS / PROJECT / README） | 專屬員工守則＋全端規格書 |
| 階段三 | 高質感前端：文章列表＋活動報名表單 | Skills 技能手冊（套用個人品牌設計規範） | Next.js 多區塊現代化前端 |
| 階段四 | 後端 API 與資料庫：儲存報名名單 | MCP 與 Plugins（資料庫與外部工具連接） | 報名儲存 API ＋ 本地資料庫 |
| 階段五 | 前後端串接、表單送出與名單管理後台 | Subagents 分身、/browser 自動化除錯 | 前後端完全打通的動態網站 |
| 階段六 | GitHub 開倉、Vercel 部署與公開上線 | 環境變數資安、一鍵部署、收工維護流程 | 正式公開網址（手機可報名） |
工欲善其事：
本機四大工具與安全防呆設定
為了讓 Antigravity 未來能幫我們在本機預覽網頁、自動在 GitHub 開新倉庫，並一鍵推上 Vercel 部署，我們先把地基一次打好。
為什麼不能只裝 Antigravity？本機必備四大基石
Google Antigravity
我們的 AI 數位工程師本體。我們在裡面跟它對話、審核計畫，它負責呼叫另外三個工具來幫我們幹活。
Node.js（務必選 LTS 穩定版）
現代全端網頁（Next.js）的執行引擎。裝了它，AI 才能在你的電腦啟動預覽伺服器，讓你邊改邊看畫面。
Git 版本控制
幫每一次的修改拍下「存檔點」。萬一 AI 改壞了某個功能，只要一行指令就能瞬間退回上一動。
GitHub CLI (gh)
全自動開倉神器！裝好並登入後，不用自己去網頁按半天，直接叫 Antigravity 用指令幫你在 GitHub 開新倉庫。
雲端雙帳號準備：GitHub 與 Vercel 黃金組合
GitHub：程式碼的雲端保險箱
- 全球最大的程式碼託管平台（免費註冊）
- 存放《今天學AI》網站的正式原始碼
- 換電腦或重灌時，隨時可以把網站完整抓回來
Vercel：免設定的全球網站主機
- 把 GitHub 裡的程式碼變成公開網址（https://...vercel.app）
- 只要 GitHub 有更新，Vercel 會在 1 分鐘內自動重新發布
- 個人與教學專案免費額度非常充裕，不需綁信用卡
實作檢核：登記 Git 身分與一鍵驗證環境
安裝完四大工具後，請打開終端機（或直接請 Antigravity 幫你執行），依序完成這三個動作：
打開 Antigravity：認識你的三大指揮戰區
專案與設定管理
- Projects：切換不同網站專案資料夾
- New Conversation：開啟新的任務對話
- Skills / Plugins：管理技能包與外掛
- Settings：調整模型與安全權限
對話指揮中心
- 用自然語言向 AI 工程師交代需求
- 支援直接拖曳圖片或截圖進對話框（例如貼上報錯畫面或參考設計圖）
- 輸入 / 召喚工作流、輸入 @ 點名特定檔案
- 右上角或設定可切換 Gemini 模型（Flash 輕快、Pro 深度推理）
產出物與變更驗收台
- Artifacts：閱讀 AI 寫好的企劃書、架構圖與網頁預覽
- Files Changed：檢視「紅刪綠增」的程式碼修改對照
- Terminals：監看背景執行的伺服器狀態
新手防呆保護網：為什麼不用怕 AI 把電腦搞壞？
點開左下角 Settings > General，看中間的 Permissions（權限） 區塊：
預設開啟「終端機沙盒（Sandbox）」
- 選擇 Auto (Preview) 時，AI 預設被關在安全的「隔離沙盒房間」裡工作
- 能做的事：自由讀寫目前這個專案資料夾內的檔案
- 不能做的事：無法偷改你桌面或其他資料夾的私人檔案，預設也禁止連外網
- 當需要連網安裝套件時，會跳出視窗請你按核准（Bypass Sandbox）
點開 Advanced > 查看細部開關
- 在 Remote 下方點擊 Advanced > 即可展開完整門禁卡：
- Terminal Sandbox：沙盒總開關
- Non-Workspace File Access：是否允許存取專案外檔案（建議設為 Ask）
- Plan Review Policy：設為 Ask 或 Always Proceed 控制計畫書審核時機
對話框裡的兩個魔法符號：@ 點名與 / 指令
輸入 @ 精準點名檔案與上下文
當專案檔案變多時，不要讓 AI 自己大海撈針。在對話框輸入 @ 會跳出選單：
- @index.html：指定只修改首頁檔案
- @AGENTS.md：提醒 AI 遵守專案規範檔
- @過去的對話：引用上一次討論的結論
輸入 / 召喚專業工作流
在對話框開頭輸入 /，可啟動內建的特殊模式：
- /plan（新手必用！）：要求 AI 先寫出分步施工計畫，等你按同意才准動手改程式
- /grill-me：請 AI 反過來拷問你，把模糊想法問成清楚規格
- /browser：讓 AI 自己開瀏覽器測試做好的網頁
第一次動手實作：
10 分鐘做出《今天學AI》首頁原型
現在不裝任何複雜框架，我們先在桌面建立一個空資料夾 learn-ai-today，用 Antigravity 打開它，體驗「動口生出互動網頁」的威力！
實作任務一：用一段話生成《今天學AI》單檔互動網頁
請點擊下方「複製 Prompt」按鈕，貼進 Antigravity 的對話框送出：
這是一位 AI 教師的個人品牌網站，網站名稱叫『今天學AI』，請包含：1. 頂部導覽與英雄區、2. 下一場『AI Agent 實戰工作坊』真實跳動的倒數計時器、3. 三張最新 AI 教學文章分享卡片、4. 底部簡易活動報名表單預覽框。請使用台灣繁體中文，版面留白充足。」
實作任務二：用 @index.html 調整風格，並學會看紅綠 Diff
學會看懂右側「紅刪綠增（Diff）」
AI 改完檔案後，點開右側變更面板，你會看到清楚的比對標記，確認它沒有誤刪你的重要內容：
階段一總結與下一階段預告
從碼農變產品經理
明白 Chatbot 與 Agent 的差異，學會用自然語言開需求、看 Diff 驗收成果。
四大工具與沙盒就緒
打通 Node.js、Git、gh 與雙雲端帳號，確認 Auto (Preview) 沙盒保護開啟。
《今天學AI》單頁誕生
完成包含倒數計時、文章卡片與報名預覽框的 index.html。
思考題：如果現在開啟一個新對話，AI 還記得你的「深墨藍配色規定」跟「做到哪裡」嗎？
答案是：它會完全失憶！在階段二，我們將解鎖專業開發者的「專案鐵三角（AGENTS.md / PROJECT.md / README.md）」與 Skills / MCP 概念，讓你的 AI 永遠聽話、永不失憶！