3b8cb3c568
详细说明: - 能源订单班: 重命名7个图片文件为描述性中文名称 - 能源订单班: 更新markdown文档中的所有图片引用 - 智能开发订单班: 优化图片命名结构 - 化工订单班: 整理图片资源 - 新增SuperDesign食品订单班设计迭代文件 - 新增能源订单班终端模拟数据(energy.ts) - 清理web_frontend冗余文档 图片重命名映射: - Whisk_1ebf7115ee180218c354deb8bff7f3eddr.jpg → 光伏面板室外场景图片.jpg - Whisk_582dc133200b175859e4b322295fb3d1dr.jpg → 光伏面板生成画面.jpg - image.jpg → PLC示意图.jpg - Whisk_b35aa11c60670e38bea44dcd9fe7df5fdr.jpg → 工业机器人图片.jpg - Whisk_028f4b832e3496db8814cd48f050ec03dr.jpg → 机器视觉相机图片.jpg - Whisk_eb381c66f5156a4a74f49102095ae534dr.jpg → 输送与治具.jpg - Mermaid_Chart[...].jpg → Mermaid流程图.jpg 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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身份展示
|
||
- ❌ 图片说明文字缺失
|
||
- ❌ 动画效果简陋或缺失
|