昨天我們探討了 AI Product Owner 如何從模糊的想法萃取出清晰的需求，今天要進入 AI-DLC Sprint 的第三環節 - AI UI/UX Designer。

這個角色不只是把需求變成漂亮的界面，更是在 BDD 和 DDD 的框架下，讓領域概念和使用者行為完美融合成視覺語言。

從文字到視覺的 AI 轉譯

記得之前提過的 Spec-Driven Development 嗎？當我們有了清晰的規格和行為定義後，下一步就是要把這些抽象概念具象化。傳統上，這需要設計師花大量時間理解需求、繪製草圖、反覆修改。但在 AI 時代，這個過程可以變得更加高效且精準。

文字描述到 Wireframe 的演進

我在實作中發現了一個有趣的現象：當你給 AI 越結構化的輸入，它產出的設計就越貼近實際需求。這就像是給建築師詳細的建築規範，而不是只說「我要一棟漂亮的房子」。

舉個實際案例，當我在開發任務管理系統時：

模糊輸入版本：「我需要一個看板介面，要能拖拉任務卡片」

AI 會給你一個通用的 Kanban 板，可能符合基本需求，但缺乏你的業務特色。

結構化輸入版本：

基於 BDD 場景：

• Given 專案經理正在查看團隊進度
• When 有任務延遲超過 3 天
• Then 該任務卡片應該顯示紅色警示 And 自動展開延遲原因的輸入框

基於 DDD 領域模型：

• Task 實體包含：優先級、截止日、負責人、依賴關係
• 看板泳道基於：工作流狀態（待辦/進行中/審核/完成）
• 卡片資訊層級：主要（標題、負責人）、次要（標籤、截止日）

這樣的輸入會讓 AI 產出更貼近業務邏輯的設計，而不只是一個通用模板。

BDD 模式下的行為驅動介面設計

BDD（Behavior-Driven Development）不只是用來寫測試，它更是一種思考介面設計的方式。每個使用者行為都應該對應到明確的視覺反饋。

從 Given-When-Then 到介面元素

讓我們把 BDD 場景直接映射到 UI 元素：

Given（前置狀態） → 決定頁面的初始佈局和資訊架構

• 使用者角色決定功能可見性
• 資料狀態決定元件的預設值
• 權限決定操作按鈕的啟用狀態

When（觸發動作） → 定義互動元件的類型和位置

• 主要動作使用明顯的按鈕（Primary Button）
• 次要動作使用圖標或下拉選單
• 批次操作提供多選和工具列

Then（預期結果） → 設計反饋機制和狀態變化

• 成功訊息使用 Toast 或內嵌提示
• 錯誤處理提供明確的修正指引
• 載入狀態使用骨架屏或進度指示器

這種方法的好處是，設計和測試可以共用同一套場景定義。設計師知道要呈現什麼，開發者知道要實作什麼，測試人員知道要驗證什麼。

DDD 模式下的領域概念視覺化

領域驅動設計（DDD）強調用業務語言來建模，這個概念同樣適用於介面設計。每個領域概念都應該有對應的視覺表現。

領域模型到視覺元件的映射

幾個常見的映射模式：

聚合根（Aggregate Root）： 主要容器元件

• 通常是卡片、面板或獨立頁面
• 包含完整的操作工具列
  = 有明確的邊界和標識

實體（Entity）： 可識別的資料元件

• 具有唯一標識（ID、編號、名稱）
• 可以被選擇、編輯、刪除
• 狀態變化有視覺反饋

值物件（Value Object）： 展示型元件

• 標籤、徽章、統計數字
• 通常是唯讀或整體替換
• 強調資訊呈現而非操作

領域事件（Domain Event）： 動態提示元件

• 即時通知、活動日誌
• 時間軸、歷史記錄
• 狀態轉換的視覺化

這種映射讓設計師能夠更準確地理解業務邏輯，也讓開發者更容易實作符合領域模型的介面。

Design System 的 AI 生成與管理

一個好的 Design System 不是一堆零散的元件，而是一個有機的整體。AI 可以幫助我們快速建立並維護這個系統。

從專案需求到設計系統

筆者的做法是讓 AI 分析整個專案的需求和領域模型，自動生成初始的 Design System：

顏色系統生成

• 基於品牌色彩和無障礙標準
• 自動計算明暗變化和對比度
• 為不同狀態（成功、警告、錯誤）配色

字型系統規劃

• 根據內容層級定義字體大小
• 設定行高、字重、間距規則
• 考慮多語言和響應式需求

元件庫建立

• 從原子元件到複合元件的層級
• 包含狀態變化和互動模式
• 提供使用指南和範例程式碼

最棒的是，這個 Design System 會隨著專案演進而成長。每次新增功能時，AI 會檢查是否需要新元件，或是可以重用現有元件。

多方案設計的 AI 比較評估

設計從來不是單一答案的問題。AI 的優勢在於能快速產生多個方案，並從不同維度進行評估。

設計方案的自動化評分

筆者試著建立了一套評估框架，讓 AI 對每個設計方案進行多維度評分：

可用性評分

• 操作步驟數（越少越好）
• 認知負荷（資訊密度適中）
• 錯誤預防（防呆設計）

美觀性評分

• 視覺平衡（對稱、留白、層次）
• 風格一致性（與 Design System 的符合度）
• 品牌契合度（與企業形象的匹配）

技術可行性評分

• 實作複雜度（開發時數預估）
• 效能影響（渲染成本、互動流暢度）
• 維護成本（元件複用率、程式碼簡潔度）

業務價值評分

• 功能完整性（滿足需求的程度）
• 擴展性（未來功能的預留空間）
• 差異化（與競品的區別）

這樣的評分系統不是要取代人的判斷，而是提供一個客觀的參考基準。最終決策還是要考慮團隊的實際情況和使用者的真實反饋。

AI 生成響應式設計完整方案

響應式設計不只是讓介面在不同尺寸下「能看」，而是要在每個裝置上都提供最佳體驗。

斷點策略的智慧規劃

AI 可以根據目標使用者的裝置分布，自動建議斷點策略：

裝置優先級判斷

• 分析目標市場的裝置使用統計
• 考慮業務場景（辦公室 vs 行動）
• 預測未來趨勢（摺疊螢幕、智慧手錶）

佈局自適應規則

• 內容優先級在不同尺寸下的調整
• 導航模式的切換（側邊欄 → 底部導航 → 漢堡選單）
• 互動方式的轉換（滑鼠懸停 → 觸控手勢）

效能優化策略

• 圖片響應式載入（srcset、picture）
• 元件懶載入（優先載入可視區域）
• 離線優先（PWA、Service Worker）

這些策略不是寫死的規則，而是基於實際資料和使用情境的動態調整。

實戰

可以參考筆者另一系列：AI-Driven Development 實戰篇：30 天 Side Project 開發全紀錄，實際將 AI-DLC Sprint 中的 UI/UX Design 利用 AI Agent 落地。

實戰心得：讓 AI 成為設計夥伴

經過這段時間的實踐，我發現 AI UX Designer 最大的價值不是取代設計師，而是解放設計師的創造力。當 AI 處理了繁瑣的規範檢查、多方案生成、響應式適配這些「體力活」，設計師可以專注在更重要的事情上：

• 理解使用者的真實需求 - 這需要同理心和洞察力
• 創造獨特的品牌體驗 - 這需要美感和創意
• 平衡各方利益 - 這需要溝通和判斷

AI 是工具，是助手，是夥伴，但永遠不會是決策者。它可以給你 100 個方案，但選擇哪一個，還是要靠人的智慧。

筆者是美感苦手，但透過 AI 的設計，可以從中找出符合自己想像的成果，畢竟美感十分主觀