078 · 把模型輸出變成能用的介面
講者說明如何用 contract、streaming、BFF 三個模式，把模型輸出接成使用者真正能用的介面。
原標題：Agent Output Is Not UX: Rendering Layer Your LLM Pipeline Is Missing - Bala Ramdoss, Amazon Lens
重點摘要
- 模型輸出不等於使用者體驗模型把資料都算對了，但如果只是攤成一堆文字與連結，使用者還得自己整理才能完成任務；真正決定產品成敗的，是模型輸出與螢幕畫面之間那一層。
- 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 一樣。
時間軸
時碼點下去會跳到影片的那一段。
| 時碼 | 段落 | 重點 |
|---|---|---|
| 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:20 | Contract 模式 | 讓模型知道 client 目前的版本與能力，只能從固定選單挑元件，不會亂發明畫面。 |
| 08:46 | Streaming 模式 | LLM 回應比傳統 API 慢，靠分塊漸進渲染，把追蹤指標從總延遲換成「第一個有用畫面」出現的時間。 |
| 10:10 | 等待時的設計 | 傳統轉圈圈行不通了，要讓使用者在等待時仍有事可做，「thinking」狀態要用得節制。 |
| 11:17 | BFF 模式 | BFF 依平台規則組裝畫面、加上點擊動作與 deep link，還能沿用既有 UI 元件，不必為 agent 另外做一套介面。 |
| 13:05 | 收尾與結論 | 模型已經夠強，重點是用有版本、有類型的 contract 接住它的輸出，這層看不見的介面才是真正決定產品成敗的地方。 |
值得記的話
名詞與人物
| 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）該怎麼選，只用來帶出問題，沒有給出明確答案。