385 lines
9.7 KiB
Markdown
385 lines
9.7 KiB
Markdown
|
# 会展策划多Agent演示系统 - 需求与可行性分析文档
|
|||
|
|
|
|||
|
|
## 一、项目概述
|
|||
|
|
|
|||
|
|
### 1.1 项目背景
|
|||
|
|
基于n8n工作流平台构建的多Agent协作系统，需要创建一个Web演示界面，直观展示AI Agent协同生成会展策划方案的完整过程。
|
|||
|
|
|
|||
|
|
### 1.2 项目目标
|
|||
|
|
- **主要目标**：构建一个高保真的多Agent协作演示系统
|
|||
|
|
- **演示效果**：实时展示7个专业AI Agent协同工作，生成完整的汽车展会策划方案
|
|||
|
|
- **用户体验**：提供流畅的动画效果和交互体验，让观众理解Agent协作机制
|
|||
|
|
|
|||
|
|
### 1.3 项目范围
|
|||
|
|
- **核心功能**：Agent工作流可视化、内容生成动画、成果展示
|
|||
|
|
- **演示内容**：基于`web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
|
|||
|
|
- **技术边界**：前端演示系统，不涉及真实的AI调用
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 二、需求分析
|
|||
|
|
|
|||
|
|
### 2.1 功能需求
|
|||
|
|
|
|||
|
|
#### 2.1.1 核心功能模块
|
|||
|
|
|
|||
|
|
| 模块 | 功能描述 | 优先级 |
|
|||
|
|
|------|---------|--------|
|
|||
|
|
| **启动界面** | 展示系统介绍，提供"开始演示"按钮 | P0 |
|
|||
|
|
| **工作流可视化** | 基于Mermaid图动态展示Agent协作流程 | P0 |
|
|||
|
|
| **Agent执行动画** | 展示每个Agent的输入/输出，模拟思考过程 | P0 |
|
|||
|
|
| **内容生成展示** | 打字机效果展示文本，渐显效果展示图片 | P0 |
|
|||
|
|
| **成果展示页面** | 分页展示6个策划模块的完整内容 | P0 |
|
|||
|
|
| **进度指示器** | 显示当前执行阶段和整体进度 | P1 |
|
|||
|
|
| **交互控制** | 暂停/继续/重新开始功能 | P1 |
|
|||
|
|
|
|||
|
|
#### 2.1.2 Agent角色定义
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const agents = {
|
|||
|
|
"信息检索专家": {
|
|||
|
|
icon: "🔍",
|
|||
|
|
model: "DeepSeek Chat Model5",
|
|||
|
|
role: "市场调研、数据收集、竞品分析",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/信息检索专家.md"
|
|||
|
|
},
|
|||
|
|
"设计专家": {
|
|||
|
|
icon: "🎨",
|
|||
|
|
model: "Google Gemini Chat Model2",
|
|||
|
|
role: "视觉设计、空间布局、品牌形象",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/设计师专家.md"
|
|||
|
|
},
|
|||
|
|
"财务预算专家": {
|
|||
|
|
icon: "💰",
|
|||
|
|
model: "DeepSeek Chat Model2",
|
|||
|
|
role: "成本核算、预算规划、ROI分析",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/财务预算专家.md"
|
|||
|
|
},
|
|||
|
|
"格式编辑专家": {
|
|||
|
|
icon: "📝",
|
|||
|
|
model: "DeepSeek Chat Model4",
|
|||
|
|
role: "文档格式化、内容结构优化",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/格式编辑专家.md"
|
|||
|
|
},
|
|||
|
|
"活动执行专家": {
|
|||
|
|
icon: "⚡",
|
|||
|
|
model: "DeepSeek Chat Model1",
|
|||
|
|
role: "执行计划、时间线管理、任务分配",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/活动执行专家.md"
|
|||
|
|
},
|
|||
|
|
"营销宣传专家": {
|
|||
|
|
icon: "📢",
|
|||
|
|
model: "DeepSeek Chat Model3",
|
|||
|
|
role: "推广策略、媒体规划、品牌传播",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/会展营销宣传专家.md"
|
|||
|
|
},
|
|||
|
|
"会展策划专家": {
|
|||
|
|
icon: "🎯",
|
|||
|
|
model: "Chat Models + Memories",
|
|||
|
|
role: "中央协调、方案整合、决策支持",
|
|||
|
|
promptFile: "web_frontend/data/Agent_prompt/会展策划专家.md"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.2 内容需求
|
|||
|
|
|
|||
|
|
#### 2.2.1 展示内容结构
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
展会策划方案:
|
|||
|
|
1. 策划案概述:
|
|||
|
|
- 封面信息
|
|||
|
|
- 策划背景
|
|||
|
|
- 策划目的
|
|||
|
|
- 策划依据
|
|||
|
|
|
|||
|
|
2. 展会介绍与预期效果:
|
|||
|
|
- 展会主题
|
|||
|
|
- 展会地址
|
|||
|
|
- 展品范围
|
|||
|
|
- 目标参展商/观众
|
|||
|
|
- 预计规模
|
|||
|
|
- 预期效果
|
|||
|
|
|
|||
|
|
3. 营销方案:
|
|||
|
|
- 整体推广策略
|
|||
|
|
- 线下推广方案
|
|||
|
|
- 线上推广方案
|
|||
|
|
- 精准邀请与对接
|
|||
|
|
|
|||
|
|
4. 现场运营方案:
|
|||
|
|
- 展区规划
|
|||
|
|
- 现场服务
|
|||
|
|
- 活动安排
|
|||
|
|
- 展陈设计
|
|||
|
|
|
|||
|
|
5. 预算与收益分析:
|
|||
|
|
- 支出预算明细
|
|||
|
|
- 收入预算明细
|
|||
|
|
- 收益预测
|
|||
|
|
- 投资回报率
|
|||
|
|
|
|||
|
|
6. 风险评估与应急预案:
|
|||
|
|
- 风险分析矩阵
|
|||
|
|
- 应对措施
|
|||
|
|
- 应急预案
|
|||
|
|
- 保障体系
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.3 交互需求
|
|||
|
|
|
|||
|
|
#### 2.3.1 用户流程
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
graph LR
|
|||
|
|
A[访问页面] --> B[查看介绍]
|
|||
|
|
B --> C[点击开始演示]
|
|||
|
|
C --> D[观看Agent协作]
|
|||
|
|
D --> E[查看生成内容]
|
|||
|
|
E --> F[浏览完整方案]
|
|||
|
|
F --> G[重新演示/退出]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2.3.2 动画效果需求
|
|||
|
|
|
|||
|
|
| 动画类型 | 应用场景 | 实现方式 | 时长 |
|
|||
|
|
|---------|---------|---------|------|
|
|||
|
|
| **淡入淡出** | Agent切换 | CSS transition | 0.3s |
|
|||
|
|
| **打字机效果** | 文本生成 | JavaScript逐字显示 | 30-50字/秒 |
|
|||
|
|
| **流光效果** | 工作流连线 | SVG animation | 持续 |
|
|||
|
|
| **加载动画** | 图片加载 | CSS spinner | 1-2s |
|
|||
|
|
| **进度条** | 整体进度 | CSS/JS动态更新 | 实时 |
|
|||
|
|
| **脉冲效果** | 当前Active Agent | CSS animation | 持续 |
|
|||
|
|
|
|||
|
|
### 2.4 非功能需求
|
|||
|
|
|
|||
|
|
#### 2.4.1 性能要求
|
|||
|
|
- 页面加载时间 < 3秒
|
|||
|
|
- 动画帧率 ≥ 30fps
|
|||
|
|
- 响应时间 < 200ms
|
|||
|
|
|
|||
|
|
#### 2.4.2 兼容性要求
|
|||
|
|
- 浏览器：Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
|
|||
|
|
- 分辨率：1366x768 ~ 3840x2160
|
|||
|
|
- 设备：桌面端优先，平板端适配
|
|||
|
|
|
|||
|
|
#### 2.4.3 设计规范
|
|||
|
|
- 遵循`claude.md`中的superdesign规范
|
|||
|
|
- 采用现代化UI设计语言
|
|||
|
|
- 保持视觉一致性和品牌调性
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 三、技术方案
|
|||
|
|
|
|||
|
|
### 3.1 技术栈选择
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const techStack = {
|
|||
|
|
framework: "React 18 / Vue 3",
|
|||
|
|
styling: "Tailwind CSS + Framer Motion",
|
|||
|
|
stateManagement: "Zustand / Pinia",
|
|||
|
|
visualization: "D3.js / Mermaid.js",
|
|||
|
|
animation: "GSAP / Lottie",
|
|||
|
|
build: "Vite",
|
|||
|
|
deployment: "Vercel / Netlify"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.2 架构设计
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
graph TB
|
|||
|
|
subgraph Frontend[前端架构]
|
|||
|
|
UI[UI层]
|
|||
|
|
State[状态管理]
|
|||
|
|
Animation[动画引擎]
|
|||
|
|
Data[数据层]
|
|||
|
|
end
|
|||
|
|
|
|||
|
|
subgraph Components[核心组件]
|
|||
|
|
Workflow[工作流组件]
|
|||
|
|
Agent[Agent组件]
|
|||
|
|
Content[内容展示组件]
|
|||
|
|
Control[控制组件]
|
|||
|
|
end
|
|||
|
|
|
|||
|
|
UI --> State
|
|||
|
|
State --> Animation
|
|||
|
|
Animation --> Data
|
|||
|
|
|
|||
|
|
Workflow --> Agent
|
|||
|
|
Agent --> Content
|
|||
|
|
Content --> Control
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.3 数据流设计
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
interface DemoState {
|
|||
|
|
// 演示状态
|
|||
|
|
status: 'idle' | 'running' | 'paused' | 'completed'
|
|||
|
|
currentPhase: number
|
|||
|
|
currentAgent: string
|
|||
|
|
progress: number
|
|||
|
|
|
|||
|
|
// Agent状态
|
|||
|
|
agents: {
|
|||
|
|
[key: string]: {
|
|||
|
|
status: 'waiting' | 'thinking' | 'generating' | 'done'
|
|||
|
|
input: string
|
|||
|
|
output: string
|
|||
|
|
startTime: number
|
|||
|
|
endTime: number
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 内容状态
|
|||
|
|
generatedContent: {
|
|||
|
|
[section: string]: {
|
|||
|
|
title: string
|
|||
|
|
content: string
|
|||
|
|
images: string[]
|
|||
|
|
isComplete: boolean
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 控制状态
|
|||
|
|
controls: {
|
|||
|
|
speed: number // 1-5倍速
|
|||
|
|
autoAdvance: boolean
|
|||
|
|
showDetails: boolean
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 四、实施计划
|
|||
|
|
|
|||
|
|
### 4.1 开发阶段
|
|||
|
|
|
|||
|
|
| 阶段 | 任务 | 工时 | 依赖 |
|
|||
|
|
|------|------|------|------|
|
|||
|
|
| **Phase 1** | 环境搭建、基础框架 | 4h | - |
|
|||
|
|
| **Phase 2** | 工作流可视化组件 | 8h | Phase 1 |
|
|||
|
|
| **Phase 3** | Agent执行动画 | 12h | Phase 2 |
|
|||
|
|
| **Phase 4** | 内容生成展示 | 8h | Phase 3 |
|
|||
|
|
| **Phase 5** | 成果展示页面 | 6h | Phase 4 |
|
|||
|
|
| **Phase 6** | 交互优化、调试 | 6h | Phase 5 |
|
|||
|
|
| **总计** | - | **44h** | - |
|
|||
|
|
|
|||
|
|
### 4.2 内容准备
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
需要完善的内容:
|
|||
|
|
1. Agent Prompts:
|
|||
|
|
- 确保每个Agent的prompt文件完整
|
|||
|
|
- 添加具体的输入输出示例
|
|||
|
|
|
|||
|
|
2. 演示数据:
|
|||
|
|
- 完善汽车展会策划案内容
|
|||
|
|
- 准备配图资源（至少20张）
|
|||
|
|
- 编写Agent对话脚本
|
|||
|
|
|
|||
|
|
3. 文案优化:
|
|||
|
|
- 系统介绍文案
|
|||
|
|
- 操作引导文案
|
|||
|
|
- 加载提示文案
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 五、风险评估
|
|||
|
|
|
|||
|
|
### 5.1 技术风险
|
|||
|
|
|
|||
|
|
| 风险项 | 概率 | 影响 | 应对措施 |
|
|||
|
|
|--------|------|------|----------|
|
|||
|
|
| 动画性能问题 | 中 | 高 | 使用CSS动画优先，避免复杂计算 |
|
|||
|
|
| 浏览器兼容性 | 低 | 中 | 使用成熟框架，充分测试 |
|
|||
|
|
| 内容加载慢 | 中 | 中 | 实施懒加载，CDN加速 |
|
|||
|
|
|
|||
|
|
### 5.2 内容风险
|
|||
|
|
|
|||
|
|
| 风险项 | 概率 | 影响 | 应对措施 |
|
|||
|
|
|--------|------|------|----------|
|
|||
|
|
| 内容不完整 | 高 | 高 | 提前准备，建立内容审核机制 |
|
|||
|
|
| Agent逻辑不清 | 中 | 高 | 详细设计Agent交互脚本 |
|
|||
|
|
| 演示时间过长 | 中 | 中 | 提供快进功能，优化内容长度 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 六、成功标准
|
|||
|
|
|
|||
|
|
### 6.1 功能完成度
|
|||
|
|
- [ ] 所有P0功能100%实现
|
|||
|
|
- [ ] P1功能至少80%实现
|
|||
|
|
- [ ] 无阻塞性bug
|
|||
|
|
|
|||
|
|
### 6.2 用户体验
|
|||
|
|
- [ ] 演示流程流畅，无明显卡顿
|
|||
|
|
- [ ] 动画效果自然，符合预期
|
|||
|
|
- [ ] 内容展示清晰，易于理解
|
|||
|
|
|
|||
|
|
### 6.3 演示效果
|
|||
|
|
- [ ] 能够完整展示Agent协作过程
|
|||
|
|
- [ ] 生成内容质量高，业务逻辑合理
|
|||
|
|
- [ ] 观众能够理解系统价值
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 七、附录
|
|||
|
|
|
|||
|
|
### 7.1 参考资源
|
|||
|
|
- 工作流定义：`web_frontend/doc/会展策划工作流.md`
|
|||
|
|
- 演示内容：`web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
|
|||
|
|
- Agent定义：`web_frontend/data/Agent_prompt/`
|
|||
|
|
- 设计规范：`claude.md` (superdesign section)
|
|||
|
|
|
|||
|
|
### 7.2 关键决策点
|
|||
|
|
|
|||
|
|
需要与您确认的问题：
|
|||
|
|
|
|||
|
|
1. **技术栈选择**
|
|||
|
|
- 倾向于React还是Vue？
|
|||
|
|
- 是否需要SSR支持？
|
|||
|
|
|
|||
|
|
2. **演示节奏**
|
|||
|
|
- 完整演示时长目标？(建议3-5分钟)
|
|||
|
|
- 是否需要支持手动控制每个步骤？
|
|||
|
|
|
|||
|
|
3. **内容深度**
|
|||
|
|
- 每个Agent输出内容的详细程度？
|
|||
|
|
- 是否需要展示完整的prompt和response？
|
|||
|
|
|
|||
|
|
4. **视觉风格**
|
|||
|
|
- 偏向科技感还是商务风？
|
|||
|
|
- 颜色主题偏好？
|
|||
|
|
|
|||
|
|
5. **部署方式**
|
|||
|
|
- 静态部署还是需要后端支持？
|
|||
|
|
- 是否需要数据统计功能？
|
|||
|
|
|
|||
|
|
### 7.3 下一步行动
|
|||
|
|
|
|||
|
|
1. **立即行动**
|
|||
|
|
- 确认技术方案
|
|||
|
|
- 完善内容素材
|
|||
|
|
- 搭建开发环境
|
|||
|
|
|
|||
|
|
2. **短期目标**（1周内）
|
|||
|
|
- 完成核心功能开发
|
|||
|
|
- 实现基础动画效果
|
|||
|
|
|
|||
|
|
3. **长期优化**
|
|||
|
|
- 性能优化
|
|||
|
|
- 用户反馈收集
|
|||
|
|
- 迭代改进
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
*文档版本：v2.0*
|
|||
|
|
*更新时间：2025-09-08*
|
|||
|
|
*负责人：[待定]*
|