架構導向 · AI 協作開發
profile.joshwang.dev/slides
我的定位
Software Developer
把不確定性變成可交付系統
10+ 年 Web / Mobile 架構開發經驗。
擅長在需求模糊、系統有包袱、時程緊的情境下，釐清問題邊界、設計可維護路徑，並用 AI 協作加速驗證。
架構導向
先看資料流、部署與維護成本，再決定寫什麼程式碼。
產品交付導向
把技術選型拉回使用情境與可驗收結果，不只追求漂亮實作。
AI 協作導向
用 AI 擴大探索、測試與重構速度，保留人的架構判斷與品質把關。
能力形成的脈絡
三個階段，同一種工作方法
新創與全端探索
旅宿、行動 App、GraphQL、客服後台 — 習慣在模糊需求中補齊產品與工程邊界。
企業系統與資安產品
OEC 跨國內部系統（50+ 國）、TeamT5 資安產品前端與官網，強調可靠性與維護性。
專案型交付與 AI Workflow
CI/CD 重構、技術債清理、地圖互動、交易平台，以及 AI-assisted development 的落地實踐。
證據
三個可以被驗證的結果
把發布流程從分裂拉回可維護
分支與環境流程過度拆分，維運成本與 release 風險持續升高。
重構 Monorepo 流程，重新整理 CI/CD 分支策略與自動化驗收路徑。
用 AI 協作壓縮功能驗證時間
地圖 POI 篩選互動複雜，既有模組帶著技術債，驗證週期偏長。
導入 Claude Code 協作，把探索、拆解與實作驗證變成可重複流程。
主動發現並推動修補資安問題
審查外部廠商系統時，發現密碼明碼傳輸及登入權限設計漏洞。
主動提報管理層，推動廠商改善並追蹤修補進度。
慣用的記帳 App 開始不可靠，決定自己整合銀行對帳單 — 但不想把財務資料交給雲端 AI 處理。
- Gmail 自動收帳單，AI 讀取加密 PDF 整理成可查詢資料，例外才人工審核
- 自託管架構，財務資料不離開本地；12 個月收支趨勢與月報 PDF 匯出
從 Gmail 信箱到
自託管財務資料管線
台灣帳單格式各異、PDF 加密方式不一，同時不想把財務資料送到雲端 AI。
這兩個限制決定了架構的核心設計。
讓 AI 直接讀 PDF
台灣帳單版型差異很大，不先拆文字，讓 vision model 直接讀 PDF 並輸出固定格式，省去維護 parser 的成本。
例外才人工審核
乾淨的資料自動入帳；解析失敗或帳戶不確定時，才進入 review queue，操作負擔維持最低。
依機構規則抓 Gmail 裡的銀行、信用卡、證券與水電帳單。
背景工作解密後，vision model 直接讀帳單並輸出結構化交易資料。
交易、帳戶、匯率與每月資產快照進資料庫；例外進 review queue。
接手新專案時，手寫測試來不及、不測又不安心 — 讓 browser agent 先把 app 走一遍，自動生成 E2E 測試套件。
- Stagehand 記錄 ActionLog → Two-pass LLM 轉 Gherkin + Playwright steps → self-healing 驗證，輸出 CI-ready zip
- 一週完成 POC 並開源，runtime 零 LLM 依賴
Browser agent 探索，
LLM 轉成可落地測試
核心挑戰：AI 探索行為是機率性的，但輸出的測試必須是確定性的。
Two-pass pipeline 與 self-healing 就是為了解決這個張力。
先探索，再產生測試
第一步讓 browser agent 操作 app 並記錄 ActionLog；第二步才由 LLM 把紀錄整理成測試案例，兩步分開讓每個階段都可以獨立驗證。
驗證後才輸出，失敗自動修
產生後先試跑；selector 或 timeout 出錯時，LLM 自動修正後重試。最終 zip 的 runtime 不再需要呼叫 AI。
Stagehand 瀏覽 app，記錄點擊、輸入與畫面變化為 ActionLog。
ActionLog → Gherkin feature files → Playwright step definitions。
試跑測試，失敗時自動修 selector；通過後打包成 CI-ready zip。
Thank You
📧 spjay1@gmail.com
🔗 profile.joshwang.dev/slides
📍 Taipei, Taiwan
想加入把 架構品質 與 AI 開發流程 放在同一張桌上討論的團隊。