7招让Vibe Coding摆脱AI味！海外1.3万人收藏的UI避坑清单

👋Hello，这里是Clip设计夹，今天分享的是「Vibe Coding设计技巧」。

如果你做过Vibe Coding，应该都有过这样的经历——AI制作UI界面，生成出来的效果图大概率一眼就能被认出来"这是AI做的"。

这些效果图自带蓝色渐变、Inter字体、线性图标、清一色的圆角卡片，怎么看都觉得千篇一律，毫无个性。

下面结合原帖的要点以及我自己使用AI的一些实操经验，讲讲如何Vibe Coding出具有设计感的UI界面～

01 在下指令之前，先画一张线框图

先用白板工具Excalidraw大致摆几个方块和按钮，截个图丢给AI，附一句"按这个结构来"。

光是这一步，输出的准确度就会天差地别。

如果你只用文字说"帮我做个登录表单"，AI会自己凭空想象布局，每次出来的排布都不太一样：

Logo放左边还是右边？第三方登录按钮是在表单上方还是下方？

使用纯文字提示，AI只能靠"想象"去填满所有空缺，于是交出来的东西就会跟你的想法对不上。但只要给AI一张图，它就能从"想象"切换到"临摹"模式，准确度高出一个量级。

具体怎么做：

• 打开Excalidraw，只用方块和线条把页面结构画出来

• 截图，丢给AI

• 补一句指令："按这张线框图实现UI组件"

在Dribbble或Pin上看到"就是这个感觉"的UI，截下来跟一句"照这个风格做"一起丢过去。

这里的关键点是：按组件给，不要整页给。

导航栏、价格卡片、首屏轮播区、页脚——各自单独截一张图。整页一股脑丢过去，信息量太大，AI 会混乱。用"导航栏照这个风格""价格卡片照这个布局"这样分部件指定，精度才出得来。

我用Claude Code写前端时也是这么干的：直接把Figma的设计稿或截图丢过去。只给文字提示的话，例如"做得好看点"这句话每次的解读都会飘；而一张截图就能一次把意图说清楚。

03 用情绪板指定颜色

你就算在提示词中写明了要"现代一点、温暖一点"，AI每次还是会生成同一个蓝色系。

这不是AI的错，问题出在"温暖"这个词的定义太模糊。是偏橘的暖？偏米色的暖？还是陶土色系的暖？人与人之间的理解都会跑偏，更何况指望AI准确接呢。

咱们可以换个做法：做一张情绪板图片，跟一句"参考这套配色"一起发给AI。

做法很简单：

1. 收集3〜5个你喜欢的配色网站或设计
2. 做一张图，把色板(带上HEX色值)集中排在一起
3. 一句提示词"按这套配色做UI"

04 写代码前先定义好设计系统

先把品牌色、字体、间距规则定下来发给AI，然后再开始写代码。

Vibe Coding做出来的应用看着东拼西凑，大半原因就在这。A页面和B页面的颜色、字体会有些微妙的差异，例如每个页面的按钮间距各不相同；卡片的圆角一会8px一会12px。

这是因为每做一个页面，AI都会重新解构一遍"好看"，整体感就这么散掉了。

我的做法是把Design Tokens写进CLAUDE.md：

只要定义一次，AI就会在所有页面上套用一致的视觉样式。反过来，如果不做这一步，无论你把单个页面做得多漂亮，整体看还是分散的。

05 使用设计Skill

现在有很多供AI使用的设计Skill，这些Skill包括了完整的风格、配色、字体等设计规范，可以很大程度避免生成"AI味"的设计效果。

我自己也在做类似的事——在DESIGN.md里明明白白写一份"禁止清单"：

• 禁止AI渐变（就是蓝→紫那种）

• 禁止Inter字体

• 禁止只用Lucide图标

• 禁止直接沿用默认样式

提示“禁止做什么"，和提示"需要做什么"同样重要。AI在没有指令的时候就会退回到默认值。只有把默认值明确禁掉，它才会开始给你"非默认"的东西。

06 截图作为主要沟通方式

别用文字写"做得好看点"。我们可以把截图发给AI，让它知道好看具体代表什么意思。

AI擅长临摹，但不擅长想象。例如，不要说"这里的留白再多一点"，而是在截图上画个红圈，写"这里改成 24px"；不要说"按钮再圆一点"，而是写"圆角改成 4px"。

具体数值+可视化的指示。这个组合最能拉高AI的输出精度。

我自己用AI开发时，会直接截浏览器窗口的图贴过去，一句"把红圈这部分改掉"就能表明修改要求，比用文字描述修改要求要快得多。

07 替换字体和图标

AI生成的界面默认使用的是Inter字体+Lucide图标，每个项目都是同一套组合。凭这一点，AI做的图就很容易被识别出来。

这大概也是常使用AI的朋友最能共鸣的一个问题，把10个Vibe Coding项目摆在一起，8个都是Inter字体+Lucide图标。

解决办法也很简单：

字体：去Google Fonts另选一套，或者用思源字体、或者自己熟悉的字体。

图标：换成Lucide以外的图标库👇

• Phosphor—6种图标粗细（Thin〜Duotone），表现力强
• Tabler—6000多个免费开源SVG图标，形状简洁很清爽
• Heroicons—Tailwind官方图标，简洁好用

最后

这7条技巧的共同点，可以汇成一句话：别让AI想象，让它临摹。

• 线框图、截图、情绪板 → 用视觉传递意图

• 设计Skill、禁止提示词 → 用规则把AI框住

• 改字体、改图标 → 让AI从默认值里跳出来

你投喂给AI的内容质量提上去了，输出的效果图质量自然也会跟着上去。