先讲个真实感受。自从我把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写页面代码，跑通一个环节后再扩到下一个。比一口气换完整套流程要稳得多，也更容易坚持下来。
