c579dae90a
详细说明: - 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致） - 完成环保、财经商贸订单班的图片重命名工作 - 重组项目记忆文件，按照功能模块编号（00-09） - 删除旧的分散记忆文件，统一到新的编号体系 - 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts - 清理web_result冗余文件（food react-app等） - 新增playwright截图记录和记忆文档 - 影响模块：订单班文档资料、项目记忆系统、终端模拟系统
389 lines
9.9 KiB
Markdown
389 lines
9.9 KiB
Markdown
# SuperDesign 工作流最佳实践 (2025-10-03)
|
||
|
||
## 概述
|
||
SuperDesign是集成在VS Code中的高级前端设计工具，用于快速生成高质量的UI设计。基于食品订单班的成功实践，总结出一套完整的设计迭代工作流程。
|
||
|
||
## 核心工作流程
|
||
|
||
### 1. 需求分析阶段
|
||
- 明确设计目标和业务场景
|
||
- 分析目标用户群体
|
||
- 确定设计风格和品牌定位
|
||
|
||
### 2. 布局设计（Layout Design）
|
||
**输出类型**: 文本（ASCII wireframe）
|
||
|
||
**步骤**：
|
||
1. 思考界面布局结构
|
||
2. 确定UI组件层级
|
||
3. 使用ASCII艺术呈现线框图
|
||
|
||
**示例**：
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ ☰ HEADER BAR + │
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ [MAIN CONTENT AREA] │
|
||
│ │
|
||
├─────────────────────────────────────┤
|
||
│ [INPUT FIELD] [SEND] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**关键原则**：
|
||
- 明确各区域功能定位
|
||
- 考虑用户交互流程
|
||
- 保持布局简洁清晰
|
||
- **必须与用户确认布局后再进入下一步**
|
||
|
||
### 3. 主题设计（Theme Design）
|
||
**输出类型**: 工具调用（generateTheme）
|
||
|
||
**步骤**：
|
||
1. 设计配色方案（主色、辅色、背景色等）
|
||
2. 选择字体系统（标题、正文、代码）
|
||
3. 定义间距和圆角系统
|
||
4. 配置阴影效果
|
||
|
||
**关键技术点**：
|
||
- 使用oklch色彩空间（更好的色彩过渡）
|
||
- 定义完整的CSS变量系统
|
||
- 建立5-7级阴影层级
|
||
- 设置6级圆角系统
|
||
|
||
**食品订单班v5主题特色**：
|
||
```css
|
||
: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）
|
||
**输出类型**: 文本（微语法动画说明）
|
||
|
||
**步骤**：
|
||
1. 定义核心交互动画
|
||
2. 设计界面过渡效果
|
||
3. 规划加载状态动画
|
||
4. 设置微交互细节
|
||
|
||
**动画微语法示例**：
|
||
```
|
||
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）
|
||
|
||
**步骤**：
|
||
1. 为每个UI组件创建HTML结构
|
||
2. 引用主题CSS文件
|
||
3. 添加自定义样式
|
||
4. 整合为单一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/`
|
||
|
||
**样式覆盖技巧**：
|
||
```css
|
||
/* 确保自定义样式优先级 */
|
||
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卡片效果
|
||
|
||
**关键技术**：
|
||
```css
|
||
/* 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布局
|
||
- 添加触摸优化
|
||
- 性能优化（懒加载、防抖）
|
||
|
||
**关键技术**：
|
||
```css
|
||
/* 流式字体 */
|
||
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);
|
||
```
|
||
|
||
**性能优化**：
|
||
```javascript
|
||
// 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维度评估：
|
||
|
||
1. **视觉设计** (Visual Design)
|
||
- 配色方案
|
||
- 排版质量
|
||
- 视觉层次
|
||
|
||
2. **品牌一致性** (Brand Consistency)
|
||
- 风格统一
|
||
- 品牌元素
|
||
- 语言表达
|
||
|
||
3. **用户体验** (User Experience)
|
||
- 交互流畅度
|
||
- 信息架构
|
||
- 易用性
|
||
|
||
4. **性能优化** (Performance)
|
||
- 加载速度
|
||
- 动画性能
|
||
- 资源优化
|
||
|
||
5. **内容质量** (Content Quality)
|
||
- 信息准确性
|
||
- 内容完整性
|
||
- 专业深度
|
||
|
||
6. **创新性** (Innovation)
|
||
- 设计创新
|
||
- 技术创新
|
||
- 交互创新
|
||
|
||
7. **技术实现** (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%
|
||
|
||
### 关键技术亮点
|
||
1. clamp()流式字体系统
|
||
2. 弹性Grid布局
|
||
3. IntersectionObserver懒加载
|
||
4. Debounce防抖优化
|
||
5. 5级阴影系统
|
||
6. 6级圆角系统
|
||
7. 7种渐变背景
|
||
8. 多层纹理效果
|
||
|
||
### 部署流程
|
||
1. 选定最优版本（v5）
|
||
2. 部署到生产环境：`web_frontend/web_result/order-classes/food/index.html`
|
||
3. 创建软链接解决图片路径问题
|
||
4. 归档所有设计文件到`.superdesign/archive_食品_20251001/`
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 如何选择最优版本？
|
||
A: 综合考虑7维度评分、用户反馈、性能指标，通常最后一轮迭代得分最高
|
||
|
||
### Q2: 迭代次数是否固定为5轮？
|
||
A: 不固定，根据项目复杂度调整，简单项目3轮，复杂项目可达7轮
|
||
|
||
### Q3: 如何处理不同订单班的设计？
|
||
A: 保持工作流程一致，但主题和内容根据行业特征定制
|
||
|
||
### Q4: 性能优化的优先级？
|
||
A: 响应式设计 > 加载速度 > 动画性能 > 资源优化
|
||
|
||
## 最佳实践总结
|
||
|
||
✅ **DO（推荐做法）**：
|
||
- 严格遵循4步工作流（布局→主题→动画→实现）
|
||
- 每步必须与用户确认后再进行
|
||
- 使用工具调用而非文本输出
|
||
- 保存所有迭代版本供对比
|
||
- 进行7维度评估跟踪进度
|
||
- 及时归档设计文件
|
||
|
||
❌ **DON'T（避免做法）**：
|
||
- 跳过布局设计直接实现
|
||
- 未经确认就进入下一步
|
||
- 虚构图片或资源URL
|
||
- 迭代版本覆盖旧文件
|
||
- 忽视性能优化
|
||
- 缺少评估和文档
|
||
|
||
## 工具调用规范
|
||
|
||
**必须使用实际工具调用**：
|
||
```xml
|
||
<!-- 错误示例 -->
|
||
<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%提升）
|
||
**适用范围**: 所有订单班的网页设计开发
|