AI生成界面如何摆脱“AI味”

系列：《用 AI 写出高质量代码：AI 狼人杀开发实录》本篇对应版本：v1.6 → v1.12.3｜时间：2026-10-22 晚 ~ 10-23

前言

第 5 篇之后，AI 终于像六个不同的人了。我把链接发给一个朋友，让他试玩。

他玩了五分钟，回了一句：“这界面一看就是 AI 生成的吧。”

这比任何 bug 都扎心：它不是“哪里坏了”，而是“整体感觉不对”——而这种问题，AI 自己永远发现不了。

引子：三个“AI 味”的症状

我对着自己的页面看了半小时，把“AI 味”拆成三条具体的：

满屏渐变 + 大圆角 + 发光阴影。 每个卡片都在发光，结果是没有重点。
所有元素的“重要性”一样。 标题、正文、按钮、说明文字，视觉重量几乎一样——因为 AI 生成时倾向“平均分配”。
细节经不起看。 我把夜色里的月亮放大到 3 倍——就是一个均匀的米白圆盘，边缘还有一圈生硬的描边。

第三条最典型：它“对”，但不像。

问题：为什么 AI 做的界面总是“差一点”

不是模型审美差，是它没有“判断”这个动作。

它的目标是“生成一个符合描述的界面”，不是“做一个好看的界面”。所以它会用最常见的组件形态（大圆角卡片 + 渐变按钮），把每个元素都做得“完整”（都有边框、都有阴影），在你说“再精致一点”时加更多的渐变——因为在它的语料里，“精致”约等于“更多效果”。

这就是为什么“让 AI 再改改”往往越改越糟。

真正能破局的做法是：把审美决策从代码里拿出来，先在图上看。 改一张图比改一百行 CSS 便宜得多。

问题原因：三条「做图」的路

图：横轴可控制程度，纵轴质感。文生图在中间偏上，理想位置空着，只能按需求挑一条路。

判断标准只有一句：这个元素会不会被放大看？会，就别用 CSS 硬画。 月亮占屏四分之一宽，所以我走了中间那条路。

解决方案：三步把审美拉回来

第一步：先用原型图定审美

这一步是整个第 6 篇的转折点。我不再让 AI 直接写页面，而是：

在 Ardot（支持 MCP 接入的在线设计工具）里出六屏原型：首页、配置、对局、观战、结算、登录；
原型上定死三件事：配色（暖黑 + 旧黄铜）、圆角规则、层次关系；
然后让 AI “按稿还原”。

原型阶段最重要的产出不是图，是规则：

只有一个强调色（黄铜）。全站不许出现第二个“亮”的颜色；
卡片只有两级：主面板和次级条，不做第三级；
阴影只用来表达“浮起”，不用来装饰；
文字三级：主文案、说明、弱提示——字号和颜色同时变，不靠粗细区分。

有了这四条，AI 写 CSS 时就不会“自由发挥”。

第二步：月亮的三次迭代（本篇主案例）

第 1 版：一个 CSS 圆。

.nc-moon {
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f4eee1, #d3cab8 58%, #8d8677);
  box-shadow: 0 0 76px rgba(237,231,218,.12), inset -12px -10px 26px rgba(0,0,0,.42);
}

看起来“像个月亮”，但 88px 上几乎看不出球体——它更像一张米白色的纸片。

图：v1.9.0 的月亮（2 倍图）：一个均匀的米白圆盘。

第 2 版：四层 CSS。

我开始往细节里堆：球体受光、月海暗斑、环形山小坑、feTurbulence 噪点。技术上很努力，效果确实好了不少，但仍然读得出“画的”。

图：v1.12.2 的四层 CSS 月亮：放大看是「画出来的质感」。

这一步的价值是让我确认了天花板在哪。 不是“再调调就好了”，而是“这条路到头了”。

第 3 版：换成文生图。

出图用的是平台内置能力，提示词是这样的：

写实摄影风格的满月特写：月球正面，月面几乎填满整个画面、月亮边缘刚好贴住画面四边（无留白），清晰可见的深灰色月海与环形山纹理，暖象牙白与中性灰的色调（不要偏蓝），明暗交界自然、右下略暗，纯黑背景，正中构图，超高清细节，无文字、无水印、无边框。

解析： 这段提示词里有四个约束是必须的，缺一个就得重来：

“填满画面 / 边缘贴住四边” → 否则是一个小月亮飘在黑底上，没法用；
“暖象牙白 + 中性灰，不要偏蓝” → 生成图默认偏冷，和暖夜色调冲突；
“右下略暗” → 给一点明暗交界，避免变成平光贴纸；
“纯黑背景” → 方便用 border-radius 裁成圆，不留杂边。

出图之后还要裁，这是很多人漏掉的一步。原图是 1024 方图，月亮并没有贴边。我量出月盘外接框后按框裁：

# 量出月盘外接框后按正中裁 950×950，让圆盘正好贴住元素四边
sips -c 950 950 --cropOffset 22 50 moon.png --out moon-crop.png
# 缩到 512（96px 元素在 3 倍屏下够用）
sips -z 512 512 moon-crop.png --out moon-512.png
# 转 JPEG q78，最终 76KB
sips -s format jpeg -s formatOptions 78 moon-512.png --out client/public/art/moon.jpg

macOS 自带 sips，不用装任何东西；Linux 上换 ImageMagick 即可。

解析： 三条命令对应裁切（去留白）、缩放（控体积）、转码（控格式）。原图 1MB 多，处理后 76KB，省下的流量比优化半天 JS 都多。

还有个细节：生成图右下角有“AI生成”水印。它落在圆盘外的黑角里，被 border-radius: 50% 裁掉了，所以最终画面上看不到。

最后一步是调色。生成图偏冷发灰，和站内的暖黑不搭：

.nc-moon {
  filter: sepia(0.14) saturate(0.92) brightness(1.08) contrast(1.02);
}

这行参数是截图对比调出来的——第一版没加滤镜时，月亮在夜色里明显发青。

第三步：修一个 7 像素的折行

顺手说一个被忽略的细节问题，它和月亮在同一个页面。

对局页顶部有一排状态：第 1 天 · 投票、存活 6/6、我的身份、观战、退出。某天我发现它们全被压成了两行——不是“太挤”，是差 7 像素。

我量了一下：五个 chip 内容宽 365px，容器 358px。就差这 7px，而 chip 没写 white-space: nowrap，浏览器于是用折行来消化它。

改法不是“删字”，是两步：

.ig-badge { white-space: nowrap; flex: none; padding: 0 6px; }
.ig-status { overflow-x: auto; scrollbar-width: none; }  /* 极窄屏兜底：宁可横滚不折行 */

教训：这类“只差几像素”的问题，先量 scrollWidth 与 clientWidth，再动样式，比肉眼试错快十倍。

效果：3 倍放大也经得起看

图：处理后的月亮，页面里放大看，边缘没有残留黑角。

三个可验证的结果：

月亮从“一个白圆”变成一张真实月面，96px 的元素在 3 倍屏下也不糊；资源只有 76KB，比优化半天 JS 省得多；
视觉基线定了下来：一个强调色、两级卡片、三级文字，后面每加一屏都按稿还原，一致性第一次成了默认值；
“AI 味”的三个症状逐条消失：满屏渐变没了、视觉重量有了主次、细节经得起放大。

图：夜幕整屏。口令逐句落下，月亮是真图——这一屏的“氛围”第一次像作品。

这套做法只用在“会被放大看”的元素上，否则体积和工时都会失控。

内容小结

“AI 味”的三个具体来源：无差别渐变、平均分配的视觉重量、经不起放大的细节。
“再改改”往往越改越糟，因为模型的“精致”约等于“更多效果”。破局方法是从代码层退回到图层。
原型的真正价值是产出规则（几个强调色、几级卡片、几级文字），不是产出好看的图。
判断要不要换技术路线的标准：这个元素会不会被放大看。
出图只是第一步，裁切/缩放/调色才是能用。给 AI 的提示词里要写清“填满画面”“不要偏蓝”这种硬约束。
可迁移吗？ 任何“AI 生成界面”的项目都适用：先定规则再执行，先判断天花板再换手段。

参考资料

项目仓库：werewolf-ai 的 client/src/styles/app.css（.nc-moon、.ig-status）、docs/standard/DESIGN-V2.md

【项目实战】第6篇：UI 设计教程——一眼就是「AI 做的」

前言