我常年看别人拿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 这些廉价感通常藏在哪些地方我把平时评审项目中发现问题最多的区域整理了一下你可以拿这张表对照自己的项目自查检查区域廉价感的典型表现问题本质间距系统各处间距凭感觉忽大忽小没有统一的间距变量字体排版字号、行高随意长文本读起来累没有定义字号阶梯按钮同一页面多种高度/圆角/填充方式缺少组件级规范阴影卡片阴影浓淡不一像PS随手加的没有区分静态/悬浮层级反馈状态按下、悬停、加载都无变化只做了静态稿没做状态稿空状态一行“暂无数据”草草了事没有设计空状态引导首屏一上来就把所有信息平铺没有视觉重心这些点单独拿出来都不是什么大工程但叠加在一起就把产品的档次锁死了。接下来五个决策就是逐个击破它们。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、状态反馈、边界处理十有八九都缺课。而那些一眼看过去就让人愿意多停留两分钟的产品往往不是用了多高级的设计只是把上面这五件事做扎实了。希望这篇内容能帮你少走点弯路也欢迎你拿着自己的项目对照做一次改造我相信结果会让你自己都惊讶。 
长河君 · 2026/10/14 5:13:16 · 阅读 1.2k 告别AI应用廉价感：5个可落地的设计决策
我常年看别人拿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 这些廉价感通常藏在哪些地方我把平时评审项目中发现问题最多的区域整理了一下你可以拿这张表对照自己的项目自查检查区域廉价感的典型表现问题本质间距系统各处间距凭感觉忽大忽小没有统一的间距变量字体排版字号、行高随意长文本读起来累没有定义字号阶梯按钮同一页面多种高度/圆角/填充方式缺少组件级规范阴影卡片阴影浓淡不一像PS随手加的没有区分静态/悬浮层级反馈状态按下、悬停、加载都无变化只做了静态稿没做状态稿空状态一行“暂无数据”草草了事没有设计空状态引导首屏一上来就把所有信息平铺没有视觉重心这些点单独拿出来都不是什么大工程但叠加在一起就把产品的档次锁死了。接下来五个决策就是逐个击破它们。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、状态反馈、边界处理十有八九都缺课。而那些一眼看过去就让人愿意多停留两分钟的产品往往不是用了多高级的设计只是把上面这五件事做扎实了。希望这篇内容能帮你少走点弯路也欢迎你拿着自己的项目对照做一次改造我相信结果会让你自己都惊讶。