
一、全文速览图

相信很多同学现在都听过一个词叫“AI 味”,即使用 VibeCoding 生成出来的界面一看就是 AI 做出来的塑料质感,毫无特色,如果要作为正式设计产物的话显然是不合格的。
所以今天的主题,就要解释 VibeCoding 中的 AI 味究竟是什么。
二、AI 味儿的正确定义
当我们进行 VibeCoding 开发程序时,AI 会自己完成前端界面样式的设计并开发出来。而这个界面的样式就是 AI 味的来源。

虽然我们能识别 AI 味,但很难讲清楚什么才叫 AI 味,如果不能清晰定义它的特征,你也就不知道应该怎么优化它。
所以下面我们把 AI 做的前端界面设计问题做个总结:
二、问题 1:规范错误
第一个问题就是规范问题,比如顶部状态栏、底部导航栏的尺寸位置是错的,或使用的字体、字号不对,按钮的尺寸不符合移动端的标准等等。
AI 设计移动端界面是以网页设计的标准模拟出来的,并没有把相关规范准确应用进去,如果没在提示词中进行严格的指定,那么设计出来的结果就只是 “看起来像 App” 的响应式网页而已。


三、问题 2:圆角泛滥
第二个问题就是圆角问题,桌面端网页做圆角因为画布大造成的问题就比较小,但在移动端屏幕中,圆角的感知是被放大的。如果出现了很多大圆角,且圆角各不相同,对视觉的负面影响就会加大。


四、问题 3:字体滥用
第三个字体问题也很突出,移动端设计不是不能用别的字体,但通常会很克制,只在必要的情况下使用。而 AI 生成界面时就并没有这种顾虑,表现得非常随意。
而这并不是问题的核心痛点,真正的痛点是 AI 把英文的排版逻辑和字体参数套在中文上的。尤其是大标题的应用,以苹方为主的中文字体的粗体笔画都很细,没办法像 Helvetica 有粗壮的笔画去形成有效的视觉重心。所以专业的设计案例中是会避免这类问题的,这也是中文应用很少使用苹果官方布局规范的原因。

五、问题 4:效果乱用
这里的效果指视觉效果,包括描边、渐变、投影、背景模糊等等。AI 在缺乏有效风格引导的情况下会刻意添加这些效果,所以会形成过度的设计,视觉观感并不好。


六、问题 5:配图塑料
还有一点就是配图的问题,这一直是 UI 设计最大的痛点之一,想要做好配图靠的不是技巧而是认知、审美、经验这些比较抽象的要素的组合。而 AI 填充配图虽然能根据场景去找素材或是直接给你生成,但效果依旧很有限,即使最优秀的生图工具也能让你一眼看出来这是 AI。
AI 感的界面叠加 AI 图,看起来就越没有“活人感”,那就是一个 Fake App,可以说配图就是现阶段最不应该让 AI 参与的环节。



七、问题 6:动效失调
最后一点是很多新手或非专业设计师完全没意识到的问题,那就是动效应用是错误的。不管 iOS 还是安卓,页面之间的跳转有接近公约的模式,比如底部导航之间跳转是无效果的,进入内页会使用左右推动叠加的模式。
但 AI 会比较随机去生成动效,虽然整体操作起来可能感觉完整不少,但错的就是错的,只会让你在感觉不错的同时又“总觉得哪里不对”。

以上几点就是 AI 味形成的核心原因,这不是 AI 模型设计水平的问题,即使设计效果最好的 Claude 或 OpenAI 也无法避免这些错误,它们只是用了一定专业的设计方法在输出错误的设计而已。
用一句话总结 AI 的界面设计效果就是:
一个初级设计师・按英文网页设计的标准・过度设计・中文的移动端界面
八、结尾
时间关系这篇分享聚焦在定义 AI 味上。而更重要的是如何减少或解决 AI 味,这部分就放到后面的更新里了。
提前强调一点,就是不管我们怎么做测试,想要解决这个问题都需要你掌握 UI 相关的设计基础,去介入设计细节的决策,只靠 Skill 和提示词是远远不够的。
我们下篇再贱~
