AI 應用

#Design Bridge — AI 原型生成平台

AI 驅動的原型生成平台：用自然語言描述 UI，幾秒內產出多頁面可互動 HTML 原型。已在內部上線，供 PM 與設計實際使用。

Node.jsTypeScriptExpressReactMulti-Agent OrchestrationGoogle Gemini API@kevinsisi/ai-coreDocker

實際系統畫面 — 實際生成過程：輸入「寵物美容預約網站首頁」需求後，合議模式（PM／Designer／Engineer／Moderator）討論定案，自架 opencode gateway（免費模型 mimo-v2.5-free）直接產出可互動的「毛孩澡堂」首頁 wireframe——左側對話、中間即時渲染、右側 275 行 Vue + Tailwind 原始碼。（點擊圖片看原圖）

// 為什麼會做

##背景

PM 與開發團隊之間的溝通落差，讓需求文字到可看畫面之間動輒數天的來回。

// 遇到什麼問題

##問題

需求以文字傳遞時容易失真，設計與開發來回成本高；PM 沒有工具能快速把想法變成可互動的畫面驗證方向。

// 如何解決

##解法

4-Agent 結構化討論（PM → UX → QA → Tech + 確認輪）分析需求 → 準則束縛（harness engineering）：Agent 依設定門檻自動分析並產出網頁與流程圖，美感基準來自自建的視覺基準沙盒 → HTML QA Validator 自動檢查空頁面 / 導航死角 + auto-retry → 元件級選取微調（點選 iframe 內元件，AI 只改該元件，省 90% token）。另含對話顧問模式與 SKILL.md 領域知識注入。

// 我負責什麼

##我的角色

設計 4-Agent 協作架構與準則束縛機制，撰寫人設 prompt 與 QA 驗證管線，全端開發

// result

##成果

已在內部上線、供設計與研發實際取用：設計端直接套用產出的設計準則、後端對照 API 清單、前端沿用對應程式碼。11 種場景模板，元件級微調省約 90% token。