生成式使用者介面 (GenUI) 將數位設計從靜態的預先轉譯範本,轉變為即時建構的動態介面。開發人員不必為每種可能狀態硬式編碼,大型語言模型 (LLM) 會根據特定使用者意圖和工作階段情境,調整版面配置、元件和資料圖表,進而協調 UI。
在實務上,UI 可做為彈性的調度管理層。可立即重新設定資訊主頁,或生成實用的迷你應用程式,處理靜態介面無法預期的特定要求。
早期將大型語言模型整合至應用程式時,經常會遇到「文字牆」問題。雖然模型可以推論、規劃及執行複雜工作,但通常會將輸出內容壓縮成大段文字或標準 Markdown。生成式 UI 可以將功能強大的大型語言模型自然介面,轉換成完整、實用且互動性高的使用者服務,協助解決這個問題。
生成式 UI 其實涵蓋一系列實作策略,並不侷限於單一技術。您可以視品牌安全和安全性需求選擇合適的策略。
做法 | 運作方式 | 注意事項 |
靜態生成式 UI | 代理會從固定元件庫中,選取手動建構的元件。 | 控管程度較高:確保品牌形象一致且安全,但視覺彈性受限。 |
宣告式生成式 UI | 代理會傳回結構化結構定義 (例如 JSON),代表 UI 元素 (資訊卡、清單、小工具)。 | 平衡:可有效擴充,並在維持一致性的同時,賦予代理表達能力。 |
開放式生成式 UI | 代理會生成在前端轉譯的原始程式碼 (HTML/CSS)。 | 提供最高程度的彈性:創意不受限,但會造成極大的安全性 (XSS) 和樣式風險。 |
做法
運作方式
注意事項
靜態生成式 UI
代理會從固定元件庫中,選取手動建構的元件。
控管程度較高:確保品牌形象一致且安全,但視覺彈性受限。
宣告式生成式 UI
代理會傳回結構化結構定義 (例如 JSON),代表 UI 元素 (資訊卡、清單、小工具)。
平衡:可有效擴充,並在維持一致性的同時,賦予代理表達能力。
開放式生成式 UI
代理會生成在前端轉譯的原始程式碼 (HTML/CSS)。
提供最高程度的彈性:創意不受限,但會造成極大的安全性 (XSS) 和樣式風險。
用來建構代理輔助介面的生態系統發展迅速,目前已出現數個不同的框架,可處理 UI 的傳輸和轉譯作業。
A2UI 是 Google 設計的開放原始碼 UI 工具包,可協助大型語言模型生成跨信任邊界的 UI。它使用高度安全的宣告式 JSON Lines (JSONL) 串流,將 UI 結構和資料模型從任何代理傳送至任何用戶端應用程式。A2UI 傳輸的是宣告式資料,而非可執行程式碼,因此本質上很安全,且不受框架限制,可在網頁、Flutter、Android 和 iOS 上,以原生方式轉譯相同的代理輸出內容。代理能夠針對任何現有的設計系統「說出」UI。
AG-UI 是一般用途的雙向連線通訊協定,介於代理式前端和代理式後端之間。由 CopilotKit 開發,可處理複雜的狀態同步作業,並順暢支援各種生成式 UI 規格,就像一座橋梁,將代理輸出內容轉譯為豐富的互動式前端元件。
MCP 應用程式是 Model Context Protocol UI 擴充功能,可將使用者介面視為代理所用工具可傳回的互動式「資源」。MCP 伺服器可建構並傳回 UI 元件 (以沙箱 iframe 內轉譯的 HTML 形式),讓第三方服務在任何相容的代理中,維持獨特的視覺形象。
將生成式 UI 原型投入正式環境時,必須考量四個重要因素:
為避免 UI 注入 (提示詞注入會迫使模型轉譯惡意程式碼),建議採用最小權限 UI 模型。A2UI 等通訊協定會傳輸資料,而非程式碼,且用戶端只應轉譯預先核准、經過稽核的元件。
生成式 UI 的介面不具確定性,因此傳統的視覺迴歸測試更容易出現誤判。測試應改為機率斷言,以驗證「意圖」和「功能元件」(例如特定按鈕) 是否存在且可互動,無論確切位置為何。
新增的推論步驟會影響 Time to Interactive (TTI)。為維持回應速度,建議實作串流 UI 更新,例如使用 JSONL 立即開始轉譯,並使用向量式快取,為類似查詢提供先前產生的 UI 結構 (語意快取)。
動態 UI 必須持續遵循無障礙網頁規範。建議採用以結構定義為準的無障礙設計,直接將無障礙功能需求納入基礎 JSON 結構定義。接著,轉譯引擎就能根據要求的元件類型,自動插入必要的 ARIA 標籤和角色。
考量因素 | 傳統 UI | 生成式 UI |
開發速度 | 手動調整衝刺週期 | 視需求生成 |
使用者體驗一致性 | 較高 (硬式設計系統) | 變數 (情境式調整) |
安全性風險 | 較低 (靜態程式碼稽核) | 較高 (須採用嚴格的沙箱機制) |
主要應用實例 | 核心工作流程和設定 | 資料探索與複雜的查詢 |
考量因素
傳統 UI
生成式 UI
開發速度
手動調整衝刺週期
視需求生成
使用者體驗一致性
較高 (硬式設計系統)
變數 (情境式調整)
安全性風險
較低 (靜態程式碼稽核)
較高 (須採用嚴格的沙箱機制)
主要應用實例
核心工作流程和設定
資料探索與複雜的查詢
Google Cloud 提供全套工具,可建構、管理及擴充能提供生成式 UI 的 AI 代理。