第 6 站 · 交到人手上該站第 10 / 11 場

把模型輸出變成能用的介面

078Bala Ramdoss（Amazon Lens）14:122026-07-20

Agent Output Is Not UX: Rendering Layer Your LLM Pipeline Is Missing - Bala Ramdoss, Amazon Lens

把模型輸出變成能用的介面 —— Amazon Lens的演講縮圖

講者說明如何用 contract、streaming、BFF 三個模式，把模型輸出接成使用者真正能用的介面。

重點摘要

  • 模型輸出不等於使用者體驗：模型把資料都算對了，但如果只是攤成一堆文字與連結，使用者還得自己整理才能完成任務；真正決定產品成敗的，是模型輸出與螢幕畫面之間那一層。
  • Generative UI 有了共同做法：這類需求現在有名字，也有 Google 提出的開放規格 A2UI，把 UI 描述成一份元件清單，交給 client 用自己的原生元件畫出來，不必每個團隊各自從零發明。
  • 手機端補不了丁，設計得更保守：網頁出包能立刻重新部署，手機 app 裝在使用者手機上卻無法被開發者事後修正，這條限制決定了整條 pipeline 該怎麼設計。
  • Rendering contract 讓模型只能選、不能亂畫：模型只從固定的元件選單挑東西畫，並依 client 的版本能力決定要不要曝光某個新元件，不必讓 client 自己猜該顯示什麼。
  • Streaming 把追蹤指標換成第一個有用畫面：LLM 回應普遍比傳統 API 慢，因此要分塊漸進渲染，讓使用者早點看到部分結果；等待時的畫面設計也要換掉傳統轉圈圈，且「thinking」狀態要用得節制。
  • BFF 負責組裝與注水：BFF 依平台規則把 typed UI 意圖轉成可渲染的元件，加上點擊動作與 deep link，還能沿用既有的 UI 元件庫，讓新的 agentic 功能長得跟原本 app 一樣。

時間軸14 段

00:00開場案例訂餐廳的例子：AI 助理把資料都算對了，卻只是丟出一堆文字與連結，使用者還得自己整理才能訂到位。
00:39換個畫法同樣的資料改成日期、時間加幾次點按就完成，帶出「模型與人之間那一層」才是這場要談的主題。
01:00講者背景Bala Ramdoss 自我介紹，過去六年負責打造 Amazon Lens 相機購物功能，這場經驗來自數百萬台裝置上的實測。
01:47界定問題agentic UI 的難題（卡片怎麼排、要不要一次給全部資訊、手機版本破碎）都不是模型的錯，而是模型輸出到畫面之間的交付問題。
02:39過去土法煉鋼過去每做一個 AI 功能都得從零手刻一套畫面邏輯，沒有共用的做法可以參考。
03:22有了共同語言這件事現在有名字：Generative UI，加上 Google 的開放規格 A2UI，把 UI 描述成一份元件清單，交給 client 用原生元件畫出來。
03:57三個層級Generative UI 分成 controlled、declarative、open-ended 三個層級，多數正式環境的手機 app 停在前兩層。
05:10手機的硬限制網頁出包能立刻補丁，手機 app 裝在使用者手機上卻補不了，這條限制決定了整條 pipeline 該怎麼設計。
05:49三模式總覽pipeline 拆成 contract、streaming、BFF 三個模式，分別對應「怎麼選 UI」「怎麼分批送」「怎麼組裝成畫面」。
06:20Contract 模式讓模型知道 client 目前的版本與能力，只能從固定選單挑元件，不會亂發明畫面。
08:46Streaming 模式LLM 回應比傳統 API 慢，靠分塊漸進渲染，把追蹤指標從總延遲換成「第一個有用畫面」出現的時間。
10:10等待時的設計傳統轉圈圈行不通了，要讓使用者在等待時仍有事可做，「thinking」狀態要用得節制。
11:17BFF 模式BFF 依平台規則組裝畫面、加上點擊動作與 deep link，還能沿用既有 UI 元件，不必為 agent 另外做一套介面。
13:05收尾與結論模型已經夠強，重點是用有版本、有類型的 contract 接住它的輸出，這層看不見的介面才是真正決定產品成敗的地方。

值得記的話5 句

  • The agentic product you're building already has all the tools to support your customers' needs.你正在做的 agentic 產品，其實已經具備滿足顧客需求的所有工具00:39
  • There was no shared vocabulary for any of it.這件事完全沒有共用的做法可以參考03:05
  • You cannot meaningfully patch the client.手機 client 沒辦法真的被事後修補05:34
  • You start chasing time to first chunk, the first useful thing that your user sees.追的指標，變成使用者看到第一個有用畫面所花的時間09:55
  • Your agent output is not the CX you build on it.agent 輸出本身，不等於在它之上蓋出來的那個體驗13:52

名詞與人物8 個

Bala Ramdoss（Amazon Lens）
講者，在 Amazon Lens 團隊做了六年相機購物功能，這場經驗來自自己開發的多款 agentic 功能。
Amazon Lens
Amazon app 裡的相機功能，讓使用者用照片、截圖或條碼找出外觀相似的商品。
A2UI
Google 提出的開放規格，把 UI 描述成一份元件清單資料，交由 client 用自己的原生元件畫出來。
Generative UI
把模型輸出轉成畫面元件這件事的統稱，依模型能自由發揮的程度分成 controlled、declarative、open-ended 三層。
CopilotKit
一家做 Generative UI 相關產品的公司，把 Generative UI 分成三層開放程度的說法出自它。
BFF（Backend for Frontend）
介於模型輸出與畫面之間的伺服器層，負責依平台規則組裝畫面、加上互動行為，讓 client 端保持單純。
Time to first chunk
把成效指標從「總回應時間」改成「使用者看到第一個有用畫面所需的時間」。
Lens Live
Amazon Lens 底下讓使用者即時取景、點選畫面物件的功能，用來在等待結果時仍讓人有事可做。

提到但沒有展開

  • MCP apps 被講者拿來當「最開放那層 Generative UI」的例子一筆帶過，沒有再展開細節。
  • Gemini 在處理任務時會即時透露正在做什麼，這個做法被提到當範例，但沒有講解背後怎麼實作。
  • 開場提到 ChatGPT 的卡片排版（carousel 還是 list）該怎麼選，只用來帶出問題，沒有給出明確答案。

Agent開發工具Google

在 YouTube 看原片 ↗