艾吐槽智能体表演平台改造方案

艾吐槽 → 智能体表演平台 · 最小改造落地方案

原则:不改架构、不换框架、不建新系统。在"艾吐槽"现有页面和 75 人体验页基础上,做 5 处关键改造,2 周内上线转化闭环。与《智能体表演平台·详细设计方案 v1》《BossAgents 双轨战略》配套。

一、现有资产盘点(已就绪,直接复用)

资产已有能力复用方式
艾吐槽小程序Taro框架、商汤+DeepSeek双模型、漫剧工坊、脱口秀工坊、吐槽生成器、实时工作流日志直播直接作为表演平台的主入口,新增"数字员工表演"Tab
75人基础体验页每个数字员工有独立体验页面,可对话、可执行任务升级为"表演页",增加工作流可视化+转化按钮
MTClaw调度引擎BossAgents已有,支持多Agent调度后端直接调用,表演时按班组编排多员工协作
讯飞TTS脱口秀工坊已集成表演时数字员工语音自我介绍+结果播报

二、五处关键改造(2周内完成)

改造 1:首页加"数字员工表演"入口(0.5天)

现有艾吐槽首页结构:

[Logo] 艾吐槽
[吐槽生成器] [漫剧工坊] [脱口秀工坊]
[历史记录]

改造后:

[Logo] 艾吐槽 · 智能体表演平台
┌─────────────────────────────────────┐
│  🔥 今日热门表演(新增Banner轮播)     │
│  采购降本班·24秒搞定比价 | 内容营销班·18秒出文案 │
└─────────────────────────────────────┘
[数字员工表演] [吐槽] [漫剧] [脱口秀]  ← Tab切换,默认第一个
┌─────────────────────────────────────┐
│  🏭 按行业筛选:[制造] [电商] [客服] [健康] [更多] │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│  │采购班 │ │内容班 │ │客服班 │ │数据班 │ │
│  │5人协作│ │4人协作│ │3人协作│ │6人协作│ │
│  │▶看表演│ │▶看表演│ │▶看表演│ │▶看表演│ │
│  └──────┘ └──────┘ └──────┘ └──────┘ │
│  ...(滚动加载全部75人+10个班组)       │
└─────────────────────────────────────┘

实现方式:在现有 Taro 项目新增一个 Page 组件,数据从 75 人体验页的配置库直接读取,加个 team_id 字段标记班组归属。

改造 2:75人体验页 → 表演页(核心改造,3天)

现有体验页结构(推测):

[数字员工头像+名称]
[对话输入框]
[聊天记录区]
[功能按钮:清空/分享]

改造为表演页(保留对话能力,叠加表演层):

┌──────────────────────────────────────────┐
│  ← 返回    采购降本班 · 5人协作表演        │
├──────────────────────────────────────────┤
│  【表演画布区】(上半屏,新增)             │
│                                          │
│  班组成员头像横排:                        │
│  ①需求分析师✨ ②供应商猎手 ③比价谈判师 ...  │
│                                          │
│  实时工作流(复用艾吐槽的日志直播组件):    │
│  ✓ ①需求拆解:1000个传感器,预算5万        │
│  ✓ ②供应商扫描:找到8家候选                │
│  ⏳ ③比价谈判:正在生成比价表...            │
│                                          │
│  产出物预览(可点击下载):                  │
│  📊 比价表.xlsx  📄 合同草案.docx         │
├──────────────────────────────────────────┤
│  【对话面试区】(下半屏,原有体验页保留)    │
│  出个题考考这个班组:                       │
│  [如果供应商要预付款30%怎么办?] [发送]     │
│  ...(聊天记录)                           │
├──────────────────────────────────────────┤
│  底部固定转化栏(新增):                    │
│  [💰算算省多少]  [✅一键录用·7天免费试用]   │
└──────────────────────────────────────────┘

关键复用点

  • 实时工作流日志:艾吐槽已经有"工作流日志直播"组件,直接搬过来,把"吐槽生成步骤"换成"数字员工协作步骤"
  • 对话能力:75人体验页已有的对话框直接保留,作为"面试模式"
  • TTS语音:脱口秀工坊的讯飞TTS,表演开始时播放"我是采购降本班,24秒帮你搞定采购方案"

数据结构(每个表演的配置)

interface ShowConfig {
  showId: string;
  title: string;           // "采购降本班"
  memberIds: string[];     // 关联75人库的员工ID
  workflowSteps: WorkflowStep[];  // 表演步骤
  demoInput: string;       // 默认演示输入
  outputArtifacts: string[]; // 产出物模板ID
  roiConfig: ROIConfig;    // ROI计算参数
}

改造 3:ROI计算器浮层(1天)

触发时机:表演结束后自动从底部滑出,或点击"💰算算省多少"按钮。

实现:一个独立的 Taro 组件,输入 3 个参数,输出 4 个指标。

┌─────────────────────────────────────┐
│  💰 这个班组能帮你省多少?             │
│                                     │
│  企业规模:[10-50人▼]                │
│  对应岗位年薪:[15万/年]             │
│  月均处理量:[200单]                 │
│                                     │
│  ─────────────────────────────────  │
│  📊 测算结果:                        │
│  每年节省人工成本:45万               │
│  效率提升:3.2倍                      │
│  投资回收期:2.7个月                  │
│  3年ROI:1230%                       │
│                                     │
│  [✅ 一键录用,7天免费试用]            │
└─────────────────────────────────────┘

计算公式(硬编码在前端,无需后端)

年节省成本 = 岗位年薪 × 替代比例 × 班组人数
替代比例:采购班60%、客服班80%、内容班70%、数据班50%
回收期 = 平台年费 ÷ (年节省成本 ÷ 12)
3年ROI = (年节省成本 × 3 - 平台年费) ÷ 平台年费 × 100%

改造 4:录用→7天试用→转正流程(3天)

这是最关键的转化闭环。不跳销售页,直接进入试用。

第 1 步:录用入职(3步表单,30秒完成)

点击"✅一键录用"
    ↓
页面1/3:给班组起名字
[我的采购降本班___________]
[下一步]

页面2/3:配置场景(可选,有默认值)
行业:[制造业▼]  主要任务:[采购降本▼]
上传业务数据(选填):[拖拽文件]
[下一步]

页面3/3:入职宣誓动画(复用漫剧/脱口秀的动画能力)
5个数字员工依次出现,每个说一句话:
①需求分析师:"我负责精准拆解需求"
②供应商猎手:"我扫描全网找最优供应商"
...
[🚀 确认入职,进入工作台]

第 2 步:7天试用工作台(复用75人体验页,加试用期标识)

┌──────────────────────────────────────────┐
│  我的采购降本班 | 试用期第3天 | 已完成12任务│
├──────────────┬───────────────────────────┤
│  班组群聊      │  任务看板                   │
│ (原有对话能力)│  待处理|进行中|已完成       │
│              │  最近产出:                   │
│  ①需求分析师  │  📄 Q3采购方案.docx        │
│  "今天有3个新 │  📊 比价表.xlsx            │
│   需求..."    │                           │
├──────────────┴───────────────────────────┤
│  ⏰ 试用期还剩4天 | [查看战报] [立即转正8折] │
└──────────────────────────────────────────┘

试用期后台逻辑

  • 用户表加字段:trial_start_datetrial_team_idtrial_status
  • 每天定时任务:统计该班组当天完成任务数,推送"今日战报"(复用艾吐槽的消息推送能力)
  • 第 3 天:推送中期评估问卷(3个问题:是否满足预期?需要调整什么?)
  • 第 6 天:推送转正邀请(限时8折+已产生价值总结)

第 3 步:转正付费(接入微信支付)

点击"立即转正"
    ↓
选择版本:
○ 单员工版 9,800元/年
● 班组版 39,800元/年(推荐,当前试用的就是这个)
○ 部门版 98,000元/年
○ 企业私有版 20万起/年(联系销售)
    ↓
[微信支付]  支付成功 → 自动开通正式权限 → 发送电子合同

改造 5:表演回放+分享卡片(1天)

复用艾吐槽已有的"生成结果分享"能力,把表演过程变成可传播的内容。

表演结束后自动生成

  1. 表演回放视频(30秒):工作流动画+产出物展示,配TTS解说
  • 实现:前端录制Canvas动画序列 → 合成GIF/MP4(可用现成的 html2canvas + gif.js
  1. 分享卡片图(一张图):班组名称+核心结果+ROI数据+小程序码
  • 实现:Canvas绘制 → 导出图片 → 微信分享

分享路径

  • 微信好友/群:直接分享小程序卡片(标题:"24秒搞定采购方案,这个数字员工班组太牛了")
  • 朋友圈:分享卡片图+小程序码
  • 抖音/视频号:表演回放视频(用户下载后自行发布)

三、第一周可上线的具体内容(按天排)

| 天 | 任务 | 交付物 | 负责人建议 |

|----|------|--------|-----------|

| D1 | 首页新增"数字员工表演"Tab + 班组卡片列表 | 首页改造完成,可浏览10个班组+75人 | 前端 |

| D2 | 表演页框架搭建(工作流画布区+对话区+底部转化栏) | 表演页UI完成,静态数据可跑通 | 前端 |

| D3 | 接入MTClaw调度,跑通第一个班组(采购降本班)的实时表演 | 采购班表演可实时执行,工作流日志可见 | 后端+前端 |

| D4 | ROI计算器浮层 + 录用入职3步表单 | 表演结束后可算ROI、可点击录用 | 前端 |

| D5 | 7天试用工作台(基于75人体验页改造)+ 试用期后台逻辑 | 录用后可进入试用工作台,数字员工真实干活 | 全栈 |

| D6 | 另外4个核心班组配置(内容营销/客服应答/数据分析/健康管理) | 5个班组可表演 | 配置+测试 |

| D7 | 表演回放+分享卡片 + 联调测试 + 小程序提交审核 | 可分享、可传播、提审 | 全栈 |

第一周结束时的状态:小程序审核中,5个核心班组可表演→算ROI→录用→7天试用,分享链路打通。

四、第二周:补齐+优化

任务
D8-9剩余5个班组配置(设备运维/课程研发/公文写作/风控审核/招聘面试)
D1075人单独表演页(每个员工都有"单人工位表演"模式)
D11用户上传数据让数字员工现场处理(文件上传→沙箱解析→实时表演)
D12转正付费流程(微信支付接入+电子合同生成)
D13运营后台(表演数据统计、试用转化漏斗、用户管理)
D14全量测试 + 性能优化 + 正式发布

五、技术实现细节(直接可写代码的级别)

5.1 表演工作流的数据结构(复用艾吐槽日志组件)

// 每个班组的表演配置,存在后端配置表或前端JSON
const purchaseTeamShow: ShowConfig = {
  showId: 'purchase_cost_reduction',
  title: '采购降本班',
  memberIds: ['analyst_001', 'hunter_002', 'negotiator_003', 'auditor_004', 'tracker_005'],
  demoInput: '采购1000个工业传感器,预算5万',
  workflowSteps: [
    {
      stepId: 'step1',
      agentId: 'analyst_001',
      agentName: '需求分析师',
      action: 'analyze',
      prompt: '拆解以下采购需求:{input},输出型号、参数、交期、认证要求',
      displayText: '正在拆解需求...',
      completeText: '需求拆解完成:1000个传感器,预算5万,要求IP67',
      timeout: 5000
    },
    {
      stepId: 'step2',
      agentId: 'hunter_002',
      agentName: '供应商猎手',
      action: 'search',
      tool: 'mcp_1688_search',  // 调用MCP工具
      dependsOn: ['step1'],
      displayText: '正在扫描供应商...',
      completeText: '找到8家候选供应商',
      timeout: 8000
    },
    // ... step3-5
  ],
  outputArtifacts: ['comparison_table.xlsx', 'contract_draft.docx', 'gantt_chart.png'],
  roiConfig: {
    replacementRatio: 0.6,
    teamSize: 5,
    defaultSalary: 150000,
    defaultVolume: 200
  }
};

5.2 表演执行引擎(前端流式展示)

// 核心逻辑:按依赖关系顺序执行,每步完成后更新UI
async function executeShow(config: ShowConfig, userInput: string) {
  const results = new Map<string, any>();

  for (const step of sortByDependencies(config.workflowSteps)) {
    // 1. UI显示"正在执行..."
    updateWorkflowUI(step.stepId, 'running', step.displayText);

    // 2. 调用后端执行(MTClaw调度对应数字员工)
    const stepInput = collectDepResults(step.dependsOn, results);
    const result = await callAgentAPI({
      agentId: step.agentId,
      action: step.action,
      input: userInput,
      context: stepInput,
      tool: step.tool
    });

    // 3. UI显示完成+结果预览
    results.set(step.stepId, result);
    updateWorkflowUI(step.stepId, 'complete', step.completeText, result.preview);
  }

  // 4. 生成产出物
  const artifacts = await generateArtifacts(config.outputArtifacts, results);

  // 5. 自动弹出ROI计算器
  setTimeout(() => showROIPanel(config.roiConfig), 1000);

  return { results, artifacts };
}

5.3 75人体验页的最小改造点

如果75人体验页是独立页面,只需要加3个东西:

  1. 页面顶部加"表演模式"开关:默认进入"单聊模式",点击"看表演"切换到预设工作流自动执行
  2. 工作流日志组件:直接 import 艾吐槽的 WorkflowLog 组件,传入该员工的表演步骤配置
  3. 底部转化栏:固定底部,[💰算ROI] [✅录用我] 两个按钮
// 75人体验页改造伪代码
import { WorkflowLog } from '@/components/aitucao/WorkflowLog';
import { ROIPanel } from '@/components/show/ROIPanel';
import { HireBar } from '@/components/show/HireBar';

export default function AgentExperiencePage({ agentId }) {
  const [mode, setMode] = useState<'chat' | 'show'>('chat');
  const agent = useAgent(agentId);

  return (
    <Page>
      <Header title={agent.name} right={
        <Toggle 
          left="聊天" 
          right="表演" 
          value={mode} 
          onChange={setMode} 
        />
      } />
      
      {mode === 'show' && (
        <WorkflowLog 
          steps={agent.showConfig.workflowSteps}
          input={agent.showConfig.demoInput}
          onComplete={() => ROIPanel.show(agent.showConfig.roiConfig)}
        />
      )}
      
      <ChatArea agentId={agentId} hidden={mode === 'show'} />
      
      <HireBar agentId={agentId} roiConfig={agent.showConfig.roiConfig} />
    </Page>
  );
}

六、第一天3小时MVP的具体步骤(最快速验证)

如果要最快拿出可演示版本,按这个顺序:

第 1 小时:项目准备

  1. 微信开发者工具打开"艾吐槽"现有项目
  2. 新建一个页面 pages/show/index(表演页)
  3. 复制艾吐槽的工作流日志组件到这个页面

第 2 小时:静态表演跑通

  1. 硬编码一个班组的表演配置(采购降本班5步)
  2. setTimeout 模拟每步执行(每步2秒,不接真实AI)
  3. 工作流动画+产出物占位图展示
  4. 底部加"✅一键录用"按钮(点击跳转到"入职成功"静态页)

第 3 小时:转化链路+分享

  1. ROI计算器浮层(纯前端计算,硬编码公式)
  2. 录用入职3步表单(静态,数据存localStorage)
  3. 试用工作台静态页(显示"试用期第1天")
  4. 分享卡片Canvas生成

3小时后你能演示什么

打开小程序 → 点击"数字员工表演" → 看采购班24秒表演(动画模拟)→ 弹出ROI计算器 → 点击录用 → 3步入职 → 进入试用工作台 → 分享表演卡片给微信好友

这就够了。拿这个去给潜在客户演示,看他们的反应,再决定后续投入。

七、一句话总结

不改架构,只做5处改造:首页加表演入口、75人体验页叠加工作流表演层、ROI计算器浮层、录用→试用→转正闭环、表演回放分享。第一周5个核心班组上线可转化,第二周全量75人+付费转正。最快3小时拿出静态MVP去验证客户反应。


配套文档:智能体表演平台·详细设计方案 v1、BossAgents 双轨战略(同目录)

← 返回案例列表
分享:
🤖 Try Now →
🤖
🎁