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