10 条 UI 提示词：让 Codex 写的界面没有 AI 感
让 Codex 或 Claude Code 写界面，功能一般能跑通，可成品经常一眼就看得出是 AI 写的：到处是「·」分隔符，每个按钮下面都有一行解释，卡片左边一条彩色竖线，五六种字号混着用。下面这 10 条提示词是业内做产品设计的人常用的「去 AI 感」规则，可以直接发给编码 Agent。每条都写了为什么有用；效果因项目而异，本文未实测。
前置条件
- 一个能跑起来的前端项目（React、Vue 或纯 HTML 都行），最好先提交一次，方便回滚。
- Codex、Claude Code 或 Cursor 任一编码 Agent。
- 能在浏览器里同时看改前和改后（两个分支或截图对比）。
10 条规则，以及它们为什么管用
| # | 规则 | 为什么有用 |
|---|---|---|
| 1 | 不用「·」做文案分隔符，已有的移除 | 模型生成元信息时特别爱用中点，堆多了视觉噪音大，换成间距或换行更干净 |
| 2 | 不加冗余的解释性描述文字 | 按钮和标题已经说清的事，再补一行小字只会分散注意力 |
| 3 | 按目标用户重写界面文案：好懂、不过度口语、长短合适、不造新词 | AI 文案常见问题是自造术语和长短不一 |
| 4 | 所有颜色换成 Radix UI Colors，并按它的用法规范来用 | 12 级色阶每一级都有明确用途，配色不再靠拍脑袋 |
| 5 | 做光学对齐；嵌套元素用同心圆角 | 外层圆角 = 内层圆角 + 内边距，嵌套卡片看起来才服帖 |
| 6 | 需要线条或边框时用 0.5px | 高分屏上更细腻；低分屏可能被渲染成 1px 或变淡，要实测 |
| 7 | 尽量少用过渡动画，必须用时 ease-out、250ms 起步 | ease-out 先快后慢，响应感强；动画少了界面更稳 |
| 8 | 字号不超过 4 种，最好 3 种，最小 12px；层级靠字重、颜色、间距拉开 | 字号一多层级就乱，12px 以下在手机上很难读 |
| 9 | 减少需要用户判断的交互，必须有时放在用户本来就要做选择的地方；重排信息优先级 | 每多一个决策点就多一次犹豫 |
| 10 | 别随手加圆角和阴影，尤其是卡片左侧的彩色竖线；要用就按场景定值 | 左侧色条加大阴影是 AI 生成界面最典型的痕迹 |
第 4 条展开：Radix Colors 的 12 级怎么用
Radix Colors 每种颜色都有 12 级色阶，官方文档给每一级都规定了用途：
- 1–2 级：应用背景、细微的组件背景（卡片、侧栏、代码块底色）。
- 3–5 级：组件背景，3 是常态，4 是悬停，5 是按下或选中。
- 6–8 级：边框，6 用于不可交互元素的细边框，7 用于可交互组件，8 用于更强的边框和焦点环。
- 9–10 级：纯色背景，比如主按钮，10 是它的悬停色。
- 11–12 级：文字，11 是低对比度文字，12 是高对比度文字。
把这套规则直接写进提示词，Agent 就不会再随手拿十六进制色值凑配色。Radix Colors 同时提供亮色和暗色两套色阶，切换暗色模式时按同样的级数替换即可。
给 Agent 一套写明用途的色阶，比跟它说「配得好看一点」靠谱。
第 5、7 条展开：同心圆角和 ease-out
同心圆角的算法很简单：外层容器圆角 = 内层元素圆角 + 两者之间的内边距。外层 16px、内边距 8px，里面的按钮就用 8px。两层用同一个圆角值，角落会显得「鼓」出来。
ease-out 曲线开头快、结尾慢，元素进入画面时很快到位，再平稳停下，用户感觉是「点了立刻有反应」。250ms 只是起点，弹层、菜单这类小元素可以更短。CSS 里就是 transition: opacity 250ms ease-out;。
直接复制：给 Agent 的提示词块
请按以下规则审查并修改当前页面的 UI，先列出改动计划再动手：
1. 不使用中点「·」作为文案分隔符，已有的全部移除，改用间距或换行。
2. 删除冗余的解释性描述文字。
3. 按目标用户重写界面文案：好懂、不过度口语、长度贴合功能，不要造新词。
4. 所有颜色改用 Radix UI Colors，并按其 12 级色阶的用途规范使用
（1–2 背景，3–5 组件底色，6–8 边框，9–10 纯色，11–12 文字）。
5. 做光学对齐；嵌套元素使用同心圆角（外圆角 = 内圆角 + 内边距）。
6. 线条和边框使用 0.5px。
7. 尽量减少过渡动画；必须使用时用 ease-out，时长 250ms 起。
8. 全页字号不超过 4 种（最好 3 种），最小 12px；层级用字重、颜色、间距区分。
9. 减少需要用户判断的交互，必要时放在用户本来就要做选择的位置；重新梳理信息优先级。
10. 不随意使用圆角和阴影，禁止卡片左侧彩色竖线；确需使用时按场景设定数值。
改完后列出每条规则对应的改动文件和行数。常见坑
- 一次全改，回不去：10 条一起上，改动面太大，出问题很难定位。先提交一次，或者分 2–3 批让 Agent 改。
- 0.5px 在部分屏幕上消失：低分辨率屏幕或某些浏览器缩放下，0.5px 可能被渲染成 1px 或变得很淡。对边框依赖重的表格，验收时在普通显示器上看一眼。
- Radix 色阶只换了色值，没换用法：Agent 可能只是把颜色替换成 Radix 变量，悬停、边框的级数还是乱用。验收时抽查几个按钮的常态、悬停、按下三态。
- 删说明文字删过头：表单的格式要求、危险操作的提示不算冗余，要在提示词里点名保留。
完成标准
- 全局搜索不到「·」分隔符，也没有卡片左侧色条。
- 页面字号种类 ≤4，最小 12px。
- 颜色都来自 Radix 变量，按钮三态的色阶级数符合规范。
- 改前改后截图放在一起，至少有一个同事能一眼看出区别。
想让 Agent 系统性地做设计改版，可以看我们用 TasteSkill 改版本站的实录；提示词写法的通用套路见 提示词写作指南。
最后
先挑第 1、8、10 条试，这三条改动小、效果最明显，跑完再决定要不要上 Radix 色阶。
