「灵感折跃（The Concept Wizard）」——零代码基础如何用 AI Coding 撸出一个全语音 3D 产品原型向导

一、项目背景与痛点

传统的产品设计与交互推演，大多停留在「文档 + 原型工具」的异步协作模式——产品经理、交互设计师与研发各执一份文档或 Figma，靠评审会逐条对齐，节奏慢、信息损耗大。当面对一个复杂的多模态产品构想时，这种半双工式的工作流尤其吃力：一个人讲、一群人记，临场追问与回溯几乎不可能。

为了提升推演的自然度与效率，本文将分享一个全语音驱动的数字人产品原型沙盘的开发实践。系统由魔珐星云的 XmovAvatar 数字人驱动平台 提供 3D 数字人渲染与语音播报能力，用户只需开口说话，就能与「首席交互架构师 Nova」进行全双工实时推演——随时插话、随时纠正、随时回溯。

本实践正是「具身交互智能」在 B 端产品推演场景的一次轻量化落地：让一个具有形象、声音与人格的数字人，承担结对推演的引导者角色，把抽象的创意在对话中逐步结构化为可验证的交互流。

作为一名代码基础较弱的开发者，本次开发全程通过 AI Coding 工具辅助，结合魔珐星云数字人底层 SDK 的 API，几乎由 AI 辅助完成了全部核心链路。本文将从技术架构、全双工状态机以及核心交互逻辑三个维度，分享整个开发流程与踩坑经验。

---

二、核心技术亮点与架构

系统整体由三大闭环串接：ASR（原生 Web Speech）-> LLM（火山方舟 Response API）-> 数字人（魔珐星云 XmovAvatar LiteSDK）。前端与交互控流层主要实现了以下技术要点：

1. 多状态机管理：系统维护了包括离线、初始化、待机、倾听、思考、说话等在内的 6 种核心交互状态。通过底层状态机的平滑切换，保障数字人视觉资产与音频流的丝滑同步。

2. 低延迟全双工打断机制：结合前端 VAD（语音活动检测）与魔珐星云 SDK 的打断接口（如 interactiveIdle），配合实时清空 TTS 播报队列，实现毫秒级的打断响应。

3. 大模型原生多轮上下文：火山方舟 Responses API 通过 previous_response_id 实现原生连续对话，前端无需自行维护历史消息数组，每轮仅投递增量输入。

4. 零配置接入：前端通过 fetch('config.json') 读取 AVATAR_APP_ID / AVATAR_APP_SECRET / LLM_API_KEY / LLM_MODEL_ID 等环境变量，缺失关键项时给出工程化预警，无需改动代码即可切换环境与模型。

---

三、核心功能与交互效果展示

1. 核心交互体验：随时打断

数字人（Nova）正在播报某一阶段的设计引导时，用户可随时开口说话。系统通过 ASR/VAD 实时监测用户语音，一旦检测到插话，立即执行以下链路：

停止当前播报 -> 自动切换至待机/倾听状态 -> 捕获新意图 -> 调用 interactiveIdle 截断陈旧播报 -> 回答新问题 -> 支持回溯到被打断的阶段继续推演。

2. 向导模式（Wizard Mode）多维联动

• 五阶段结构化推进：需求定位 -> 核心流转 -> 角色与权限 -> 异常处理 -> 验收标准，右侧步骤节点随对话实时高亮当前所处阶段。

• 实时转录面板：对话以「YOU / NOVA」气泡流式呈现，打断轮次标注「回溯打断」。

• 实时字幕：倾听态下显示 ASR 中间结果，播报态自动隐藏以避免数字人回声误显。

---

四、全双工打断的底层控制流实现

全双工交互的核心难点在于状态流转的时序控制与回声过滤。以下是系统在检测到用户插话时的完整控流逻辑：

// 核心逻辑伪代码：全双工打断与状态重置（基于魔珐星云 XmovAvatar LiteSDK）
function handleUserInterrupt(userText) {
    // 1. VAD 检测到用户语音活动，且当前数字人正在播报
    if (appState === 'speaking') {
        // 2. 过滤数字人自身回声（与最近播报高度重叠）与极短误触发
        if (userText.length < 4) return;
        if (isEchoOfLastSpoken(userText)) return;

        // 3. 调用魔珐星云 SDK 打断接口，中止当前语音 token 输出
        if (LiteSDK && typeof LiteSDK.interactiveIdle === 'function') {
            LiteSDK.interactiveIdle();
        }

        // 4. 标记打断窗口，忽略被打断播报的陈旧 end 回调
        interruptWindow = true;

        // 5. 进入思考态，将新意图投递给大模型（携带 previous_response_id）
        runTurn(userText);
    }
}

完整交互生命周期流程：

1. 用户开口 -> VAD 静音计时或 isFinal 触发上述打断/提交函数。

2. 状态切换 -> 状态机切至 thinking，将新上下文文本投递给大模型。

3. 流式返回 -> 大模型一次性返回（火山方舟 stream:false + thinking:{type:'disabled'}），状态机切至 speaking，驱动 speak(text, true, true) 唇形同步与动作。

4. 播报结束 -> onVoiceStateChange('end') 回调，清空回声缓冲，自动开启下一轮监听，进入循环。

5. 中途打断 -> 任意 speaking 态下由 handleUserInterrupt 抢占，回到步骤 2。

---

五、开发踩坑记录与解决方案

1. 编程小白如何利用 AI 工具攻克复杂 SDK？

在不熟悉复杂多媒体前端开发的情况下，利用 Cursor / Copilot 等 AI 助手是快速落地的关键。

• 技巧：不要把整个 SDK 文档直接丢给 AI。应该将魔珐星云 SDK 提供的官方 Demo 代码 和 核心 API 说明（如状态机字典、speak 方法入参、onDownloadProgress 构造级回调） 提取成 Context 喂给 AI，让其定向生成状态切换与初始化逻辑代码。

• 踩坑：初始化时若 onDownloadProgress 仅在 init() 入参中提供，魔珐星云 SDK 内部仍会报 n is not a function。必须在 new XmovAvatar({...}) 的构造函数级回调中提供该接口。

2. 打断后状态机竞态导致监听丢失

• 现象：用户中途打断并提出新问题后，数字人播报结束的陈旧 end 回调把状态切回监听，造成重复触发或上下文错乱。

• 解决：在调用 interactiveIdle 的同时标记 interruptWindow = true，陈旧 end 回调直接 return；新一轮播报的 start 回调负责复位该窗口，确保时序闭环干净。

3. 部分浏览器 isFinal 永不触发

• 现象：Chrome 连续识别（continuous=true）下 recognition.onresult 的 isFinal 长时间不触发，导致状态卡在 listening，无法自动提交。

• 解决：引入双路径 VAD 提交——路径 A 走 isFinal 即时提交；路径 B 在仅有临时结果时累计 interimBuffer，并以 SILENCE_MS=1500 静音计时器判定用户说完，自动提交本轮语音。

---

六、总结与后续演进方向

把一次产品评审会从“文档 + 原型工具”的异步拉扯，变成“开口即推演”的实时结对，是「灵感折跃」想替产品经理解开的结。借助 AI Coding 与魔珐星云数字人 SDK，哪怕零代码基础，我们也拼出了一位能引导、能打断、能回溯的交互架构师 Nova。它所践行的「具身交互智能」——让有形象、有声音、有专业人设的数字人深度参与推演——在需求对齐、交互走查与验收定义等环节都能显著降低协作摩擦；而需求对齐、交互走查、验收定义这类“边聊边结构化”的协作环节，这套向导模式都能直接复用。

下一步的优化迭代方向：

• 注入业务语料：把产品 PRD、竞品分析与用户画像喂给 Nova，让它的引导追问更贴业务、少些套路。

• 读心式语气反馈：捕捉用户语气的振幅与起伏，判断对方是兴奋还是将信将疑，实时调整 Nova 的追问节奏，并支持中英文切换。

• 可视化脚本导出：将推演产出的五阶段交互流一键导出为结构化 PRD / 状态机图，打通从「灵感折跃」到工程落地的最后一公里。

延伸阅读：魔珐星云 · XmovAvatar 数字人驱动平台