AI能在几分钟里写出一个页面，却未必知道什么叫“恰到好处”。真正有效的办法，不是继续追加“高级、简洁、有呼吸感”这些形容词，而是把审美要求改写成可执行、可测试、可验收的工程规则。

过去做一个软件产品，最大的门槛往往是“能不能实现”。

现在，Codex、Claude Code、Cursor 等AI编程工具已经可以完成从页面搭建、接口联调到测试修复的大量工作。很多人第一次感受到：一个想法距离一个可以运行的产品，可能只差几轮对话。

但新的问题也随之出现。

AI做出来的页面通常“功能齐全”，却总有一种说不出的廉价感：卡片到处都是，圆角大得像玩具；每个按钮都在抢注意力；页面铺满整个屏幕；标题很大，辅助文字却小得看不清；渐变、阴影和图标不少，却没有真正的信息层级。

很多人于是继续给AI下命令：

做得高级一点。再简洁一些。参考苹果和Linear。增加一些呼吸感。

结果往往是，AI换了一套颜色、加大了圆角，又重新生成了一版“AI风”。

问题不在AI不会写CSS，而在于我们给它的标准无法执行。

一、AI不理解“高级感”，但能执行约束

“高级”“精致”“像大厂”都是人的整体感受，不是可以直接验收的任务。

对于编程智能体，更有效的表达应该是：

• 一个页面只保留一个最醒目的主要操作；
• 次要文字不要单纯缩小，而要通过字重和颜色弱化；
• 内容区域设置最大宽度，不因屏幕变宽而无限拉伸；
• 组与组之间的间距必须大于组内元素间距；
• 普通文字与背景的对比度不低于4.5:1；
• 空状态必须解释当前情况，并提供明确的下一步操作。

前者是形容词，后者才是规则。

《Refactoring UI》之所以长期受到开发者欢迎，正是因为它没有把设计描述成少数人的艺术天赋，而是把大量视觉经验拆成了具体策略。

但如果只是把20条原则重新讲一遍，AI仍然不会自动把它们落实到你的页面里。

更实用的方法，是把这些原则压缩成一条Codex可以重复执行的审查流水线。

二、不要一次审完：把UI审查拆成5轮

让AI一次检查“页面是否好看”，范围太大，容易得到一份泛泛而谈的报告。

更好的方式是按顺序执行五轮审查：

2. 视觉层级与任务路径；
4. 空间、宽度与归属关系；
6. 字体、行长与文字对齐；
8. 色彩、对比度与信息表达；
10. 空状态、异常状态与响应式适配。

这个顺序很重要。

如果页面的信息结构尚未成立，就开始调整阴影、圆角和渐变，本质上只是在给混乱的界面化妆。先解决“用户看什么、做什么”，再解决“页面怎么呈现”，AI的修改才会越来越收敛。

每一轮都要求Codex完成同样的闭环：

找出问题 → 说明依据 → 修改代码 → 运行页面 → 截图验证。

它不能只给建议，也不能改完代码就宣布完成。没有实际运行和截图验证的UI修改，仍然只是猜测。

三、第一轮：先检查视觉层级和任务路径

打开一个页面时，用户应该迅速回答三个问题：

• 这是一个什么页面？
• 现在最重要的信息是什么？
• 我下一步应该做什么？

如果所有标题都很大、所有按钮都有底色、所有字段都有标签，页面虽然“信息完整”，用户却不知道从哪里开始。

第一轮可以让Codex重点检查：

1. 一个页面是否只有一个主要操作

主要操作使用实心、高对比度按钮；次要操作使用线框或低对比度背景；辅助操作使用文字按钮。

“保存”“导出”“复制”“删除”不应该全部设计成同等醒目的实心按钮。按钮的视觉权重应该服从当前任务的重要性，而不是只服从按钮本身的语义。

2. 是否只会用“放大”来强调

重点不够突出时，不一定要继续放大。很多时候，更有效的方法是把周围元素调浅、降低字重，让竞争信息主动退后。

3. 是否存在不必要的字段标签

邮箱、电话号码、金额等内容通常可以从格式中识别。在展示型页面里，机械地写成“邮箱：”“电话：”“价格：”，会让所有信息拥有相同权重。

当然，医疗、财务、技术参数等不能依靠猜测的内容，仍然必须保留明确标签。设计规则不是删除信息，而是删除冗余。

可以直接把下面这段交给Codex：

第一轮只审查页面的信息层级和任务路径，不修改颜色主题。识别页面唯一主要任务，检查主要、次要、辅助操作是否具有清晰的视觉层级；检查标题、正文、辅助信息是否通过字号、字重和颜色共同建立主次；删除不会增加理解的展示型标签。完成修改后运行页面，并用桌面端截图证明用户第一眼能识别页面目的和主要操作。

四、第二轮：用空间建立“谁和谁是一组”

很多AI页面的问题不是留白太少，而是所有地方的间距都差不多。

标签和输入框相距16像素，两个表单组之间也是16像素；标题距离上一段和下一段一样近；卡片内部间距与卡片之间的间距完全相同。页面看起来整齐，却没有归属关系。

最重要的空间规则是：

组间距必须大于组内距。

同一组元素靠近，不同组元素拉开。做到这一点，很多原本依赖边框和背景色的分隔都可以删除。

这一轮还要检查两个常见问题：

• 内容是否因为屏幕很宽，就被强行拉满；
• 桌面端的尺寸是否被原比例搬到手机端。

表单只需要600像素，就不要撑到1400像素；桌面端45像素的标题，在手机上也不需要机械维持与正文相同的比例。

五、第三轮：不要让字号承担全部层级

AI很喜欢用“大标题＋很小的灰字”制造层级。这种方法简单，却容易产生两个结果：标题夸张，辅助文字难以阅读。

更稳妥的办法是共同使用：

• 字号；
• 字重；
• 明度；
• 行高；
• 段落宽度。

正文行长过长时，读者很难从一行末尾找到下一行开头；标题字号很大时，如果仍使用1.5倍行高，多行标题就会显得松散。

当不同字号的文字出现在同一行，也不要默认使用几何居中。价格与单位、标题与小型操作链接，往往沿文字基线对齐会更加稳定。

需要注意的是，《Refactoring UI》中常见的行长建议主要来自拉丁文字排版。中文单字的信息密度更高，不能机械照搬某一个字符数字。最可靠的方法仍然是限定合理宽度，再结合真实中文内容和不同屏幕进行阅读测试。

六、第四轮：让颜色成为系统，而不是装饰

成熟产品很少只依赖五个孤立的颜色值。

它通常需要一组中性色阶，用于正文、次要文字、边框、背景和禁用状态；需要一组品牌主色色阶，用于按钮、选中态和轻量背景；还需要成功、警告、错误等语义颜色。

但“需要完整色阶”不等于“页面上要出现更多颜色”。恰恰相反，色阶的意义是让每一种使用场景都能选择恰当的明度，而不是临时发明一个新颜色。

这一轮至少有三条硬规则：

2. 普通文字与背景的对比度至少达到4.5:1；
4. 不能只使用红色和绿色传递涨跌、成功或失败；
6. 文字覆盖图片时，必须通过蒙版、渐变或稳定底色保证持续可读。

“浅底深字”经常比“深底白字”柔和，但是否达到无障碍标准不能靠肉眼判断，仍然要实际计算对比度。

可以这样要求Codex：

检查所有正文、辅助文字、按钮和状态标签的前景色与背景色对比度。普通文字至少满足4.5:1，大字号文字至少满足3:1。任何成功、警告、错误和涨跌状态，都必须同时使用文字、图标或形状表达，不能只靠颜色。输出不合格的颜色组合及修改后的具体色值。

七、第五轮：检查那些截图里最容易被隐藏的状态

很多AI生成的页面，只在填满模拟数据时显得漂亮。

一旦真正上线，就会暴露出另一副样子：第一次进入没有数据；请求还在加载；接口返回错误；用户没有权限；标题比预期长三倍；列表出现一千条记录；屏幕从1440像素变成375像素。

真实产品至少需要检查：

• 空状态；
• 加载状态；
• 错误状态；
• 无权限状态；
• 超长文字和极端数据；
• 键盘焦点与禁用状态；
• 桌面、平板和手机布局。

一个合格的空状态也不是简单显示“暂无数据”，而应该说明当前发生了什么，并提供下一步行动，例如“创建第一个项目”“导入联系人”或“清除筛选条件”。

八、一段可以直接交给Codex的完整提示词

下面这段提示词可以直接用于已有的Web项目：

请对当前页面进行一次UI重构，不改变核心业务功能和数据结构。不要仅给建议，直接修改代码并运行验证。

按以下5轮依次执行，每轮先列出问题和依据，再修改代码：

1. 层级：识别页面唯一主要任务；区分主要、次要和辅助操作；通过字重、颜色和尺寸建立信息主次。
2. 布局：限制内容最大宽度；确保组间距大于组内距；删除可以由留白或背景差替代的边框；避免无意义地填满屏幕。
3. 排版：控制正文行长；让标题行高随字号收紧；不同字号文字优先检查基线对齐；避免过小、过浅或过细的辅助文字。
4. 色彩与无障碍：普通文字对比度不低于4.5:1；状态不能只靠颜色表达；建立中性、品牌和语义色阶；保证图片上文字始终清晰。
5. 状态与响应式：补齐空、加载、错误、无权限和极端数据状态；检查键盘焦点、禁用状态及桌面和手机布局。

每轮完成后运行页面检查。最终提供：问题清单、修改文件、关键设计决策、桌面端与移动端截图，以及仍未解决的问题。不要为了“更有设计感”随意增加渐变、玻璃拟态、大圆角、阴影或装饰图标。

如果项目有固定品牌，还应在提示词前补充一份小型设计契约：

• 产品希望传递的个性；
• 主色和中性色阶；
• 字体和字号阶梯；
• 间距和圆角阶梯；
• 页面最大宽度；
• 允许使用的组件库；
• 禁止出现的视觉套路。

这比一句“参考某某产品”更稳定，也更容易形成长期一致性。

九、真正的变化：设计开始成为可以编排的工程流程

AI编程并没有让每个人自动成为设计师。

它真正改变的是：过去存在于设计师经验里的大量隐性判断，现在可以被整理成规则、设计令牌、检查表和自动化测试，再交给编程智能体执行。

但AI仍然不能替你决定：用户最在意什么，哪个任务值得突出，什么时候应该克制，什么样的表达符合品牌，以及一个“符合规则”的页面是否真的让人愿意使用。

所以，不要把20条设计原则当成20条不可违背的法律。

更好的用法是：让它们成为Codex的默认起点，然后用真实业务、真实内容和真实用户不断修正。

下一次再让AI修改页面时，别再说“做得高级一点”。

给它边界，给它顺序，给它验收标准，再让它用截图证明自己确实做到了。