目標：從「建立三個自訂 Agents」開始，一路用指令驅動，讓他們協作產出一個具備完整規範與骨架的 React + Vite + TypeScript Todo App。

你會完成什麼？

• 建立 3 個專案專屬 Agents：strategic-planner、steering-architect、task-executor
• 讓 steering-architect 產出 產品/技術/結構 指南（放在 .ai-rules/）
• 讓 strategic-planner 產出 需求/設計/任務分解 規格
• 讓 task-executor 依規格自動搭好 React 專案骨架（Vite、TS、ESLint、Prettier、Husky、Vitest、RTL、CSS Modules…）
• 你會得到：react-todo-app/ 完整初始化專案 + specs/ 與 .ai-rules/ 文件

0. 前置準備

• 建議：VS Code + Claude Code 擴充
• 目錄任意

1. 建立三個 Agents

在 VS Code 的 Claude Code 面板中建立三個 agent（或在終端輸入對應指令）。名稱與角色定位如下：

• strategic-planner：做「互動需求分析 + 里程碑計畫 + 依賴關係」
• steering-architect：做「產品藍圖 + 技術選型 + 結構規範」
• task-executor：讀規格→實作專案（腳手架、設定、測試框架…）

實際建立完成的畫面如下：

可以看到專案自訂的三位 agent 都已就緒，另外還有內建的通用 agents。

2. 下達第一個任務：請產出規格文件

對 steering-architect 下指令：

使用steering-architect 創建todo list的規格文件(利用react)

完成訊息如下：

檔案會放在 .ai-rules/：

有了 .ai-rules/， 這一步拿到的是可執行的專案藍圖。

3. 下達第二個任務：請規劃功能需求

對 strategic-planner 下指令：

利用 strategic-planner 幫我為「React Todo App」建立完整規劃，輸出到 `specs/react-todo-app/`，包含：
1) requirements.md（需求規格，使用者故事、非功能性需求、成功條件）
2) design.md（系統/架構設計、依賴、錯誤處理、資料流）
3) tasks.md（任務分解，里程碑與依賴圖）

成功輸出後的摘要會像這樣：

生成的檔案結構：

等於把「如何寫」也變成規則，之後任何開發/修改都能參照。

4. 下達第三個任務：讓機器人自動建專案並完成工程化

對 task-executor 下指令：

請閱讀 `specs/react-todo-app/tasks.md`，依任務逐步實作：
- 使用 Vite 建立 React + TypeScript 專案 `react-todo-app/`
- 配好 ESLint、Prettier、Husky、lint-staged
- 建立 Vitest + React Testing Library 測試
- 啟用 TypeScript 型別定義與嚴格模式
- 支援 CSS Modules
- 初始化 CI-friendly 的 NPM scripts 與工作流程
- 以 commit 驗證與基本測試收尾

執行畫面：

![執行 tasks.md]

完成摘要會列出已達成的項目與產出：

✅ 你會在工作區看到 react-todo-app/，包含 2,7xx 行初始化碼、必要設定與腳本，直接 npm run dev 就能起伺服器。

5. 專案結構（精簡版）

react-todo-app/
├─ src/
│  ├─ components/
│  │  ├─ TodoItem.tsx
│  │  ├─ AddTodoForm.tsx
│  │  └─ TodoFilter.tsx
│  ├─ pages/
│  │  └─ Home.tsx
│  ├─ hooks/
│  ├─ styles/
│  ├─ tests/  # Vitest + RTL 測試樣例
│  └─ main.tsx
├─ .husky/
├─ .eslintrc.cjs
├─ vitest.config.ts
├─ tsconfig.json
└─ package.json

組件與檔案切分，會依 .ai-rules/structure.md 的約定生成，便於後續擴充與測試。

小結

Day4 我把「文件驅動 → 角色分工 → 自動化實作」的路線跑完一輪。三個 agents 的分工剛好對應 架構師（steering-architect）→**（strategic-planner） → 工程執行（task-executor）**。有了這套流程，之後每個新功能都能走一遍 規格化→自動化，而不是一次性的腳手架而已。

參考資料

Claude Code重磅推出Sub agents功能！