生成式 UI（Generative UI，簡稱 GenUI）是 2026 年 UI/UX 圈最熱門的話題——不是因為它聽起來酷，而是因為它正在根本改變設計師的工作方式。今天要搞清楚 GenUI 是什麼、它跟傳統設計有什麼差，以及設計師在這個浪潮裡該怎麼站穩腳步。
📖 學（核心）
傳統 UI vs. 生成式 UI：一個根本的差異
傳統介面的流程是：設計師畫稿 → 工程師寫死畫面 → 使用者看到固定的 UI。每個按鈕、每個卡片、每個表單，都是在 build time 就決定好的。這套流程行之有年，沒有問題——在介面需求固定的時代。
GenUI 打破的是這個「固定」的假設。在 GenUI 的架構裡，介面是在 runtime 由 AI（通常是 LLM）根據使用者當下的意圖和情境，即時組合出來的。設計師不再畫「這個頁面長這樣」，而是定義「這些情境下，可以出現哪些元件、遵循哪些規則」。
具體例子：同一個飯店預訂 App，商務旅客開啟的卡片自動顯示「會議室距離、高速 Wi-Fi 標示、含早報選項」；帶小孩的家庭開啟的是「兒童泳池照片、親子房型、免費兒童餐」。後端同一份資料，但 AI 根據使用者輪廓即時組裝出完全不同的視覺呈現。
GenUI 的三種實作模式
目前業界的 GenUI 實作大致落在三個層次：
1. 預定義元件 + AI 排程（Component Orchestration）
最保守也最穩定的做法。設計師預先建立一組經過審核的 UI 元件（按鈕、卡片、表單欄位），AI 負責決定「組哪些元件、用什麼順序、帶什麼資料」，但不會生成全新的元件。這符合安全考量，因為客戶端只渲染事先批准的元件，避免 UI 注入攻擊的風險。Vercel AI SDK 的 streamUI()、CopilotKit 走的都是這條路。
2. 意圖驅動的動態佈局（Intent-Driven Layout） 進階一點。使用者用自然語言描述需求，系統解析意圖後即時調整整個頁面結構。Google 在 2026 年初推出的 GenUI SDK for Flutter，採用 A2UI 作為序列化格式，讓 Gemini 模型透過標準協定把介面「描述」給前端渲染，前端再依規則轉換成實際的 Widget。
3. 運行時完全生成（Runtime Generation） 最激進。AionUi 提出的哲學是「Don’t code the UI, code the Intent」——開發者只定義意圖，UI 在每次執行時都可以是全新的。目前這個模式仍在早期階段，主要用在內部工具和原型，還不適合直接上 production。
對設計師的實際影響
Gartner 預測，2026 年底前 30% 的新 App 會採用某種程度的 AI 驅動自適應介面，相較兩年前不到 5%，成長幅度驚人。
這對設計師的工作方式有三個直接影響：
設計的粒度從「畫面」變成「元件系統」。與其設計 20 個固定頁面，你需要設計 50 個彈性元件，並定義它們在各種情境下的行為規則。Design System 從「視覺一致性的參考文件」，升級成「AI 能讀懂、能遵循的設計治理平台（Design Governance）」。
你要學會寫設計規格給 AI 讀。不只是寫給人看的 spec，而是能轉換成結構化資料的設計決策：「當使用者是 B2B 情境，優先顯示資料密度高的表格；當使用者是一般消費者，優先顯示圖片卡片。」這種條件式設計思維，在 GenUI 時代是核心能力。
使用者測試的對象從「固定介面」變成「AI 行為」。你不能只測試一個版本的畫面，你要測試 AI 在不同情境下生成出來的介面是否符合預期，以及是否有邊緣案例跑出怪異的組合。
現在就要注意的陷阱
GenUI 最大的設計風險不是技術，而是失控的一致性。如果每個使用者看到的介面都不一樣，品牌識別怎麼辦？使用者的肌肉記憶怎麼辦？設計師的職責之一，就是在「個人化彈性」和「可預測的一致性」之間畫出清楚的邊界——哪些元素永遠固定（主導覽、品牌色、核心操作流程），哪些元素可以由 AI 自適應（內容卡片順序、推薦模組、功能提示）。
🧠 記
- GenUI = 介面在 runtime 由 AI 根據使用者意圖即時組裝，而非 build time 寫死
- 三個層次：元件排程（穩定）→ 意圖驅動佈局（進階）→ 運行時完全生成（實驗性）
- 設計師的工作從「畫頁面」轉為「定義元件規則與情境邏輯」
- Design System 在 GenUI 時代升格為「設計治理平台」，AI 必須能讀懂
- 最大陷阱：一致性失控——要明確定義哪些是固定錨點，哪些才讓 AI 自適應
- 安全考量：客戶端只渲染預先審核的元件，防止 UI 注入攻擊
- Gartner 預測 2026 年底 30% 新 App 會有某種 AI 自適應介面
✍️ 實踐
挑一個你正在做或熟悉的 App（不管是自己的 side project 還是工作專案），做這件事：
- 列出 App 裡至少 5 個可能因「使用者類型」或「使用情境」不同而需要顯示不同內容的畫面區塊。
- 為每個區塊寫一條規則，格式是：「當 [情境/使用者特徵]，顯示 [哪些元件/資訊]，隱藏或降低優先度 [哪些元件/資訊]。」
- 把寫出來的規則貼給 AI（ChatGPT、Claude），請它評估這個規則在實際執行時可能產生的邊緣案例。
完成後你會發現：把設計決策轉換成條件式邏輯，比想像中難，但這正是 GenUI 時代設計師最需要訓練的思維。
🔗 延伸學習
- 不再只是畫圖！2026 年 UX 必備的 5 大關鍵趨勢：掌握「生成式 UI」避免在 AI 浪潮中被淘汰
- What Is Generative UI? Building Agent-Powered Interfaces | Google Cloud
- The Developer’s Guide to Generative UI in 2026 - DEV Community
- 2026 UI/UX 設計趨勢全解析：10 個正在改寫介面的方向 - RAR 設計攻略
💬 想深入？複製下面這段到 AI（ChatGPT、Claude…），再打上你的問題
你是我的「UIUX」學習教練。我今天在學的主題是「生成式 UI（Generative UI / GenUI）」，重點包括：AI 即時組裝介面取代固定畫面、設計師轉型為定義元件規則與情境邏輯、Design System 升格為設計治理平台、固定錨點與自適應區塊的邊界劃分。請用淺白、可操作的方式回答我接下來的問題，需要時給例子和步驟。我的問題是：
↑ 複製整段，貼到 AI，最後接上你的問題即可。