Files

Yep_Q c579dae90a feat: 完成化工订单班图片处理和项目记忆重组

详细说明:
- 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致）
- 完成环保、财经商贸订单班的图片重命名工作
- 重组项目记忆文件，按照功能模块编号（00-09）
- 删除旧的分散记忆文件，统一到新的编号体系
- 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts
- 清理web_result冗余文件（food react-app等）
- 新增playwright截图记录和记忆文档
- 影响模块：订单班文档资料、项目记忆系统、终端模拟系统

2025-10-04 00:34:44 +08:00

9.9 KiB

Raw Blame History

SuperDesign 工作流最佳实践 (2025-10-03)

概述

SuperDesign是集成在VS Code中的高级前端设计工具，用于快速生成高质量的UI设计。基于食品订单班的成功实践，总结出一套完整的设计迭代工作流程。

核心工作流程

1. 需求分析阶段

明确设计目标和业务场景
分析目标用户群体
确定设计风格和品牌定位

2. 布局设计（Layout Design）

输出类型: 文本（ASCII wireframe）

步骤：

思考界面布局结构
确定UI组件层级
使用ASCII艺术呈现线框图

示例：

┌─────────────────────────────────────┐
│ ☰          HEADER BAR            + │
├─────────────────────────────────────┤
│                                     │
│ [MAIN CONTENT AREA]                 │
│                                     │
├─────────────────────────────────────┤
│ [INPUT FIELD]                [SEND] │
└─────────────────────────────────────┘

关键原则：

明确各区域功能定位
考虑用户交互流程
保持布局简洁清晰
必须与用户确认布局后再进入下一步

3. 主题设计（Theme Design）

输出类型: 工具调用（generateTheme）

步骤：

设计配色方案（主色、辅色、背景色等）
选择字体系统（标题、正文、代码）
定义间距和圆角系统
配置阴影效果

关键技术点：

使用oklch色彩空间（更好的色彩过渡）
定义完整的CSS变量系统
建立5-7级阴影层级
设置6级圆角系统

食品订单班v5主题特色：

:root {
  --font-sans: Geist Mono, monospace;
  --radius: 0rem;  /* 无圆角，锐利设计 */
  --shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);  /* 极简阴影 */
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

必须与用户确认主题后再进入下一步

4. 动画设计（Animation Design）

输出类型: 文本（微语法动画说明）

步骤：

定义核心交互动画
设计界面过渡效果
规划加载状态动画
设置微交互细节

动画微语法示例：

userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
hover: 200ms [S1→1.01, shadow↗]

关键原则：

动画时长控制在150-600ms
使用ease-out/ease-in-out缓动
保持动画目的性（非装饰性）
必须与用户确认动画后再进入下一步

5. HTML实现（HTML Generation）

输出类型: 工具调用（write）

步骤：

为每个UI组件创建HTML结构
引用主题CSS文件
添加自定义样式
整合为单一HTML文件

关键技术要求：

必须使用<script src="https://cdn.tailwindcss.com"></script>导入Tailwind
不使用<link>标签加载Tailwind CSS
使用Flowbite组件库：<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
图片使用unsplash等公开CDN，不虚构URL
图标使用Lucide：<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>

文件命名规范：

初始版本：{design_name}_v1.html
迭代版本：{design_name}_v2.html, {design_name}_v3.html
存储路径：.superdesign/design_iterations/

样式覆盖技巧：

/* 确保自定义样式优先级 */
h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
}

body {
  background: var(--background) !important;
}

迭代优化策略

基于食品订单班的成功经验，建议采用5轮迭代：

迭代1：基础框架（v1）

目标评分: 6.5-7.0/10

搭建基本HTML结构
实现核心功能布局
应用初始主题样式
确保响应式基础

关键交付物：

完整的HTML骨架
基础CSS变量系统
核心组件实现

迭代2：Agent强化（v2）

目标评分: 7.8-8.2/10

优化Agent卡片设计
增强内容层次
改进交互反馈
提升品牌一致性

关键优化点：

Agent头像和信息展示
卡片hover效果
颜色对比度调整

迭代3：专业深度（v3）

目标评分: 8.3-8.6/10

深化行业特征
优化内容展示
增强专业感
完善细节设计

关键优化点：

行业术语准确性
数据可视化
专业图标选择

迭代4：视觉细节（v4）

目标评分: 8.6-8.9/10

实现5级阴影系统
应用6级圆角系统
添加多层背景纹理
打造3D卡片效果

关键技术：

/* 5级阴影系统 */
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
--shadow-md: 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
--shadow-lg: 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
--shadow-xl: 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);

/* 6级圆角系统 */
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);

迭代5：响应式完善（v5）

目标评分: 9.2-9.5/10

实现流式字体系统（clamp()）
优化弹性Grid布局
添加触摸优化
性能优化（懒加载、防抖）

关键技术：

/* 流式字体 */
font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);

/* 弹性布局 */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(1rem, 2vw, 2rem);

性能优化：

// IntersectionObserver懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
});

// Debounce防抖
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

7维度评估方法

每次迭代完成后，进行7维度评估：

视觉设计 (Visual Design)
- 配色方案
- 排版质量
- 视觉层次
品牌一致性 (Brand Consistency)
- 风格统一
- 品牌元素
- 语言表达
用户体验 (User Experience)
- 交互流畅度
- 信息架构
- 易用性
性能优化 (Performance)
- 加载速度
- 动画性能
- 资源优化
内容质量 (Content Quality)
- 信息准确性
- 内容完整性
- 专业深度
创新性 (Innovation)
- 设计创新
- 技术创新
- 交互创新
技术实现 (Technical Implementation)
- 代码质量
- 响应式设计
- 浏览器兼容性

评分标准：

9.0-10.0：优秀（Excellent）
8.0-8.9：良好（Good）
7.0-7.9：中等（Average）
6.0-6.9：及格（Pass）
<6.0：不及格（Fail）

归档管理

归档时机

完成所有迭代后
选定最优版本后
准备新项目前

归档结构

.superdesign/archive_{项目名}_{日期}/
├── {design_name}_v1.html
├── {design_name}_v2.html
├── {design_name}_v3.html
├── {design_name}_v4.html
├── {design_name}_v5.html
├── theme_1.css
├── evaluation_report.md
└── README.md

归档说明文件（README.md）

应包含：

项目概述
迭代历程
最优版本推荐
关键技术亮点
经验教训总结

食品订单班成功案例

迭代历程

v1: 基础框架 6.93/10
v2: Agent强化 8.02/10 (+15.7%)
v3: 专业深度 8.51/10 (+6.1%)
v4: 视觉细节 8.71/10 (+2.4%)
v5: 响应式完善 9.39/10 (+7.8%)

总提升: 35.5%

关键技术亮点

clamp()流式字体系统
弹性Grid布局
IntersectionObserver懒加载
Debounce防抖优化
5级阴影系统
6级圆角系统
7种渐变背景
多层纹理效果

部署流程

选定最优版本（v5）
部署到生产环境：web_frontend/web_result/order-classes/food/index.html
创建软链接解决图片路径问题
归档所有设计文件到.superdesign/archive_食品_20251001/

常见问题

Q1: 如何选择最优版本？

A: 综合考虑7维度评分、用户反馈、性能指标，通常最后一轮迭代得分最高

Q2: 迭代次数是否固定为5轮？

A: 不固定，根据项目复杂度调整，简单项目3轮，复杂项目可达7轮

Q3: 如何处理不同订单班的设计？

A: 保持工作流程一致，但主题和内容根据行业特征定制

Q4: 性能优化的优先级？

A: 响应式设计 > 加载速度 > 动画性能 > 资源优化

最佳实践总结

✅ DO（推荐做法）：

严格遵循4步工作流（布局→主题→动画→实现）
每步必须与用户确认后再进行
使用工具调用而非文本输出
保存所有迭代版本供对比
进行7维度评估跟踪进度
及时归档设计文件

❌ DON'T（避免做法）：

跳过布局设计直接实现
未经确认就进入下一步
虚构图片或资源URL
迭代版本覆盖旧文件
忽视性能优化
缺少评估和文档

工具调用规范

必须使用实际工具调用：

<!-- 错误示例 -->
<tool-call>
  <name>write</name>
  <parameters>...</parameters>
</tool-call>

<!-- 正确示例 -->
使用实际的工具调用功能块

文件操作必须使用工具：

generateTheme：生成主题CSS
write：创建HTML文件
不要用文本描述工具调用

参考资源

食品订单班v5：web_frontend/web_result/order-classes/food/index.html
评估报告：.superdesign/archive_食品_20251001/evaluation_report.md
主题参考：.superdesign/archive_食品_20251001/theme_1.css

最后更新: 2025-10-03 成功案例: 食品订单班（9.39/10，35.5%提升） 适用范围: 所有订单班的网页设计开发

9.9 KiB Raw Blame History Unescape Escape