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>
5.5 KiB
5.5 KiB
订单班交互式网站生成标准流程
核心流程：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: 基础布局与色彩 - 确定整体结构和主色调
- 迭代2: 字体与排版优化 - 优化文字层级和可读性
- 迭代3: 交互动效增强 - 添加滚动动画和过渡效果
- 迭代4: 视觉细节打磨 - 完善图片展示和装饰元素
- 迭代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)
关键路径配置
# 终端模拟数据
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
每次迭代必须包含
- 完整的HTML文件 (单文件，内嵌CSS和JS)
- 使用真实项目图片 (路径:
../data/订单班文档资料/${ORDER_NAME}/notion文稿/image/) - Agent身份标识 (每个板块显示 "🤖 Agent 0X · 专家名称")
- 独特的Icon设计 (每个Agent使用渐变色背景 + Lucide图标)
- 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(便于预览)
- 代码可读性好
注意事项
必须遵守
- 永远使用真实项目图片，路径格式:
../data/订单班文档资料/${ORDER_NAME}/notion文稿/image/图片名.jpg - 每个Agent必须有独特Icon，使用渐变背景 + Lucide图标
- 突出Agent身份，显示"🤖 Agent 0X · 专家名称"
- 每个板块添加专家分析，体现Agent的专业贡献
- 使用GSAP动画，不使用CSS动画
避免错误
- ❌ 使用placeholder图片
- ❌ Icon设计单调雷同
- ❌ 忽略Agent身份展示
- ❌ 图片说明文字缺失
- ❌ 动画效果简陋或缺失