当 UI 看起来不专业或需要系统化设计审查时…

在开发或审查 Web UI 时，通过灰度优先、约束尺度（间距/字号/颜色/阴影）和七项设计原则，把业余感界面改造成专业一致的设计系统。

适用场景

解决思路

1. 先设计灰度稿，最后再加颜色：强制通过间距、对比度和字体建立层级，而不是依赖颜色作为拐杖。
2. 用 Quick Diagnostic 的 8 项是/否检查打分：score = round(satisfied / 8 × 10)，并指出当前分数与需修复的具体检查项。
3. 视觉层级：通过大小、字重、颜色三个杠杆建立层级，组合使用而非叠加——主要文本用大或粗或深色之一，三者全用只留给最重要的单一元素。
4. 把标签当作次要信息：表单标签、表头、元数据要更小、更浅或使用小号大写字母，不要与数据竞争。
5. 语义色不等于视觉重量：常规破坏性操作使用柔和的次要按钮，往往优于刺眼的红色。
6. 间距使用约束尺度：4、8、16、24、32、48、64px，避免 13px 之类的任意值。
7. 从过多留白开始再删减——你几乎永远不会删得太多。
8. 组间距必须大于组内间距：相关项用 gap-2，区块分隔用 gap-6。
9. 约束宽度：文本 45-75 字符（max-w-prose），表单 300-500px，几乎不要用全宽。
10. 字体使用模块化尺度：12、14、16、18、20、24、30、36px（约 1.2 倍模块化，手工微调）。
11. 按上下文约束行高：标题紧凑（1.0-1.25），正文宽松（1.5-1.75），文本越宽行高越大。
12. 正文避免低于 400 的字重；强调用粗体（600-700），不要什么都加粗。
13. 最多使用两种字体：一种标题、一种正文，或同一字族用字重变化。
14. 构建系统化调色板：每种颜色 5-9 个色阶（50-900），最深不用纯黑，用 #111827 而非 #000000。
15. 给灰色加微妙饱和度：冷色 UI 用偏蓝灰如 #64748b，暖色 UI 用偏黄棕灰如 #78716c。
16. HSL 调整：变浅 = 提高亮度、降低饱和度、色相偏向 60°；变深 = 反向，色相偏向 0°/240°。
17. 对比度最低要求：正文 4.5:1，大号文本（18px+）3:1；白底上用 #374151（gray-700）或更深，不要用更浅的灰。
18. 文本颜色分三级：text-gray-900（深）、text-gray-600（中）、text-gray-400（浅）。
19. 用阴影尺度表达高度：小阴影用于轻微抬升（按钮、卡片），大阴影用于漂浮（模态框、下拉菜单）。
20. 好阴影由两部分组成：一个紧凑的深色阴影保证清晰度，加一个更大的柔和阴影营造氛围。
21. 不用阴影表达深度：顶部浅色边框 + 底部深色边框、微妙渐变、重叠元素。
22. 不要过度使用阴影——如果所有东西都漂浮，就没有东西有深度；阴影颜色用透明深色，绝不用不透明灰色。
23. 把图片当作设计元素：用 object-fit: cover 配合固定 aspect-ratio，绝不拉伸变形，有意识地裁剪。
24. 图片上的文字需要叠加层：用半透明渐变如 bg-gradient-to-t from-black/60 to-transparent 保证可读性。
25. 按上下文刻意设定图标尺寸：内联 w-4 h-4，导航 w-6 h-6，功能图标 w-8 h-8，使用描边宽度和风格一致的图标集。
26. 空状态是机会：用插画加清晰 CTA，而不只是文字。
27. 默认左对齐；仅短标题、hero、单一操作 CTA 和空状态使用居中。
28. 卡片不必包住一切：让图片出血到边缘或重叠容器。
29. 在列表和 feed 中变化视觉处理：突出某些项，弱化其他项。
30. 用对齐在无关元素之间建立关系。
31. 常见错误修复：看起来业余 = 增加留白并约束宽度；感觉扁平 = 加微妙阴影和区块底边框；文字难读 = 提高行高、约束宽度、增强对比；千篇一律 = 在大小/字重/颜色上区分主次；感觉杂乱 = 分组相关项并加大组间距；颜色冲突 = 降低饱和度、多用灰色、限制在调色板内；按钮不突出 = 提高对比度并加阴影；任意值 = 坚持使用间距和字号尺度。
32. 设计交互/悬停/焦点状态、表单、空状态、圆角系统、文本截断和响应式断点时，参考 references/advanced-patterns.md。
33. 构建暗色主题时参考 references/theming-dark-mode.md：十六进制色阶、最深用 #111827 而非黑色（避免光晕）、用亮度而非阴影表达高度。
34. 涉及对比度、焦点环、键盘导航或屏幕阅读器支持时参考 references/accessibility-depth.md：完整 WCAG 2.1 AA 清单与修复方案。
35. 为交互元素添加动效时参考 references/animation-microinteractions.md：时长、缓动曲线、加载状态和 prefers-reduced-motion 规则。
36. 布局图表、表格或仪表盘时参考 references/data-visualization.md：图表类型选择、图表配色、表格密度和仪表盘构图。

适用边界 · 注意事项

• 不要用层级技巧隐藏重要信息，如价格、条款或取消选项。
• 不要依赖颜色来建立层级——必须在灰度下也能读出层级。
• 不要使用任意间距或字号值（如 13px、17px、23px），这会滋生不一致。