怎么让 AI 写出好看的前端 UI

进阶进行中

你能拿走什么

让 AI 生成一个页面,功能大多没问题,但一打开就知道是 AI 写的——居中的卡片、紫到发蓝的渐变、到处一个样的圆角和阴影。

这篇给你一套四步流程,把 AI 写的 UI 从「一眼 AI 味」拉到「能直接用」。四步是找参考、量化细节、写结构化 Prompt、迭代。文章里还附了一份分好类的设计资源清单,挑参考时照着用就行。

先记住一句话,后面四步都从它展开——AI 没有审美,它不会自己想出好看的界面,只会照着你给的参照物模仿。

前置条件

动手前,先确认这几样东西齐了。

  • 会基本的 HTML 和 CSS,能看懂一段页面结构在做什么
  • 装了 Chrome,后面要用的 CSS Peeper、SnipCSS 都是 Chrome 扩展
  • 至少有一个能用的 AI 工具,v0.dev、Claude、Cursor 任选一个
  • 知道 Tailwind CSS 是什么。现在主流的截图转代码工具几乎都默认输出 Tailwind,不熟也能跟,熟了会顺很多

为什么 AI 默认写出来的 UI 很丑

先说清楚一件事,AI 写 UI 本身已经很能打。截图转代码的流程现在很实用,做原型、落地页、组件复刻,比手写快 5 到 10 倍。问题从来不在它快不快。

问题在「好看」。让 AI 自由发挥一个页面,它给你的几乎是同一个答案——居中的卡片,紫蓝渐变,一圈 12px 圆角,一层淡到几乎看不见的阴影。不丑,可也没有任何记忆点,因为这是它见过上万个页面之后求出来的平均数。

**AI 不创造好看,它模仿。**不给参照物,它只能交平均数;给一个具体的、好看的参照物,它的输出立刻有了方向。

所以「让 AI 写出好看 UI」,真正要做的不是堆形容词。「高级感」「现代」「精致」这类词对它几乎无效——它要的是一个能照着抄的对象,以及这个对象被抄准的细节。

还得先摆正一个预期。AI 第一次生成,通常到不了像素级完美,它是加速器和起点,不是终点,细节打磨和业务逻辑还得人来收尾。后面四步,就是把这个起点尽量往终点推。

第一步:给 AI 一个好看的参照物

既然 AI 靠模仿,第一步就是找到值得被模仿的东西。下面这份清单按用途分了类,挑的时候对号入座。

看整页氛围,用设计灵感站。 还没想好页面长什么样,先去翻灵感。

  • Awwwards——全球获奖网站,审美天花板
  • Dribbble——设计师的 UI 灵感,组件级居多
  • Behance——Adobe 的作品集平台,完整案例多
  • SiteInspire——偏克制、优雅的网站收录
  • Godly——视觉冲击强的大胆设计
  • Lapa Ninja——专收高转化落地页
  • One Page Love——单页网站精选
  • Figma Community——免费 UI Kit 和模板,能直接拿源文件

看交互细节,用真实产品库。

  • Mobbin——收录真实 App 和网站的 UI 模式,想抄某个真实产品的具体流程就来这

直接当骨架,用免费模板。 不想从零开始,拿一套现成的改。

拿现成组件,用组件库。 单个按钮、卡片、动效区块,这些库里有现成的——直接抄,或者拿给 AI 当参照。

  • Aceternity UI——炫动效组件,React + Tailwind,复制即用
  • 21st.dev——社区组件市场,React + Tailwind,跟 shadcn 一个路子
  • React Bits——动画 React 组件集,带 CSS/Tailwind 变体
  • Uiverse——开源 UI 元素库,纯 CSS 和 Tailwind,按钮、卡片、加载器海量

中文资源。

兜底。 GitHub 上能搜到大量开源模板,Figma 还有一个专门的 Web 设计模板页。

挑参考有个判断,新手最容易在这里栽——**别挑最炫的那个,挑跟你项目同类型、而且自己改得动的那个。**做的是 SaaS 后台,却去抄一个获奖的视觉实验网站,AI 能复刻出来,可后面接业务、塞数据时会处处别扭。

第二步:把参照物的细节量化

找到参考之后,你可能想直接截个图丢给 AI,「照这个做」。可以,但结果会停在「大概像」。

为什么只能大概像?因为 AI 读截图是在「看」,不是在「量」。它看得出这是个蓝色按钮、有圆角、带阴影,但那个蓝到底是 #2563EB 还是 #3B82F6,圆角是 6px 还是 8px,内边距是 12px 还是 16px,它在猜。猜出来的结果单看不违和,跟原图叠在一起就处处差几像素。

量化,就是把这些「看出来的」换成「数出来的」,连数值一起喂给 AI。两个 Chrome 扩展够用了。

CSS Peeper 把鼠标移到元素上,直接读出颜色、字体、字号、间距,取设计令牌很快。SnipCSS 则是框选页面上的一个区块,把它真实的 HTML 和 CSS 导出来。

做法不复杂。截图照常截,同时用 CSS Peeper 把关键数值抄下来——HEX 颜色、字号、字重、行高、内外边距、圆角、阴影——截图和这份数值清单一起发给 AI。给得越具体,它猜得越少,第一版就越接近。

第三步:用结构化 Prompt 让 AI 复刻

有了参考图和数值,下一步是把要求对 AI 讲清楚。一句「照这个做一个」太松,AI 会自己补一堆默认值进去。用一个结构化的 Prompt,把要求拆成它能逐条执行的清单。

下面这个模板可以直接复制,很多人就是照着它用的。

text
Act as a world-class frontend engineer specialized in Tailwind CSS and React.
I will provide a screenshot (and optionally extracted styles).
Requirements:
- Extract exact HEX colors, typography (font-size, weight, line-height), spacing (padding, margin, gap), border-radius, shadows, gradients.
- Replicate the exact layout structure (flex/grid).
- Make it pixel-perfect as possible.
- Use Tailwind CSS (or React + Tailwind + shadcn if applicable).
- Make it responsive.
- Add proper hover/focus states and accessibility.
Output clean, production-ready code.

模板之外,还有三个能明显提升还原度的做法。

**先让它提取,再让它生成。**第一轮别急着要代码,先让 AI 从截图里列一份「设计系统」——用了哪些颜色、几级字号、间距是什么节奏。核对这份清单没错,再让它照着清单写代码,等于把「看错」挡在写代码之前。

**大页面拆开生成。**一整页丢进去,AI 容易顾此失彼;拆成 Header、Hero、卡片区、Footer,一块一块来,每块都更准,最后再拼起来。

**想改进就明说。**如果你不要 100% 复刻,只想参考它的风格再做点现代化改进,直接在 Prompt 里写明白,别让 AI 自己猜你想留什么、改什么。

第四步:选对工具迭代

第一版生成出来,几乎不可能一次到位,迭代是必经的。选对工具,能让每一轮迭代少花不少时间。

下面这张表是各工具的真实分工。没有哪个全能,组合起来用才顺手。

工具角色优点要注意
v0.dev生成组件、落地页UI 漂亮,shadcn 集成好,截图支持强,迭代快只做前端,输出偏通用,大页面要拆
screenshot-to-code开源复刻免费,支持 HTML/Tailwind、React 多种栈要自己部署,复杂布局仍要调
Claude / GPT-4o 视觉读截图、提样式理解截图最强,能精确提取颜色和间距依赖写得好的 Prompt
Cursor / WindsurfIDE 里迭代截图和上下文直接喂,迭代手感最舒服学习曲线略高
CSS Peeper提取设计令牌取色、字体、间距都快导不出完整 HTML
SnipCSS导出代码片段能拿到真实 HTML/CSS偶尔样式不全

被推荐最多的做法不是单用某一个工具。真正顺手的是一套组合——用 CSS Peeper 或 SnipCSS 把参考量化,用 Claude 或 v0.dev 的视觉能力出第一版,把代码丢进 Cursor 迭代到能用。提取、生成、迭代,各用最擅长那一环的工具。

迭代轮数有个经验值。截图加数值一起喂进去之后,通常 2 到 4 轮能调到很接近原图——第一轮先看大结构对不对,后面几轮抠间距、补状态、修响应式。

四种实战工作流

上面四步是主线。落到具体场景,社区里跑得比较顺的有四种工作流,看情况对号入座。

工作流一,插件 + 视觉 AI + IDE,最推荐。CSS Peeper 或 SnipCSS 提取颜色、字体、间距,截图传给 Claude 或 v0.dev,用结构化 Prompt 生成 Tailwind 或 React 代码,再丢进 Cursor 继续迭代和整合。前面四步讲的就是这一条,适合大多数情况。

工作流二,纯视觉流。不用插件,截图直接发给 Claude、v0 或 screenshot-to-code,Prompt 里强调 pixel-perfect、提取精确 HEX、匹配字体和间距,迭代两到四轮。快,适合要求没那么严、或者参考本身就简单的页面。

工作流三,设计先行。先用 Google Stitch 或 Figma 把多个页面设计出来,导出之后再让 AI 生成代码,最后用 Claude 或 Cursor 转成生产代码。多了一道设计工序,但 AI 不用自己猜布局,适合页面多、要保持整站一致的项目。

工作流四,竞品复刻流。用 SnipCSS 把目标网站某个区块的真实 HTML/CSS 导出来,直接喂给 AI——「用 Tailwind 重构这个组件,保持视觉一致,把结构优化一下」。适合看中了某个竞品的具体组件,想要一份干净、可维护的版本。

没有现成参照时,怎么定结构和视觉

前面四步默认你手上有一个现成的参照页面,照着复刻。可有时候要做的东西没有单一参照,东拼一点、西改一点。这种时候,得自己先把结构和视觉定下来,再交给 AI。

结构,先定布局骨架。 别碰颜色字体,只决定三件事——页面分成几块、每块怎么排、谁主谁次。落到纸面上就是一张线框图,灰方块加占位文字,标出 Hero 在哪、卡片几栏、侧栏放什么。工具用 Excalidraw、Figma 都行,纸笔也行,或者用 Google Stitch 让 AI 先出几页低保真线框。线框定了,AI 拿到的是确定的布局,只需要填充,不用猜信息架构。

视觉,定一套设计令牌。 把令牌理解成一份固定清单——一个主色,一到两个辅助色,一组中性灰(背景、边框、文字),一种字体配三到四级字号,一套间距刻度(4、8、16、24、32 这种 8 的倍数),再加固定的圆角和阴影值。这份清单有三个来源。最直接的是回到第一步、第二步,从某个参照里提取一套;也可以直接用现成的,比如 Tailwind 默认调色板或 shadcn/ui 主题;或者拿 Figma Community 的 UI Kit。

令牌定好,Prompt 里要跟 AI 说明白,只能用这套颜色和间距,别自己发明新值。「AI 味」有很大一块就来自这里——AI 写每个组件时各自即兴选色,这个灰跟那个灰差一点,这个圆角跟那个圆角差一点,凑到一起就透着不一致。令牌锁死,AI 每次都从同一份清单取值,不一致就消了。

三个实战案例

下面三个例子各走一遍完整流程,看哪个跟你的处境最像。

案例一:复刻一个落地页的 Hero 区

想给一个 AI 工具做落地页,在 Lapa Ninja 上看中了某一屏的 Hero——左边大标题、副标题、一个主按钮,右边一张产品图。

  • 找参考、量化——截图存下,用 CSS Peeper 量出标题 48px、字重 700,按钮圆角 8px,左右两栏间距 64px。
  • 写 Prompt——套第三步的 Prompt 模板,补一句「左右两栏,左 55% 右 45%」,丢给 v0.dev。
  • 迭代——第一版按钮偏大、副标题行高发挤,回 v0 说一句「按钮高度降到 44px,副标题行高 1.6」,两轮就到位。

十几分钟,一个能用的 Hero 区。

案例二:把竞品的定价表搬成自己的组件

竞品那个三档定价表(中间档高亮)做得很清楚,你想要一份结构干净的。这就是工作流四,竞品复刻流。

  • 导出代码——用 SnipCSS 框选竞品的定价区,导出真实的 HTML 和 CSS。
  • 写 Prompt——把代码喂给 Claude,要求「用 Tailwind 加 React 重构这个定价表,视觉保持一致,内联样式换成 Tailwind 类,三档卡片抽成一个可复用组件,数据走 props」。
  • 迭代——第一版高亮档的边框和放大效果丢了,补一句「中间档加 ring-2 和 scale-105」。

导出来那一堆内联样式,就被收拾成了一个能直接接数据的组件。

案例三:从零搭一个后台 dashboard

做数据后台,没有单一参照,Dribbble 上的 dashboard 又炫又不实用——用上一节的做法。

  • 定结构——在 Excalidraw 画一张线框图,左侧导航 240px、顶部一条 bar、主区一行四个指标卡、下面一个大图表加一张表格。
  • 定视觉——不自己配色,直接拿 shadcn/ui 默认主题当令牌。
  • 生成、迭代——把线框描述和「只用 shadcn/ui 默认 token,组件优先用 shadcn 的 Card、Table」一起交给 Cursor;第一版布局对了,只是四个指标卡间距不均,一句「四张卡 gap 统一 16px」就收尾。

框架稳得住,因为布局和令牌都是你定的,AI 只负责填内容。

常见问题速查

做的过程里,大概率会撞上这几个问题,对应的解法如下。

  • 生成的结果不够像——把 Prompt 写得更具体,多迭代几轮,再补几张不同状态的截图(hover、展开、空状态)给它。
  • 间距、对齐总差一点——别再让 AI 猜,用 CSS Peeper 把精确数值抠出来喂进去。
  • 想要更高精度——用 SnipCSS 拿参考的真实 HTML/CSS,让 AI 基于真实代码重构,比对着截图猜准得多。
  • 代码上不了生产——很正常。v0 或 Cursor 出的是界面层,真实数据、状态管理、接口对接还得自己接上。
  • 想去掉「AI 味」——根上的办法是别让 AI 替你做设计决策,先把结构和视觉定下来,AI 只管翻译成代码。

验证方式

做完一版,怎么判断它到底行不行?四个检查动作。

  • 叠图对比——把生成结果截图,和原参考图并排或叠在一起,一眼能看出哪里偏了。
  • 拉响应式——浏览器窗口从宽拖到窄,看布局有没有塌、有没有元素溢出。
  • 过一遍交互状态——hover、focus、disabled、点击态挨个试,AI 经常漏掉默认态以外的样式。
  • 跑可访问性——用 Chrome DevTools 里的 Lighthouse 扫一遍,颜色对比度、语义标签、焦点顺序有没有明显毛病。

这四步都过了,这一版 UI 就可以交给后面的业务逻辑了。

怎么让 AI 写出好看的前端 UI | 资讯狗 | Zixungou