生成式介面(Generative UI)正在把「介面」從設計師預先畫好的固定畫面,變成由 AI 依使用者當下意圖即時組裝的動態結果。過去我們替所有人設計同一套流程,現在系統會根據語境重新排列版面、內容與互動元件,讓同一個功能對每個人長得不太一樣。這不是把聊天機器人塞進側邊欄那麼簡單,而是一整套關於「如何讓 AI 安全地產生 UI」的設計方法。這篇整理它的核心概念、實作模式,以及設計師該守住的邊界。
📖 學(核心)
什麼是生成式介面
生成式介面指的是「透過 AI 即時為使用者動態產生量身打造的介面」。傳統設計是先把螢幕全部畫完再交給工程實作;生成式介面則是在執行階段(runtime)才決定要顯示哪些元件、以什麼版面呈現。Nielsen Norman Group 因此提出設計重心要從「畫每一個畫面」轉向「以結果為導向的設計」(outcome-oriented design):設計師定義使用者目標與可用的元件規則,由 AI 在當下組裝出最貼合意圖的畫面。
值得注意的是,主流做法並不是讓大型語言模型直接產生前端程式碼。模型讀取工具(tool)的描述、判斷使用者意圖,再把請求路由到工程師事先寫好的 React 元件。這種「路由模式」把責任切得很乾淨:AI 層負責決策、資料層負責查詢、UI 層負責渲染。模型不發明畫面,只在允許的目錄裡挑選與填值。
約束式渲染:用 schema 圈出安全範圍
要讓 AI 產生介面而不失控,關鍵是「約束式渲染」(constraint-based rendering)。開發者用 Zod 之類的 schema 定義一份「允許使用的元件與動作目錄」,LLM 只能輸出符合這份目錄的 JSON 規格,框架再依規格逐步把 UI 串流渲染出來。Vercel 在 2026 年 3 月開源的 json-render 就是這個思路:元件目錄由開發者定義,模型從自然語言生成受限的結構化介面,並支援多種前端框架。
這帶來兩個好處。第一是可控性:AI 產出的畫面永遠落在設計系統的範圍內,不會冒出未經審查的樣式或行為。第二是可維護性:元件仍是一般的、可獨立使用的 React 元件,關鍵設計原則正是「先把元件做成獨立就好用,它自然就能被 AI 組合」。
效能是體驗的前提
生成式介面最大的敵人不是美感,而是延遲。若介面要等好幾秒才回應,無論產出多精準,體驗都會斷裂。因此 Vercel AI SDK 這類方案大量倚賴 React Server Components 與串流渲染,讓元件能邊產生邊出現,而不是讓使用者盯著空白等待。設計時要為「載入中」與「逐步浮現」設計狀態,把等待本身也當成介面的一部分。
設計師的角色轉變
當 AI 接手研究彙整、變體生成、文案測試與無障礙評分,設計師畫每一個畫面的比重會下降。角色轉為「體驗架構師」:定義護欄(guardrails)、決定哪些元件可被組合、以及個人化在執行階段該遵循的規則。Gartner 預估到 2026 年,有三成的新應用會採用 AI 驅動的自適應介面,而兩年前這個比例還不到 5%。換句話說,懂得替 AI 設定邊界,會比會畫漂亮畫面更稀缺。
🧠 記
- 生成式介面 = 執行階段由 AI 依意圖即時組裝的畫面,而非預先畫死的固定流程。
- 主流做法是「路由」而非「生程式碼」:AI 判斷意圖並選用工程師寫好的元件。
- 約束式渲染用 schema 圈出可用元件目錄,AI 只能在目錄內輸出,兼顧可控與可維護。
- 效能與串流是體驗前提;要為載入與逐步浮現設計狀態。
- 設計師轉為體驗架構師,重點是設定護欄與個人化規則,而非畫每一個畫面。
✍️ 實踐
- 盤點你產品中「同一功能但不同人需求差很大」的場景(如儀表板、搜尋結果),挑一個作為生成式介面試點。
- 把該場景會用到的畫面拆成 3–6 個可獨立運作的元件,每個都寫清楚用途描述,讓 AI 能據此判斷何時使用。
- 用 Zod 之類的 schema 定義「元件目錄」與可填的參數,明確列出 AI 允許輸出的範圍,守住設計系統邊界。
- 導入串流渲染(如 React Server Components),為每個元件設計「載入中」與「逐步浮現」的過渡狀態。
- 設計失敗與降級路徑:當 AI 判斷不確定時,退回到一個可靠的預設版面,而不是給出破碎畫面。
- 建立審查機制,定期抽查 AI 實際組出的畫面,檢查是否符合無障礙、一致性與品牌護欄。
🔗 延伸學習
- AI SDK UI: Generative User Interfaces
- Introducing AI SDK 3.0 with Generative UI support
- GenUI: AI-Generated Interfaces (NN/g)
- Vercel Releases JSON-Render: a Generative UI Framework
💬 問 AI
我正在為「{產品或功能}」評估是否導入生成式介面(Generative UI)。
請協助我:
1. 判斷「{使用場景}」是否適合用 AI 即時組裝介面,還是固定版面更好,並說明理由。
2. 把這個場景拆成一份「可被 AI 組合的元件目錄」,每個元件給出用途描述與建議的參數 schema。
3. 列出我在效能、無障礙與品牌一致性上需要設定的護欄。
4. 設計當 AI 判斷不確定時的降級與失敗處理策略。
使用者類型是「{目標使用者}」,技術堆疊是「{前端框架}」。