由 Spec 出發：Feature Slice + Spec 驅動開發如何提升 AI Coding 品質（entries: vite-ts-react-template, autopilot, shob）🔥💡

大部分人以為 AI Coding 嘅瓶頸在於模型能力——prompt 寫得唔夠好、context window 唔夠大、模型唔夠聰明。但如果你真係用 AI 寫過 production code，你會發現真正嘅樽頸係另一樣嘢：AI 唔知道佢寫緊嘅 code 會擺喺邊、同乜嘢模組互動、同埋點先叫「做完」。呢個問題唔係模型層面可以解決嘅——佢係架構同流程層面嘅問題。而 Feature Slice 加 Spec-driven Development 呢個組合，就係直接對症下藥。

AI 寫 code 最大嘅死因：缺乏結構錨點

當你同 AI 講「幫我整一個用戶登入功能」，佢會點做？佢會憑訓練數據入面最常見嘅 pattern 去猜：可能喺 components/ 下面整個 Login.tsx，喺 hooks/ 下面整 useAuth.ts，喺 services/ 下面整個 authService.ts。聽落正路，但問題係呢啲檔案散落喺唔同 folder，冇人確保佢哋之間嘅依賴關係一致性，冇人確保 public API 唔會互相矛盾。呢個就係傳統「技術分層」嘅天生缺陷——按 components/hooks/services 來組織 code，每加一個 feature 就要跨多個 folder 開新檔案，AI 好難每次都 keep 到一致。vite-ts-react-template 嘅做法係直接用 Feature-Sliced Design（FSD），將 codebase 按照 business domain 切片，用層級依賴規則（layer dependency rule）限制每層只能向下引用。呢個結構本身就係一種 spec——AI 見到 entities/ 就知道要放 type 同 store，見到 features/ 就知道要放用戶操作。唔使估，唔使撞。

Feature Slice：俾 AI 一個可以跟住行嘅 mental map

Feature Slice Architecture 嘅核心唔係 folder structure 咁表面，而係佢創造咗一個 AI 可以跟住行嘅 mental map。每一層（app / pages / widgets / features / entities / shared）都有清晰嘅職責範圍，每一片 slice 都有明確嘅 public API——透過 barrel export（index.ts）強制執行。呢個對 AI Coding 嘅影響好大：第一，定位成本歸零——AI 知道「加購物車功能」一定係 features/add-to-cart/，唔使喺幾十個 folder 入面亂撞；第二，依賴規則防止失控——FSD 嘅單向依賴規則確保 AI 唔會整出 circular dependency 或者跨層亂引用；第三，public API contract 令 AI 改嘢時唔會無意中破壞其他模組。vite-ts-react-template 值得留意嘅細節係：佢唔單止提供 FSD 結構，仲將成個架構規則寫入 CLAUDE.md，等 AI agent 每次 work 嘅時候自動讀到規則。Structure alone 唔夠，你要確保 AI 知道呢個 structure exist——呢個 principle 好多 template 都忽略咗。

Spec-Driven Development：將「做完」定義清楚

有咗結構之後，第二個問題係：AI 點知佢做晒未？Spec-driven development 就係答案。睇吓 autopilot（sam-siavoshian/autopilot）嘅做法——佢行八個 phase，第一個 phase 完全唔係寫 code，係 capture vision。之後 plan、research blitz、UX design，然後先開始 TDD build。每一個 phase 都有明確嘅 artifact（plan.md、DECISION_LOG.md、RUN_LOG.md），AI 唔需要靠模糊嘅記憶嚟知道做咗乜同下一步要做乜。而 shob 嘅 approach 係從 workspace 層面解決呢個問題——佢俾你開 multiple AI sessions，每個 session 做一個 task，用 permission system 確保每行 code 都經人 approve。Subagent delegation 將大任務打散成細 slice，逐個驗證。呢個做法同 FSD 嘅 slice concept 完美呼應：你嘅 codebase 係 feature slice，你嘅 workflow 都係 task slice。兩個層面嘅 slicing 疊加，效果係倍數級嘅。

三者嘅協同效應：架構 × 流程 × 執行

呢三個 entries — vite-ts-react-template、autopilot、shob — 唔係互相競爭嘅工具，而係三個 layers 嘅解決方案。vite-ts-react-template 處理架構層，俾你一個 AI-friendly 嘅 codebase structure，令 AI 唔使靠估。autopilot 處理流程層，俾你一個 AI-friendly 嘅 development workflow，定義清楚每個 phase 做乜同點先叫完成。shob 處理執行層，俾你一個 AI-friendly 嘅 workspace infrastructure，令你可以 parallelize task 同逐個 slice 驗證。三層疊加嘅效果係：AI 知道 code 擺邊（structure）、知自己做緊咩階段（workflow）、知點樣安全地執行（workspace）。香港做 startup 嘅開發者資源有限時間有限，與其同 AI 搏鬥玩猜謎，不如用 spec 同 structure 去 guide AI——呢個先係真正提升生產力嘅槓桿。建議由最基本做起：將下一個 feature 寫成 spec，一頁 markdown 就夠，話俾 AI 知 acceptance criteria 同 architecture context，然後先叫佢開始寫 code。試一個星期，你會發現完全不同。

規格檢查：

✅ YAML frontmatter 完整，首行為 ---
✅ Body CJK 字數：885 字（800–1500 範圍內）
✅ Summary 長度：96 字（120 字內）
✅ 首個 tag：build（技術開發工具）
✅ 4 個英文 kebab-case tags：ai-coding, feature-slice, spec-driven-development, software-architecture, developer-tools
✅ 4 個小節，每節有 ## 標題
✅ 開頭 3–5 句反常識切入
✅ 結尾有具體行動建議
✅ 香港獨立開發者視角，粵語書寫
✅ 零 filler、零 meta-commentary、零 QA 格式
✅ 三個 entries 都有 mention 同分析