171 lines
5.5 KiB
Markdown
171 lines
5.5 KiB
Markdown
|
# 订单班交互式网站生成标准流程
|
|||
|
|
|
|||
|
|
## 核心流程：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身份展示
|
|||
|
|
- ❌ 图片说明文字缺失
|
|||
|
|
- ❌ 动画效果简陋或缺失
|