Foyer

背景與挑戰

商務工具是為「會看圖、會猶豫、會被說服」的人類購物者打造的。但到了 2026 年，越來越高比例的訂單不再來自鍵盤前的真人，而是來自 AI 購物 agent——它們會解析型錄、以程式化方式評估商品、代表背後的真人下單。它們不吃生活情境照片或「限時優惠」，它們要的是結構化的商品真相、機器可讀的退貨規則、明確的信任訊號。

商家手上卻沒有任何為此設計的介面：無從決定要信任哪些 agent、它們被允許買什麼、何時該由人介入、事後又發生了什麼。金流協定（Visa、Mastercard、Stripe × OpenAI、Google AP2）解決的是「agent 怎麼付款」，但「商家怎麼治理上門的 agent」這一層仍是一片空白——還沒人把它做成一個完整、好看的產品。Foyer 就是站在商家這一側、用來接待與治理外部 agent 的控制台。

我刻意挑這個題目，是想補進作品集最前緣的一塊：在「會不會設計 B2B 系統」之上再往前一步——為一個非人類使用者（AI agent）做設計，把「From UX to AX」做成有畫面、有流程、論點一秒成立的產品。

研究與設計決策

研究刻意設了三個角色，其中一個不是人：Mara（商家的 agent 通路管理者，主要人類使用者）、Maple（代真人購物的 AI concierge agent，我們要「為它」設計的非人類使用者）、以及 Dana（Maple 背後的真人委託者）。「使用者之一不是人」這件事，直接決定了整個產品的形狀。

成果與反思

最終成果是部署上線的互動原型，共 9 頁：總覽、agent 名冊與詳情、給 agent 讀的商品頁（Hero 1）、規則建構器、即時活動流、交易詳情與 HITL 閘門（Hero 2）、退貨爭議、設定與 onboarding。真人／機器的二元性靠的是版面語彙：人類視圖是熟悉的電商排版，agent 視圖改用大寫小標、寬字距、等寬對齊的數字（tabular-nums）與帳本式細線格線，讓同一份資訊讀起來像一張規格表或通關文件。一個自信的綠色強調色承載所有信任訊號，亮／暗雙主題由 CSS 變數驅動。

亮色主題

深色主題

工程上比照可控 demo 的做法：先凍結型別與 mock 資料契約，再用 TDD 寫信任評分、政策引擎、HITL 閘門 reducer 等純邏輯，最後組頁面並以 build／單元測試／Playwright hero 流程把關。所有「AI 行為」都是精撰的 deterministic 劇本、不接真模型——這樣每次 demo 都一樣、品質可控（那筆會觸發閘門的 $4,200 訂單得「剛好」存在，故事才成立）。

這個原型也有它清楚的邊界：沒有接真金流、真 LLM 或真後端，一切以「最能展示 AX 設計思考的可點擊原型」為界。但這個案例的意義不在做出一套 agent commerce 產品，而在示範一件事——當使用者不再是人，資訊設計、信任、與 human-in-the-loop 這些 UX 課題依然成立，只是服務的對象換成了機器。