详细说明: - 能源订单班: 重命名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>
3.5 KiB
3.5 KiB
订单班交互式网站迭代设计任务
配置参数
ORDER="食品" # 订单班类型(可选:食品、化工、智能开发等)
关键路径定义
# 数据源路径
TERMINAL_SIM="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/src/data/terminalSimulations/"
SOURCE_DOCS="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/data/订单班文档资料/${ORDER}"
# 输出路径
WEB_OUTPUT="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/web_result/order-classes/${ORDER}"
# SuperDesign路径
SUPERDESIGN_WORK="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/current"
SUPERDESIGN_ARCHIVE="/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/.superdesign/archive_${ORDER}_$(date +%Y%m%d)"
执行步骤
1. 内容分析阶段
目标:深度理解订单班的内容特色和核心要素
具体任务:
- 扫描并分析
SOURCE_DOCS中的所有文稿资料 - 提取关键信息:主题、技术特点、时间线、重要数据、图片资源
- 创建内容清单
content_checklist.json,包含所有需要展示的元素 - 输出内容分析报告,明确设计方向
2. 页面设计阶段
目标:创建符合订单班特色的交互式网站
设计要求:
- 布局结构:单页滚动式,配合固定时间轴导航
- 视觉风格:根据订单班特色定制主题色彩和设计语言
- 核心功能:
- 时间轴导航:显示进度,支持快速跳转
- 图片查看器:支持点击放大、缩放、全屏查看
- 平滑滚动:各阶段内容流畅过渡
技术实现:
- 使用React 18 + TypeScript构建
- Tailwind CSS 3.0处理样式
- GSAP 3.12实现动画和滚动交互
- 图片懒加载优化性能
- Vite 5.0作为构建工具
3. SuperDesign迭代优化
目标:通过5次迭代找到最优设计方案
迭代流程:
- 迭代1:确定基础布局和主色调
- 迭代2:优化字体排版和内容层级
- 迭代3:增强交互动效和用户体验
- 迭代4:完善视觉细节和装饰元素
- 迭代5:响应式适配和性能优化
评估标准(每项1-10分):
- 视觉吸引力
- 品牌契合度
- 用户体验
- 性能表现
- 内容呈现
- 创新性
选择最优版本:
- 创建评估矩阵,对比各版本得分
- 记录选择理由
- 标记最优版本号
4. 部署与归档
目标:完成项目交付和文件整理
执行任务:
- 将最优版本部署到
WEB_OUTPUT - 归档所有SuperDesign迭代版本到
SUPERDESIGN_ARCHIVE - 让Serena记录最终版本的设计风格和特征
- 清理临时工作目录
5. 内容验证与质量保证
目标:确保内容完整性和展示效果
检查清单:
- 所有文稿内容已正确迁移
- 图片资源完整且显示正常
- 时间线事件准确无遗漏
- 交互功能运行流畅
- 响应式布局适配完善
- 无控制台错误
- TypeScript类型检查通过
- 性能指标达标(Lighthouse > 90)
优化建议:
- 识别内容展示的优化空间
- 调整不合适的设计元素
- 完善用户体验细节
质量标准
- 设计与订单班主题高度契合
- 内容100%准确完整
- 用户体验流畅自然
- 代码规范可维护
- 文档清晰完整
注意事项
- 确保所有路径变量正确替换
- 保持Git版本管理
- 每个阶段创建检查点
- 遇到问题及时记录和处理