企业官网建设流程全解析

引言：产品演示的“三难困境”

你是否有过这样的经历？

销售团队花了三天时间准备一场产品演示，客户终于上线了。打开共享屏幕，开始逐页讲解PPT——讲到第三页，客户问了一个关于某个功能的问题。销售不得不停下来说“这个问题我稍后让产品经理给您解答”，然后继续往下翻。演示结束后，客户提了七八个问题，销售记了满满一页纸，回去之后整理、确认、再答复——三天过去了，客户的热情已经凉了。

或者反过来——你是客户。某天你登录一家SaaS厂商的官网，看到“预约演示”的按钮，你点了，填了手机号。第二天销售打电话来约时间，第三天终于上线了。一个小时的演示，你其实只想了解三个功能点，但销售按照标准流程从头讲到尾。你不好意思打断，只好硬着头皮听完，最后也没搞清楚那三个功能到底能不能满足你的需求。你花了三天，得到了一个模棱两可的答案。

这就是产品演示的“三难困境”：

• 成本高：一场高质量的演示需要销售、售前、产品多方配合，时间成本、人力成本居高不下

• 体验差：客户的问题无法在演示过程中得到即时解答，信息断层严重

• 效率低：一场演示只能服务一个客户，无法规模化

如果有一种方案，能让产品自己“开口说话”——7×24小时在线、随时响应客户提问、一边操作产品一边语音讲解、演示结束后还能根据客户的问题自动生成个性化说明文档——你会不会立刻想要？

今天，我们就来聊聊这套方案：xiaomu-meeting + Hermes Agent，用开源技术打造的新一代实时互动智能演示机器人。

第一章 系统全景：从“人演示”到“产品自演示”

1.1 传统产品演示的困境

在深入技术方案之前，我们先来看看传统产品演示到底痛在哪里。

痛点一：人力成本高企

一个标准的SaaS产品演示流程是这样的：销售获取线索→售前工程师了解客户需求→定制演示脚本→预约演示时间→正式演示→会后整理问答→发送跟进资料。一套流程走下来，平均需要5-8个工时。如果客户多，售前团队不堪重负；如果客户少，养不起专职售前。

痛点二：演示质量参差不齐

同一个产品，不同售前讲出来效果天差地别。经验丰富的售前知道什么时候该深入、什么时候该跳过；新人只能照着PPT念。客户的体验完全取决于被分配到了哪个售前。

痛点三：客户问题无法即时解答

这是最致命的。演示过程中客户提出的问题，售前往往无法当场给出准确答案——要么是“我确认一下再答复您”，要么是“这个问题比较复杂，我约产品经理跟您单独沟通”。问题被拖延，决策被推迟，商机在等待中流失。

痛点四：无法规模化

一个售前一天最多做2-3场演示。当线索量爆发时，演示排期成了销售漏斗中最粗的瓶颈。

1.2 新一代方案：让产品自己“开口说话”

xiaomu-meeting + Hermes Agent的组合方案，从根本上重构了产品演示的交付方式。

这套方案的核心逻辑是：产品自己就是最好的讲解员。

• 客户进入演示页面，机器人主动发起语音通话，开始讲解产品功能

• 讲解过程中，机器人通过Hermes Agent实时操作Demo页面，一边操作一边说明

• 客户随时可以语音打断，提出问题

• 机器人记录当前脚本节点，通过Hermes Agent处理问题并操作Demo演示答案，再从断点继续讲解

• 演示结束后，系统根据客户在演示中提出的问题，自动生成个性化说明文档

一场演示，从预约到完成，全自动、7×24小时、可规模化。

第二章 技术架构：四层体系，环环相扣

这套系统的技术架构可以概括为四层体系：

text

复制

下载

┌─────────────────────────────────────────────────────────────────────┐ │ 用户层（客户终端） │ │ Web浏览器 / 移动端 / 桌面客户端 │ │ ↓ 实时音视频 + 桌面共享 │ ├─────────────────────────────────────────────────────────────────────┤ │ xiaomu实时互动平台（信令 + 媒体） │ │ WebRTC信令服务 │ 媒体转发服务 │ 会话管理 │ │ ↓ IM通道（指令/状态/事件） │ ├─────────────────────────────────────────────────────────────────────┤ │ xiaomu机器人（Ubuntu/Windows/Mac 客户端） │ │ 桌面共享引擎 │ 语音引擎 │ 脚本引擎 │ 状态管理 │ │ ↓ 通过IM通道发送演示功能指令 │ ├─────────────────────────────────────────────────────────────────────┤ │ Hermes Agent（智能决策与执行层） │ │ browser工具 │ computer_use工具 │ 知识库 │ 记忆系统 │ │ ↓ 直接控制 │ │ Demo服务器（产品演示环境） │ └─────────────────────────────────────────────────────────────────────┘

2.1 第一层：用户层——客户终端

客户通过Web浏览器（或移动端、桌面客户端）进入演示页面。无需安装任何插件，打开浏览器即可接入。页面内嵌了xiaomu-meeting的WebRTC客户端，客户点击“开始演示”按钮，系统自动建立与xiaomu机器人的实时音视频连接。

2.2 第二层：xiaomu实时互动平台——信令与媒体的中枢

xiaomu-meeting是一款开源的私有化视频会议系统，通过Docker Compose即可一键部署。它在这套方案中承担着实时互动平台的核心角色：

• 信令服务：负责会话建立、媒体协商、状态同步

• 媒体转发服务：实时音视频数据的转发与分发

• 会话管理：演示会话的创建、维护、销毁

xiaomu实时互动平台是整个系统的信息高速公路——客户端的音视频上行到这里，机器人的桌面共享下行到这里，所有的信令交互、状态同步都经过这里。

关键特性：

• 私有化部署：所有数据运行在自己的服务器上

• 低延迟：基于WebRTC技术，端到端延迟可低至600ms

• 多端支持：Web、移动端、桌面端全覆盖

2.3 第三层：xiaomu机器人——交互控制与状态管理的“指挥官”

xiaomu机器人是运行在Ubuntu/Windows/Mac上的客户端程序。它是整个演示系统的协调层——负责与客户进行语音交互、管理演示脚本进度、通过IM通道向Hermes Agent发送操作指令。

（一）桌面共享引擎

xiaomu机器人通过xiaomu实时互动平台，将服务器的桌面实时共享给客户端的客户。客户在浏览器中看到的不再是静态的PPT，而是真实的、可操作的Demo界面。

（二）语音引擎

集成Hermes Agent的语音交互能力，xiaomu机器人支持实时语音讲解。客户听到的是流畅、自然的语音，而非生硬的TTS机械音。

（三）脚本引擎

这是最核心的组件之一。

演示脚本是预先编写好的——包含讲解话术和对应的Demo操作意图。例如：

text

复制

下载

节点1：打开登录页面 → “欢迎来到我们的产品演示，首先我们来看一下登录流程……” 节点2：输入账号密码 → “您可以使用手机号或邮箱登录……” 节点3：进入仪表盘 → “登录后首先看到的是数据总览仪表盘……” 节点4：创建新项目 → “接下来我们演示如何创建一个新项目……” ……

脚本引擎按照预设的脚本顺序，逐步执行——每一步都包含“说什么”（语音讲解）和“做什么”（向Hermes发送的操作指令）。

关键机制：xiaomu机器人不直接操作Demo。当脚本执行到需要操作Demo的节点时，机器人通过IM通道（即时通讯通道）向Hermes Agent发送一条结构化指令，例如：

json

复制

下载

{ "action": "browser_navigate", "url": "https://demo.example.com/dashboard", "node_id": 3 }

Hermes Agent接收到指令后，调用browser或computer_use工具在Demo服务器上执行实际操作，并将执行结果（成功/失败、截图等）通过IM通道回传给xiaomu机器人。机器人根据回传结果决定继续执行下一个脚本节点还是进行异常处理。

（四）状态管理

状态管理负责维护演示的当前进度——当前执行到哪个脚本节点、客户的提问历史、已完成的演示步骤等。当客户打断时，状态管理器立即记录断点；回答完问题后，从断点恢复执行。

2.4 第四层：Hermes Agent——智能决策与执行的“双手”

Hermes Agent是由Nous Research开发的开源AI智能体框架。它在这套方案中扮演着执行者的角色——接收xiaomu机器人的指令，控制Demo、理解客户意图、调度工具。

Hermes Agent的核心能力包括：

• 闭环任务自主执行：接收到指令后自主完成完整任务

• 多工具链式调用：可串联调用多个工具完成复杂操作

• 长期记忆存储：跨会话记住客户信息和偏好

• 本地知识库挂载：产品文档、FAQ等可挂载为知识库

在本方案中，Hermes Agent主要调用两类核心工具：

（一）browser工具——浏览器自动化

Hermes Agent内置完整的浏览器自动化工具集。通过browser工具，Hermes可以：

• 打开指定的网页

• 点击页面上的按钮、链接

• 填写表单

• 截图分析页面内容

• 执行JavaScript代码

（二）computer_use工具——桌面自动化

computer_use工具让Hermes Agent能够在后台驱动桌面。它的特点是：

• 不干扰用户操作：不移动用户的光标、不抢占键盘焦点、不切换虚拟桌面

• 截图驱动：通过截图识别界面元素，然后进行操作

• 元素索引点击：通过AX树索引精确定位和点击元素，比像素坐标更可靠

• 跨应用操作：可在Safari、Chrome等不同应用中操作

实际工作流程：

1. 截图：computer_use(action="capture", mode="som", app="Chrome")——返回带编号覆盖层的截图和AX树索引

2. 点击：computer_use(action="click", element=7)——按索引点击元素

3. 验证：操作后重新截图，确认状态变化

computer_use工具与pyautogui等传统自动化工具的本质区别在于：它不模拟鼠标键盘的物理操作，而是通过操作系统层面的API直接驱动应用。这意味着用户可以在自己的桌面上继续工作，而机器人在后台的另一个Space中操作——互不干扰，并行工作。

指令交互流程：

text

复制

下载

xiaomu机器人 →（IM通道）→ Hermes Agent ↓ 解析指令 ↓ 调用browser/computer_use工具 ↓ 操作Demo服务器 ↓ 返回执行结果 ↓ xiaomu机器人 ←（IM通道）← Hermes Agent

这种设计的好处：

• 职责清晰：xiaomu机器人专注于会话管理和脚本编排，Hermes专注于底层操作

• 可扩展性：可以轻松替换或升级Hermes的工具集，不影响机器人逻辑

• 异步解耦：机器人发送指令后可以继续处理其他任务，Hermes在后台执行

第三章 核心流程：从客户进入到演示结束，全链路解析

3.1 流程全景图

text

复制

下载

客户进入演示页面 ↓ [1] 机器人发起语音通话，开始讲解 ↓ [2] 机器人按脚本节点执行： ├─ 播报语音 └─ 通过IM发送操作指令给Hermes → Hermes操作Demo ↓ ┌────┴────┐ │ 客户提问？│ └────┬────┘ 是 → [3] 打断机器人讲解 → [4] 记录当前节点 → [5] 客户问题传Hermes → Hermes理解并操作Demo/知识库回答 → [6] 返回回答给机器人播报 → [7] 从断点继续 否 → [8] 继续下一节点 ↓ [9] 脚本执行完毕，演示结束 ↓ [10] 根据客户提问，生成个性化说明文档

3.2 详细流程解析

第一步：客户进入演示页面

客户通过浏览器访问产品的演示Demo页面。页面上有“开始演示”按钮，点击后系统自动通过xiaomu实时互动平台建立与xiaomu机器人的连接。

第二步：机器人发起语音通话，开始讲解

连接建立后，xiaomu机器人主动发起语音通话。客户听到的第一句话是：“您好，欢迎来到XX产品的功能演示，我是您的智能演示助手，接下来将由我为您介绍产品的核心功能……”

第三步：机器人按脚本节点执行——语音 + 指令

机器人启动脚本引擎，从第一个脚本节点开始执行。

对于每个节点，机器人执行两个动作：

1. 语音讲解：通过语音引擎播放对应的话术

2. 发送操作指令：通过IM通道向Hermes Agent发送一条结构化指令，描述需要完成的Demo操作

例如，脚本节点3的内容是“演示创建项目功能”：

• 语音：“接下来我们演示如何创建一个新项目，点击左上角的‘新建项目’按钮……”

• 指令（JSON格式）：

json

复制

下载

{ "action": "browser_click", "selector": "#new-project-btn", "node_id": 3 }

Hermes Agent接收到指令后，立即在Demo服务器上执行该操作，并将操作结果（成功/失败、页面截图等）返回给机器人。

客户在浏览器中看到的是真实的Demo界面在实时操作——鼠标在移动、按钮在被点击、页面在切换——同时听到机器人的语音讲解。就像有一个真人售前在远程操作和讲解。

第四步：客户提问，打断机器人

客户在观看演示的过程中，随时可以语音打断机器人的讲解。例如客户说：“等一下，这个功能支持批量导入吗？”

系统通过VAD（Voice Activity Detection，语音活动检测）实时监测客户的语音输入。当检测到客户说话时，立即暂停机器人的语音播放，并中断当前脚本节点的执行（如有未完成的操作指令，也一并暂停）。

第五步：记录当前脚本节点

打断发生时，状态管理器立即记录当前正在执行的脚本节点编号和执行状态。例如：“正在执行节点7（批量导入功能演示），已讲解60%，当前操作指令已发送但未完成。”

这个记录至关重要——它确保了回答完客户问题后，能够从断点无缝衔接，而不是从头开始或跳过关键内容。

第六步：客户问题处理——由Hermes Agent完成

客户的问题通过ASR（自动语音识别）转写成文字，xiaomu机器人将问题文本通过IM通道发送给Hermes Agent。

Hermes Agent的处理流程：

1. 意图理解：理解客户问题的真实意图

2. 知识检索：从产品知识库中检索相关信息

3. 工具调用：如果需要，调用browser/computer_use工具在Demo中演示答案

4. 生成回答：生成自然语言的回答

5. 返回回答：将回答文本通过IM通道返回给xiaomu机器人

例如客户问“支持批量导入吗？”——Hermes Agent理解意图后，可能会直接操作Demo：打开批量导入页面、展示导入模板、演示导入流程——所有这些操作由Hermes直接在Demo服务器上执行，xiaomu机器人只需播放相应的语音解说。

第七步：机器人播报回答并恢复演示

xiaomu机器人收到Hermes返回的回答文本后，通过TTS合成语音播报给客户。同时，如果Hermes执行了Demo操作，客户在屏幕上也能看到相应的页面变化。

播报完毕后，机器人说：“好的，我们继续刚才的演示……”然后状态管理器读取之前记录的断点信息，从中断处继续执行剩余的脚本节点。

整个过程中，客户感觉不到任何“跳转”或“断层”——就像在和一个真人售前流畅对话。

第八步：继续后续脚本节点

机器人从断点继续，依次执行剩余的脚本节点，每个节点都遵循“语音讲解 + IM指令发送给Hermes → Hermes操作Demo”的模式，直至所有节点执行完毕。

第九步：演示结束

当所有脚本节点执行完毕，机器人说：“以上就是本次演示的全部内容，感谢您的观看。如果您有任何问题，随时可以向我提问。”

第十步：生成个性化说明文档

这是整个流程的点睛之笔。

演示过程中，系统记录了客户提出的所有问题——哪些功能客户关注、哪些场景客户有疑问、哪些操作客户没看懂。

演示结束后，xiaomu机器人将问题汇总发送给Hermes Agent，Hermes基于这些问题记录，自动生成一份个性化的说明文档：

• 针对客户问过的每个问题，给出详细的图文说明

• 附上对应的Demo操作截图（由Hermes在演示过程中自动截取）

• 补充相关的产品文档链接

每个客户拿到的文档都是不一样的——取决于他们在演示中问了什么。这份文档不是通用的产品手册，而是量身定制的“你的问题，我来解答”。

第四章 技术特点：五大核心优势

4.1 实时音视频低延迟交互——最低600ms

这套系统基于WebRTC技术构建实时音视频传输通道。WebRTC是W3C标准，支持浏览器原生实时音视频通信，无需安装任何插件。

在正常网络条件下，端到端延迟可控制在600ms以内。这意味着客户说话后，机器人在600ms内就能响应——几乎感觉不到等待，就像在和真人对话。

低延迟的实现依赖于多个层面的优化：

• WebRTC底层优化：智能带宽预测与拥塞控制

• 信令加速：高效的SDP协商与ICE连通性检测

• 媒体处理优化：硬件加速编解码

4.2 随时打断，机器人秒级响应

这是与传统的“播放录制视频”式演示最本质的区别。

传统演示是单向的——客户只能被动观看，有问题只能等演示结束后再问。而本方案是双向互动的——客户随时可以打断，机器人即时响应。

打断机制的技术实现：

1. VAD实时监测：持续监测客户端的音频输入

2. 优先级抢占：检测到客户说话时，立即暂停机器人的语音播放和脚本执行，同时可选暂停Hermes正在执行的操作

3. 状态保存：记录当前脚本节点的执行进度

4. 问题处理：将客户问题交由Hermes Agent处理（包括可能需要的Demo操作）

5. 断点续讲：处理完毕后从保存的断点继续

4.3 支持浏览器和桌面操作，准确实时

通过Hermes Agent的browser工具和computer_use工具，机器人可以精准控制Demo服务器上的浏览器和桌面应用。

browser工具的特点：

• 支持多种后端（Browser Use、Browserbase、本地）

• 基于ariaSnapshot的文本树操作

• 支持截图分析和元素定位

computer_use工具的特点：

• 后台驱动，不干扰用户操作

• 截图驱动（SOM/vision/AX模式）

• 元素索引点击，比像素坐标更可靠

• 支持跨应用操作

操作精度达到像素级别——Hermes可以精确点击页面上的任何一个按钮、填写任何一个表单字段。

4.4 演示过程录制与语音转写——全流程质控

每一场演示都会被完整录制——包括机器人的语音讲解、Demo操作画面、客户的语音提问。

录制的内容包括：

• 视频录制：完整的Demo操作画面

• 音频录制：机器人的讲解语音 + 客户的提问语音

• 语音转写：所有语音内容实时转写成文字

这些录制内容的价值：

• 质控审查：管理人员可以回放任意一场演示，评估演示质量

• 问题追踪：客户提出的问题全部有记录，便于后续跟进

• 脚本优化：通过分析客户在哪些节点提问最多，优化演示脚本

• 培训素材：优秀的演示可以作为新售前的培训素材

4.5 个性化说明文档自动生成

演示结束后，系统基于客户在演示中提出的问题，自动生成个性化说明文档。

生成逻辑：

1. 问题汇总：汇总客户在整个演示过程中提出的所有问题

2. 分类整理：按功能模块对问题进行分类

3. 答案生成：Hermes Agent基于产品知识库为每个问题生成详细答案，并可补充相关Demo截图

4. 文档排版：生成结构清晰、图文并茂的PDF或Word文档

每个客户拿到的文档都是独一无二的——只包含他们关心的问题和对应的解答。

第五章 应用场景：谁需要这套系统？

5.1 SaaS产品厂商

这是最直接的受益者。SaaS产品的演示需求量大、频次高、标准化程度高——天然适合用这套系统来规模化交付。

典型场景：客户在官网点击“预约演示”，系统自动安排一场演示。客户在任何时间都可以进入演示，无需等待销售排期。

效果：

• 演示响应时间从“天”缩短到“秒”

• 一个机器人可以同时服务多个客户

• 销售团队从繁琐的演示工作中解放出来，专注于高价值环节

5.2 企业软件供应商

企业软件（ERP、CRM、HRM等）功能复杂、演示难度大。传统演示中，售前需要花大量时间准备演示环境、编写演示脚本、排练演示流程。

典型场景：潜在客户需要了解某个复杂模块的功能，机器人按照预设脚本进行深度演示，同时随时回答客户的细节问题。

效果：

• 演示质量标准化，不再依赖个别售前的水平

• 复杂功能的演示可以反复优化脚本，越讲越好

• 演示过程可录制，作为内部培训和客户复看的素材

5.3 硬件产品厂商

硬件产品虽然不能“在线上操作”，但可以通过3D模型展示、AR/VR演示、操作视频播放等方式进行线上演示。

典型场景：客户进入演示页面，机器人一边展示产品的3D模型，一边讲解产品特性；客户可以语音提问，机器人即时回答。

5.4 教育培训机构

在线教育机构可以用这套系统进行课程试听——机器人按照预设脚本讲解课程内容，学员随时提问，机器人即时解答。

典型场景：潜在学员进入试听页面，机器人讲解课程大纲和教学特色；学员提问“这个课程适合零基础吗？”“学完之后能做什么工作？”——机器人即时回答。

效果：

• 试听体验从“看录像”升级为“互动对话”

• 学员的个性化问题得到即时解答

• 试听转化率显著提升

第六章 未来展望：从“演示”到“协同”

6.1 远程协同操作

这是最令人期待的方向。

目前的演示是单向的——机器人通过Hermes操作Demo，客户观看。未来的方向是双向的——客户和机器人协同操作同一个Demo。

想象一下这个场景：

客户说：“我想试一下这个报表导出功能。”

机器人回应：“好的，您点击右上角的‘导出’按钮，我帮您选择导出格式。”

客户在浏览器中点击“导出”，机器人同步通过Hermes在后台选择“Excel格式”——一人一机，协同完成操作。

这种协同模式的技术基础已经具备：

• xiaomu-meeting的桌面共享能力已经支持双向操作

• Hermes Agent的computer_use工具已经支持后台精准控制

• 只需要将“机器人独占控制”升级为“人机协同控制”

6.2 多机器人协作演示

对于复杂的产品，一个机器人可能不够——需要多个机器人分工协作。

例如：

• 机器人A：负责产品A模块的演示

• 机器人B：负责产品B模块的演示

• 机器人C：负责技术架构的讲解

客户在演示过程中，可以在不同机器人之间无缝切换——就像从一个售前切换到另一个售前。

Hermes Agent的多Agent协作框架已经为这种模式做好了准备。

6.3 基于演示数据的智能销售

每一场演示都是数据的金矿。

• 客户在哪些节点提问最多？→ 说明这些功能客户最关注

• 客户在哪些节点沉默最长？→ 说明这些功能客户不理解

• 客户问了哪些类型的问题？→ 说明客户的真实需求是什么

这些数据可以用来：

• 优化演示脚本：在客户最关注的节点增加深度讲解

• 优化产品设计：在客户最困惑的功能上改进交互

• 优化销售策略：根据客户的提问类型判断其需求阶段和购买意向

第七章 部署与配置：快速上手指南

7.1 部署架构

这套系统采用微服务架构，各组件可独立部署、独立扩展：

7.2 快速部署步骤

第一步：部署xiaomu实时互动平台

bash

复制

下载

git clone https://gitee.com/angk021/xiaomu-meeting.git cd xiaomu-meeting docker-compose up -d

第二步：部署Hermes Agent

bash

复制

下载

git clone https://github.com/NousResearch/hermes-agent.git cd hermes-agent npm install hermes setup

配置browser和computer_use工具。

第三步：配置xiaomu机器人

在机器人客户端中配置：

• xiaomu实时互动平台的连接信息

• Hermes Agent的API地址（通过IM通道）

• 演示脚本文件路径

第四步：编写演示脚本

按照产品功能编写脚本——每个节点包含话术和对应的操作指令（JSON格式），指令将被发送给Hermes执行。

第五步：上线

启动所有服务，客户即可通过Web页面接入演示。

第八章 写在最后：让产品自己“开口说话”

当xiaomu-meeting的实时音视频能力遇见Hermes Agent的智能决策与桌面操控能力，并通过IM通道实现精准的指令协作——

• 演示不再依赖人力——7×24小时在线，随到随演

• 互动不再有延迟——最低600ms响应，随时打断、即时回答

• 质量不再有差异——脚本标准化，每一次演示都是最佳实践

• 跟进不再有遗漏——全程录制、语音转写、个性化文档自动生成

一套方案，四个开源项目，从“人演示”到“产品自演示”的革命性跨越。

相关项目地址：

• xiaomu-meeting：https://gitee.com/angk021/xiaomu-meeting

• Hermes Agent：https://github.com/NousResearch/hermes-agent

现在就动手，让你的产品自己“开口说话”！