TRAE SOLO实战：实现一个桌面3D助手

引言

上一篇文章《星云 SDK + 油猴：给 LLM 塑造肉身，陪伴你在每个网页》中，我用油猴脚本 + 魔珐星云 SDK，让 3D 虚拟人出现在任意网页上，让AI拥有身体，感知世界，理解环境，自然表达。

这次尝试让我愈发确信：AI 的下一阶段，不只是更会思考，而是更会交互。这也正是魔珐星云"具身交互智能"的核心理念：让 AI 拥有身体、感知世界、理解环境，并通过语音、表情、动作和实时响应，自然地与人交流。

但油猴脚本终究跑在浏览器里，离开浏览器，虚拟人也就消失了。它寄生于一个标签页，而不是真正陪伴在你的桌面上。

所以这一次，我用 TRAE SOLO 打造了一个真正的桌面应用------让 3D 虚拟人走出浏览器，成为你桌面上随时陪伴的独立伙伴。

效果展示

先来看一下最终实现的效果。

独立桌面应用

整个程序只有一个 魔珐星云3D虚拟人.exe，绿色免安装，双击即可运行，无需配置任何环境。

获取方式：

程序百度网盘下载地址：pan.baidu.com/s/15RLrdH0O...

加我weixin shc1139874527，备注"星云"，私发给你

极速上手体验

双击 魔珐星云3D虚拟人.exe，填入魔珐星云 SDK 的 APP_ID 和 APP_SECRET，即可启动体验，零门槛。

获取密钥只需 4 步：

前往 $[魔珐星云平台](https://link.juejin.cn?target=https%3A%2F%2Fxingyun3d.com%2F%3Futm_campaign%3Ddaily%26utm_source%3Djuejiin-jz-1%26utm_medium%3D%26utm_term%3D%26utm_content%3D "https://xingyun3d.com/?utm_campaign=daily&utm_source=juejiin-jz-1&utm_medium=&utm_term=&utm_content=")$ 注册账号，填写邀请码 JM2A7C9LSW，获赠 1000 积分
注册成功后进入「控制台」，点击「具身驱动」创建应用
选择你喜欢的数字人形象、场景及音色，点击「创建并进入调试」
点击页面右上角「接入 SDK」，获取 APP_ID 和 APP_SECRET，填入程序即可

💡 使用邀请码注册可获得1000积分，否则获得100积分，积分类似大模型的token。

流畅的3D交互

3D数字人实时渲染，支持语音播报、实时打断，表情动作同步，响应延迟低于500ms。

智能对话能力

对接任意LLM大模型，支持流式响应，数字人边听边说，体验自然流畅。

核心技术架构

整个项目依赖三个核心技术组件：

技术组件	作用	说明
TRAE SOLO	开发工具	TRAE IDE 的一种开发模式，通过自然语言对话，直接生成完整的桌面应用代码，从想法到成品一步到位
魔珐星云SDK	3D渲染与交互	AI 终端时代的平台级能力，让所有终端里的 AI，以具身的形态服务人、陪伴人、娱乐人。
Electron	桌面容器	将网页应用打包为跨平台桌面应用

魔珐星云具身驱动SDK

魔珐星云 SDK 是整个项目的核心，负责3D数字人的渲染与交互。它不是单纯的数字人工具，也不是 Agent 套壳工具，而是具身交互智能开放平台。

它补齐的是大模型和 Agent 在真实终端落地时缺少的"交互层"：

大模型负责理解和生成------解决AI的"大脑"；
Agent负责任务执行和流程调度；
星云负责让AI拥有身体、表达能力和实时交互体验------补齐AI的"身体、表达和交互"；
最终让AI从聊天框进入屏幕、网页、APP、机器人、大屏、AR/VR等终端。

简单来说，大模型解决 AI 的"大脑"，魔珐星云补齐 AI 的"身体、表达和交互"。

TRAE SOLO：独立开发者的利器

在传统开发流程中，从需求分析到代码实现，再到测试部署，往往需要团队协作。但对于独立开发者来说，TRAE SOLO 提供了一种全新的开发模式------一个人，一个工具，完成全流程开发。

TRAE SOLO 的核心优势：

智能代码生成：基于大模型的代码生成能力，只需描述需求，即可快速生成高质量代码
实时调试：边写边调，代码改动即时生效，大幅提升开发效率
全栈支持：前端、后端、桌面应用，一套工具搞定所有场景
知识沉淀：开发过程中的经验自动沉淀为知识库，下次开发更快

Electron：跨平台桌面容器

Electron 允许我们用 HTML、CSS、JavaScript 构建跨平台桌面应用。其核心优势：

一次开发，多平台运行：Windows、macOS、Linux 全覆盖
丰富的系统API：窗口管理、文件系统、系统托盘等
Web技术栈：使用熟悉的前端技术栈，学习成本低

实战教程：从零到一打造桌面虚拟人

第一步：安装 `nebula-avatar-demo` 技能

在开始开发之前，先给 TRAE SOLO 安装一个关键技能：nebula-avatar-demo。

nebula-avatar-demo技能参考文章：juejin.cn/post/766490...

Skills 是 TRAE SOLO 的扩展能力包，相当于给 AI 装上了"专家记忆"。安装某个技能后，TRAE SOLO 在生成代码时就会自动参考该技能中的最佳实践和代码规范，输出质量更高、风格更统一。

nebula-avatar-demo 技能封装了魔珐星云 SDK 的基础调用示例和代码样式，安装后 TRAE SOLO 就知道如何正确调用星云 SDK 的 API，避免生成错误的接口调用。

安装方式：在 TRAE SOLO 的对话窗口中输入：

js 复制代码

帮我安装 nebula-avatar-demo 技能，技能地址：https://gitee.com/sxshi/nebula-avatar-demo

TRAE SOLO 会自动搜索并安装该技能，安装完成后即可在后续开发中使用。

第二步：启动 TRAE SOLO，初始化项目

打开 TRAE SOLO，创建一个名为 xinyun 的新项目。接下来，让 TRAE SOLO 帮我们完成项目初始化。

如果你对整体技术方案有疑问，或者对需求边界不够清晰，可以先用 /openspec 的 opsx:/explore 命令来探索实现路径、梳理任务清单。我们也可以结合 superpowers 等技能，让 TRAE SOLO 在生成代码时参考更多最佳实践，输出质量更高。

第三步：用自然语言描述需求

这是整个开发过程最核心的一步------不需要手写代码，只需要用自然语言告诉 TRAE SOLO 你要做什么。

首先，将 IDE 切换至 SOLO 模式：

然后，在对话窗口中依次提出需求：

① 项目初始化

js 复制代码

帮我创建一个 Electron + Vue 3 + TypeScript 项目，使用 Vite 构建，安装 element-plus 和 less 依赖

TRAE SOLO 自动完成了项目结构搭建、依赖安装、配置文件生成

② 集成星云 SDK

js 复制代码

帮我封装星云 SDK 的调用逻辑，参考 nebula-avatar-demo 技能的代码风格，
包括：创建 SDK 实例、连接与断开、3D 模型加载进度回调、
语音播放方法，封装为 Vue 组合式函数 useAvatar

RAE SOLO 参考 nebula-avatar-demo 技能的代码样式，自动生成了完整的 SDK 集成代码：

js 复制代码

// src/composables/useAvatar.ts
export function useAvatar(containerId: string = "#td-person") {
  const { sdkConfig } = useGlobalData();
  const sdk = shallowRef<any>(null);

  const connectInfo = ref({
    status: "disconnected",
    statusText: "未连接",
    progress: 0,
    isConnected: false,
  });

  async function connect() {
    connectInfo.value.statusText = "3D 模型加载中...";
    await sdk.value.init({
      onDownloadProgress: (p: number) => {
        connectInfo.value.statusText = `3D 模型加载中... ${p.toFixed(2)}%`;
      },
    });
    connectInfo.value.isConnected = true;
    speak("宿主你好，我是你的虚拟助手~");
  }

  function speak(text: string, isStart = true, isEnd = true) {
    sdk.value?.speak(text, isStart, isEnd);
  }

  return { connect, disconnect, connectInfo, speak };
}

③ 集成 DeepSeek 对话

js 复制代码

帮我实现一个 DeepSeek 流式对话的组合式函数 useDeepSeekChat，
支持 SSE 流式接收、消息历史管理，每收到一段文字就触发 onSpeakChunk 回调，驱动虚拟人说话

④ 构建主界面

js 复制代码

帮我创建主界面 App.vue，包含：无边框窗口（自定义标题栏、最小化/关闭按钮）、
左侧 3D 虚拟人渲染区域、右侧功能面板（连接面板/对话面板/设置面板切换）

⑤ 打包为桌面应用

js 复制代码

帮我配置 electron-builder，支持打包为 Windows 安装程序

第四步：运行调试，遇到问题直接对话修复

代码生成完毕后，运行 npm run dev 启动开发模式。应用跑起来了，但很快发现了一个问题------窗口无法拖拽移动。

这是因为使用了无边框窗口，默认的拖拽区域没有设置。在 TRAE SOLO 中，我只需要说一句话：

复制代码

窗口不能拖拽移动，帮我修复一下"

TRAE SOLO 立刻定位到问题，自动在标题栏区域添加了 -webkit-app-region: drag 样式，同时确保按钮区域不受拖拽影响。重新运行，窗口即可正常拖拽。

类似地，开发过程中还遇到了几个小问题，都是通过与 TRAE SOLO 对话解决的：

遇到的问题	我的描述	TRAE SOLO 的修复
窗口无法拖拽	"窗口不能拖拽移动"	自动添加 `-webkit-app-region: drag`
3D 模型加载卡住	"SDK 连接后模型一直加载中"	检查 gatewayServer 配置，修正接口地址
打包后白屏	"打包成 exe 后打开是白屏"	修改 loadFile 路径，修正 `__dirname`引用

第五步：打包发布

所有功能调试通过后，执行打包：

Bash

js 复制代码

npm run dist    # 打包为 .exe 安装程序

生成的安装包只有一个 exe 文件，绿色免安装，双击即可运行。

开发感受

整个过程，我没有手动写过一行代码。从项目初始化到最终打包，所有代码都由 TRAE SOLO 根据自然语言需求自动生成------Electron 主进程配置、星云 SDK 集成、DeepSeek 对话对接、UI 界面搭建、打包配置，甚至问题修复，全部对话完成。

nebula-avatar-demo 技能在其中起到了关键作用------它让 TRAE SOLO 在生成 SDK 调用代码时，直接参考了官方的最佳实践，避免了反复试错。

我要做的只有三件事：描述清楚需求、遇到问题说一句话、提供星云 SDK 的密钥。

开发者视角：真实体验与思考

为什么选择魔珐星云

在开始这个项目之前，我其实尝试过其他数字人方案，踩了不少坑。

传统视频流方案需要依赖服务器端渲染，每一帧画面都要从云端推流到客户端------延迟高、带宽消耗大，而且根本无法实现真正的实时交互，用户说一句话要等好几秒才能看到回应。

参数流方案虽然更轻量，但需要自己搭建完整的渲染管线：骨骼动画、表情驱动、口型同步......开发成本极高，普通开发者很难在短时间内跑通。

魔珐星云的出现，真正解决了这个痛点------一套 SDK 一站式接入，底层用参数流技术实现端侧渲染，端到端约 500ms 响应延迟，让普通开发者也能快速构建高质量的具身交互应用。我不需要关心渲染引擎怎么跑、模型怎么加载，只需要调用几个 API，3D 虚拟人就能在屏幕上开口说话、做出表情。

可拓展的场景

这个 Demo 虽然只是一个桌面应用，但魔珐星云的能力远不止于此。基于同样的 SDK 和交互逻辑，可以轻松拓展到更多真实场景：

网页嵌入：在官网、电商平台嵌入3D客服
展厅讲解：在博物馆、科技馆实现智能讲解员
教育陪练：为在线教育提供虚拟助教
人形机器人：将同样的交互逻辑迁移到实体机器人上

总结

大模型让AI学会了思考，但如果AI要真正进入终端场景，还需要"身体"、"表达"和"交互"。魔珐星云作为具身交互智能开放平台，补齐了这最后一块拼图。

通过 TRAE SOLO，我成功将网页版的3D虚拟人升级为独立桌面应用。整个开发过程高效流畅，主要得益于以下几点：

魔珐星云SDK的强大能力：提供了成熟的3D数字人渲染与交互方案，让AI从聊天框走向真实终端
TRAE SOLO的智能开发能力：大幅减少了重复劳动，让我专注于核心逻辑
Electron的跨平台能力：轻松将网页应用打包为桌面应用

如果你也想体验具身交互智能的魅力，不妨试试魔珐星云 SDK------注册时使用邀请码 JM2A7C9LSW 可以获得 1000 积分，几行代码就能让你的第一个数字人 Demo 跑起来。

TRAE SOLO实战：实现一个桌面3D助手

引言

效果展示

独立桌面应用

极速上手体验

流畅的3D交互

智能对话能力

核心技术架构

魔珐星云具身驱动SDK

TRAE SOLO：独立开发者的利器

Electron：跨平台桌面容器

实战教程：从零到一打造桌面虚拟人

第一步：安装 nebula-avatar-demo 技能

第二步：启动 TRAE SOLO，初始化项目

第三步：用自然语言描述需求

第四步：运行调试，遇到问题直接对话修复

第五步：打包发布

开发感受

开发者视角：真实体验与思考

为什么选择魔珐星云

可拓展的场景

总结

第一步：安装 `nebula-avatar-demo` 技能