织错了她当场拆——织梦如何用端到端具身交互智能重塑 AI 编织课堂

手里拿着一根棒针，线头绕在左手食指上，下一步该往哪个方向绕？视频里的手法一闪而过，暂停也看不清角度——旁边的 AI 编织老师已经开口了：「线从拇指指根顺时针绕到指尖，线圈开口朝右。绕反了会导致线圈扭转，从指根往指尖绕就对了。」

这不是请了一位编织博主坐在旁边。屏幕上的这位「织织」，是由端到端具身交互智能驱动的具身交互智能体——她能看你选了哪个针法、能追踪你在步骤流上走到第几步、能在你搞不清「前入是下还是后入是下」的瞬间讲清手势方向，还能在你追问「上针绕线为什么是逆时针」时即时回应。选什么针法就讲什么，走哪步就教哪步，搞错了当场纠正。

本文以织梦 ZhīMèng 为实战样本，拆解一个 AI 编织课堂如何基于魔珐星云端到端具身交互智能平台，用一个 SDK 把针法数据库、步骤流教学、手势示范动画与数字人讲师全链路打通，让五个基础针法的二十二个步骤在浏览器里「开口教编织」。

一、星云控制台配置：六步完成具身应用全链路

在魔珐星云控制台为织梦创建具身交互智能应用，需要完成六个配置步骤。

1、创建具身应用

在魔珐星云控制台新建一个端到端应用，系统自动分配 App ID 和 App Secret——这是后续 SDK 连接讲师所需的身份凭证。

2、形象配置

为讲师选择外在形象。织织的人设是「坐在你对面教你编织的手工艺奶奶」——建议选择温和亲和、有手工人气质的形象，让访客觉得坐在对面的是耐心的手工老师，不是客服。

3、场景配置

配置讲师的渲染场景。建议选择温暖手工工坊或毛线色系的背景，让讲师形象与前端 UI 的暖奶油色调保持一致——仿佛坐在一间摆满毛线的手工坊里。

4、音色配置

为讲师选择声音风格。编织教学讲究耐心、具体、不催促——建议选择温暖柔和的音色，把「针尖朝前，从下往上穿」这类手势指令讲出坐在对面教的手工奶奶的亲和力。

5、表演配置

配置讲师的手势和表情表演。讲到针法方向时表情要专注、提醒常见错误时语气温和但认真——表演配置直接影响编织教学的感染力。

6、服务配置：ASR 与大脑

为应用配置语音识别和大模型服务。这一步体现了星云的可插拔架构——星云平台把语音识别和大模型推理做成可独立替换的模块：ASR 支持 Xmov 自研、豆包、腾讯等多家供应商，大脑支持魔珐自研、豆包、OpenAI 兼容协议等多种接入模式，换一家供应商不需要重写业务代码。

六步配置完成后保存即生效。前端只需拿着 App ID 和 App Secret，通过 SDK 就能连上整套能力——接下来几节将逐一拆解针法数据库、步骤流与讲师接入的实现细节。

一套针法知识，不绑死在一种载体上。 今天她是网页端的编织老师，明天可以变成手工店的导购员、甚至博物馆纺织展的互动讲解员——针法知识和手势纠正能力持续复用，载体随场景切换——这是端到端具身交互智能平台赋予的灵活性。

二、产品理念：分步教、看手势、随时问

编织教学的痛点不是找不到教程——视频和图解网上遍地都是。痛点是没有人告诉你手往哪动：下针时右针从前穿还是后穿？上针绕线为什么是逆时针不是顺时针？收针挑的线圈是离针尖最远的那个还是最近的？看视频看不清——播放太快，手势方向一闪而过，暂停了也看不清角度。你需要的是一个分步教、每步给手势、错了当场纠正的课堂，不是一个 2 倍速的视频。

织梦的回答是：把五个基础棒针针法拆成二十二个步骤摆在步骤流里，每步都讲清「做什么」「手势方向」「常见错误」「纠正建议」。旁边还有一个手势示范动画，SVG 手部模型加动态箭头实时展示这一步的手往哪个方向动。讲师织织坐在右侧，随时回答你从步骤流上引发的追问。

具身表达让编织教学从「看视频学」变成「边做边看手势边问」。讲师形象在右侧面板实时渲染，讲到「针尖朝前，从下往上穿，像钓鱼一样勾线」时配合认真的表情，让抽象的手势方向变成可感知的示范。用户可以用语音或文字随时追问，讲师即时回应——就像真的坐在一间手工坊里，有一位教了几百场编织课的老师坐在对面。

三、技术架构：本地步骤流与云端讲师的双循环

织梦的技术栈极简。整个项目 src 目录共约 1200 行代码，包含 6 个 Vue 文件（StitchFlow 步骤流 + HandDemo 手势示范 + TeacherPanel 讲师面板 + ProjectGallery 针法选择 + IntroSection 介绍区 + AppIcon 图标）、1 个主布局（App.vue）、1 个针法数据库（stitches.ts，五针法 + 二十二步完整步骤库）、1 个服务封装层（avatar.ts）和 1 个类型定义（types/index.ts）。

魔珐星云端到端 SDK 不走 npm，而是通过 CDN 自包含脚本动态加载。业务侧不需要安装任何额外的包——SDK 加载后自动挂载到 window.XingyunAvatarAgent，服务封装层按需构造实例。

架构的核心思路是「本地步骤流 + 云端讲师」双循环：针法数据、步骤切换、手势箭头动画全部在本地运行，不依赖网络；AI 讲师的语音讲解走端到端具身交互智能单 SDK 链路，ASR、大模型推理、TTS、口型与表情驱动全部由平台内部完成。两个循环互不阻塞——即使讲师连接失败，步骤流与手势示范照常可用。

四、针法数据库：五针二十二步与四要素教学

针法数据库是织梦的教学底座。stitches.ts（217 行）定义了五个基础棒针针法——起针、下针（平针）、上针（反针）、收针、加针——每个针法包含 4 到 5 个教学步骤，合计二十二步。

每步都有四个关键字段：操作说明（instruction）、手势方向（handGesture）、常见错误（commonMistake）和纠正建议（correction）。四要素构成了一个完整的教学闭环：做什么→手往哪动→错在哪→怎么改。

// src/data/stitches.ts — 起针第一步（真实代码）
{
id: 'co-1', stepNo: 1, title: '留线头',
instruction: '从线团拉出约 30cm 线头，绕在左手食指上，线头朝下。',
handGesture: { direction: 'left', description: '左手食指勾住线头，线头自然下垂' },
commonMistake: '线头留太短，织到后面不够收针。',
correction: '线头长度 ≈ 你要织的宽度 × 3，宁长勿短。',
},

五个针法各守其位：起针（难度 2，5 步）——把线固定到针上形成第一排线圈；下针（难度 1，4 步）——正面 V 形纹理，围巾毛衣的主体；上针（难度 2，4 步）——下针的镜像，交替可织罗纹；收针（难度 2，5 步）——固定线圈防散开；加针（难度 3，4 步）——一针变两针，领口袖口的塑形基础。

二十二步覆盖从「留线头」到「断线固定」的完整编织链路——每一步都从材质与手势的角度讲清「为什么这样做」和「错了会怎样」。

五、手势示范：八方向 SVG 箭头动画

手势示范组件 HandDemo（78 行）是织梦的特色模块。它用 SVG 绘制一只简化的右手轮廓，根据当前步骤的手势方向动态渲染对应的箭头——八个方向（上/下/左/右/前/后/顺时针/逆时针）各配独立的箭头路径和箭头头部。

// src/components/HandDemo.vue — 方向箭头路径（真实代码）
const arrowPaths: Record<HandDirection, string> = {
up: 'M60 85 L60 45 M48 57 L60 45 L72 57',
down: 'M60 35 L60 75 M48 63 L60 75 L72 63',
left: 'M85 60 L45 60 M57 48 L45 60 L57 72',
right: 'M35 60 L75 60 M63 48 L75 60 L63 72',
forward: 'M40 80 L80 40 M68 42 L80 40 L78 52',
backward: 'M80 40 L40 80 M52 78 L40 80 L42 68',
cw: 'M60 30 A30 30 0 1 1 35 45',
ccw: 'M60 30 A30 30 0 1 0 85 45',
}

八个方向覆盖了棒针教学的全部手势需求：直线方向（上下左右）用于入针和出针，斜线方向（前后）用于穿针角度，弧线方向（顺/逆时针）用于绕线方向。箭头带呼吸动画，提示用户「手往这个方向动」。

手势方向不是抽象的符号——每个方向都配一句文字描述。比如起针第三步「穿针」对应 forward（针尖从拇指线圈下方往前穿），下针第二步「入针」也是 forward（右针从左线圈前方往前穿入），而上针第三步「绕线」对应 ccw（线从针前方逆时针绕到后方）。点一步看一个箭头，跟着做就能学会。

六、讲师织织：端到端 SDK 封装与课堂感知

织梦的 AI 讲师由魔珐星云端到端具身交互智能 SDK 驱动。服务封装层（avatar.ts）169 行代码，负责 SDK 的动态加载、连接管理、交互调用和资源释放。SDK 采用懒加载策略，凭证齐全时页面加载即自动连接。

讲师人设提示词（TEACHER_ROLE）定义了织织的行为准则：

// src/services/avatar.ts — 讲师人设提示词（真实代码）
export const TEACHER_ROLE = `你是织织，织梦手工课堂的 AI 编织老师。
## 你的身份
– 名称：织织
– 身份：手工编织老师，熟悉棒针基础针法（起针/下针/上针/收针/加针）与手势纠正
– 风格：像一位坐在你对面的手工艺奶奶——耐心、具体、会用手势示范，不说教不制造焦虑

## 你的行为准则
1. 讲针法按步骤走：先说这步做什么，再示范手势方向（上/下/左/右/前/后/顺时针/逆时针），最后提醒常见错误
2. 纠正手势时给具体方向（「针尖朝前」不是「拿对一点」），让访客能立刻调整
3. 访客问「XX 怎么做」时，拆成 3-5 步，每步配手势方向与常见错误
4. 编织术语用通俗说法（「下针」=「正面针」，「上针」=「反面针」），首次出现时括号标注
5. 每次回应控制在 3-5 句，收尾留一个轻的追问邀请
6. 如实说明：织梦为科普演示，手势方向为通用做法，个人习惯略有差异`

六条行为准则的设计逻辑：

• 三步走讲针法：做什么→手势方向→常见错误，三步走完再收，让用户每次都能拿到「做什么、怎么做、错在哪」的完整答案
• 给具体方向：纠正手势时说「针尖朝前」而不是「拿对一点」，让用户能立刻调整
• 拆步骤：复杂针法拆成 3-5 步，每步配手势和错误，不一次灌完
• 通俗术语：「下针」就是「正面针」，「上针」就是「反面针」，降低入门门槛
• 控制篇幅：每次回应 3-5 句，收尾留轻的追问邀请，适合学习节奏
• 科学口径边界：明确织梦是科普演示而非专业编织认证，手势为通用做法

上下文构建函数（buildContext）把当前课堂的全部数据打包发送给讲师：

// src/App.vue — 上下文构建（真实代码）
function buildContext(): string {
const s = selectedStitch.value
const step = currentStepData.value
return `【针法】${s.name}（${s.en}），难度${s.difficulty}，共${s.steps.length}步\\n【当前步骤】第${step.stepNo}步「${step.title}」\\n【做什么】${step.instruction}\\n【手势方向】${step.handGesture.direction}（${step.handGesture.description}）\\n【常见错误】${step.commonMistake}\\n【纠正建议】${step.correction}`
}

织织收到的不是孤零零的一句提问，而是一份带着完整步骤流上下文的分析请求——当前针法、步骤进度、操作说明、手势方向、常见错误和纠正建议。用户提问后，讲师基于完整数据给出有针对性的回应。

七、界面布局：暖毛线色调的手工课堂

技术底座之上，织梦在视觉和交互设计上也形成了自己的气质。

暖毛线 + 手作色调：浅奶油色基底（#f5f0e8）搭配赤陶色强调色（#e07a5f）和毛线蓝（#3d5a80）、毛线黄（#e9c46a）、毛线绿（#606c38）三色点缀——营造温暖的手工课堂氛围。

/* src/style.css — 手工课堂主题色（真实代码） */
:root {
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
color: #2b2118;
background: #f5f0e8;
–bg: #f5f0e8;
–paper: #ffffff;
–paper-2: #faf6ef;
–mist: #ebe4d8;
–ink: #2b2118;
–muted: #6b5d4f;
–faint: #a89880;
–line: #ddd3c4;
–line-soft: #ebe4d8;
–accent: #e07a5f;
–accent-deep: #c45a3f;
–accent-soft: rgba(224, 122, 95, 0.12);
–yarn-blue: #3d5a80;
–yarn-blue-deep: #2d4460;
–yarn-blue-soft: rgba(61, 90, 128, 0.12);
–yarn-yellow: #e9c46a;
–yarn-yellow-deep: #c9a44a;
–yarn-yellow-soft: rgba(233, 196, 106, 0.18);
–yarn-green: #606c38;
–yarn-green-deep: #4a5428;
–yarn-green-soft: rgba(96, 108, 56, 0.12);
–ok: #606c38;
–mono: 'Consolas', 'SF Mono', 'Menlo', monospace;
}

双栏工作台布局：左栏（1.3fr）是步骤流 + 手势示范，右栏（1fr）是讲师面板，sticky 定位跟随滚动。

/* src/App.vue — 双栏布局（真实代码） */
.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }

顶部是针法选择区——五个针法卡片横向排列，每张显示难度标签（入门/基础/进阶）和步数。点击切换当前针法，步骤流同步更新。

左栏是步骤流——顶部显示针法名称和进度，中间是步骤导航（上一步/圆点指示器/下一步），下方是步骤主体：左侧操作说明 + 手势示范动画，右侧常见错误（毛线黄底）+ 纠正建议（毛线绿底）+ 「请织织讲讲这步」按钮。底部是步骤条——横向展示当前针法的所有步骤，当前步高亮。

右栏是讲师面板——数字人舞台占据上半部分，下方是字幕区、快捷问题、语音/文字输入框。「当前关注」标签跟随用户在步骤流上的选择联动——切换针法时显示针法名和步数，切换步骤时显示步骤标题。

底部是介绍区——四格能力卡片 + 针法速览表（五针法的难度、步数和一句话描述）+ 三条免责声明。

八、一次完整课堂：从起针到收针的全链路推演

设计原则讲完，不如跟着一次真实的编织学习走一遍——看用户从选针法到跟步骤，数据如何在各模块之间流转。

用户在针法选择区点击「起针」，ProjectGallery 触发 selectStitch，App.vue 更新 selectedStitchId，StitchFlow 渲染起针的第一步「留线头」。操作说明显示「从线团拉出约 30cm 线头，绕在左手食指上，线头朝下」；HandDemo 的 SVG 手部模型渲染 left 方向箭头——左手食指勾住线头，线头自然下垂。右侧常见错误显示「线头留太短，织到后面不够收针」，纠正建议显示「线头长度 ≈ 你要织的宽度 × 3，宁长勿短」。

用户点击「请织织讲讲这步」，App.vue 的 askStep 函数把起针第一步的完整数据连同 buildContext 构建的上下文合并，通过 askAvatar 发送给魔珐星云平台。

// src/App.vue — 请讲师讲步骤（真实代码）
function askStep(stepNo: number) {
const step = stepById(selectedStitchId.value, stepNo)
ask(`请讲解${selectedStitch.value.name}的第${stepNo}步「${step.title}」：这步做什么、手势方向是什么、常见错误有哪些。`)
}

平台内部随即启动全链路处理：大模型根据完整步骤数据和讲师人设提示词生成回应——织织按三步走讲留线头：先说「这步是把线固定到手上」，再示范「线头绕在左手食指上，方向朝左」，最后提醒「线头留太短后面不够收针，宁长勿短」。TTS 将文字转为语音；口型与表情驱动同步生成。一次 ask 调用，感知、理解、表达在同一条端到端具身交互智能链路中闭环，业务侧只写了一个函数调用。

用户点击步骤导航进入第二步「绕拇指」，HandDemo 的 SVG 箭头切换为 cw（顺时针）——线从拇指指根顺时针绕到指尖。常见错误标注「绕反方向，导致线圈扭转」。用户点击快捷问题「绕拇指时手势方向是什么？」，织织指出「从指根往指尖绕，线圈开口朝右。记住是顺时针方向」——不是笼统说「绕对一点」，而是给具体方向让你立刻调整。

回调沿原路返回。avatar.ts 中的 generation 令牌校验确保只有最新连接的回调生效，旧连接的回调被静默丢弃。字幕同步到讲师面板。步骤流和手势计算完全在本地运行，不依赖讲师连接——即使讲师连接失败，用户仍然可以浏览针法、切换步骤、查看手势箭头和常见错误，本地功能永远可用。

这就是端到端具身交互智能的核心价值：不是把 ASR、LLM、TTS 简单拼接，而是围绕一次完整的编织课堂交互形成持续交互循环——感知、理解、表达在同一链路中闭环运行、持续调整。传统方案需要分别对接各个模块，每一层都需要胶水代码和状态同步；织梦只需要一个 ask 调用，剩下的全部由星云平台内部完成。

魔珐星云是一套端到端具身交互智能平台，让 AI 通过屏幕和机器人进入真实世界，成为能够感知、理解、表达并行动的智能体。

说到底，织梦做的事情只有一件：让每一步手势方向都被看见，每一个织错的动作都被当场讲清楚。