这张卡讲"为什么有的页面一眼就专业、有的就乱"。每条规则下面都有能直接看到的真实示例。不用懂代码，照着对比，就能准确指挥 Agent 把页面改好看，也能看出它哪里不对。
页面"看起来专业"，先靠视觉层级。每个元素都应落在三个层级之一：主要（核心动作 / 内容）、次要（辅助信息）、第三级（背景 / 元数据）。什么都一样重要，页面就显得乱、不专业。
别只靠字号拉层级，三个工具一起用：字重 · 颜色深浅 · 间距。
看下面这组对比：一个 16px 粗体 可以比 24px 细体 更显眼。
让某个元素跳出来，往往不靠把它做更大更亮，而是把周围都压安静：降对比、降饱和、用更细的字重。周围一安静，主元素靠对比就显出来了。
邮箱、电话、价格、日期本身就能看懂，别加"标签：值"。真要标签，让它当次要角色（更小更浅更细）。例外：信息很密的后台 / 仪表盘里，标签反而帮助扫读，这时可用粗标签配常规字重的值。
<h1> 不一定是页面最大的字。文档结构（给无障碍和 SEO 用）和视觉层级（眼睛先看到什么）是两件事。按视觉重要性定样式，而不是按 HTML 标签。
粗体、实心图标、粗边框会吸引眼睛。太抢眼就降分量（而非缩小）；看不见就加分量（而非放大）。图标多的界面要特别注意：实心图标很容易盖过文字。
"这是导航链接，所以得是蓝的"，这个想法不对。样式先按重要程度定，再用细微线索补语义。删除按钮不一定非得红，导航链接不一定非得蓝。先定层级，语义靠克制的提示传达。
白底上灰字能降对比；但彩色背景上灰字会显脏，因为色相不对。应以背景色为基准、调明度（往白或往黑靠）、保持同色相。
布局最常见的错误是留白不够。流程应该反过来：先留多得多的空白，再逐步收紧到"刚刚好"。单看觉得"太空"的留白，放进整页常常正好。先挤再加空，做出来的页面往往局促、勉强能看。
不要随手挑间距。开工前定一套刻度（4px 为基），看看它们到底差多少：
（更大的 128 · 192 · 256 用于大区块之间的间距。）这套刻度用在一切地方：内边距、外边距、网格间隙、区块间距、圆角值。
同样，元素之间留多大空，决定了它们看起来多相关：
大屏上内容不必从左铺到右。一行太长读着累，限制最大宽度 + 居中更好读。常用做法：阅读型内容 600 到 800px，仪表盘约 1200px。两侧留白不是浪费，它让人更专注、更好读。
间距在传达关系：近 = 相关，远 = 无关。既不像一组又不像分开，就显得随意、没设计过。
12 列栅格适合杂志，做 UI 常常用不上：用一个基准单位（4px 或 8px）做所有间距，让内容决定宽度，而不是栅格列。用 Flexbox / Grid 配上刻度里的 gap 值；真需要多列时才上列栅格。
让元素按比例走（如侧栏占视口 25%），换个屏幕就会崩。更稳的做法：侧栏用固定宽度（240 到 320px），内容区用最大宽度，不同断点用刻意不同的布局。别假设同一个比例在任何屏幕都好看。
例如"预约维修"，就先做一张带字段的表单（设备、故障、时间），别先搭框架。Google 首页是个现成例子：整页只有一个搜索框。
设计靠这几样传达性格：字体、色温、圆角、文案口吻、留白松紧。光圆角一项，感觉就差很多：
色温也是：暖 = 友好 / 有活力 冷 = 专业 / 冷静。留白松紧同样传性格：宽松 = 高级 / 从容，紧凑 = 高效 / 数据型。让性格匹配你的用户和行业。
开工前先把选项定死，用排除法选，而不是无限微调。例如一条灰阶（8 到 10 档）：
再配：一个主色（5 到 10 档）、1 至 2 个点缀色、一套字号刻度、一套间距刻度、3 至 5 种阴影、2 至 3 种圆角。字号刻度（按真实大小看）：
阴影定 3 到 5 种就够（由轻到重）：
卡住或拿不准，就把页面截图发给你的 AI 老师（Agent），问"按层级 / 留白原则，这页该怎么改？"
abel-ux）· Abel's Design Note，综合 Refactoring UI、Laws of UX、Apple HIG、Material Design、NNGroup。本卡为中文整理版 + 可视示例，贯穿全程可反复回看。