# 订单班交互式网站生成标准流程

## 核心流程：6个阶段

### 阶段一：内容分析与理解 (15分钟)
**目标**: 深度理解订单班内容特色
**输入**: 订单班详细文稿资料 + 终端模拟数据
**输出**: 
- 内容分析报告 (content_analysis.md)
- 内容清单文件 (content_checklist.json)
**验收**: 识别核心主题、时间线事件、图片资源、设计方向

### 阶段二：初始设计与架构 (20分钟)
**目标**: 建立项目基础结构和设计系统
**技术栈**:
- React 18+ (TypeScript 5.0+)
- Tailwind CSS 3.0+
- Vite 5.0+
- GSAP 3.12+ (滚动动画)
**输出**: 项目基础结构 + 设计系统文档 + 组件规划图

### 阶段三：SuperDesign迭代优化 (40分钟) ⭐核心阶段
**工作目录**: `.superdesign/design_iterations/`
**执行5次设计迭代**:
1. **迭代1**: 基础布局与色彩 - 确定整体结构和主色调
2. **迭代2**: 字体与排版优化 - 优化文字层级和可读性
3. **迭代3**: 交互动效增强 - 添加滚动动画和过渡效果
4. **迭代4**: 视觉细节打磨 - 完善图片展示和装饰元素
5. **迭代5**: 响应式适配 - 确保多端显示效果

**评估维度** (1-10分):
- visual_appeal (视觉吸引力)
- brand_alignment (品牌契合度)
- usability (易用性)
- performance (性能表现)
- content_presentation (内容呈现)
- innovation (创新性)
- technical_quality (技术质量)

**输出**: 5个迭代版本 + 评估报告 + 最优版本标记

### 阶段四：功能实现与交互 (30分钟)
**核心功能**:
- 时间轴导航 (固定定位、进度指示、快速跳转)
- 图片查看器 (放大缩小、全屏预览)
- 平滑滚动 (GSAP动画)
- 滚动触发动画 (ScrollTrigger)

### 阶段五：内容集成与验证 (25分钟)
**检查内容**:
- 文本内容 (章节、段落、术语、数据)
- 图片资源 (清晰度、说明、版权)
- 交互元素 (时间线、链接、表格、图表)
- SEO优化 (标题、Meta、Alt、结构化数据)

### 阶段六：部署与归档 (10分钟)
**操作**:
- 构建生产版本 (npm run build)
- 移动到最终位置
- 归档SuperDesign文件到 `.superdesign/archive_${ORDER_NAME}_${DATE}/`
- 生成交付文档 (README.md)

---

## 关键路径配置

```bash
# 终端模拟数据
TERMINAL_SIMULATIONS="/web_frontend/exhibition-demo/src/data/terminalSimulations/"

# 详细文稿资料
SOURCE_MATERIALS="/data/订单班文档资料/${ORDER_NAME}"

# 网页生成结果
OUTPUT_PATH="/web_frontend/web_result/order-classes/${ORDER_NAME}"

# SuperDesign工作目录
SUPERDESIGN_WORK="/.superdesign/design_iterations/"

# SuperDesign归档
SUPERDESIGN_ARCHIVE="/.superdesign/archive_${ORDER_NAME}_${DATE}/"
```

---

## SuperDesign工作流程详解

### 设计文件命名规范
- 迭代版本: `${order_name}_v1.html`, `${order_name}_v2.html`, ...
- 主题CSS: `theme_${version}.css`
- 评估报告: `evaluation_${order_name}.md`

### 每次迭代必须包含
1. **完整的HTML文件** (单文件，内嵌CSS和JS)
2. **使用真实项目图片** (路径: `../data/订单班文档资料/${ORDER_NAME}/notion文稿/image/`)
3. **Agent身份标识** (每个板块显示 "🤖 Agent 0X · 专家名称")
4. **独特的Icon设计** (每个Agent使用渐变色背景 + Lucide图标)
5. **GSAP动画效果** (ScrollTrigger、Timeline、Stagger)

### 设计原则
- **Agent专业性突出**: 每个板块顶部展示Agent徽章和分析报告
- **图片丰富多样**: 使用项目中的真实图片，避免单调placeholder
- **交互流畅自然**: GSAP动画缓动函数选择得当
- **响应式设计**: 移动端友好，断点合理

---

## 当前项目状态（食品订单班）

### 已完成
- ✅ 阶段一：内容分析（已读取文稿和图片）
- ✅ 阶段二：设计系统定义
- ✅ 阶段三：SuperDesign迭代
  - V1: 基础版本
  - V2: 优化Icon和图片
  - V3: 强化Agent身份和专业性 ⭐当前版本

### V3核心特点
- 7个Agent各有独特渐变Icon (市场、品牌、选址、菜品、运营、团队、财务)
- 使用25张真实项目图片
- 每个板块有Agent专业分析报告/理念说明信息框
- Hero区域标注"AI多智能体协同"
- 时间轴导航添加emoji和滑出标签
- 财务数据可视化(进度条、表格、卡片)
- 所有动画使用GSAP + ScrollTrigger

### 下一步（阶段三继续）
- 迭代4：视觉细节打磨（阴影、圆角、背景纹理、装饰元素）
- 迭代5：响应式适配（移动端布局、断点优化、触摸交互）
- 评估报告：对比5个版本，选择最优方案

---

## 成功标准

### 设计质量
- 视觉设计符合订单班主题特色
- Agent专业性突出展示
- 用户体验流畅自然
- 响应式适配完善

### 内容完整
- 所有Agent的工作成果都已展示
- 真实项目图片使用充分
- 信息架构清晰合理
- 无明显遗漏或错误

### 技术实现
- 使用GSAP 3.12+实现流畅动画
- ScrollTrigger滚动交互
- 单文件HTML(便于预览)
- 代码可读性好

---

## 注意事项

### 必须遵守
1. **永远使用真实项目图片**，路径格式: `../data/订单班文档资料/${ORDER_NAME}/notion文稿/image/图片名.jpg`
2. **每个Agent必须有独特Icon**，使用渐变背景 + Lucide图标
3. **突出Agent身份**，显示"🤖 Agent 0X · 专家名称"
4. **每个板块添加专家分析**，体现Agent的专业贡献
5. **使用GSAP动画**，不使用CSS动画

### 避免错误
- ❌ 使用placeholder图片
- ❌ Icon设计单调雷同
- ❌ 忽略Agent身份展示
- ❌ 图片说明文字缺失
- ❌ 动画效果简陋或缺失