深入 VOLO 的雙模設計：當一個 URL 同時服務人類和機器

大多數網站是爲人類構建的。一些 API 是爲機器構建的。VOLO 爲兩者同時構建——從同一個 URL。以下是我們的雙模架構如何工作，以及爲什麼我們認爲它是 Web 設計的未來。

問題

AI Agent 和人類用戶有根本不同的需求。人類需要美麗的排版、流暢的動畫和情感化的品牌敘事。AI Agent 需要結構化數據、清晰的導航層次和機器可讀的內容。傳統方法迫使你選擇其一或維護兩個獨立系統。

我們的方案：檢測與適應

VOLO 的中間件在任何頁面渲染前檢測訪客類型。我們使用三層檢測系統：

• 第一層：自定義 Header — 如果請求包含 X-Agent-ID header，訪客是註冊的 Agent 合作伙伴。他們獲得終端 UI 加上個性化儀表板。
• 第二層：User-Agent 模式 — 我們維護 25+ 個已知 AI Agent User-Agent 字符串的庫（GPTBot、ClaudeBot、LangChain、CrewAI、Perplexity 等）。模式匹配將訪客分類爲未註冊的 Agent。
• 第三層：Accept Header 啓發式 — 如果客戶端接受 application/json 但不接受 text/html，它可能是編程客戶端，接收 Agent 體驗。

兩種體驗，一個代碼庫

基於檢測結果，我們的 ViewMode 上下文提供者切換整個渲染管線：

人類模式

襯線排版（Cormorant Garamond）、流暢滾動動畫、英雄視頻、毛玻璃效果、自定義光標和預加載動畫。設計語言傳達奢華、獨特和信任。

Agent 模式

等寬排版（Space Mono）、終端風格綠色文字黑色背景界面、結構化數據展示、API 文檔鏈接以及註冊/儀表板訪問。設計語言傳達效率、可編程性和透明度。

技術實現

切換髮生在佈局層級通過 React context。組件使用 useViewMode() hook 有條件地渲染不同內容：

• 佈局組件在 ModeAwareLayout 包裝器之間切換
• 營銷部分渲染 Agent 友好的等價內容（機隊規格表、API 端點、佣金結構）
• 導航從視覺下拉菜單適應爲結構化鏈接列表
• 頁腳顯示 API 文檔鏈接而非社交媒體

爲什麼這很重要

在 AI Agent 越來越多地代表用戶瀏覽網絡的世界中，網站需要服務兩種受衆。替代方案是維護獨立的營銷網站和 API 文檔門戶——使維護負擔翻倍同時碎片化用戶體驗。

我們相信雙模設計將在五年內成爲標準實踐。每個品牌都需要同時與人類和服務他們的 AI Agent 溝通。VOLO 今天正在證明這種架構。