iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Software Development

收到自己的紅色炸彈!婚期就是 Deadline:前端一人用 AI 規格流水線,30 天出貨婚禮 SaaS 系列

系統發起人是我,開發是我,最後要在現場承擔系統風險的也是我。面對無法延期的婚期死線,單靠聊天視窗生成程式碼,根本無法交付可靠的系統。

這不是一份個人的隨筆紀錄,而是一套可落地的自動化工程架構。
本系列將完整拆解以規格驅動(SDD)為核心的「一人 AI 流水線」:從需求轉譯、型別與 Mock 合約、E2E 測試合約,到 Vibe UI 邊界控制與 CI/CD 護欄。透過嚴謹的閘門(Gate)約束 AI 產出,讓前端工程師也能獨立交付穩定的全端系統。

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 後端還沒好,但我一天都沒等

❯❯ mock server+typed client:前端不等後端的全速開發 📍 流水線位置|入口 → flow → 型別 → 【mock】 → 測試 →...

2026-08-27 ‧ 由 樂樂 分享
DAY 12

Day 12 你整套都在跟假後端玩,真的一接不就露餡了

❯❯ 當 Mock 遇到了真 DB:7 處寫入讀取不對稱缺口,與一個 Commit 切換 Postgres 的真相 📍 流水線位置|入口 → flow → 型...

2026-08-28 ‧ 由 樂樂 分享
DAY 13

Day 13 後端又改規格了,我不重寫!Sync 模式如何用「外科手術」精準同步增量欄位

❯❯ Sync 模式:後端 spec 變更的增量同步,只動該動的 📍 流水線位置|入口 → flow → 【型別】 → mock → 測試 → UI → vi...

2026-08-29 ‧ 由 樂樂 分享
DAY 14

Day 14 測試不是保險,是不會說謊的合約!150 條凍結 E2E 測試,打造「紅燈只許修 Code」的 SSOT 鐵律

❯❯ 規格不漂移,測試不改鬆:當 E2E 測試成為系統的 Single Source of Truth 📍 流水線位置|入口 → flow → 型別 → mo...

2026-08-30 ‧ 由 樂樂 分享
DAY 15

Day 15 全綠燈,然後正式站還是炸了!從 3 起線上事故看自動化測試的守備盲區與 CI 防線補強

❯❯ 綠燈的邊界:R2 CRC32、跨租戶越權、CI 沒跑 unit:三個真實事故 📍 流水線位置|入口 → flow → 型別 → mock → 【測試】...

2026-08-31 ‧ 由 樂樂 分享
DAY 16

Day 16 測試怎麼寫,才對得起「合約」兩個字

❯❯ 別讓改個 CSS 就全紅!如何寫出不被 UI 樣式牽著走的 E2E 測試 📍 流水線位置|入口 → flow → 型別 → mock → 【測試】 →...

2026-09-01 ‧ 由 樂樂 分享
DAY 17

Day 17 讓 AI 對著紅燈,自己把 UI 蓋到綠

❯❯ 紅燈,是我寫給 AI 最清晰的規格書!/feature-to-ui 如何用 TDD 與五階段管線 2 天蓋完 11 個模組 📍 流水線位置|入口 → f...

2026-09-02 ‧ 由 樂樂 分享
DAY 18

Day 18 我想換版面,又怕改壞舊功能

❯❯ AI 生成之後呢?Vibe UI 治理:如何劃開語意與樣式邊界,避免視覺優化引發業務退化 📍 流水線位置|入口 → flow → 型別 → mock →...

2026-09-03 ‧ 由 樂樂 分享
DAY 19

Day 19 畫面讓你隨便改,但動到這 3 樣算你毀約!Vibe UI 治理的三條業務紅線與自由重構地圖

❯❯ 約束越明確,重構越自由!從 Flow 不變量到 Vibe 守則:用 E2E 測試守住重構底線 📍 流水線位置|入口 → flow → 型別 → mock...

2026-09-04 ‧ 由 樂樂 分享
DAY 20

Day 20 規則會被忘記,所以我讓機器守門!從 Git Hooks 到 108 行視覺 Lint 的兩道自動化防線

兩道閘門:Playwright 雙區紅燈分流與 pre-push 自動化把關實務 📍 流水線位置|入口 → flow → 型別 → mock → 測試 → U...

2026-09-05 ‧ 由 樂樂 分享