本文件使用 Web 专属的设计质量指南扩展 common/patterns.md。

Web 设计质量标准¶

反模板策略¶

不要发布看起来像通用模板的 UI。前端输出应当是有意为之、有主张、且专属于产品的。

禁止模式¶

• 使用均匀间距且没有层级的默认卡片网格
• 居中标题、渐变光斑、通用 CTA 的套路化主视觉区域
• 将未修改的库默认值作为完成设计交付
• 没有分层、深度或动效的扁平布局
• 所有组件使用统一的圆角、间距和阴影
• 仅使用一种强调色的安全灰白配色
• 由侧边栏 + 卡片 + 图表组成、没有视觉焦点的批量生产式仪表盘布局
• 没有刻意理由而使用的默认字体栈

必要质量¶

每个有意义的前端界面都应展示以下至少 4 项：

1. 通过尺度对比建立清晰层级
2. 有节奏的间距设计，而不是均匀的内边距
3. 通过重叠、阴影、表面或动效体现深度或分层
4. 具有个性且具备真实配对策略的排版
5. 语义化而非装饰性地使用颜色
6. 感觉经过设计的悬停、聚焦和激活状态
7. 在需要时打破网格的编辑式或便当盒布局
8. 与视觉方向一致的纹理、颗粒或氛围
9. 用于明确流程而非分散注意力的动效
10. 作为设计系统一部分而非事后添加的数据可视化

编写前端代码之前¶

1. 选择具体的风格方向。避免“干净极简”这类模糊默认值。
2. 有意识地定义色板。
3. 有意识地选择排版。
4. 至少收集少量真实参考。
5. 使用相关的 ECC 设计/前端技能。

有价值的风格方向¶

• 编辑 / 杂志
• 新粗野主义
• 具有真实深度的玻璃拟态
• 有节制的对比的深色奢华或浅色奢华
• 便当盒布局
• 滚动叙事
• 3D 集成
• 瑞士 / 国际主义
• 复古未来主义

不要自动将深色模式设为默认。选择产品实际需要的视觉方向。

组件检查清单¶

• [ ] 是否不像默认的 Tailwind 或 shadcn 模板？
• [ ] 是否有有意识的悬停/聚焦/激活状态？
• [ ] 是否使用层级而不是均匀强调？
• [ ] 在真实产品截图中是否可信？
• [ ] 如果同时支持两种主题，浅色和深色是否都感觉经过设计？