1. 从“拼 UI”到“说 UI”我彻底回不去了先说个背景。我做前端和客户端开发有十年了早年最常干的一件事就是“拼 UI”——拿到设计稿拆图层、量间距、定色值然后在代码里一个组件一个组件地搭。这套流程熟悉到闭着眼都能走但说句实话真的累。不是体力上的累而是那种“明明只是重复劳动却必须全神贯注”的心累。一个按钮的 hover 状态、一个列表的空数据占位、一个弹窗的遮罩层级任何一处漏掉后面测试就要来敲门。自从我把 AI 引入 UI 生产流程之后最大的变化不是“不用写代码了”而是思考方式变了我不再先想“这个界面由哪些标签组成”而是先想“这个界面要解决什么问题、给谁用、长什么样”。剩下的布局、样式、状态处理交给 AI 去生成我来判断对不对、好不好、怎么改。从“拼 UI”变成“说 UI”这个转变让我工作效率至少提升了一倍而且质量比以前更稳定。这篇不是什么理论科普就是我本人踩了大半年坑之后沉淀下来的实战总结。内容包括我怎么选工具、怎么写提示词、怎么把 AI 生成的 UI 接到真实项目里以及那些翻过车才记住的教训。不管你是前端开发、客户端开发还是偶尔要写页面的后端同学应该都能从中找到可以直接抄走的思路。2. AI 生成 UI 的正确姿势不是“一句话出页面”这么简单很多人一上来就以为AI 生成 UI 就是输入“帮我做个登录页”然后嗖的一下出来一个能直接用的页面。实测下来这个想法对了一半。AI 确实能做到“描述即生成”但前提是你得先把几件基础事情想清楚否则生成出来的东西大概率是“看起来像那么回事一用就露馅”。2.1 先分清你的 UI 活属于哪一类我习惯把 UI 相关的工作分成三类因为 AI 在这三类上的表现完全不同第一类是“还原型”也就是照着设计稿写页面。这类工作 AI 的强项是快速产出结构清晰、命名规范的代码但它需要你提供足够的信息比如设计稿截图、配色、间距规范。你给它一张图它能帮你把布局骨架搭个八九不离十细节再人工修。第二类是“创作型”也就是没有设计稿只有需求描述需要 AI 帮你从零想一个界面方案。这类工作最有价值因为 AI 可以快速给出多套布局方案、信息层级建议、交互状态设计帮你把模糊的需求变成可视化的页面。你可以把它当成一个不厌其烦的设计搭档反复讨论和迭代。第三类是“缝补型”比如改一个按钮样式、加一个状态、调某个模块的间距。这类工作量小但频率高AI 的上下文理解能力强你只需要告诉它“把购物车按钮改成圆角胶囊样式主色换成品牌蓝”它就能精准定位到代码并修改。分清这三类之后你才能给 AI 下达正确的指令。很多人失败的原因就是把“创作型”需求当成了“一句话出稿”把“还原型”需求当成了“AI 应该自己会看设计稿”需求错位结果自然不对。2.2 选对工具别让工具成为瓶颈我试过的 AI 辅助 UI 工具不少简单做个分类供参考类型典型代表适合场景我的建议对话式编码助手GitHub Copilot、Cursor、Fitten Code 这类插件在 IDE 里直接生成和修改代码日常主力边写边问效率最高通用大模型对话ChatGPT、Claude、Kimi、豆包这类需求讨论、方案设计、提示词打磨适合前期头脑风暴和生成整体方案图像生成模型Midjourney、Stable Diffusion、即梦这类生成视觉稿、概念图、素材适合“创作型”中的视觉探索阶段UI 专用工具各类 AI 设计工具从文本直接生成可编辑的设计稿适合不会写代码但要做界面的人我的主力组合是“IDE 内的编码助手 通用大模型对话”。比如用 Cursor 写 Vue 组件遇到复杂逻辑时切到通用大模型里讨论方案再把结论带回来让编码助手落地。我自己在 PyCharm 里也装了 Fitten Code 这类插件因为日常还要维护一些 Python 工具链它能根据注释生成代码、解释别人的代码逻辑做 UI 数据层的时候非常好用。这里有个很容易被忽略的点工具不在多而在顺手。你不需要把所有 AI 工具都装一遍找到两个能深度融入你日常流程的就够了。我见过不少同学收藏了一堆 AI 工具结果每天光切换工具就花半小时最后又回到了手写代码的老路。2.3 给 AI 喂足上下文别让它盲猜AI 生成 UI 最大的问题不是“不会写”而是“瞎猜”。你问它“做一个用户列表页”它大概率会默认给你一个表格加搜索框的模板。但你的项目可能需要的是卡片式布局、需要分页、需要行内操作按钮这些它都不知道。所以在动手之前我通常会给 AI 准备一份“项目上下文”包含这几个要素产品定位这是面向 C 端消费者还是 B 端管理后台风格偏活泼还是严肃技术栈React 还是 Vue有没有现成的组件库如 Element Plus、Ant Design设计约束主色、圆角、间距基准、字体体系。哪怕只说一句“参考 Material Design 风格”也比什么都不说要好。功能清单这个页面需要哪些模块模块之间的优先级是什么。把这些信息组织成一段简短的说明AI 的输出质量会提升一个档次。我的经验是上下文写五句话比提示词写得花哨五倍更有用。3. 我实测过的 AI 生成 UI 完整工作流这套流程我用了大半年已经比较稳定。核心思路是先定方案、再出骨架、然后细化组件、最后处理状态和交互。每一步都有 AI 的参与但参与方式不一样。3.1 第一步用对话把需求变成界面方案我一般从需求描述开始比如“做一个工单管理页面运营人员需要查看所有工单的状态、优先级、处理人并且支持筛选和批量操作”。拿这句话去问通用大模型让它给出页面结构建议。一个好的回答会包含页面顶部是统计卡片待处理、处理中、已关闭数量中间是筛选区状态、优先级、时间范围下方是列表最后是批量操作栏。AI 还会告诉你哪些信息应该突出显示、哪些操作用按钮还是下拉菜单。这一步的价值在于你花十分钟就能拿到一个经过专业设计思维打磨的页面信息架构。以前我拿到这种需求得自己先画草图、列模块、排优先级少说也要一小时。现在这个过程被压缩到了几分钟。得到方案之后我会让它输出一个 ASCII 线框图如果你愿意也可以让它生成一份 Markdown 格式的页面结构说明确认层级关系没问题再进入下一步。3.2 第二步让编码助手生成页面骨架方案确认后我把完整的页面结构描述贴到 IDE 的 AI 助手对话框里让它生成一个基础版页面。比如用 Vue 3 Element Plus我的提示词大概长这样用 Vue 3 组合式 API Element Plus 实现一个工单管理页面。页面结构如下 1. 顶部放 3 个统计卡片待处理、处理中、已关闭各自显示数量。 2. 筛选区包括状态下拉框、优先级下拉框、时间范围选择器右侧放“查询”和“重置”按钮。 3. 主体是一个 el-table列包括工单编号、标题、状态、优先级、创建人、创建时间、操作。 4. 操作列包含“查看”和“处理”两个按钮。 5. 底部是分页器支持页码切换和每页条数切换。 请生成完整的单文件组件代码样式使用 scoped间距遵循 Element Plus 默认规范。这段提示词包含了技术栈、页面结构、组件要求、样式约定四个维度的信息。AI 返回的代码虽然不是一次就能直接用但整体完成度能达到七成以上——布局正确、组件用对、事件绑定也合理。剩下的就是细节调整。3.3 第三步组件级微调与状态补全骨架生成之后真正的活才开始。我会逐个模块检查把发现的问题再丢给 AI 解决。典型的微调包括统计卡片需要支持数字动画让 AI 加上过渡效果表格的“状态”列需要根据值显示不同颜色的标签让 AI 用 tag 组件的 type 属性映射操作按钮需要权限控制没有权限时隐藏让 AI 加一段简单的权限判断逻辑空数据时要显示自定义的插图让 AI 处理好 empty 插槽这个阶段我把它叫做“对话式开发”。它不是一次生成就结束而是你一句、AI 一句像和一个熟悉技术的同事结对编程。你提出修改要求它修改代码你再检查再提要求。这个循环通常三到五轮就能把页面打磨到接近可交付的状态。3.4 第四步从视觉稿到代码的逆向生成还有一种常见场景设计同事给了一张视觉稿但切图标注不全、规范文档过期。以前遇到这种我只能凭眼力一像素一像素地量现在可以直接把设计稿截图丢给支持图像理解的大模型让它描述布局和样式再结合编码助手生成代码。这个流程我试过几次效果好的时候非常惊艳AI 能准确读出按钮颜色、字体大小、间距值生成的代码还原度在八成以上。效果不好的时候主要是遇到复杂图形、渐变纹理、特殊字体这些AI 容易“想当然”。我的处理办法是图形素材和渐变背景让 UI 同学切图导出AI 只负责布局和基础样式。人机结合各干各擅长的部分。4. 提示词才是真正的分水岭会写和不会写差距巨大同一个 AI有些人用起来像神有些人用起来像人工智障。差距不在工具的差异而在提示词的写法。写 UI 提示词这件事我总结了一套自己的方法分享出来给大家参考。4.1 一个能用的 UI 提示词包含四个要素我见过最多的失败提示词是那种只有一个短句的比如“帮我把这个页面做好看一点”“生成一个注册页”。AI 不是不想帮你是它实在不知道你心里想的“好看”到底是个什么样。实用的 UI 提示词模板我总结为四段式角色与任务你是资深前端工程师帮我实现某某页面。技术上下文用了什么框架、什么组件库、什么版本规范。结构与功能页面包含哪些模块每个模块的内容和交互是什么。风格与约束用什么配色、什么风格、有哪些不要做的。举个例子你是资深前端工程师使用 React 18 TypeScript Ant Design 5 帮我实现一个数据报表页面。 页面顶部是四个指标卡片今日订单量、今日销售额、退款金额、在线用户数数值需要格式化为千分位。 中间是一个折线图展示最近七天的销售额趋势X 轴显示日期Y 轴自动缩放。 下方是一个表格展示最近 20 条订单记录包括订单号、客户姓名、金额、状态、下单时间。 风格要求简洁商务以白色和浅灰为主主色用 #1677ff不需要暗黑模式代码使用函数组件和 hooks。这种提示词生成出来的代码基本就是可以直接提交的程度。核心原则是你描述得越具体AI 发挥的臆测空间就越小。4.2 用“示例”代替“形容词”想让 AI 理解你的审美最有效的办法不是写形容词而是给示例。你说“现代感强一点”AI 可能理解为无边框极简风你说“参考 Airbnb 的搜索页面风格”AI 就知道该怎么配色、怎么排版。我在项目里维护了一个“风格示例库”里面有几段描述不同风格的文本比如“类似 Notion 的克制型排版”“类似 Stripe 的渐变与圆润感”“类似 Ant Design Pro 的后台风格”。写提示词的时候直接引用这些描述比我自己纠结“科技感”“高级感”靠谱得多。另外一个小技巧如果你手头有满意的历史代码直接告诉 AI“参考我项目里的dashboard.vue这个文件的样式写法”它会从你的代码里提取风格特征而不是凭空创造一套新风格。这一点对保持项目一致性特别重要。4.3 迭代式提问一次到位是奢望三到五轮才算正常我刚开始用 AI 做 UI 的时候总希望一次提示就能生成完美代码结果每次都不满意然后就开始怀疑工具不行。后来想明白一个道理和人协作的时候你也不会只交代一句就让对方把整个页面做完而是边做边确认。对 AI 也是一样。第一轮让它出骨架第二轮让它调样式第三轮让它补交互第四轮让它处理边界状态。每轮只提一个核心诉求AI 的完成度会明显更高。如果你一次提五个修改要求它往往顾此失彼改完一个忘了另一个。我现在的习惯是“小步快跑”一次对话只解决一个具体问题改完立即检查确认没问题再进入下一个。这个习惯让我和 AI 协作的产出稳定性大幅提升也减少了很多无意义的重复修改。5. 实战记录我用 AI 重做了一个设置页面光说理论容易飘拿一个我近期实际做的案例完整走一遍。项目背景是一个企业内部工具的设置页面原本的页面是几年前的旧实现代码风格混乱组件库版本落后样式适配也有问题。需求是“在不改变功能的前提下用新技术栈重写界面按最新的设计规范来”。5.1 先让 AI 做一次“代码体检”我没有急着让它重写而是先把旧页面代码丢给 AI让它分析页面有哪些功能模块、当前使用的是什么组件、代码里有哪些冗余和坑。这一步花了两分钟AI 给出的结论比我预想的全面得多除了我已知的几个问题它还指出旧代码在表单校验上存在逻辑漏洞某个按钮的禁用条件写反了。这个“先分析后动手”的步骤值得多说两句。很多人拿到旧代码就直接让 AI 重写结果新代码可能继承甚至放大旧代码的问题。先让 AI 做一次结构拆解和问题诊断相当于做一个免费的前置审计后面生成的新代码会更有针对性。5.2 按模块逐个生成并验证设置页面一般包含基础信息、账号安全、通知偏好、外观设置等区块。我按照这个结构让 AI 每次只生成一个模块。以“通知偏好”模块为例我的提示词是用 Vue 3 Element Plus 实现通知偏好设置模块。 包括三个开关邮件通知、短信通知、站内信通知。 其中短信通知开关打开时需要显示一个手机号输入框并在下方展示一条说明文字仅支持中国大陆手机号。 再往下是一个多选组选择需要在哪些事件上接收通知可选内容包括任务状态变更、审批通过、审批驳回、系统公告。 最后是“保存设置”按钮点击后先做前端校验短信通知打开时必须填手机号且格式合法校验通过后调用 saveSettings 方法。AI 返回的代码让我很满意不只是把功能实现出来了还主动加了几个我没想到的点开关切换时保留原状态、校验失败时滚动定位到对应表单项、保存成功后弹窗提示。当然这些“主动行为”不一定都对比如滚动定位在某些场景下反而干扰体验但我可以一处处检查、保留合理的、删掉多余的。5.3 让 AI 处理“项目级”的样式一致性页面所有模块都生成完之后还存在一个整理问题AI 分段生成的代码在样式上不一定完全统一。有的模块用了 20px 间距有的用了 24px有的按钮是圆角 4px有的是 6px。我的解决方案是先把页面级的设计规范写成一个常量文件比如间距定义、圆角定义、主色和功能色再让 AI 把所有模块的代码统一引用这套变量。这个过程我一开始手动做了很多轮后来发现可以直接告诉 AI“请检查我生成的所有组件把硬编码的间距、圆角、颜色值全部替换为统一的 scss 变量”它能快速扫描并替换效率极高。整个设置页面从分析到交付大概用了两个小时。放在以前这个量级的工作至少需要一个整天而且大概率还需要 UI 同学反复确认样式细节。6. 常见翻车现场与排查心得AI 做得再顺也避不开翻车。这一节专门整理我在实践中遇到的高频问题每条都是我交了学费换来的。6.1 生成代码中用错了组件 API这是出场率最高的问题。AI 有时候会把 Ant Design 的Button的type属性写成round但实际应该是shaperound或者用错了 Element Plus 的表格事件名导致筛选功能不生效。这类问题不好根除我的对策是在提示词里明确写清楚组件库版本比如“Element Plus 2.6 版本”。生成代码后先让 AI 自查一遍“检查这段代码的组件 API 是否符合所用组件库的官方文档列出所有不匹配的地方并修正。”看起来奇怪的地方去查一下官方文档确认。这个自查步骤能过滤掉一半以上的 API 误用问题强烈建议加入流程。6.2 布局在不同屏幕宽度下直接崩掉AI 生成的页面有一个通病在固定宽度下看起来很正常一缩小窗口就变形。因为它默认按 1440px 宽度来写布局很少主动处理响应式。我的处理办法是在提示词里专门加一句“此页面需要在 1024px 到 1920px 宽度范围内正常显示使用合适的栅格布局或 flex 换行策略避免横向滚动条”。如果页面已经生成了也可以让 AI 检查并补全响应式样式。实测这个提示非常管用加上之后布局崩坏的问题减少明显。6.3 交互状态覆盖不全界面能看、功能能跑但交互状态缺一堆这也是 AI 生成 UI 的老毛病。典型情况包括按钮没有禁用态样式、输入框没有错误态提示、表格行没有 hover 高亮、弹窗没有关闭后的回调处理。对此我的心得是在需求描述阶段就把状态清单列出来告诉 AI“请覆盖 hover、active、disabled、error、empty、loading 这些状态”。如果忘了说也没关系后面检查时发现缺哪个状态单独提一句让 AI 补上即可。关键是你要有“状态齐全”的意识不能拿到能跑的页面就觉得大功告成。6.4 常见问题速查表问题现象主要原因解决方案代码跑不起来、报错组件 API 用错或依赖缺失让 AI 自查 API 文档检查 import 是否完整样式和设计稿差距大缺少视觉规范上下文提供色值、间距、截图参考少用抽象形容词响应式崩坏未声明目标宽度范围提示词里加响应式要求或让 AI 补全 media query页面生成了但交互不完整没列状态清单要求覆盖 hover、disabled、error、loading 等状态组件之间样式不统一多轮生成缺少共享规范定义设计变量常量文件AI 统一替换硬编码值AI 修改一个地方带崩另一处一次给出多个修改诉求一次只提一个修改要求改完验证再继续6.5 一个容易被忽视的坑AI 会在你不注意时“加戏”AI 有个让我又爱又恨的习惯——自作主张加功能。比如你让它生成一个登录表单它可能在页面上塞一个“忘记密码”链接外加一个“注册账号”入口。这些不一定是你想要的。所以我现在的验收流程里多了一步让 AI 列出它“主动添加但未在需求中提到”的内容清单。这个功能看似简单却能避免很多“惊喜”。你可以在生成代码后追加一句“请检查你的输出列出所有超出需求描述范围的内容。”AI 会老老实实告诉你它加了什么你再决定是留下还是删掉。7. 用 AI 拼 UI 的边界哪些活它干不了哪些活你会更值钱用 AI 半年多我对它的能力边界有了比较清醒的认识。它擅长的是“执行”也就是把明确的需求翻译成结构清晰的代码和样式它不擅长的是“判断”尤其是涉及产品感觉、业务逻辑和用户体验取舍的时候。举个例子让 AI 决定“这个页面是放表格还是放卡片列表”它给出的选择可能合理但它不明白你的业务场景里用户每天要处理上百条工单表格的密集排版更适合快速扫描。这种决策还是需要你来判断。AI 可以给你备选方案但你才是那个知道业务诉求和用户习惯的人。正因如此我反而觉得 AI 时代的 UI 开发者不是贬值了而是转型了。以前时间花在“拼组件、调间距”这些执行层面现在这些交给 AI 之后省出来的时间可以用来做更值的思考信息架构合不合理、交互流程顺不顺、边界状态处理全不全、性能表现好不好。这些“人的判断力”恰恰是 AI 最缺乏的。我现在的日常工作流里AI 大概承担了七成左右的 UI 实现工作量省下的时间我用来做代码审查、性能优化和设计评审。这个比例我试过往上调但效果并不好——AI 目前还没有那个能力独立负责一个模块的完整质量。最后说几句实在话从“拼 UI”到“说 UI”本质上是把精力从“怎么实现”转移到了“实现什么”和“为什么这么实现”上。我个人在实际操作中的体会是AI 改变的不是某一个具体工具或某种写法而是整个工作节奏和思维方式。以前一个页面的交付周期是“一天”现在是“半天甚至两小时”但前提是你得掌握跟它打交道的方法。如果你现在还在烦恼“AI 生成的代码没法用”我的建议是先别急着怀疑 AI回去看看自己给它的信息够不够。给它说清楚你要什么、限制什么、风格参考什么它回馈给你的往往超出预期。把这个协作模式练熟之后你会和我一样再也不想回到那个纯手工拼 UI 的时代了。