AI 應用
Design Bridge — AI 原型生成平台
AI 驅動的原型生成平台：用自然語言描述 UI，幾秒內產出多頁面可互動 HTML 原型。已訂為內部原型製作的標準流程並正式上線。
專案概覽
AI 驅動的原型生成平台：用自然語言描述 UI，幾秒內產出多頁面可互動 HTML 原型。已訂為內部原型製作的標準流程並正式上線。
為什麼會做
背景
PM 與開發團隊之間的溝通落差，讓需求文字到可看畫面之間動輒數天的來回。
遇到什麼問題
問題
需求以文字傳遞時容易失真，設計與開發來回成本高；PM 沒有工具能快速把想法變成可互動的畫面驗證方向。
如何解決
解法
4-Agent 結構化討論（PM → UX → QA → Tech + 確認輪）分析需求 → 準則束縛（harness engineering）：Agent 依設定門檻自動分析並產出網頁與流程圖，美感基準來自自建的視覺基準沙盒 → HTML QA Validator 自動檢查空頁面 / 導航死角 + auto-retry → 元件級選取微調（點選 iframe 內元件，AI 只改該元件，省 90% token）。另含對話顧問模式與 SKILL.md 領域知識注入。
我負責什麼
我的角色
Architecture, Multi-Agent Orchestration, Prompt Engineering, Full-stack Development, QA Validation Pipeline
使用技術
技術棧
Node.jsTypeScriptExpressReactMulti-Agent OrchestrationGoogle Gemini API@kevinsisi/ai-coreDocker
踩過哪些坑
挑戰
成果
成果
訂為 PM → 設計 → 研發交付流程的標準做法：設計部門在產出上直接套用設計準則、後端標示 API 清單、前端沿用對應程式碼。11 種場景模板，元件級微調省約 90% token。