7个方法让 AI 做出更有设计感的 UI

一、全文速览图

​​

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

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

​​

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

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

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

​​

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

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

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

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

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

具体怎么做：

1. 打开 Excalidraw，只用方块和线条把页面结构画出来
2. 截图，丢给 AI
3. 补一句指令："按这张线框图实现 UI 组件"

三、把喜欢的设计截图喂给 AI

​​

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

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

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

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

四、用情绪板指定颜色

​​

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

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

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

做法很简单：

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

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

​​

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

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

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

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

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

六、使用设计 Skill

​​

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

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

1. 禁止 AI 渐变（就是蓝→紫那种）
2. 禁止 Inter 字体
3. 禁止只用 Lucide 图标
4. 禁止直接沿用默认样式

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

七、截图作为主要沟通方式

​​

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

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

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

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

八、替换字体和图标

​​

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

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

解决办法也很简单：

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

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

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

九、最后

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

1. 线框图、截图、情绪板 → 用视觉传递意图
2. 设计 Skill、禁止提示词 → 用规则把 AI 框住
3. 改字体、改图标 → 让 AI 从默认值里跳出来

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