生成式 UI 護欄：在不破壞設計系統的情況下進行設計
當人工智慧動態建立介面時，使用者體驗如何變化，以及如何建立元件、令牌和檢查，以便生成的 UI 保持可訪問性和品牌形象。
核心要點
生成式 UI 意味著人工智慧模型為每個請求組裝部分介面。為了保持其可用性，讓模型從已批准的元件目錄中進行選擇，而不是編寫原始樣式，向其傳遞您的設計標記，在渲染之前驗證其輸出（對比度、類型比例、焦點順序、減少運動），並在生成的區域周圍保留固定的導航框架和控制項。
從固定佈局到意圖設計
在固定的佈局中，設計師提前決定了每個螢幕。透過生成式 UI，AI 模型可以決定針對特定請求顯示哪個介面。谷歌將生成式 UI 描述為一種不僅生成內容而且生成完整體驗的模型，現在它在 Gemini 應用程式和 Google 搜尋中的 AI 模式中進行了基於此的實驗。在開發者工具中，Vercel AI SDK 描述了一個更簡單的版本：模型呼叫工具，該工具呼叫的結果呈現為 React 元件。
使用者體驗發生了什麼變化
設計師不再繪製每個螢幕，而是開始設計規則：存在哪些組件、每個組件何時合適以及什麼永遠不能改變。生成的內容周圍的框架，例如導航、輸入、撤消和設置，應該保持固定，這樣人們就不會迷失自己的位置。生成的區域應該清晰標記，人們應該能夠切換到簡單的、可預測的視圖。
Guardrail 1：經批准的組件目錄
最安全的模式是讓模型選擇並填充組件，而不是發明它們。 A2UI 是 Google 建立的開放協議，其運作方式如下：代理程式發送聲明性元件描述，用戶端使用自己的本機小工具呈現它們，而無需從代理程式中執行任意程式碼。您的目錄可以很小：表格、卡片、圖表、表格、列表，每個都由您的團隊建立和測試。
Guardrail 2：用代幣代替原始值
給出模型語意標記，例如 color.text.primary 或 space.4，並拒絕使用原始十六進位值或任意字體大小的輸出。這可以保持系統內部的對比度、排版和間距，並且深色模式或高對比度等主題可以自動運行。
Guardrail 3：渲染前驗證
在顯示產生的輸出之前執行自動檢查：存在必填欄位、色彩對比、標題順序、輸入標籤、焦點順序、觸控目標大小和簡化動作支援。如果檢查失敗，則返回簡單的、已知良好的佈局，而不是顯示損壞的 UI。
- 模式驗證：僅已知組件和屬性
- 輔助功能：對比、標籤、角色、焦點順序
- 內容限制：最大項目數、文字長度、圖片大小
- 後備：驗證失敗時的簡單清單或文字答案
要記住的關鍵 Principle
- 生成式 UI = 模型為每個請求組裝介面
- 在生成的區域周圍保留固定框架（導航、輸入、撤消）
- 讓模型從核准的目錄中進行選擇，而不是編寫原始 UI
- 傳遞語義標記並拒絕原始值
- 在渲染之前驗證可訪問性並保留後備
常見問題解答
來源
- Generative UI: A rich, custom, visual interactive user experience for any prompt — 谷歌研究
- A2UI: A Protocol for Agent-Driven Interfaces — a2ui.org
- Generative User Interfaces — Vercel AI SDK 文檔
- Design tokens overview — Material Design 3