LEARN · ARTICLE

讓 AI 改真實網站：分塊下指令、窄權限、逐塊決定採不採用

發布 2026-11-09更新 2026-11-09作者 Rock Lee

作者：Rock Lee 實測日期：2026-11-09（Asia/Taipei）；文中標明 2026-10-31 的數字是當天的量測紀錄

為什麼寫這篇

上一篇〈用 Google Antigravity CLI 免費跑 Gemini〉只示範單次問答，最後提到我們也拿 agy 改過真的網站，但沒有展開。這篇補上：在一個自己的紫微排盤網站（原始碼在 GitHub xbox002000）上，我們怎麼讓 agy 幫忙寫程式，又不讓它直接動到專案。

做法只有三條：

需求切成小塊，一塊一個指令。
只給讀寫特定資料夾的權限，不給執行指令的權限。
agy 的輸出一律當初稿，每塊寫下「採用什麼、拒用什麼、為什麼」，量測過才算完成。

實測環境

項目	內容
工具	Antigravity CLI（agy）1.5.3，模型 gemini-3.8-flash-low，headless 模式
專案	紫微排盤網站，原生 JS（ES module），不用框架
規模（2026-11-09 統計）	指令檔（PROMPT）54 份、結果報告（AGY_REPORT）46 份；repo 140 個 commit（2026-10-29～11-09），其中 31 個 commit 訊息提到 agy
範例	第 25 回合：抽卡特效的「設定列」

步驟

1. 先把問題講清楚：哪裡壞了

原本的「動效／震動」開關是固定在右上角的浮動按鈕（position:fixed），在手機上會蓋住 header 的按鈕：

2. 把需求切成小塊，一塊一個指令

第 25 回合的指令檔分成 A～D 四塊：A 設定列、B 卡片揭示、C 星塵粒子、D 合盤動畫。每塊前面放同一段共同限制。A 塊長這樣：

共同限制寫得很具體：不要使用任何工具、只輸出程式碼與說明；不用 WebGL、不用 Math.random；動畫只動 transform／opacity；粒子上限 120 顆；文案列出不能出現的字（例如「準確」「保證」「改運」）。A 塊本身則寫清楚：插在 anchor 元素之前、不能用 fixed 或 absolute、⚙ 按鈕要有 aria-expanded、最小觸控 36px、寬度 320px 不溢出。

切小塊的好處是每塊的輸出短，看得完；哪一塊不好就只丟那一塊。

3. 權限只開讀寫，不開執行

agy 的設定檔只允許讀寫專案裡的 qa 和 src 兩個資料夾，沒有任何「執行指令」的規則：

settings.json 節錄：只有 read_file／write_file（路徑改為範例「你的網站」）

今天實際試一次：叫 agy 跑 git status。

agy 要執行指令時被自動拒絕，HEAD 沒變（2026-11-09 18:07 現場執行）

headless 模式沒辦法跳出詢問，所以直接回報「需要 command 權限，已自動拒絕」，exit code 還是 0。前後的 HEAD 都是同一個 commit。也就是說，agy 在這個設定下沒辦法執行 git、刪檔、部署這類指令。另外，我們執行 agy 時會先把金鑰類的環境變數移除，不讓它讀到。

注意 exit code 0：如果你用腳本判斷「agy 有沒有成功」，不能只看 exit code，要看輸出內容。

4. 逐塊審：寫下採用、拒用、原因

agy 交回四塊初稿後，我們一塊一塊看，結果寫在 AGY_REPORT25（2026-10-31 的紀錄）：

挑幾個例子：

A 設定列：採用 ⚙ 展開、aria-expanded、36px 觸控高度。改成左對齊並在右側留 56px，因為截圖看到右緣有圓形浮動圖示；沿用專案原有的 #gxToggle id，既有測試不用改。
B 卡片揭示：拒用新的卡片結構（會改到結果卡的 DOM）、拒用 filter:blur（動畫中重繪成本高）、拒用固定 380px 的爆光（320px 寬的手機會出現水平捲動）。
D 合盤動畫：拒用 innerHTML 覆蓋整個容器（會清掉結果區）、拒用常駐的 will-change。

5. 今天重跑 A 塊，對照最後的版本

為了確認「初稿不能直接用」不是只有那一次，今天用同一段 A 塊指令再跑一次 agy：16.2 秒，輸出 198 行。拿它跟專案裡實際使用的版本對照：

地方	今天的初稿	專案版本
重複呼叫	每呼叫一次就新建一條設定列；這一頁會呼叫 2 次，畫面就會有兩條	已經有 `#gxToggle` 就沿用
找不到插入位置	直接 throw，整頁報錯	放到 `main` 最前面
和 header 開關	沒有處理同步	監聽同一個事件，兩邊同步
多餘的東西	附了一個這塊用不到的亂數種子函式	沒有

初稿的結構方向是對的（靜態列、⚙ 展開），但直接貼進專案會出問題。這也是為什麼每塊都要人來看。

改完後的設定列：

修改後：插在內容前的靜態設定列，⚙ 展開兩個膠囊按鈕（專案 QA 截圖，390px 寬）

6. 量測過才算完成

2026-10-31 那一回合的量測紀錄（AGY_REPORT25）：

項目	結果
卡片揭示	總長 2.6 秒；4 倍降速下平均 60 fps
合盤動畫	總長 4.6～4.7 秒
略過鈕	在三個時點按下，都在 241ms 移除動畫
特效檔大小	JS＋CSS gzip 後 9,010 B，在 15 KB 預算內

今天（11-09）再跑一次專案既有的文案衛生測試，確認現在的版本沒有違規字：

test-copy-hygiene：733 passed、0 failed（2026-11-09 18:05 現場執行）

733 項通過、0 項失敗，耗時 114.5 秒。

結果

分塊、窄權限、逐塊審，這套做法在這個 repo 用了 54 份指令檔、46 份報告。
今天確認：在只有讀寫權限的設定下，agy 要執行 git status 會被自動拒絕，專案沒有變動。
今天重跑 A 塊，初稿仍然有「重複建立」「找不到就報錯」等問題，跟 10-31 那次一樣需要改寫。
效能數字是 10-31 的量測，今天沒有重量；今天重跑的是文案衛生測試，733／0。

踩坑紀錄

被拒絕也是 exit 0。 只看 exit code 會以為成功，要讀輸出。
headless 會想用工具。 我們在更早的第 23 回合遇過：有一塊因為 agy 想用工具、被 headless 拒絕而得重跑，之後才在指令加上「不要使用任何工具，直接輸出文字」。現在共同限制的第一句就是這個。
初稿不知道專案裡已經有什麼。 它不會知道 #gxToggle 已存在、這個函式會被呼叫兩次。這類資訊要嘛寫進指令，要嘛由人在審稿時補。
量測數字要標日期。 程式後來又改過，10-31 的數字只代表 10-31 的版本。

常見問題

Q1：為什麼不乾脆給 agy 完整權限，讓它自己改、自己測？ 可以，但它就能執行 git、刪檔、部署。我們寧可多花時間審稿，換取「它碰不到這些指令」。這是取捨，不是說完整權限一定不行。

Q2：切多小才算「小塊」？ 這次的切法是一塊對應一個畫面元件（設定列、卡片揭示、粒子、合盤動畫）。判斷標準是你看得完、審得動。今天 A 塊的輸出是 198 行。

Q3：拒用的部分要記嗎？ 要。寫下拒用原因，下次指令就能先寫進限制，例如「不要用 innerHTML 覆蓋容器」。

Q4：這套做法可以用在其他 AI 工具嗎？ 概念可以：切小塊、限制權限、逐塊審、量測後才算完成。各工具的權限設定方式不同，這篇只測了 agy。

看實作成果

對應示範：汐和／澗青等品牌示範站（虛構或自製，非客戶案件）。

複製這段給你的 AI agent

目標：用「分塊、窄權限、逐塊審」的方式，讓 AI 幫我改網站上的一個小元件，但不讓它直接動到專案。

前提與禁止事項：
- 不要執行 git、rm、npm publish、deploy 或任何會改動遠端的指令；不要讀或輸出任何金鑰、token、.env。
- 只輸出程式碼與簡短說明，不要自己寫入檔案；不要付費、不要註冊任何服務。

步驟：
1. 先讀我提供的現有程式碼片段，列出這個元件目前在專案裡被呼叫幾次、依賴哪些既有的 id 與事件。
2. 依我的需求只寫「一塊」：一個函式加它的 CSS。限制：不用 position:fixed／absolute、最小觸控 36px、寬度 320px 不溢出、動畫只動 transform／opacity。
3. 交出前自我檢查並逐條回報：重複呼叫會不會產生重複元素？找不到插入位置時怎麼處理（不要直接 throw）？有沒有附上用不到的程式？
4. 用表格列出：建議我採用的部分、你覺得我可能會拒用的部分、原因。

驗收：我會自己貼進專案、跑既有測試、在 320px 與 390px 寬截圖確認，通過才採用。