一、全文速览图
Hello，这里是 Clip 设计夹，今天分享的是「Vibe Coding 设计技巧」。
如果你做过 Vibe Coding，应该都有过这样的经历 ——AI 制作 UI 界面，生成出来的效果图大概率一眼就能被认出来 "这是 AI 做的"。
这些效果图自带蓝色渐变、Inter 字体、线性图标、清一色的圆角卡片，怎么看都觉得千篇一律，毫无个性。
下面结合原帖的要点以及我自己使用 AI 的一些实操经验，讲讲如何 Vibe Coding 出具有设计感的 UI 界面～
二、在下指令之前，先画一张线框图
先用白板工具 Excalidraw 大致摆几个方块和按钮，截个图丢给 AI，附一句 "按这个结构来"。
光是这一步，输出的准确度就会天差地别。
如果你只用文字说 "帮我做个登录表单"，AI 会自己凭空想象布局，每次出来的排布都不太一样：
Logo 放左边还是右边？第三方登录按钮是在表单上方还是下方？
使用纯文字提示，AI 只能靠 "想象" 去填满所有空缺，于是交出来的东西就会跟你的想法对不上。但只要给 AI 一张图，它就能从 "想象" 切换到 "临摹" 模式，准确度高出一个量级。
具体怎么做：
- 打开 Excalidraw，只用方块和线条把页面结构画出来
- 截图，丢给 AI
- 补一句指令："按这张线框图实现 UI 组件"
三、把喜欢的设计截图喂给 AI
在 Dribbble 或 Pin 上看到 "就是这个感觉" 的 UI，截下来跟一句 "照这个风格做" 一起丢过去。
这里的关键点是：按组件给，不要整页给。
导航栏、价格卡片、首屏轮播区、页脚 —— 各自单独截一张图。整页一股脑丢过去，信息量太大，AI 会混乱。用 "导航栏照这个风格"" 价格卡片照这个布局 " 这样分部件指定，精度才出得来。
我用 Claude Code 写前端时也是这么干的：直接把 Figma 的设计稿或截图丢过去。只给文字提示的话，例如 "做得好看点" 这句话每次的解读都会飘；而一张截图就能一次把意图说清楚。
四、用情绪板指定颜色
你就算在提示词中写明了要 "现代一点、温暖一点"，AI 每次还是会生成同一个蓝色系。
这不是 AI 的错，问题出在 "温暖" 这个词的定义太模糊。是偏橘的暖？偏米色的暖？还是陶土色系的暖？人与人之间的理解都会跑偏，更何况指望 AI 准确接呢。
咱们可以换个做法：做一张情绪板图片，跟一句 "参考这套配色" 一起发给 AI。
做法很简单：
- 收集 3〜5 个你喜欢的配色网站或设计
- 做一张图，把色板 （带上 HEX 色值） 集中排在一起
- 一句提示词 "按这套配色做 UI"
五、写代码前先定义好设计系统
先把品牌色、字体、间距规则定下来发给 AI，然后再开始写代码。
Vibe Coding 做出来的应用看着东拼西凑，大半原因就在这。A 页面和 B 页面的颜色、字体会有些微妙的差异，例如每个页面的按钮间距各不相同；卡片的圆角一会 8px 一会 12px。
这是因为每做一个页面，AI 都会重新解构一遍 "好看"，整体感就这么散掉了。
我的做法是把 Design Tokens 写进 CLAUDE.md：
只要定义一次，AI 就会在所有页面上套用一致的视觉样式。反过来，如果不做这一步，无论你把单个页面做得多漂亮，整体看还是分散的。
六、使用设计 Skill
现在有很多供 AI 使用的设计 Skill，这些 Skill 包括了完整的风格、配色、字体等设计规范，可以很大程度避免生成 "AI 味" 的设计效果。
我自己也在做类似的事 —— 在 DESIGN.md 里明明白白写一份 "禁止清单"：
- 禁止 AI 渐变（就是蓝→紫那种）
- 禁止 Inter 字体
- 禁止只用 Lucide 图标
- 禁止直接沿用默认样式
提示 "禁止做什么"，和提示" 需要做什么 "同样重要。AI 在没有指令的时候就会退回到默认值。只有把默认值明确禁掉，它才会开始给你" 非默认 " 的东西。
七、截图作为主要沟通方式
别用文字写 "做得好看点"。我们可以把截图发给 AI，让它知道好看具体代表什么意思。
AI 擅长临摹，但不擅长想象。例如，不要说 "这里的留白再多一点"，而是在截图上画个红圈，写 "这里改成 24px"；不要说 "按钮再圆一点"，而是写 "圆角改成 4px"。
具体数值 + 可视化的指示，这个组合最能拉高 AI 的输出精度。
我自己用 AI 开发时，会直接截浏览器窗口的图贴过去，一句 "把红圈这部分改掉" 就能表明修改要求，比用文字描述修改要求要快得多。
八、替换字体和图标
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 的内容质量提上去了，输出的效果图质量自然也会跟着上去。