在前一篇測試中, 使用 Antigravity CLI 規劃並執行了一個製作 CLI 介面的待辦清單 (to-do list) 專案, 透過預設的 Gemini 模型完成程式碼撰寫與測試, 最後人工驗證功能符合 AI 的規劃, 也完全與我們的預期一致. 本篇則是要製作 GUI 版的待辦清單, 並改用使用 Claude 模型來執行專案.
另外, 本篇還要嘗試改用 Claude 模型來執行此專案. Google 的 Antigravity 平台在 2026 年的全新架構中採用了 "多模型聯合訂閱" 模式, 購買 Google AI Pro 或 Ultra 的方案後, 課金就已涵蓋了平台內整合的所有跨廠牌旗艦模型 (包括 Claude 3.5/4.6 系列, GPT-OSS 等). 以 Google 帳號授權登入後, Antigravity 的雲端後台會自動處理所有的 API 轉接與計費, 所有的 Token 用量會在計算扣除後反映在 /usage 輸出的剩餘額度中.
本系列之前的文章參考 :
PS D:\agy> mkdir todo-gui-app
PS D:\agy> cd todo-gui-app
PS D:\agy\todo-gui-app> agy
然後在提示號下斜線指令 /model 選擇 Claude Sonnet 做為執行此專案之底層模型 :
接下來就可以輸入專案需求了 :
> 請幫我將目前的 Todo 專案升級/建立一個 GUI 版本
需求 :
Python GUI (使用 tkinter 與 ttk 套件)
支援完整功能 : add / list / done / delete
資料持久化 : 使用 JSON 儲存資料
介面要求 : 外觀要現代 & 乾淨 (使用 ttk 佈局) 並具備良好的使用者提示 (例如刪除時跳出確認視窗)
請先不要寫程式碼.
請先針對這個 GUI 專案產出 Implementation Plan (實作計畫) 以及預計的檔案架構 (File Structure).
Claude 回覆的專案實作計畫如下 :
▸ Thought for 7s
The user wants me to create an Implementation Plan and File Structure for a Pyth...
讓我先看看現有的專案結構。
● ListDir(D:/agy/todo-gui-app) (ctrl+o to expand)
專案目前是空目錄，我來為您產出完整的實作計畫。
● Create(C:/Users/tony1/.gemini/antigrav...0-b697217b954f/todo_gui_plan.md) (ctrl+o to expand)
以上是完整的實作計畫，幾個重點決策說明：
──────
### 🔑 關鍵設計決策
1. 元件化架構
把 Header、InputBar、TodoItem、TodoList
拆成獨立檔案，方便逐步開發與維護，而非全部塞在一個大檔案裡。
2. 單向資料流
所有 CRUD 操作都走 TodoStorage ，UI 元件只負責呈現，避免狀態散落難以追蹤。
3. 自訂 ConfirmDialog vs messagebox
使用 tk.Toplevel 自製刪除確認視窗，才能套用一致的深色主題；系統 messagebox
外觀無法客製化。
4. 深色主題
ttk 的樣式透過 ttk.Style 全域設定，讓整個 App 色調一致，不必在每個元件重複指定顏色。
──────
請確認計畫後點選 Proceed 開始實作！若有任何調整（例如改用淺色主題、增加功能等）請告訴我。
輸入下列提示詞, 讓 agy 按照規劃進行實作 :
> 這規劃可以, 請依照此 Implementation Plan 逐步實作專案
每一步請先說明要做什麼再執行
Claude 回覆 Phase 1 要做的項目並徵求核准實作 :
▸ Thought for 2s
The user wants me to implement the project step by step according to the impleme...
好的，我們依照計畫逐步實作。先從 Phase 1 開始。
──────
## Phase 1 — 建立目錄結構與設計系統
要做什麼：
1. 建立所有必要的資料夾與 __init__.py
2. 實作 theme.py （全域設計 Token：色彩、字體、樣式）
3. 實作 main.py （程式進入點）
先建立完整的目錄骨架：
● Bash(New-Item -ItemType Directory -Force -Path "app", "app\components", "...) (ctrl+o to
expand)
Command
───────────────────────────────────────────────────────────────────────────────────────────────
Requesting permission for:
New-Item -ItemType Directory -Force -Path "app", "app\components", "app\dialogs",
"data"
Do you want to proceed?
> 1. Yes
2. Yes, and always allow in this conversation for commands that start with 'New-Item'
3. Yes, and always allow for commands that start with 'New-Item' (Persist to settings.json)
4. No
按 Yes 建立資料夾結構並要求授權建立 __init__.py :
先建立完整的目錄骨架：
● Bash(New-Item -ItemType Directory -Force -Path "app", "app\components", "...) (ctrl+o to
expand)
目錄建立完成，現在建立所有 __init__.py ：
● Bash(New-Item -ItemType File -Force -Path "app\__init__.py", "app\compone...) (ctrl+o to
expand)
Command
───────────────────────────────────────────────────────────────────────────────────────────────
Requesting permission for:
New-Item -ItemType File -Force -Path "app\__init__.py", "app\components\__init__.py",
"app\dialogs\__init__.py" | Out-Null; Write-Host "Done"
Do you want to proceed?
> 1. Yes
2. Yes, and always allow in this conversation for commands that start with 'New-Item -
ItemType File -Force -Path "app\__init__.py", "app\components\__init__...'
3. Yes, and always allow for commands that start with 'New-Item -ItemType File -Force -Path
"app\__init__.py", "app\components\__init__...' (Persist to settings.json)
4. No
按 Yes 繼續實作到 Phase 5 :
目錄建立完成，現在建立所有 __init__.py ：
● Bash(New-Item -ItemType File -Force -Path "app\__init__.py", "app\compone...) (ctrl+o to
expand)
現在實作 theme.py — 全域設計系統的核心：
● Create(D:/agy/todo-gui-app/app/theme.py) (ctrl+o to expand)
──────
## Phase 2 — 資料層（TodoStorage）
要做什麼： 實作資料模型，負責 JSON 讀寫、add / toggle / delete 操作。
● Create(D:/agy/todo-gui-app/app/storage.py) (ctrl+o to expand)
──────
## Phase 3 — UI 元件開發
要做什麼： 逐一建立四個 UI 元件：Header → InputBar → TodoItem → TodoList
### 3-1 Header（頂部標題列）
● Create(D:/agy/todo-gui-app/app/components/header.py) (ctrl+o to expand)
### 3-2 InputBar（新增輸入列）
● Create(D:/agy/todo-gui-app/app/components/input_bar.py) (ctrl+o to expand)
要做什麼： 先建立對話框，因為 TodoItem 會依賴它。
● Create(D:/agy/todo-gui-app/app/dialogs/confirm_dialog.py) (ctrl+o to expand)
### 3-4 TodoItem（單筆 Todo 列）
● Create(D:/agy/todo-gui-app/app/components/todo_item.py) (ctrl+o to expand)
### 3-5 TodoList（可捲動列表容器）
### 3-3 ConfirmDialog（刪除確認視窗）
● Create(D:/agy/todo-gui-app/app/components/todo_list.py) (ctrl+o to expand)
──────
## Phase 4 & 5 — 主 App 與進入點整合
要做什麼： 實作 app.py （主控制器，整合所有元件與資料層），以及 main.py
（視窗初始化、置中、快捷鍵）。
● Create(D:/agy/todo-gui-app/app/app.py)
● Create(D:/agy/todo-gui-app/main.py) (ctrl+o to expand)
最後建立 requirements.txt ：
● Create(D:/agy/todo-gui-app/requirements.txt) (ctrl+o to expand)
所有檔案就緒！現在執行看看：
● Bash(python main.py) (ctrl+o to expand)
Command
───────────────────────────────────────────────────────────────────────────────────────────────
Requesting permission for:
python main.py
Do you want to proceed?
> 1. Yes
2. Yes, and always allow in this conversation for commands that start with 'python main.py'
3. Yes, and always allow for commands that start with 'python main.py' (Persist to
settings.json)
4. No
至此 Claude 已完成所有實作, 按 Yes 執行程式 :
● ManageTask(Task: f7de5e33-ecc3-4c99-93d0-b697217b954f/task-34)
● Requested Permission: read_file(C:\Users\tony1\.gemini\antigravity-cli\brain\f7de5e33-ecc3-
4...)
● ListDir(C:/Users/tony1/.gemini/antigrav...17b954f/.system_generated/tasks) (ctrl+o to expand
App 正在運行中（無 crash 錯誤）。視窗應該已在您螢幕上開啟了。讓我驗證一下最終的檔案結構：
● ListDir(D:/agy/todo-gui-app)
● ListDir(D:/agy/todo-gui-app/app) (ctrl+o to expand)
專案結構完整， __pycache__ 出現表示 Python 已成功載入模組。
──────
## ✅ 實作完成總結
所有 5 個 Phase 都已完成，App 正在運行中：
Phase | 內容 | 狀態
-------------|----------------------------------------------------------------|------------
Phase 1 | 目錄結構 + theme.py | ✅
Phase 2 | storage.py （資料層 + JSON 持久化） | ✅
Phase 3 | header.py / input_bar.py / todo_item.py / todo_list.py | ✅
Phase 4 | confirm_dialog.py （自訂刪除確認視窗） | ✅
Phase 5 | app.py + main.py （整合 & 進入點） | ✅
已實作的功能：
• ✅ Add — 輸入框 + Enter / 點擊按鈕新增，空輸入紅框警示
• ✅ List — 捲動列表，最新項目在頂，時間戳記顯示
• ✅ Done — 勾選框切換完成，刪除線文字 + 灰化效果
• ✅ Delete — 🗑 按鈕 + 自訂深色確認對話框（淡入動畫）
• ✅ JSON 持久化 — 關閉後重開資料不遺失
• ✅ 快捷鍵 — Ctrl+N 聚焦輸入、 Esc 關閉對話框、 Enter 確認
執行方式：
python main.py
How's the CLI experience so far? Help us improve:
[1] Good [2] Fine [3] Bad [0] Skip
2. 驗收專案成果 :
開啟一個新的 PS 視窗, 切到專案目錄下, 用 tree /f 檢視專案結構 :
PS D:\agy\todo-gui-app> tree /f
列出磁碟區 新增磁碟區 的資料夾 PATH
磁碟區序號為 000000AF 1258:16B8
D:.
│ main.py
│ requirements.txt
│
├─app
│ │ app.py
│ │ storage.py
│ │ theme.py
│ │ __init__.py
│ │
│ ├─components
│ │ │ header.py
│ │ │ input_bar.py
│ │ │ todo_item.py
│ │ │ todo_list.py
│ │ │ __init__.py
│ │ │
│ │ └─__pycache__
│ │ header.cpython-312.pyc
│ │ input_bar.cpython-312.pyc
│ │ todo_item.cpython-312.pyc
│ │ todo_list.cpython-312.pyc
│ │ __init__.cpython-312.pyc
│ │
│ ├─dialogs
│ │ │ confirm_dialog.py
│ │ │ __init__.py
│ │ │
│ │ └─__pycache__
│ │ confirm_dialog.cpython-312.pyc
│ │ __init__.cpython-312.pyc
│ │
│ └─__pycache__
│ app.cpython-312.pyc
│ storage.cpython-312.pyc
│ theme.cpython-312.pyc
│ __init__.cpython-312.pyc
│
└─data
todos.json
可見 Claude 將此專案做了結構化設計, 元件與對話框放在不同資料夾裡面, 程式碼就不一一檢視了.
3. 驗證程式功能 :
在專案目錄下執行主程式 :
PS D:\agy\todo-gui-app> python main.py
執行結果可正常增刪待辦事項 :
整體外觀設計有專業感, 唯一美中不足的是, 點選待辦事項時字的顏色會改變為與背景色類似, 導致無法看清, 這可以叫 agy 進一步修改.
最後用 /usage 指令檢視執行此專案耗用了多少 Claude 模型額度 :
吃掉 8% 額度, 看起來比之前跑 Gemini 的 CLI App (不到 1%) 還耗得兇啊!
4. 上傳 GitHub :
參考前一篇測試作法, 將 todo-gui-app 專案上傳到 GitHub :
用 git add. 指令讓 Git 開始追蹤新加入的專案 :
PS D:\agy\antigravity_cli> git add .
warning: in the working copy of 'projects/todo-gui-app/app/app.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/components/header.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/components/input_bar.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/components/todo_item.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/components/todo_list.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/dialogs/confirm_dialog.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/storage.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/app/theme.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/main.py', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'projects/todo-gui-app/requirements.txt', LF will be replaced by CRLF the next time Git touches it
這些 warning 無妨. 接下來用 git commit 提交變更 :
PS D:\agy\antigravity_cli> git commit -m "feat: add todo-gui-app"
[main 5efe72e] feat: add todo-gui-app
13 files changed, 1497 insertions(+)
create mode 100644 projects/todo-gui-app/app/__init__.py
create mode 100644 projects/todo-gui-app/app/app.py
create mode 100644 projects/todo-gui-app/app/components/__init__.py
create mode 100644 projects/todo-gui-app/app/components/header.py
create mode 100644 projects/todo-gui-app/app/components/input_bar.py
create mode 100644 projects/todo-gui-app/app/components/todo_item.py
create mode 100644 projects/todo-gui-app/app/components/todo_list.py
create mode 100644 projects/todo-gui-app/app/dialogs/__init__.py
create mode 100644 projects/todo-gui-app/app/dialogs/confirm_dialog.py
create mode 100644 projects/todo-gui-app/app/storage.py
create mode 100644 projects/todo-gui-app/app/theme.py
create mode 100644 projects/todo-gui-app/main.py
create mode 100644 projects/todo-gui-app/requirements.txt
最後用 git push 推送專案至 repo :
PS D:\agy\antigravity_cli> git push origin main
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 16 threads
Compressing objects: 100% (17/17), done.
Writing objects: 100% (18/18), 17.15 KiB | 3.43 MiB/s, done.
Total 18 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/tony1966/antigravity_cli.git
239b617..5efe72e main -> main
完成後檢視 GitHub 已有此專案 :
本專案 repo 網址如下 :
