1. 从“拼UI”到“说UI”一个前端老手的真实转变“自从有了 AI我就再也不想拼 UI 了”——这句话我第一次在团队群里看到时心里其实是有点抵触的。作为一个写了七八年前端、切过无数张 PSD、跟设计师为了 2px 的间距来回扯皮的人我对“AI 一键生成界面”这件事的态度从最初的怀疑到后来的真香中间隔了大概三个月的高强度实测。今天这篇就当作一次完整复盘把我用 AI 做 UI 的整套思路、踩过的坑、以及那些文档里不会写的细节一次性讲清楚。先说结论免得你看到一半觉得我在灌水AI 并没有让我“不用懂 UI”而是让我从“像素级手工拼装”转向了“结构化描述 精准校验”。以前我的时间 70% 花在调间距、对齐、改颜色、适配响应式上现在这部分被压缩到了 20% 以内剩下的时间我用来思考组件抽象、状态管理、交互逻辑这些真正决定产品质量的东西。这个转变的核心不是某个神奇的工具而是一套“把界面翻译成机器能懂的结构化语言”的方法论。这篇文章适合谁看如果你是被切图折磨的前端、想快速出原型的独立开发者、需要频繁做 demo 的产品经理或者只是好奇 AI 到底能不能替代手工 UI 的人都能从里面找到能直接抄作业的东西。我会从“为什么传统拼 UI 这么累”讲起然后拆解 AI 生成 UI 的几种主流路径再深入到提示词怎么写、生成结果怎么校验、复杂组件怎么处理最后聊聊这套流程在真实项目里的边界在哪里。全程不吹不黑只讲我实际跑通的方案。2. 传统拼 UI 到底累在哪先搞清楚要替代的是什么2.1 手工切图的隐性成本被严重低估很多人以为拼 UI 就是“把设计稿还原成代码”听起来是个纯体力活。但真正做过的人都知道累的不是敲代码而是那些反复确认、反复返工的环节。一张中等复杂度的页面从拿到 PSD 到最终上线中间至少要经历量尺寸、取色值、切图标、写结构、调样式、对响应式、改浏览器兼容、跟设计师确认还原度、根据反馈再改一轮。这里面真正“创造性”的工作可能只占 10%剩下 90% 都是机械劳动。更麻烦的是这些机械劳动还特别容易出错。你手动量的间距设计师用的是 8px 栅格你量出来是 7px肉眼看不出来但到了大屏上就歪了。你取的色值设计师用的是带透明度的叠加色你直接吸了个近似值换个背景就穿帮。这些细节问题在传统流程里几乎无法避免因为人眼和手工操作本身就有精度上限。2.2 设计稿与代码之间的“语义鸿沟”传统流程还有一个根本矛盾设计稿是“视觉描述”代码是“结构描述”两者之间隔着一层语义转换。设计师画一个卡片他脑子里想的是“这是一个信息容器有标题、描述、操作区”但落到 PSD 上就变成了一堆图层矩形、文本、图标、分割线。你拿到这堆图层得自己反推它的语义结构然后决定用 flex 还是 grid、用 div 还是语义化标签、状态怎么管理。这个反推过程极其依赖经验而且没有标准答案。同一个设计稿十个前端能写出十种结构有的优雅有的稀烂。AI 介入的价值恰恰在这里它能帮你完成从“视觉图层”到“语义结构”的初步映射你只需要在这个基础上做修正和优化而不是从零开始。2.3 什么该交给 AI什么必须自己把控这里必须泼一盆冷水不是所有 UI 工作都适合交给 AI。我的经验是结构规整、模式重复、视觉层级清晰的界面AI 生成的成功率极高比如后台管理系统的表格页、表单页、卡片列表、详情页。而强交互、强动效、强品牌调性的界面AI 目前还搞不定比如复杂的拖拽排序、精细的动画曲线、需要像素级还原的品牌官网。所以正确的姿势不是“全交给 AI”而是“分层处理”把机械的、重复的、结构化的部分交给 AI 打底把交互逻辑、动效细节、品牌适配留给自己精修。这样既享受了效率红利又不会因为 AI 的“平均审美”把产品做得千篇一律。3. AI 生成 UI 的三条主流路径与选型逻辑3.1 路径一设计稿转代码PSD/Figma to Code这是最直观的一条路你有一张设计稿丢给 AI它直接吐出 HTML/CSS 或者组件代码。目前这类工具的核心原理是“视觉识别 布局推断 代码生成”三段式。第一步识别出图上有哪些元素文本、按钮、图片、容器第二步推断它们的层级关系和布局方式谁包含谁、是横排还是竖排、间距多少第三步生成对应的代码。我实测下来这条路对静态页面效果最好尤其是那种规整的、栅格化的设计稿。但有几个坑必须提前知道第一AI 对“留白”的理解经常出问题它容易把设计稿里的呼吸空间压缩掉生成出来的界面偏挤第二它对“响应式”的处理基本是套模板你得手动补媒体查询第三图标和图片它通常用占位符代替需要你自己替换。提示用这条路时尽量给 AI 提供带图层命名规范的设计稿。图层叫“btn-primary”和叫“矩形 23”生成质量天差地别。命名本身就是一种语义信息AI 能读懂。3.2 路径二自然语言描述生成Prompt to UI这条路更激进你连设计稿都不用画直接用文字描述你要什么界面AI 给你生成出来。比如你说“一个深色主题的数据看板顶部有四个指标卡中间一个折线图底部一个可排序的表格”它就能给你搭出一个可运行的页面。这条路的价值在于极速原型。产品经理上午有个想法中午就能看到能点的 demo下午就能拿去开会讨论。但它的局限也很明显生成结果高度依赖提示词的精确度你描述得模糊它就给你一个“平均审美”的通用界面。而且它生成的代码往往结构比较粗糙适合做原型不适合直接上生产。我个人的用法是用这条路做“结构探索”。同一个需求我换几种描述方式生成三四个版本对比它们的布局思路挑一个最合理的作为基础再手工精修。这比对着空白编辑器发呆效率高太多了。3.3 路径三组件库 AI 补全Codex 类工具辅助第三条路最“工程化”你已经有了一套组件库比如 Ant Design、Element Plus、或者自研的AI 不负责从零生成而是帮你“组装”和“补全”。你写一个组件的开头它帮你补完剩下的 props 和事件你描述一个业务场景它帮你从组件库里挑合适的组件拼起来。这条路对已有项目最友好因为生成结果天然符合你的技术栈和设计规范不需要大量改造。Codex 这类工具在这方面的表现尤其突出它能理解你项目里的组件命名习惯和目录结构补全的代码风格跟你手写的几乎一致。但前提是你得把项目上下文喂给它让它“看懂”你的组件库。路径适用场景生成质量改造成本我的推荐指数设计稿转代码有完整设计稿的静态页高规整页面中四星自然语言生成快速原型、结构探索中高三星组件库AI补全已有项目的日常开发高贴合规范低五星选型逻辑其实很简单看你手上有什么。有设计稿就走第一条没设计稿但有想法就走第二条已经有项目在跑就走第三条。三条路不互斥我经常在同一个项目里混着用。4. 提示词才是新的“切图刀”怎么写才能生成能用的界面4.1 把界面拆成“结构 内容 样式”三层来描述很多人用 AI 生成 UI 失败根本原因是提示词写得太“人话”了。你说“做一个好看的登录页”AI 只能给你一个它认为“好看”的通用模板。正确的做法是把界面拆成三层来描述结构层页面由哪些区块组成区块之间什么关系。比如“垂直排列的三个区块顶部 logo 区、中部表单区、底部辅助链接区”。内容层每个区块里有什么元素元素的文案和类型。比如“表单区包含两个输入框用户名、密码和一个主按钮登录”。样式层颜色、间距、圆角、字体这些视觉参数。比如“主色 #2563eb输入框高度 40px圆角 6px区块间距 24px”。这三层写清楚AI 生成的结果可用度能提升一大截。我实测过同样一个登录页模糊描述生成的结果我改了 40 分钟三层描述生成的结果我只改了 8 分钟。4.2 用“约束条件”代替“形容词”这是我最想强调的一点AI 对形容词的理解极不稳定对约束条件的执行却相当可靠。你说“简洁大气”它不知道什么叫简洁大气但你说“最多使用两种颜色、间距统一为 8 的倍数、不使用阴影”它就能严格执行。所以写提示词时尽量把主观感受翻译成客观约束。下面这张对照表是我总结的常用翻译你想表达别这么说这么说简洁简洁大气最多两种主色无渐变无阴影紧凑紧凑一点区块间距 12px行高 1.4高级感高级感深色背景 #0f172a文字 #e2e8f0细边框 1px圆润圆润可爱圆角 12px按钮圆角 20px层次分明有层次用背景色深浅区分层级卡片背景比页面背景亮 5%4.3 迭代式提示一次只改一个变量新手最容易犯的错是一次性把需求全塞进去生成结果不满意就推翻重来。正确的做法是迭代式提示先生成一个基础版本然后每次只改一个变量观察变化。比如第一轮生成一个基础卡片列表第二轮只说“把卡片间距从 16px 改成 24px”第三轮只说“给卡片加一个 hover 时上浮 2px 的效果”。这样你始终知道是哪个变量导致了哪个变化出了问题也好定位。一次性全改的话你根本不知道是哪个改动把布局搞崩的。注意迭代过程中一定要保留每一版的代码。AI 有时候“改着改着就改坏了”你得能回退到上一个可用版本。我习惯每轮生成后 git commit 一次虽然听起来有点重但真的能救命。5. 生成结果不能直接用校验与精修的完整链路5.1 第一遍校验结构合理性AI 生成的代码第一眼不要看样式先看结构。打开开发者工具看 DOM 树是不是符合你的预期。常见问题包括该用语义化标签的地方用了 div、该嵌套的结构被拍平了、该复用的组件被复制粘贴了多份。结构问题必须优先修因为样式是挂在结构上的结构不对样式怎么调都是歪的。我一般会花 5 到 10 分钟专门做结构梳理把重复的结构抽成组件把不合理的嵌套拆开把语义化标签补上。这一步做完后面的样式调整会顺畅很多。5.2 第二遍校验响应式断点AI 生成的响应式代码说实话大部分是“能跑但不好用”。它通常只会给你一个简单的媒体查询把多列变单列但不会处理那些真正麻烦的情况文字换行后的高度变化、图片在不同宽度下的裁切方式、导航栏在窄屏下的折叠逻辑。我的做法是把 AI 生成的响应式代码当作“初稿”然后自己在几个关键断点320px、768px、1024px、1440px上逐一检查手动补那些它没考虑到的细节。这个过程没法完全自动化但比从零写要快得多。5.3 第三遍校验交互状态与边界情况这是最容易被忽略的一步。AI 生成的界面通常是“静态完美”的但一交互就露馅按钮的 hover 态没写、输入框的 focus 态是浏览器默认的、加载态和空态完全没考虑、超长文本直接把布局撑爆。我的检查清单是这样的所有可点击元素是否有 hover / active / focus 态所有异步数据区域是否有 loading / empty / error 态所有文本容器是否处理了超长省略所有图片是否处理了加载失败的情况所有表单是否处理了校验错误提示这份清单过一遍基本能把 AI 生成结果的“毛刺”磨平。5.4 精修阶段把 AI 的“平均审美”改成“你的审美”AI 生成的东西有个通病它总是往“平均审美”上靠配色安全、间距保守、圆角适中看起来不难看但也没有记忆点。精修阶段的核心任务就是注入你自己的设计语言。我的做法是维护一份“设计 token 表”把品牌色、字体、圆角、阴影、间距这些基础变量固定下来AI 生成后统一替换成我的 token。这样既保留了 AI 的效率又保证了视觉一致性。这份 token 表我建议每个团队都维护一份它是 AI 生成 UI 能落地的前提。6. 复杂组件的处理AI 搞不定的部分怎么办6.1 数据表格AI 能搭骨架逻辑得自己填数据表格是后台系统里最常见的复杂组件也是 AI 生成结果“看起来能用、一用就崩”的重灾区。AI 能帮你把表头、行、列、分页器的结构搭出来但排序逻辑、筛选逻辑、列宽拖拽、固定列、虚拟滚动这些它基本只能给个占位实现。我的策略是用 AI 生成表格的视觉骨架然后接入成熟的表格组件库。比如你项目里用的是 Ant Design 的 Table就让 AI 生成一个符合你数据结构的 columns 配置和 dataSource 示例剩下的排序筛选分页全部交给组件库处理。这样既省了搭骨架的时间又不用自己实现复杂逻辑。6.2 表单校验规则是 AI 的盲区表单看起来简单其实坑最多。AI 能帮你把输入框、标签、按钮排好但表单校验规则它经常写得似是而非必填校验漏了 trim、邮箱正则写错、异步校验没做防抖、错误提示的位置和时机不对。我的经验是表单的结构交给 AI校验逻辑自己写。而且校验逻辑最好抽成独立的 schema比如用 Zod 或 Yup跟 UI 解耦。这样 AI 生成的 UI 换了校验逻辑不用动校验规则改了UI 也不用重生成。6.3 图表与可视化描述清楚数据维度再动手图表这块AI 生成的质量波动很大。你只说“一个折线图”它给你一个最基础的版本但你说“一个展示过去 30 天日活趋势的折线图X 轴是日期Y 轴是用户数需要显示数据点、平滑曲线、渐变填充、hover 显示具体数值”它生成的结果就专业多了。关键是把数据维度和交互需求描述清楚。数据维度包括有几个系列、X 轴是什么、Y 轴是什么、数据量级大概多少。交互需求包括要不要 tooltip、要不要缩放、要不要图例切换。这些说清楚了AI 生成的图表配置基本能直接用。6.4 动效与过渡AI 给不了“手感”动效是 AI 目前最薄弱的环节。它能给你写 transition 和 keyframes但写出来的动效往往“机械感”很重缺少那种恰到好处的缓动和节奏。我的建议是动效不要交给 AI 生成而是自己调。AI 可以帮你把动效的“壳”搭好比如元素怎么位移、透明度怎么变但缓动曲线、持续时间、延迟这些参数必须自己反复试。一个实用技巧把常用的缓动曲线存成 CSS 变量比如--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1)AI 生成动效后统一替换成你的曲线手感立刻就不一样了。7. 实测中的意外与避坑那些文档不会告诉你的事7.1 AI 会“自作主张”加东西这是我最常遇到的问题你只要一个简单的卡片它给你加上了阴影、渐变、图标、动画理由是“这样更好看”。结果就是生成结果比你想要的复杂得多你还得花时间删。应对方法是在提示词里明确加“禁止项”。比如“不要添加任何阴影和渐变”“不要使用图标”“不要添加动画”。把禁止项写清楚比事后删要高效得多。7.2 生成代码的“隐性依赖”AI 生成的代码有时候会引用一些你没装的库或者用一些你项目里没有的全局样式。比如它可能用了 Tailwind 的类名但你项目是普通 CSS或者它引了一个图标库但你根本没装。我的习惯是生成后先全局搜一遍 import 和 class 名确认所有依赖都是项目里已有的。有缺失的要么补装要么让 AI 换成项目里已有的方案。这一步花不了几分钟但能避免一堆“跑不起来”的问题。7.3 上下文丢失导致的“风格漂移”用 Codex 这类工具时如果你不持续提供项目上下文它生成到后面会“忘记”前面的风格开始用不同的命名习惯、不同的样式方案。结果就是同一个页面里前半部分和后半部分像两个人写的。解决办法是每次生成前把相关的组件代码、样式变量、目录结构作为上下文一起喂给它。虽然麻烦一点但能保证风格一致。我一般会把项目的“风格指南”写成一个 markdown 文件每次生成时附上效果立竿见影。7.4 别让 AI 碰“有历史包袱”的代码如果你要改的是一个有几年历史的老页面里面充满了 hack 和特殊处理千万别直接让 AI 生成替换代码。它不理解那些 hack 存在的原因生成的新代码很可能把之前修过的 bug 又带回来。这种情况我的做法是让 AI 只生成“新增部分”老代码保持不动新老之间用清晰的边界隔开。等新增部分稳定了再考虑逐步重构老代码。8. 这套流程在真实项目里的边界与我的个人体会说了这么多最后聊聊边界。AI 生成 UI 不是银弹它在几个场景下会明显力不从心一是需要像素级还原品牌规范的项目AI 的“平均审美”跟品牌调性经常打架二是交互极其复杂的工具类产品比如在线设计工具、代码编辑器AI 生成的界面根本承载不了那些交互三是需要严格无障碍支持的项目AI 生成的代码在 ARIA 标签、键盘导航这些方面基本是空白。但反过来说在后台系统、内部工具、原型验证、营销落地页这些场景AI 生成 UI 的效率提升是实打实的。我现在的日常是新页面先用 AI 生成一版能跑的然后花 20% 的时间精修整体效率比纯手工高了大概三倍。省下来的时间我用来打磨那些真正影响用户体验的细节而不是跟间距和色值较劲。一个很实在的建议别把 AI 当替代品把它当“初级搭档”。它手快、不知疲倦、能瞬间给你一版草稿但它不懂业务、不懂品牌、不懂用户。你的价值在于判断力——判断它生成的东西哪里对、哪里不对、哪里需要改。这个判断力才是 AI 时代 UI 从业者真正的护城河。我踩过最大的一个坑是早期太信任 AI 的生成结果直接拿去上线结果在一个边界情况下布局崩了被用户截图吐槽。从那以后我就定了个规矩AI 生成的任何界面必须过一遍我的校验清单才能进代码库。这个规矩看起来降低了效率实际上避免的返工时间远超那点校验成本。工具再强最后拍板的还得是人。