深入 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 今天正在证明这种架构。