怎么让 AI 做的设计不像 AI 做的。
AI 做的落地页，人们一秒钟就能认出来：紫色渐变、居中的首屏、三张一模一样的卡片。这些破绽之所以出现，是因为需求说明留了空白，Agent 就会退回最常见的模式。下面讲怎么认出每一个破绽，以及怎么给 Agent 写需求，让它们根本不出现。
更新于 2026年11月5日 · 阅读约 8 分钟
为什么 AI 做的 UI 都长一个样
编程 Agent 会用它见过的最保险、最常见的选择，填补你需求里的每一处空白。让它做「一个现代感的落地页」，你得到的就是成千上万个现代落地页的平均值：靛蓝色渐变、居中的标题，再加一排圆角卡片。单看每个选择都没什么问题，可凑在一起就像一个模板，访客也看得出来。
解决办法不是换一个更聪明的模型，而是写一份空白更少的需求说明，再加一个专门检查这些破绽的审查步骤。
12 个破绽
视觉风格
- 紫到蓝的渐变。 渐变按钮、渐变标题文字，或者首屏背后一圈柔和的紫光。它成了默认的「科技感」，所以现在传达出的信号是「没人认真选过」。
- 处处圆角加柔和阴影。 每张卡片、每个按钮、每张图片都是同样的大圆角、同样的模糊阴影，结果什么都不突出。
- 毛玻璃和发光效果。 深色背景上的磨砂面板和霓虹描边，只是拿来装饰，而不是用来表现层级。
- 用 emoji 或通用图标充当插画。 彩色圆圈里放一个闪光、一枚火箭或一道闪电，顶替了真正的产品画面。
布局
- 全部居中。 首屏居中、区块标题居中、卡片居中、页脚居中。居中的文字更难快速浏览，也让页面失去了方向感。
- 三张一模一样的功能卡片。 一个图标、一个两个词的标题、一句含糊的话，在完美的网格里重复三遍。
- 一成不变的节奏。 每个区块高度相同、留白相同、结构相同，整个页面没有重点，也没有节奏。
字体排版
- 一种字体、一种字重、毫无对比。 只有一款无衬线字体，字号也都差不多，标题、标签和正文糊成一片。
文案和内容
- 空话文案。 「解锁……的强大力量」「无缝」「让你的工作流程全面提速」，或者「快速。安全。简单。」这样的标题。放在任何产品上都说得通。
- 含糊的信任背书。 一排占位 logo 上方写着「超过 10,000 个团队的信赖」，推荐语来自「Sarah K.，CEO」。
- 自我重复的区块。 功能、优势和「为什么选择我们」，换着说法讲同样的三个卖点。
- 图库配图。 抽象的 3D 流体图形或通用插画，而不是产品本身。
怎么写需求，让它们根本不出现
当需求替 Agent 做好了它本来会替你做的决定，大多数破绽就消失了。
- 点明设计方向。 「温暖、杂志感，标题用衬线字体，奶油色背景」能给 Agent 一个明确的主张。「现代、简洁」则不能。
- 设定真实的约束。 你的品牌色、一个强调色、你的字体和圆角大小。用一个 DESIGN.md 文件把这些写一次，所有界面都能用上。
- 给出真实的内容。 你真实的产品名、数字、客户评价和截图。具体的内容会逼出具体的布局。
- 提供参考。 一张你欣赏的网站截图，比一段形容词更能说明问题。
- 要求几个差别明显的方向。 三个刻意拉开差异的方案摆在一起，哪个落入俗套一目了然。参见怎么用 Codex 做 UI 设计。
下面这条提示词会在动手设计之前先定好方向：
开始设计之前，先为 [产品] 提出三个截然不同的设计方向，每个都包括：一句话描述的氛围、一组字体搭配、最多四种颜色（其中一个是强调色）的配色、一个圆角大小，以及一个不是居中首屏的布局想法。避免紫色或蓝色渐变、毛玻璃、emoji 图标和三卡片功能网格。等我选定一个再继续。
已经有这些破绽的页面怎么修
让 Agent 对照这份清单审查它自己的作品。只要你点出这些破绽，它很擅长把它们找出来：
检查这个页面有没有看起来像 AI 生成的迹象：紫色或蓝色渐变、所有元素用同样的圆角和阴影、毛玻璃或发光效果、emoji 或通用图标、全部居中、一模一样的功能卡片、千篇一律的区块节奏、只有一种字重、空话套话、含糊的信任背书、重复的区块，以及图库配图。列出你发现的每一处和它所在的位置，然后修掉最明显的五处，其他保持不变。
文案通常需要单独过一遍，因为改完视觉之后，空话往往还在：
重写这个页面上的每个标题和功能描述。每一条都要说清用户能得到什么，包含一个来自我们产品的具体细节或数字，并且避开这些词：解锁、无缝、全面提速、毫不费力、强大、颠覆、提升。长度保持差不多。
布局也一样：
重新设计功能区块，不再用三张一模一样的卡片。最重要的功能给两倍的空间，每个功能配一个用 HTML 画的小型 UI 示意图，文字左对齐，并调整各区块的节奏，让页面有一处明确的重点。
有帮助的 skill
设计 skill 存在的意义，很大程度上就是对抗这些默认选择。Taste Skill 和 Anthropic 的 frontend-design skill 都会推动 Agent 远离模板化的选择，比如通用字体和紫色渐变。参见 Codex 前端设计 skill 推荐。
上线前先对比
破绽放在另一个方案旁边时最容易看出来。把原版和修改版并排放着，用两个浏览器窗口或一块画布都行，平庸的那个就会显得很扎眼。这正是 Codex Design 的用途：Codex 生成的每个方向都会以实时 HTML 的形式，和其他方向并排呈现。
常见问题
网站看起来像 AI 生成的，有什么不好？
会损失信任。访客会觉得模板化的页面是敷衍了事，而一个放在任何产品上都说得通的页面，也讲不清你的产品。具体、有意为之的设计，能让产品看起来和它实际一样真实。
能让 Codex 不再做出这些模式吗？
大部分可以。把设计方向和约束写进 DESIGN.md 或 AGENTS.md，装一个设计 skill，最后用上面的检查提示词收尾。不过结果还是要你自己把关。
渐变和圆角一定是错的吗？
不是。只要是有意为之、符合品牌，其中任何一个都可能是正确的选择。真正的破绽在于默认把它们全用上、堆在一起，只因为没人做过别的决定。