哈喽大家好，我是欧呦，这篇文章将为大家分享在 Vibe Coding 中如何使用 AI 做出有高级感的 UI 设计。
很多朋友刚开始用 AI 写网页或做应用界面时，最常遇到的困扰就是：看到别人用 AI 做出来的演示页面很惊艳，但轮到自己跟 AI 说「帮我做一个某某网站」时，做出来的效果却总是千篇一律。下面我们就从第一步怎么选对模型出发，一步步拆解怎么通过「先反问再出 3 个不同 HTML 方案」找到独特的风格，以及选定方向后怎么靠无上下文子 Agent 评审、精准元素点选、克制做减法、透明底配图、交互动效和开源设计 Skill 把页面打磨到位。
为什么默认生成的页面总有「AI 味」？第一步先选对模型
1. 什么是真正「有高级感」的设计？先认清典型的「AI 味」
平时大家直接让 AI 做的页面，普遍都有一个共同点，就是趋向于平庸。
为什么不加约束时 AI 做出来的页面会有很明显的「AI 味」？这和大语言模型的工作方式直接相关。模型在生成内容时，本质上是在根据上文一步步预测下一个最可能出现的词（也就是 Token，AI 读写文字与代码的最小单位）。而在模型训练的打分阶段，人类评分员的反馈会让模型学会做出最稳妥、最符合大多数人平均预期的安全选择。
这种机制让 AI 在回答常规问题时表现得很稳定，但放在 UI 设计上，只要我们在提示词里没有明确限制风格，它就会自动退回到它认为最安全、最不会出错的公约数方案。
除了早期大家很眼熟的蓝紫色渐变、左边文字右边图片的固定首屏、直接拿 Emoji 表情或 ✨ 星星当作图标之外，现在的模型还养成了一些更隐蔽的「新时代 AI 味」：
- 特别喜欢在每个地方都加上描述文字：这是目前 AI 做网页最典型的毛病。不管写什么模块，它都喜欢在标题顶上先加一个毫无意义的英文胶囊小标签（比如
WORKSPACE、CORE FEATURES），大标题下面跟一段长长的解释副标题，甚至在每张卡片、每个按钮底下还要再塞一行灰色说明小字。 - 圆角框套圆角框，以及无来由的默认配色：喜欢在大圆角卡片里面再套一层带粗边框的小卡片，或者不管做什么类型的产品都默认套一层米色背景。
- 到处塞满一眼假的整数占位数据：页面角落里写满
10,000+ 活跃用户、99.9% 满意度或者“一站式赋能、开启全新体验”这类空洞口号。
为了让大家直观感受到「AI 喜欢到处加描述文字」是什么样，我们可以对比一下同样做一块「工作台数据卡片」，AI 默认写出来的结构和真正清爽的设计之间的区别：
- ✕ 充满「AI 味」的默认写法（到处塞满解释文字与多层框）：
[ WORKSPACE ANALYTICS · 核心指标模块 ]（多余的英文胶囊眉标） 实时数据总览中心 在这里全方位监控您的平台每日核心请求量与服务健康状态，助力业务高效增长。（毫无信息量的废话副标题）[ 外层大卡片 -> 内层子卡片：今日总请求数 1,284 次 | 较昨日增长 +12%（数据每 5 分钟自动刷新一次，点击右上角按钮可导出 CSV 报表） ]（把操作说明全堆在卡片里） - ✓ 克制、清爽的高级感写法（只留核心信息，一眼看懂）：
Total Requests / 今日请求 1,284
+12%
你会发现，真正有高级感的设计，核心在于有自己的风格与克制。不管是清爽简约还是奢华繁杂，它一定不是四平八稳、塞满解释小字的平均模板，而是总有自己特殊的味道，能让人一眼记住。
2. 最重要的一步：交给审美与理解力更好的模型
从做出有高级感的设计来说，我认为最关键的第一步其实是模型的选择。
一个审美在线、指令理解准确、交流感更好的模型，能够非常轻松地帮我们做出更好看的 UI 设计。因为好的模型不管你想要什么风格，它都可以基于这个风格把版式、留白和细节处理得更到位。所以每当我想做一个新页面，或者当前任务对视觉设计要求很高的时候，我第一步一定会先把它交给一个设计能力更强的模型。
在我过往的大量尝试中，会发现有些模型在同时期的审美明显超出其他模型，比如 Gemini 3.1 Pro、Kimi K3、Claude Opus 5.5 等。不过现在大模型迭代的速度非常快，如果我们想要随时了解当下哪些模型的设计能力最强，我比较推荐大家去看一个专门做设计盲测对比的榜单网站：DesignArena。
在 DesignArena 的排行榜（Leaderboard）里，我们可以直观看到不同主流模型在网页与界面生成任务上的真实盲测排名和实际案例表现，挑排名靠前、风格合自己眼缘的模型来用即可。
另外，如果你手头接触到一个新模型，想快速评估它自己的原生设计能力到底怎么样，我自己认为一个非常好的测试办法就是：直接用非常简单的提示词让它去做一个网页设计，看它自己在没有复杂指导时做出来的效果是怎么样的。
比如说，你只需要简单跟它说：「帮我做一个宠物店的宣传落地页，我想要大概什么样的风格」，随便提一点自己的简单需求让它直接去做：
- 如果它一把做出来的效果就非常惊艳：那么这个模型本身的设计能力肯定不错。这意味着即便后续你在复杂的存量项目里去修改内容，或者在已经塞了大量上下文的情况下，它依然能够很好地保持自己的一些设计洞察；
- 如果它此时做出来的就是 AI 味很重、或者看着很敷衍很粗糙的设计：那就说明它底层的原生审美有限——这种模型哪怕你后面在提示词里硬塞给它再多的设计洞察和规则，它最终做出来的效果依然不如原生审美好的模型。
3. 留意模型的「文案传达」问题
在选模型做网页时，还有一个很容易被忽略的细节：有些模型虽然视觉审美很好、做出来的 UI 框架很漂亮，但它的文案传达不好。
比如说 GPT 系列的模型，它的视觉审美其实很不错，但它有自己的一些固有问题——比如特别喜欢在页面各个角落加各种解释性的描述小字，或者写出来的标题与介绍文案传达很差、读起来很别扭。而我们做一个网站，很多时候文案和视觉是一样重要的；遇到这类模型时，我们就需要在后续打磨阶段主动去精简和调整它的文案。
当然，并不是每个人都有条件随时切换各种不同的模型——有些顶级的海外模型使用门槛比较高，或者价格比较贵。所以接下来我们会一步步拆解：不管是使用顶尖模型，还是手头只有审美一般的模型，怎么通过一套有效的工作流和现成工具，把 AI 做设计的潜能尽可能发挥出来。
怎么找到独特的风格：先反问对齐，再做 3 个完全不同的 HTML 方案
用 AI 做界面最忌讳的一件事，就是盯着它生成的第一版平庸草稿反复修补——底子如果是千篇一律的模板，后面怎么改都很难出彩。更高效的思路是借鉴设计里的「先发散、再聚焦」：先在发散阶段让模型一次性探出几条截然不同的视觉路径，挑中最好的一版底子后，再聚焦打磨细节。
面对一个空白的新项目，如果我们自己脑子里一开始也没有特别明确的画面，怎么带着 AI 跳出默认样式、找到属于这个产品的独特风格？我自己最常用的一套起手流程分为三步：
1. 第一步：先让 AI 通过反问收集上下文（附 5 个找设计灵感的网站）
不要一上来就让 AI 直接闷头写页面代码，而是先让 AI 通过反问的形式收集我们的信息，获取尽可能多的上下文（所谓「上下文 Context」，就是 AI 在当前对话里了解到的背景信息与短期记忆；具体怎么在输入框开启 Plan 模式并让 AI 反问自己，可以回顾 《了解 AI Agent 的常用操作》）。
在这一步里，我们可以直接跟 AI 说：「我想做一个某某产品的页面，请先通过反问的方式向我提问，帮我梳理这个产品适合往哪个视觉方向去做，并了解我喜欢哪些风格。」
随着 AI 问我们几个关于目标用户、核心展示重点和个人偏好的问题，我们自己脑子里原本模糊的想法也会跟着变得清晰起来。
如果你自己平时很少关注设计、被 AI 问到「喜欢什么风格」时脑子里完全没有概念，我非常推荐大家先去下面这 5 个高质量的设计灵感网站逛一圈：
- Minimal Gallery：精选了大量极简、克制且排版考究的真实网站案例；
- Oil UI 实测画廊：我自己搭建的 AI 设计画廊，里面直接展示了不同大模型生成的真实可交互网页和对应的原始提示词；
- Scrolltide：专门收录现代网页设计与优秀滚动交互灵感的画廊；
- Designeer：精选高水准的数字产品与前端创意设计网站；
- Dribbble：经典的设计师作品社区，适合快速浏览各种视觉配色与界面布局。
平时在这些网站上看到觉得眼前一亮的页面，可以直接截图或把网址发给 AI，跟它说：「我喜欢这个参考页面的配色质感与留白节奏，请结合我们自己的产品内容来构思，但不要照抄它的具体布局。」
2. 第二步：让 AI 生成 3 个从字体、排版到配色完全不同的 HTML
把背景和偏好聊清楚之后，不要只让 AI 做一个方案，而是让它为我们构思三个不同方向的视觉意向，并直接把这三个意向做成三个 HTML 网页展示出来（HTML 是可以直接在浏览器里双击打开看真实排版和交互效果的网页格式）。
这里有两条非常关键的提示词经验：
第一，不要只说「随机、独特」，必须明确指定拉开哪些维度的差异
很多朋友为了让 AI 做出新意，会在提示词里写「请做一个独特的设计，所有设计决策全部随机」。但实际试过就会发现，仅仅口头要求「随机」，模型做出来的几套方案依然会用相同的配色和差不多的左右布局，只是把局部的圆角矩形换成了圆环图标。这是因为模型底层依然在顺着概率最高的路径生成，没办法凭空产生真正的随机性。
正确的做法是在提示词里把差异要求写具体：要求这三个 HTML 的设计风格必须完全不同，从字体选择（比如有的是像书籍报刊一样带笔锋装饰的「衬线体」，有的是干净现代的「无衬线体」）、版式排版到色彩搭配都必须完全不一样。 只要把这三个维度点明，AI 生成出来的三个网页就会拉开非常明显的风格差距，极大丰富我们的选择空间。
第二，没有具体灵感时，加上一句「大胆排版」或让 AI 先列简短点子激发脑暴
有时候专业设计师能想出「做成像素游戏画面」或者「做成 45 度斜视角的 3D 城市建筑」这类很具体的跨界点子，但我们普通人平时很难凭空想到这些。
这时候有一句非常通用且好用的提示词：直接跟 AI 说「你可以大胆地去排版，不要局限于常规的设计风格与居中对称布局」。 只要在指令里加上这句话，AI 就会敢于突破传统的居中卡片堆叠，尝试把一些元素排到贴近边缘的位置、做出有张力的不对称留白，页面立刻就不再有刻板的模板感了。
另外，如果你手头既没有参考图、脑子里也完全没有风格方向，还可以让 AI 先充当你的灵感发散器：
- 先让它广度列点子（只写一两句话，故意不展开细节）：跟它说「我想为这个产品找一套大胆独特的视觉语言，请先列出十来种不同方向的创意点子，每条只用一两句话概括，先求广度不要展开细节，用来激发我的想象力」；
- 挑出感兴趣的方向，注入你自己的直觉好恶：看着它列出的清单，挑一两个有感觉的方向，把你真实的直觉反应喂回去跟它碰撞（比如挑中「工业控制面板风」，告诉它「我想要有实体按键的触感和声音反馈，但避开俗气的卡通感；纯灰色渐变太单调，加一点材质纹理和克制的色彩」），来回聊清楚之后再让它动手生成页面，做出来的作品就会带有非常鲜明的个人品味。
3. 第三步：选定方向后，沉淀「全站统一的设计规范」再继续迭代
等 AI 把三个不同风格的 HTML 页面生成好（你也可以顺带跟它说一句「再生成一个 index.html 汇总对比页，顶部加三个切换按钮方便我在同一个窗口里对比这三个方案」），我们就可以直接在浏览器里直观对比。
看着真实的网页画面，我们很容易就能挑出其中某一个觉得还不错、符合自己想象中效果的方案；如果你觉得第二个方案的配色很好看，同时又喜欢第三个方案把标题放在正中间的布局，也可以直接告诉 AI 把这两个方案的优点结合起来。
选定满意的初稿之后，不需要另外重开新对话，但在继续往下写更多内容或子页面之前，一定要记得让 AI 做一件非常关键的事：把这套方案的设计规范沉淀下来——直接跟 AI 说：「请把第 X 个 HTML 方案的配色体系、字体搭配、字号层级、圆角和间距规则提炼出来，写成一份全站统一的 DESIGN.md 设计规范文档保存在项目里，后续所有模块和页面都严格按照这套规范来实现。」
为什么要专门沉淀设计规范？因为如果没有统一的设计规范，当你让 AI 顺着首屏往下写第二屏、第三屏，或者开发其他页面时，AI 写着写着又很容易退回默认的平庸模板；而全站有统一的设计规范，能够显著提升整个网站的一致性和品牌感。
4. 追求更高视觉上限：用 AI 先画「UI 设计稿」，再用 AI 还原成代码（draw-ui）
除了上面讲的「直接让 AI 生成 3 个 HTML 网页」之外，还有一条上限更高的设计路径：先用 AI 生图工具做出一张高水准的 UI 设计稿，然后再使用 AI 把这张设计稿还原成真实的网页或小程序代码。
为什么要多走一步「先生图、再还原」？因为如果一开始就让大模型直接去写 HTML/CSS 代码，受限于代码编写的复杂度，模型往往会优先挑好写、不容易出错的常规网格结构；而AI 生图模型的视觉可能性和设计想法（idea）要比直接写代码高得多——在版式张力、材质细节、特殊裁切和整体视觉氛围上，生图模型的上限明显高出一个台阶。
不过，有了好看的 AI 设计稿之后，怎么让 AI 把一张静态图片准确变成可交互的代码？如果直接把设计图丢给普通 Agent 说「照着写出来」，它往往只写个大概相似的骨架，不仅尺寸间距对不上，还经常把图片裁坏或者把模糊的局部直接贴进网页。为此，我专门做了一个负责「AI 生成 UI 设计稿 + 高保真还原代码」的开源 Skill：draw-ui。
无论是从零构思信息密集的数据后台、温暖的杂志感工作台，还是移动端 App 与微信小程序，draw-ui 都会帮我们把这件事拆成严谨的两步来执行：
- 先把页面想清楚，再生成 UI 设计稿：在画图之前，它会先和你确认这个页面的核心业务功能是什么、有没有参考图、有没有不能改动的固定区域（比如保留原有的左侧导航栏），然后组织提示词调用生图能力画出完整的 UI 设计稿（如果是官网或落地页，默认生成从顶部导航到底部页脚的完整纵向长页）。
- 拆分「代码组件」与「独立素材」，测量并对照还原：还原设计稿绝不是把整张图铺成网页背景。
draw-ui会先把页面拆成两部分——页面布局、卡片、文字、按钮、表格用真实前端代码（HTML/CSS、React/Next.js 或微信小程序）实现，而照片、复杂插画、Logo、3D 或特殊质感则拆出来作为独立高清图片素材准备；同时通过程序测量原稿的颜色、尺寸和间距，写完代码后在相同页面宽度下截图并排比对，把区块位置、文字换行和图片裁切校准到位。
平时如果你想挑战更高上限的界面视觉，或者手里已经有一张满意的设计稿/网页截图想还原成代码，直接把 https://github.com/oil-oil/draw-ui 发给你的 Agent 安装即可使用。
5. 用鲜明的个人风格营造「品牌感」：以我的产品矩阵 Logo 为例
除了单个网站内部的统一，我认为好的审美往往来自于鲜明的个人风格，而个人风格持续沉淀下来，就能为你做的一系列产品营造出强烈的「品牌感」。
这里可以用我自己做的一系列产品作为例子。比如我现在维护的 Oil 个人主站、Oil Book、Oil Studio、Oil Find、Oil Git 和 Selector 这 6 款产品，因为每个产品的定位和使用场景不同，它们各自的网页设计风格其实都是不一样的（比如 Oil Book 是暖纸质感的课程网站，Oil Git 是深色极客风格的桌面工具，Oil Find 是清爽利落的效率工具落地页）。
但如果你把这 6 个产品的 Logo 放在一起看，会发现它们的图标全部延续了同一个个人视觉风格：
可以看到，每一个图标都遵循着同一套视觉语言：同一个戴圆框眼镜、头顶三根呆毛的手绘简笔小人 + 一件一眼能看出产品用途的专属道具 + 一种不重复的主题色（Oil Book 戴着暖黄色学士帽、Oil Studio 是珊瑚红录屏取景框、Oil Find 拿着亮蓝色放大镜、Oil Git 与 Selector 则搭配翠绿分支图和蓝紫选框指针）。
这样一来，即便每个产品网站本身的排版和界面风格各不相同，大家只要在任何地方看到这个风格的图标，就能立刻联系到「这也是欧呦做的产品」——这就是通过统一的个人风格符号营造出来的品牌感。