先讲个真实感受。自从我把AI接进日常开发流程我基本告别了“拼UI”这件事。所谓的拼UI最苦的部分不是写代码而是对着设计稿把一个个按钮、卡片、列表搬到页面上反复调间距、对颜色、抠切图做完一个弹窗还有另一个表单一天下来手指酸痛、脑力清零。现在我已经切成了另一种工作方式让AI先把初稿、视觉方案、可运行的组件代码全部出一轮我站在结果之上做判断、提要求和改细节。这套流程我跑了小半年越用越顺。这篇文章就聊聊我是怎么从“纯手工拼UI”切换到“AI辅助生成人工决策调整”的。内容偏实操适合前端开发、独立开发者、兼职接单的设计师以及所有被重复性UI工作消耗过的人。我会把提示词写法、工具选型、常见翻车点一次讲清楚看完之后你大概率能搭出自己顺手的一套AI优先UI工作流。1. 从“拼UI”到“生成UI”转变的不只是工具先说说为什么拼UI这件事本身就有问题。很多人以为拼UI就是把设计稿还原成网页难度不大只是费时间。但真正做过的人会告诉你费时间只是表象真正磨人的是还原过程里一连串“说不清道不明”的小决策。1.1 传统拼UI的真实成本我早期在团队里做前端最怕接到那种“视觉稿看着特别漂亮”的页面。漂亮意味着细节多卡片阴影、渐变叠加、动态交互、各种尺寸下的表现。当时的工作流大概是这样的设计给一张稿我打开设计软件量尺寸、取色、导出切图然后在编辑器里一点一点照着搭一个页面从早上改到下班都算正常。这里头有几类成本几乎绕不开。第一类是视觉还原的偏差问题。设计稿上8像素的间距放大看可能是8.5像素同一个灰色在不同图层里深浅不一致文字行高差个一两像素整块区域看起来就不对。人眼对UI的敏感度极高差一点就显得“脏”于是只能反复微调一轮、两轮、三轮。第二类是状态与交互的边界问题。设计稿给出来的往往是“理想状态”——点击前长什么样、弹出后长什么样但真实场景里还有加载中、空数据、错误提示、键盘弹出、弱网、长文案等等情况。这些边界UI通常没有设计稿全靠前端自己脑补脑补出来的东西还得再找设计确认确认完又是一轮修改。第三类是响应式适配的返工。桌面端看着不错一缩到平板就错位手机端舒服了回到桌面又显得太空。每追一个断点基本上都是把组件“重新拼一遍”很少有人一开始就按响应式思维来写。还有一类最容易被低估沟通成本。拼UI的产出是“贴合设计稿的页面”价值看起来清晰但实际上一个页面的视觉细节没有几十次来回根本稳定不下来。频繁的“这里不对”“那里差了2像素”“颜色再淡一点”在IM里来回飞真正用来思考产品和交互的时间反而被挤没了。1.2 AI介入之后工作流发生了什么变化我自己的转变不是从“写代码”开始的而是从“提需求”开始的。我发现AI替代的不是我写代码的手而是我对着设计稿“搬砖”的那一整个阶段。AI介入后的流程变成了这样接到需求后我先用对话式大模型把信息架构、核心模块、页面状态梳理出来这会产出第一版页面结构然后我把结构描述丢给图像生成模型让它按指定风格出视觉稿不满意就继续提修改要求直到有大致方向最后再用编程助手把那版视觉稿转成前端代码我来负责工具库选型、组件拆分、状态管理和上线前的打磨。这个过程里AI承担的是“生成候选”的角色我变成“评审决策”的角色。同样是一个页面以前我最早也要到第二天才能看到初步效果现在是十分钟左右就能拿到数版不同风格的初稿直接在里面挑方向或者让AI把几个方案融合一下。这种变化让我感觉自己从“搬运工”变成了“产品经理开发者”的结合体明显更接近这份工作真正有价值的部分。顺带一提这套流程不仅仅适用于网页UI。我做小程序、中后台系统、甚至给硬件设备做的简易控制面板时用的是同一套思路先出结构调整内容再出视觉探索风格最后出代码落地实现。原则没有变变的是每个环节里“人动手”和“AI生成”的比例。2. AI辅助UI的三类核心能力与选型思路普通人一说“用AI做UI”第一反应是让AI直接画一张页面图或者让AI直接写一个页面。但真实工作中AI是分层的不同层级解决不同的问题混在一起用反而容易失望。2.1 三个层面的AI能力拆解我把AI辅助UI的能力分成了三层。第一层是结构层对应对话式大模型。它们擅长理解需求把一段含混的产品描述拆成页面模块、功能清单、交互流程。比如你告诉它“我想做一个面向设计师的作品集官网需要突出个人风格和高质量大图”它能给你梳理出首屏、作品集、经历、联系方式等模块还能建议每个模块放什么内容、采用什么排版。这一层产出的是“骨架”不是视觉。第二层是视觉层对应图像生成模型。这是大多数人最先接触的AI做图能力常见的包括Stable Diffusion生态里的各类模型、Midjourney、Qwen图像模型等。它们负责把文字描述变成可视化的界面效果图。有人习惯直接在Comfy UI里搭工作流配合开源模型做批量出图、局部重绘、风格融合效率和可控性都不错。视觉层的产出是“皮相”也就是配色、字体搭配、间距节奏、氛围感。第三层是实现层对应编程助手。所有基于大模型写代码的工具都算比如GitHub Copilot、Cursor、Fitten Code这类协作插件以及可以直接生成整页代码的对话式工具。它们的作用是把视觉稿或者文字描述变成可以运行的HTML/CSS/前端框架代码。这一层产出的是“血肉”也就是真正能被用起来的实现。这三层不是替代关系而是接力关系。结构层决定了页面该有哪些东西视觉层决定这些东西长什么样实现层决定这些东西怎么跑起来。任何一层单独拿出来都能提高效率但把它们串起来才是那套“不再想拼UI”的完整工作流。2.2 我的选型建议痛点决定优先级工具选型这件事我不太建议一上来就追求“最强工具矩阵”因为你大概率会在折腾工具的过程中耗尽热情。我的建议是先看你每天最痛的那一环在哪里优先解决它。如果你最痛的是“不知道页面该放什么”那就优先用对话式大模型做信息架构把结构梳理清楚如果你最痛的是“设计风格拿不准、反复改稿”那就优先玩视觉生成多探索几个风格方向然后再找设计去精修如果你最痛的是“切图还原编码”那就优先搞定编程助手让它把一部分重复代码写掉。以我自己为例我最痛的是视觉方案因为团队里没有专职视觉设计我作为一个喜欢动手的开发者审美方向一直不太稳。所以我早期花了很多时间在图像生成上刻意让AI出各种风格的方向稿再去对比、融合、提炼。这轮训练之后我对风格的判断力明显上来了和设计沟通时也更有底气。工具矩阵本身我也会固定维护对话模型至少准备两个一个擅长结构化输出一个擅长多轮对话图像模型至少准备一个本地工作流方便批量出图和细节重绘编程助手按编辑器选最顺手的就行不用多。工具不在多在于每一层都能稳定输出。3. 实操流程从需求到UI的五步法说完了理念和选型下面进入真正能抄作业的部分。我自己打磨出来的这套流程一共五步每一步都有产出物每一步都有明确的Review节点不会出现“AI干了一堆活但我不知道从哪下手”的失控感。3.1 第一步用对话式大模型梳理信息架构不管什么类型的UI需求第一步都是先理顺结构。这一步我会用对话式大模型做信息架构梳理。举个例子我接到过一个“智能充电桩状态屏”的需求客户只给了一句很粗的描述“要一个能显示设备状态、支持扫码充电、还能看历史记录的屏幕界面风格不要太科技风要亲民一点。”如果直接做设计大概率会卡在“到底有几屏、每屏放什么、什么优先级高”这些问题上。我把这个需求丢给大模型提示词大概是这样的你是一位资深产品经理和UI信息架构专家。 我要做一个智能充电桩的触屏界面用户是普通市民核心操作是扫码充电、查看状态、查看历史记录。 请你帮我把整个界面拆成页面清单每个页面说明页面用途、主要模块、模块优先级、必须展示的数据项。 风格要求亲民、友好、清晰不要极客科技风。 先不要给我视觉方案先聚焦在信息架构上。大模型给我返回了充电页、设备状态页、历史记录页、帮助页、异常提示页这五类核心页面每个页面还给出了模块优先级和默认展示的数据项。这里最有价值的是它提醒我“异常提示页”要单独设计比如充电中断、枪头未插紧、支付失败这些场景必须占一整屏且有明确引导。这个点在我最初需求里完全没被提到但在真实使用中才是用户最容易抓狂的地方。拿到这份信息架构后我会对照原始需求做一次“删减和排序”把不重要的功能砍掉把用户最频繁操作的模块提到前面然后就可以进入下一步了。3.2 第二步用图像生成模型产出视觉方案结构定了以后我开始让AI出视觉稿。这一步我用的是图像生成模型无论是本地Comfy UI工作流还是云端工具核心都是写清楚“界面结构、排版方式、风格氛围、参考关键词”。仍然拿充电桩屏幕举例。结构确定有几个页面之后我先只做“充电页”因为它是用户操作的核心。我给图像模型的提示词大约长这样设计一个充电桩触屏界面竖屏主要用于扫码充电。 界面顶部显示欢迎语和用户头像中间是一个醒目的扫码引导区域带一个二维码占位框和“扫码充电”主按钮下方显示充电桩编号和当前状态信息。 风格扁平化突出大按钮和清晰引导颜色以白、浅蓝、绿色为主圆角较大字体要大、适合远距离观看。 不要写真实二维码内容用占位符即可。出图之后我不会直接收而是会同一结构让AI出三到四版不同风格的方向稿一版走浅色极简一版走蓝绿渐变科技感一版走卡片厚质感。然后我把候选稿并排放在一起用审美直觉做第一轮淘汰。这个过程里有个技巧不要只盯着一张图“好不好看”而要盯“哪个结构更适合用户操作、哪个风格能在这个场景下长时间观看不疲劳”。选定一个大方向之后我会进入局部微调。比如某版配色太冷就让它“把主色改成暖白按钮变成绿色”某版卡片阴影太重就让它“去掉重阴影改成浅灰描边”。图像模型在局部细节上经常不稳定所以合适的方式是“一次只改一个变量”而不是一次性提五六个要求。3.3 第三步局部迭代与细节打磨到了这个阶段很多人的AI做图体验会突然变差——因为AI出一张“看起来不错”的图很容易但要它稳定产出“细节经得起推敲”的界面非常难。这里我总结了一套局部迭代的方法核心是不改整体只改局部。操作上有两种做法。一种是回到提示词里在保持整体描述不变的情况下把要改的部分单独提出来写成新的要求。比如“背景色调保持不变但把主按钮改成更醒目的橙色并增大按钮圆角”。另一种是直接对现有图片做局部重绘在Comfy UI里把要改的区域抠出来配上修改提示词让它重新生成那一片区域。局部重绘对UI这种边缘清晰的内容效果不错但要注意把重绘区域边缘留一点余量不然会出现很明显的拼接感。这里我必须提醒一个UI特有的坑AI生成的界面上文字经常会变成乱码或错字。因为图像模型本质上是在“画”文字并不是在排版真实文本。应对方法也比较成熟要么在提示词里写明“所有文字都用占位符代替”要么生成后拿到设计软件里把文字图层覆盖成真实文案。我个人的习惯是让AI用占位符然后我自己在设计软件里统一替换这样既保留了对版式的感受又保证了最终文案准确。另一件值得做的细节打磨是字号层级。图像模型生成的界面经常出现“所有文字都差不多大”或者“标题不够突出”的问题。这一块我通常会再提一轮要求“界面中需要至少三个文字层级标题用26号字以上正文用16到18号辅助信息用12到13号请拉开明显对比。”3.4 第四步把视觉方案转成可运行代码视觉稿确定后进入实现阶段。以前这一步是最耗时的切图加编码现在我的方式是分两小步走。先让编程助手基于信息架构和视觉稿直接生成前端代码。我一般会在提示词里交代清楚用什么技术栈比如“用Vue 3加Tailwind CSS实现充电桩充电页”然后把视觉稿的描述和模块结构粘给它让它输出一个单页组件。第一版代码往往在结构上八九不离十间距、配色也都大致符合视觉稿。但一个必须认清的事实是AI生成的代码通常只覆盖“理想状态”也就是设计稿里展示的那一种情况。真实工程里还需要我自己去补加载态、空数据态、错误态和极窄屏适配。所以拿到初版代码后我会先跑起来看一遍视觉效果确认主流程然后立刻进入状态补充和边界处理。在这步里我强烈建议让人工把持组件边界的拆分。AI能帮你写出一个好看的页面但帮你把一个页面拆成可复用、可维护的组件还得靠人去做判断。哪些模块会变、哪些数据来自外部、哪些操作会触发状态变化这些权衡必须由人来做。我见过太多人让AI一次性生成一个巨长的单文件页面初看效果不错等到要加功能时就傻眼了只能推翻重来。3.5 第五步组件化与工程落地最后一步是把页面级代码重构成组件化结构。这步看起来“技术味”很重但其实背后的原则特别简单凡是可能在多个地方出现的UI片段都抽出来。以充电桩充电页为例页面里的“状态信息条”“二维码占位卡片”“主操作按钮”都可能在别的页面复用尤其按钮在扫码确认、支付结果、历史记录等页面都会出现。我会把这些抽成独立组件统一管理样式和交互。这样后面再做新页面时很多组件是现成的AI生成的代码量自然就少了很多我实际要“拼”的也就越来越少。组件化落地之后我会把整套代码和AI跑一遍审查。让编程助手帮我检查一遍有没有重复样式、有没有硬编码的颜色值、有没有遗漏的响应式断点。这些检查类的工作非常适合AI它们不只快而且不会累。但审查结果只能作为参考涉及资产安全的逻辑、涉及用户隐私的数据展示还是要靠人逐条确认。组件化这步还有一个隐性收益有了组件库之后以后再让AI生成新页面我可以在提示词里直接引用“已有组件库中的按钮组件、卡片组件、状态条组件”相当于AI只需要生成结构与组合逻辑视觉风格已经天然统一了。这个收益跑得越久越明显到了后面我甚至可以在不打开设计软件的情况下靠文字描述就把一个新页面的初稿推进到可用的程度。4. 常见问题与避坑指南任何一个工具用久了都会遇到只有实操才懂的坑。AI辅助UI这条路我走得不算短踩过的坑整理成速查表希望能帮你少走点弯路。4.1 AI生成UI的四个通病第一个通病是视觉密度不足。AI默认生成的界面通常很空元素少、留白大像一张概念图不像能真实使用的产品界面。原因在于训练数据里更多是“好看的海报式设计”而不是“信息密集的产品界面”。应对办法是主动在提示词里加入“要显示具体的数据、文本列表、次要信息”或者干脆把自己手头真实的业务数据扔给它参考。第二个通病是文字乱码。前面提过这是图像模型的天然缺陷。规避方式是让它尽量用占位符或者接受文字只是“氛围感”这个事实后期自己手工覆盖真实文案。第三个通病是控件错位。AI生成的界面里按钮和图标经常会歪掉尤其生成复杂表格和表单时容易出现“字段名和输入框对不上”的情况。这种问题在局部重绘时特别常见我的经验是对于表单类界面宁可让它简洁一点也别让它硬填太多字段字段复杂时就靠后期结构化布局去修正。第四个通病是风格不统一。同一套功能里AI出的不同页面可能在配色、圆角、按钮样式上各有各的想法拼在一起像两个团队做的。解决方法是建立“风格锚点”把选定页面的关键参数主色、辅助色、圆角大小、间距体系、按钮高度固化成一段描述之后的每个页面提示词都带上这段描述同时要求“严格保持与参考方案一致”。4.2 工程落地时要注意的细节AI生成的界面代码在“正确性”上通常还行但在“工程规范”上是明显的短板重点关注以下几个方面。第一样式命名混乱。AI经常生成语义不清、重复冗余的CSS类名尤其在纯CSS项目里动不动就出现几百行重复代码。建议让AI输出时统一采用一种预定义的命名规范比如BEM风格并在提示词里强调“不允许重复样式”。第二响应式适配薄弱。AI默认生成的页面只有一个宽度下的状态你一旦调整视口就可能出现挤成一团、横向滚动、元素重叠等情况。我的做法是先让AI生成桌面版本然后把断点要求明确写在提示词里“在小于768像素时改成单列布局按钮宽度撑满”再人工复核边界。第三可访问性缺乏。按钮缺少键盘聚焦样式、图片没有alt文案、对比度不达标这些都是AI生成代码的常客。我一般会让AI把语义化标签、焦点样式、无障碍属性一起写上然后拿自动化工具做一轮扫描再人工抽查标签语义。第四性能隐患。AI生成图片容易体积过大界面编码也容易引入超大体积的依赖。落地前我会统一做图片压缩检查打包体积超标的组件果断手动重写。4.3 提示词正误示范都知道提示词重要但真正见过“错误提示词”和“正确提示词”对比才清楚差在哪。弱提示词的典型写法是“帮我做一个充电桩界面好看一点。”这个提示词的问题在于结构、风格、信息层级全是模糊的AI只能靠猜出来的东西大概率没法用。好一点的写法是“做一个充电桩充电页竖屏顶部是欢迎语中间是扫码区域和主按钮下方是状态信息条。白色背景浅蓝和绿色作为主色大号圆角文字层级要清晰。”这个版本把结构、风格、色彩倾向、排版要求都说了AI才能射到靶子上。再往上一步的写法是带约束和参考“按照我提供的风格锚点使用牌子绿色#12A150作为主色卡片圆角16像素按钮高度48像素。界面结构为顶部欢迎区、中间扫码引导区、底部状态区。文案全部用占位符。”同样的需求三种写法得到的产出差距是巨大的。第一种基本是盲猜第二种能出个方向稿第三种才具备进入后续迭代流程的资格。我现在的习惯是把所有项目的风格锚点整理成模板每次生成新页面时直接复制套用这样后期统一风格的成本会低很多。最后再掏点实际经验这套AI优先的UI工作流我实际跑下来最大的体会不是“省了多少时间”而是“单位时间里能探索的方案数量”变多了。以前一个页面我只能找到一版“看起来还行”的方案就定稿因为重做成本太高现在我可以把三四个方向做成原型甚至让AI把其中两三个风格融合一下再从容做选择。这种探索空间才是AI给UI工作带来的最大红利。另外想多说一句不要指望AI把审美决策也替你做了。AI擅长产出候选但它不懂你的用户也不懂你的业务目标。真正能把UI做得好的仍然是那个清楚“这个页面为什么存在”的人。工具解决的是效率问题而判断力还是得靠自己一点点攒。最后分享一个小技巧如果你刚开始切换到这套工作流别一上来就套用全部流程。挑一个正在做的小页面只把其中一个环节换成AI来做比如只让AI出视觉稿或者只让AI写页面代码跑通一个环节后再扩到下一个。比一口气换完整套流程要稳得多也更容易坚持下来。