我常年看别人拿AI代码工具做产品，发现一个特别有意思的现象：功能跑得通，界面也齐全，但成品一眼看过去就是“便宜货”。那种感觉就像用了最新款的厨具，做出来的菜却带着食堂味。很多人归咎于自己不会审美，但我的真实结论是——不是你不会设计，而是你在几个关键决策上偷了懒。Vibe Coding时代，用户对AI生成应用的容忍度更低，因为大家的起跑线都一样，都是用提示词拼界面，这时候谁的设计决策更成熟，谁的产品质感就彻底拉开档次。

这篇文章不跟你讲抽象的设计理论，专门拆解我复盘过大量“廉价感项目”后总结出的5个设计决策。它们对应的全是可落地、可检查、能直接套用的规则。适合正在用AI写项目但总是被吐槽“看起来不专业”的开发者，也适合那些产品做出来了但不敢对外展示的独立开发者。

1. 为什么AI生成的应用总是自带“廉价滤镜”

1.1 功能满分，质感零分

AI代码工具有个让人又爱又恨的特性：只要你能说得清需求，它就能像变魔术一样把页面搭起来。表单、列表、弹窗、卡片，所有组件应有尽有，逻辑也跑得通。但问题恰恰出在这里——它对齐的目标是“正确性”，不是“设计品味”。

我拆过不少AI生成的项目，最常见的状态就是：每个组件单独看都还行，合在一起就变得极不协调。间距大小不一、标题字号忽大忽小、按钮一个粗一个细、阴影浓得像加了滤镜。这不是某一处出了错，而是整体设计系统的崩塌。

Vibe Coding的本质是用自然语言驱动AI快速编码，这决定了你不可能靠“多写几轮提示词”就能得到精致界面。真正决定成品质感的，是你有没有在代码之外定下一套约束规则。没有约束，AI就会按照训练数据中的“最常见样式”来糊弄你——那些通用模板恰好就是廉价感的高发区。

1.2 设计感是显性规则，不是玄学

很多开发者觉得“设计感”属于天赋，需要会画画、有审美细胞才能搞定。我用多年踩坑经验告诉你，完全不是这么回事。

人对界面的感知其实有很强的规律性。留白是否均匀、层级是否清晰、反馈是否及时，这些都是可以逐个检查的硬指标。你把一个页面拿到眼前，不用懂美学，只需回答三个问题：第一眼该看哪里？第二眼该做什么？操作后有没有反应？答得出来，页面基本合格；答不出来，这就是廉价感源头。

我后来帮人做项目评审，基本不看细节漂亮不漂亮，先把这三点捋一遍。凡是看起来“cheap”的页面，80%都能在这里找到问题：没有视觉中心、抵不住真实数据、反馈缺失、细节标准不统一。这些问题全都可以通过设定规则来解决，跟天赋毫无关系。

1.3 拼凑组件会让廉价感加倍

Vibe Coding项目还有一个隐藏陷阱：很多人会反复要求AI“参考某个流行的组件库风格”，或者混用多套UI组件。于是同一个页面上可能同时出现大圆角和小圆角、实心按钮和幽灵按钮、粗分割线和淡底色。这种风格混搭造成的“不统一”，比单纯做得丑更致命。

举一个我印象很深的例子，某位开发者做了一个后台系统，侧边栏是玻璃拟态风格，主内容区却偏硬朗扁平，表格按钮用的是另一套圆角规范。他问我问题出在哪，他自己知道“怪”但说不上来。我把所有圆角、配色、阴影列成一张表后他瞬间明白了——这几个维度全都在互相打架。

一致性本身就是一种高级感。你不需要每个组件都惊艳，只要让所有组件看起来属于同一个世界，用户就会默认这是个成熟产品。AI擅长单点生成，不擅长全局统一，所以这件事必须由你把关。

1.4 这些廉价感通常藏在哪些地方

我把平时评审项目中发现问题最多的区域整理了一下，你可以拿这张表对照自己的项目自查：

这些点单独拿出来都不是什么大工程，但叠加在一起，就把产品的档次锁死了。接下来五个决策，就是逐个击破它们。

2. 决策一：先定一套“最小设计规则”，拒绝默认值

2.1 用Token把“感觉”变成变量

AI生成界面的时候，它脑子里没有“色彩系统”“间距系统”这些概念，它只会根据概率生成最常见的数值。于是你得到的是默认的蓝色、默认的圆角、默认的阴影。想让质感翻身，第一件事就是把这些默认值换成你自己定义的规则。

最有效的做法，是在项目里建立一套极简的设计Token。不需要像大厂设计系统那么复杂，只需要四类变量：颜色、字体、间距、圆角。在代码里用CSS变量落地，这样所有组件都会自动从这套规则里取值：

:root { /* 颜色 */ --color-primary: #3b5bdb; --color-bg: #f8f9fa; --color-surface: #ffffff; --color-text: #212529; --color-muted: #6c757d; /* 字体 */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 20px; --font-size-xl: 28px; --line-height-base: 1.5; /* 间距 */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; /* 圆角 */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; }

建Token这件事最大的好处，不是让你的页面自动变漂亮，而是让AI下次生成代码时，拿到的是这套有序的规则。给AI提示词里加上一句“基于项目现有的设计Token开发”，生成结果直接就不是默认的ChatGPT风格了，我实测下来差异非常明显。

2.2 间距统一到4的倍数

廉价感最扎眼的地方就是间距。默认情况下AI会随机给出11px、17px、23px这类数字，每个间距之间没有倍数关系，于是整个页面看起来就像随手贴上去的标签。

我的做法很简单：所有间距必须落在4的倍数上。4、8、16、24、32、48，就这么几个档位。这背后是有道理的——倍数关系让元素之间的间距产生“看不见的节奏感”，人脑会无意识地感知到这种规律，进而觉得页面“舒服”、“整齐”。

具体分配比例，我一般按三个层级来用：组件内部元素间距用4px或8px；相邻组件之间的间距用16px或24px；页面级区块之间的间距用32px或48px。这套规则在AI生成后你只需要快速扫一遍间距，把所有不合规的数字全部修正，页面的整洁度立刻上升一个档次。

2.3 色彩克制到三种角色以内

Vibe Coding项目在颜色上犯的错通常有两种：一个是颜色太多，一个是用色太重。AI默认给的蓝色面板加上用户随口提的“我想要一个科技感的蓝色”，很容易变成饱和度极高的窄蓝配渐变。

我强烈建议把整个产品的颜色收敛成三种角色。主色一个，用于按钮、链接、激活态这些关键交互；中性色两三个，负责背景、文字、边框；语义色两三个，用于成功、警告、错误。其余颜色一律不允许出现。

主色和中性色的搭配也有一点讲究。主色决定产品的气质，中性色决定页面的干净程度。想要看起来专业，主色可以选中等饱和度的蓝紫、靛青、深绿，中性色以白、浅灰、深灰为主。我常用的一组搭配是翠蓝做主色、偏冷灰白色做背景、墨灰色做文字，这个组合在绝大多数B端产品上都很稳，你可以直接抄作业。

2.4 字体只保留三档字号

AI生成页面时在字体上的表现非常随性。同一个页面里，标题用20px，正文用16px，辅助文字用13px，稍不留神还冒出一个18px的“伪标题”。这种无阶梯的字号体系，会让整个页面缺乏专业感，看起来像Word文档里随手排版出来的。

我把一个页面需要的字号严格限制在三档：标题一档，正文一档，辅助信息一档。每档之间的差别要足够明显，让用户一眼能分清级别。实际项目里我最常使用的是28px/16px/12px这套组合，偶尔在首屏大标题上用到36px，但很少。

行高同样要想清楚，正文的行高固定在1.5，标题可以收得紧一点用1.3。这样多行文本读起来不累，标题也不至于松散。字体统一之后，你会惊讶地发现，哪怕不重新设计排版，页面整体气质都会完全不同。

3. 决策二：让每个页面都有“视觉重心”，别再让工具凭空猜测

3.1 没有重心，所有元素就一起抢镜

我见过最多的AI生成页面，打开之后所有东西都同等重要。页面顶部一个大标题，下面三个卡片，每个卡片里都有按钮，旁边又挂了密密麻麻的报表，整个页面信息密度爆表。用户点进来第一反应是懵——不知道该看哪里，不知道该做什么。

问题根源在于，AI不理解你的业务目标。它只知道自己被要求输出一个“仪表盘”或“管理后台”，于是把典型功能全塞进来，至于哪个是核心动作，它根本没有概念。这种“无重心”的页面，就是廉价感最直接的来源。

3.2 三步定制页面骨架

我给AI生成完页面后，每次都会手动过一遍这“三步走”：定目标、排层级、收行动。

第一步，确定这一屏唯一的核心任务。是提交表单、查看订单、还是启动任务？把这个任务写在便签上，它决定你视觉重心放哪。第二步，给页面元素排三个层级。最核心的元素用大字号或高对比色突出，次要信息用常规字号加留白分隔，辅助信息用弱化色处理，让它们退到背景里去。第三步，在页面最显眼的位置放一个唯一的主按钮，其他所有操作都降级成文字链接或次要按钮。

这一步特别值得花时间跟AI较劲。你可以在UI生成后用一句话让AI调整：“这个页面最重要的是右上角的新建任务按钮，其他元素全部弱化，不要跟它抢注意力。”我试过很多次，效果立竿见影。

3.3 分割线能少用就少用

廉价项目还有个明显特征：到处都是分割线。列表项之间加border-bottom，卡片之间加拉一条线，侧边栏里每条菜单后面也来一条。这种做法不能说错，但它营造出来的氛围很像老旧的办公软件。

现代界面更倾向于用留白和背景色差来区分层级，而不是靠画线。两个区域之间拉开32px的间距，比画一条浅灰线清爽得多；一个卡片用浅灰背景而另一个用白色，自然就有边界感，完全不需要边框。

我现在对分割线的态度是：原则上能不用就不用。真正需要用分割线的地方只有少数，比如价格明细里的小项之间、表格的列头下面。大量使用分割线，等于在告诉用户“这个页面没什么设计能力，只能靠线硬隔开”。

3.4 一个小案例：同一页面的前后对照

拿一个虚构的任务管理面板举例。改之前是这样：标题栏、侧边栏、任务列表、统计卡片、筛选器，全部以同样权重挤在一个页面，列表之间六条分割线，按钮有三个不同样式。一眼看过去，用户的视线在页面上跳来跳去，完全不知道哪个是主要入口。

按上面三步调整后：页面顶部只保留“我的任务”大标题，任务列表变成视觉主体，用大间距和浅色背景区分卡片，统计信息缩小字号移到右侧次栏，核心动作“新建任务”用一个高饱和主色按钮固定在标题旁。其余操作全部降级为图标或文字链接。同一批组件、同一种配色，仅仅是重新分配了重心，观感就完全不一样。

4. 决策三：把反馈做满，用户才会觉得“这软件值钱”

4.1 任何动作都要有回应，哪怕是0.2秒

很多AI生成的应用只有静态界面：用户点了按钮，页面毫无反应；鼠标扫过一行列表，没有任何变化；表单填错了，要等提交后才得到一句报错。这种“操作无反馈”的状态，是产品看起来像demo的重大原因。

真实产品里，任何用户交互都必须伴随反馈。鼠标悬停时，按钮或卡片要有轻微变化；按下时，要有下沉或颜色加深；提交成功后，要有明确的成功提示；加载过程中，要有过渡状态。

实现这些反馈几乎不费吹灰之力，CSS几行就能搞定：

button { transition: background-color 0.2s ease, transform 0.15s ease; } button:hover { background-color: var(--color-primary-dark); } button:active { transform: scale(0.97); }

我把这类微反馈称为“产品的触感”。它就像门把手的分量、开关的阻尼，用起来舒服，用户说不清为什么，但就是觉得这东西讲究。国产软件和海外成熟产品给人的感觉差异，很多时候就差在这些细节上。

4.2 空状态和加载态是廉价感重灾区

几乎所有AI生成的应用在空状态上都偷了懒。列表没数据，就一行“暂无数据”；图表没加载完，就转半个圈。这做法的观感非常像“半成品”，因为用户看到的是产品最薄弱的环节暴露在眼前。

设计空状态有一套固定公式：一个简洁的图标或插画，一句有人情味的结果描述，再加上一个明确的行动按钮。同样是空列表，你可以展示“还没有创建任何项目”，然后给一个“新建项目”按钮。这个空状态就不再是死胡同，而是一个引导用户继续操作的路标。

加载态同样重要。长时间无反馈的空白等待，是用户流失的最高峰。我通常会把加载态设计成两种：局部加载用骨架屏，整页跳转用顶部进度条。骨架屏很简单，就是把页面结构用浅灰块占位，让用户知道内容正在“生长”出来，而不是页面卡死了。

4.3 用动效的“重量”做质感，而不是炫技

动效是双刃剑。用得好，页面有质感；用过头，就会显得花哨廉价。我见过一个AI生成的登录页，Logo旋转、按钮呼吸、背景粒子飘动，绩效拉满但完全没有高级感，反而像网页模板超市里挂着的展示页。

高质量产品里的动效讲究“物理重量”。元素从A点到B点要符合预期，速度要适中，幅度不能夸张。我推荐只使用两种动效组合：淡入加轻微位移动画，用于元素出现；缩放加阴影变化，用于元素交互。所有动效的时长控制在150ms到300ms之间，超过300ms用户就会觉得拖沓。

技术上实现这组动效不需要引入大型动画库，CSS transition配几个关键类就行：

.fade-in { opacity: 0; transform: translateY(8px); animation: fadeIn 0.25s ease forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

现在AI相当擅长生成类似代码，你只需要在生成后追加一句“给这些组件加上淡入和位移动效，时长250ms”，它就能把视觉质感拉高一个级别。

4.4 错误提示说人话，给出下一步

AI生成的表单校验错误往往是“系统级”的冷冰冰：格式错误、提交失败、网络异常。这类提示毫无温度，用户看了也不知道怎么解决。廉价感和专业感的差别，恰恰体现在这种边缘场景上。

错误提示至少要包含两件事：一是人话解释问题，二是可行的下一步。比如邮箱填错了，不要只写“邮箱格式错误”，可以写成“请检查邮箱是否漏了像 example.com 这样的域名”；用户名被占用，不要只写“用户名不可用”，可以写成“这个名字已经被注册了，换一个试试，或者直接登录”。

我通常在AI生成表单后，会手动把所有错误场景的文案过一遍，把那些系统级别的话全部替换成业务级别的话。花不了10分钟，但对用户感知的提升非常明显。

5. 决策四：用真实内容检验设计，而不是占位符自嗨

5.1 占位数据会欺骗你的眼睛

这是Vibe Coding项目最隐蔽的坑。AI做demo的时候，几乎都会用Lorem Ipsum或“用户名”“示例标题”这类占位内容填充页面。这些内容的长度刚刚好，字体渲染也漂亮，看起来非常干净。但一旦接入真实数据，页面的设计问题就会集中爆发。

真实数据的可怕之处在于它的不可控。一个标题可能很长，描述可能多达三行，用户名里可能有一串无空格的英文，日期格式可能各种不同。当这些内容被塞进为占位符量身定做的组件时，布局崩坏几乎是必然。

5.2 把这些边界情况提前喂给AI

我的做法是，在开发阶段就把边界文本当成一等公民，直接让AI用它们来生成界面。我会准备一组专门的测试文本，每次做完页面都替换上去看效果：

• 一段30个字符以上的中文长标题
• 一行无空格的超长英文串，比如“Supercalifragilistic”
• 一个超长数字，比如订单号 202405181923847562
• 一段超过两行的详情描述
• 一个完全空值或极短值，比如空用户名

把这几类内容放进列表、卡片、表格里，凡是布局被撑坏的组件全部修一遍。这个方法非常笨，但在我做过的项目里是效率最高的。很多看起来精致得不得了的卡片设计，遇到真实长文本后直接松散得不像话，而这种问题只有真实内容才能暴露。

5.3 让组件“自适应”而不是“被撑爆”

AI生成的组件关于文本溢出处理往往很粗糙，在窄屏或长文本场景下，经常会出现文字顶出容器、按钮挤压变形、表格列宽失控这类结构崩塌。

文本处理上要遵循三条基本规则：长文本能换行就换行，不能换行就截断加省略号，任何容器都要设置最小宽度为0让文本可以正确收缩。推荐在小标题、用户名、文件路径这类短文本处使用截断：

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

而正文和描述性文字，则允许正常换行并且用溢出换行兜底：

.paragraph { overflow-wrap: break-word; word-break: break-word; }

这套规则在页面上一次性配置好，之后AI每次新增内容，都会默认继承自适应能力，不会再出现“被撑爆”的惨剧。

5.4 用真实数据驱动视觉走查

除了检查布局是否崩坏，真实数据还能检验视觉层级是否合理。占位符阶段，所有内容都是理想长度，视觉重心不会出太大的偏差。一旦换成真实数据，某个区域的文字变成三行、某个卡片内容特别长，页面重心就会发生偏移。

我习惯在每个页面完成数据接入后做一次“真实数据走查”，核心是重新确认：视觉重心是否还保持在该在的位置？有没有哪个区块因为内容变多而变得过于抢眼？文字对比度在真实内容下是否仍然清晰？走查发现问题用的时间不会超过20分钟，但它能防止“开发阶段好看、上线后变样”这类事故。

6. 决策五：给组件做减法，让细节拉开档次

6.1 同一屏最多两种圆角

圆角是塑造界面气质最敏感的参数之一。大圆角偏年轻、柔性，小圆角偏硬朗、专业。最怕的是同一页面上大圆角小圆角混杂，卡片是16px，按钮是4px，弹窗是20px……整个界面圆润感和利落感互相打架，看起来极其不协调。

我建议在一套界面上最多使用两种圆角。一种用于卡片、弹窗这类较大的容器，一种用于按钮、输入框这类较小的控件。我自己常用的是16px加8px的组合：卡片用16px，按钮和输入框用8px，整体既温和又有科技感。

有些AI生成的项目喜欢“全都圆角拉满”，按钮、卡片全是圆形甚至胶囊形。这确实能营造出亲和力，但用多了会让页面失去专业感。跟圆角有关的决策其实就一句话：选定组合，全局统一。

6.2 阴影要有层级，不能一视同仁

阴影使用不当也是廉价感的著名来源。AI很喜欢给所有卡片加上同样的box-shadow，结果就是页面浮起一片，根本没有空间层次。更糟糕的是一些生成的阴影颜色过深或发灰发蓝，像极了PS一键添加的投影。

正确做法是给阴影分两个层级：静态阴影用于卡片默认状态，营造轻微的物理抬高感；交互阴影用于悬浮状态，比静态阴影更深、范围更大，暗示这个元素可以被点击。两层阴影之间通过transition过渡，用户操作时能清晰感受到元素在“抬起来”。

具体的值，我是这样设置的：

.card { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); transform: translateY(-2px); }

阴影颜色不要用纯黑，用带透明度的蓝灰色调会更柔和，也更像真实光影。我把所有阴影集中定义成变量之后，AI生成的阴影风格也会自动归位。

6.3 去掉多余的边框和底色

廉价感还有一大来源，就是给所有能看到的区域都加上边框或底色。卡片加边框、表格加边框、甚至一个标签也要包一个底色块。整个页面被框框线线塞得满满当当，视觉噪点非常高，人眼很不舒服。

更高级的替代方案是“用背景色差代替边框”。在浅色背景下，用白色和浅灰色交替作为区块背景，自然形成分割效果，不需要一条线一根线。把焦点聚集在关键区域时，用淡色背景加轻微阴影即可，没必要上边框。

我通常在页面上执行一条硬规则：边框只保留在表格行列和数据细分领域，其他区域一律尝试用间距和底色解决。每次删掉一批边框，页面都会清爽一大截。

6.4 键盘可达性和焦点态：细节里的专业

这个细节容易被绝大多数人忽略，但它最能体现一个产品是否“成熟”。用键盘TAB键在页面上走一圈，能不能顺畅地访问所有按钮和链接？焦点是否有一个清晰可见的轮廓？很多AI生成的项目，TAB键按下去根本不知道焦点跑哪了，或者焦点事件被完全禁用。这种产品给到挑剔的用户手里，瞬间露馅。

现代浏览器默认的焦点样式虽然难看，但它至少存在。更专业的方式是自定义焦点态，主要针对鼠标操作时隐藏焦点圈、键盘操作时显示高亮焦点圈：

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

我给所有重要操作组件都加上这个规则后，键盘用户的使用体验就能直接拉满。这个细节绝大多数普通用户注意不到，但任何一个有经验的开发者或产品经理看到都会心里加分。

7. 从五个决策到一次15分钟的质感自检

讲了这么多，你可能会觉得要做的事情太多。其实关键是，这些改动不需要推翻现有产品重来，你完全可以花15分钟对已有的应用做一次快速体检。

我的自检流程是这样的：先全局扫一遍间距，把所有不在4倍数上的数字修正；接着检查字体，确保全站只有三档字号；然后逐页确认视觉重心是否落在核心动作上；再看交互反馈，给所有按钮和卡片补上悬停、按下的状态；最后用前面提到的边界文本替换一遍内容，修复所有被撑爆的组件。这五个动作做完，产品的质感通常已经能提升一大截，剩下的圆角、阴影、边框细节再逐步补齐。

这一套流程的本质，其实是用规则来约束AI的自由发挥。Vibe Coding的优势在于快，但如果只快不精，最终得到的就是一堆正确的半成品。反过来，你只需要在几个关键节点上施加设计约束，AI就能在你划定的框架里高效产出，这比手写所有代码再改十遍高效得多。

最后再分享一个我自己的体会。我评审过不少AI生成的项目，每次看到那种“说不上来哪里不对，但就是觉得便宜”的界面，去查它的设计Token、状态反馈、边界处理，十有八九都缺课。而那些一眼看过去就让人愿意多停留两分钟的产品，往往不是用了多高级的设计，只是把上面这五件事做扎实了。希望这篇内容能帮你少走点弯路，也欢迎你拿着自己的项目对照做一次改造，我相信结果会让你自己都惊讶。