【Vibe Coding】Google 推出全新 Generative UI：一句話生成互動式介面，Gemini 完整實戰教學

你是否曾經遇過這種情況？興沖沖地規劃了出國行程，把文字版傳到家庭群組，結果長輩的回應永遠是：「這在哪裡？」、「跟昨天那個順路嗎？」、「太複雜了我看不懂」。

文字對於解釋「地理位置」和「空間關係」來說，往往是溝通障礙。以前為了解決這個問題，我們可能要手動在 Google Maps 上一個一個標記地點，耗時又費力。

但現在，Google 最新的 Generative UI（生成式界面） 技術，徹底改變了這件事。這一次，我用 Gemini 3 的 Canvas 功能，只打了一句話，就幫我做好了「歐洲三國互動行程地圖」。媽媽再也不會問路順不順，直接點開地圖就看懂！

這篇文章將帶你了解 Generative UI 的技術原理，並手把手教你如何用 Gemini 實作出來。

什麼是 Generative UI？為什麼它很重要？

傳統的 LLM（大型語言模型）無論多強大，最終輸出的形式大多侷限於線性文本或靜態圖片。然而，Google 提出的 Generative UI 核心理念是：

「任何一個提示（Prompt），無論簡單還是複雜，AI 都能即時創建一個完全客製化的可視化體驗。」

這意味著 AI 不再只是「回答問題」，而是具備了「現場寫程式、現場做工具」的能力。

Google 是如何實現的？三大核心架構

根據 Google 發布的技術白皮書，要讓 AI 瞬間生成一個可用的 App 級介面，背後依賴三個關鍵技術支柱：

1.工具訪問 (Tool Access)：

模型能調用外部模組：

• 圖片生成（如 Imagen）
• 搜索結果
• 代碼執行
• 3D 圖形渲染
• 數據處理模組

工具輸出直接變成 UI 的一部分，使界面能真正「運作」。

2.系統級指令集 (System-Level Instructions)：

AI 在背景接收：

• 呈現形式（地圖？表格？按鈕？）
• 格式約束（可運行的 HTML/CSS/JS）
• 安全規範
• 視覺風格（如 Google 的 Wizard Green 風格）

確保 AI 不是隨意生成，而是生成「可真正使用的界面」。

3.輸出後處理 (Post-Processing)：

多層檢查：

• 語法錯誤排除
• 運行測試
• UI 一致性優化
• 安全檢查

最後輸出的並不是文字，而是「可以被點擊、拖曳、操作的頁面」。

這代表了什麼？ 未來所有的互動介面都將是「即時生成」的。你不需要為了單次需求去下載一個 App，因為 AI 會為你當下的需求，量身打造一個專屬介面。

親身實測 — 歐洲旅遊規劃的救星

說回我的歐洲之旅。規劃 18 天、橫跨法瑞義三國的行程本身就很繁瑣，但更累人的是「解釋給家人聽」。

每次把精心整理的文字行程丟到家庭群組：

• 👵 媽：「這是哪裡？跟昨天那個順路嗎？」
• 👩 我：「（打開 Google Maps 截圖畫線）在這裡...」
• 👵 媽：「喔喔...那這個點離飯店遠嗎？」（五分鐘後又忘了）

文字對長輩來說，缺乏地理位置的概念，溝通成本極高。以前我可能要手動在 My Maps 上一個一個拉座標，現在有了 Generative UI，一切都不一樣了。

實戰教學 — 5 步驟生成你的互動行程地圖

不用懂程式碼，不用複雜的操作，只要跟著以下 5 個步驟，你也能做出專屬的互動行程表。

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～

步驟一：打開 Gemini (建議使用 Advanced 版本)

首先，前往 Gemini 網頁版。

雖然基礎版功能強大，但建議使用 Gemini Advanced 模型，它在處理複雜邏輯和程式碼生成的表現上更為穩定，能更精準地觸發 Generative UI 的效果。

步驟二：開啟「Canvas/視覺版面配置」模式 (⚠️關鍵步驟！)

這是最重要的一步！一般的對話視窗適合純文字交流，要生成這種複雜的互動介面，請務必切換到 Canvas /視覺版面配置模式。

• 操作位置：在輸入框附近的工具選項中，選擇 「Canvas」或是「視覺版面配置」。

步驟三：輸入 Prompt (提示詞)

在左側對話框輸入你的需求。為了讓效果最好，建議包含「地點」、「天數」以及明確指出你需要「互動式地圖」。

你可以複製我的 Prompt 修改：

「我要規劃明年去歐洲的行程，生成一個『互動式地圖』，讓我可以在地圖上看到每一天的路線規劃、景點位置。[貼上粗略行程]」

步驟四：檢查 Gemini 生成的互動式介面

按下送出後，你會看到神奇的一幕：

1. 左邊視窗：Gemini 會列出文字版的行程建議。
2. 右邊 Canvas 視窗：AI 會開始編寫程式碼，幾秒鐘後，一個完整的地圖介面就會直接顯示出來！

你可以試著操作看看：

• 互動性：點擊地圖上的圖釘，看看會不會跳出景點名稱？
• 視覺化：行程的路線是否有用線條連接起來？
• 如果不滿意：你可以直接在左邊說：「把第三天的羅馬競技場改成去梵蒂岡」，右邊的地圖會即時更新，不需要重新生成。

步驟五：分享連結給家人

做好了超精美的地圖，當然要傳給家人看！

1. 在 Canvas 視窗的右上角，找到 「分享 (Share)」 或 「匯出」 的圖示。
2. 選擇 「建立公開連結 (Create public link)」。
3. 把這個連結丟到家庭群組。

現在，媽媽只需要點開連結，就能在她的手機上看到你剛剛做好的互動地圖，想知道哪裡順路、住哪裡，手指點一下就知道了！

應用場景：不只是旅行規劃

Generative UI 的潛力極大，尤其在：

教育與科學視覺化

例如：

• 「顯示 RNA 聚合酶如何工作」
• 「做一個地球自轉軌道模擬器」
• 「用互動儀表板解釋財務報表」

Generative UI 會生成可拖曳、可調整、可視化的動畫或模型。

工作流程與資料儀表板

商業使用者可以：

• 一句話生成 KPI 仪表板
• 自動排版季度報告
• 根據資料庫生成可點擊的圖表系統

這大幅降低資料分析與展示的門檻。

產品展示與互動原型

例如：

• 20 秒內生成一個「購物網站 Demo」
• 生成品牌社群圖牆
• 生成互動式教學工具

對設計師和 PM 來說，這能加速原型製作。

Generative UI 代表的未來：AI 會「現場」生成一切

Google 提到一個極具未來性的觀點：

你不再需要下載 App。
你只需講出需求，AI 就能即時生成一個專屬的使用介面。

未來人類與 AI 的互動：

• 不再依賴固定界面
• 不再受限於模板
• 不再依靠一堆分散的應用程式

相反的：

界面就是答案

體驗就是回答。
AI 是「生成你真正需要的操作環境」的系統。

Generative UI 是這場變革的起點。

結語：AI 不只是工具，更是溝通的橋樑

以前我們學習怎麼用 Excel、怎麼用 My Maps，是為了把資料整理給別人看。但在 Generative UI 的時代，我們只需要「描述問題」，AI 就會幫我們「打造解決方案」。

這次的歐洲行程規劃，讓我深刻體會到科技的進步。Gemini 3 幫我省下的不只是查地圖的時間，更省下了與家人來回解釋的溝通成本。

正在規劃旅行的你，趕快打開 Gemini Canvas 試試看吧！

想讓 AI 成為你團隊的一員？

Source

• Google 官方介紹網站