1. 从拼界面到说界面一个前端老手的真实转变我做了八年多前端和客户端界面从最早的切图仔时代一路走过来。那时候拿到一张设计稿第一件事是量像素、切图、导出资源然后在编辑器里一层一层地摆控件、调间距、对颜色。一个中等复杂度的页面光是还原就要耗掉大半天改一版设计稿意味着重来一遍。后来组件化、设计系统普及了效率提升不少但本质上还是手拼——你脑子里得先有一棵控件树再手动把它搭出来。真正让我改变工作方式的是这两年 AI 在界面生成上的成熟。现在我的流程变成了把需求描述清楚让 AI 先出一版结构我再在它给的骨架上做精修。标题里那句再也不想拼 UI 了说的不是完全不碰界面而是不再从零手搓控件树。这个转变背后有几个关键点一是 AI 对布局语义的理解已经足够好二是它能直接产出可运行的代码或工程结构三是迭代成本极低——不满意就重新描述而不是手动删了重搭。这篇文章我想聊的不是AI 有多神而是一个真实从业者怎么把 AI 接进自己的界面工作流。我会讲清楚AI 生成界面到底能到什么程度、哪些环节它靠谱、哪些环节必须人来兜底、怎么把设计稿和自然语言喂给它、生成之后怎么落地到真实工程里。适合已经有一定界面开发基础、想提效但不想被 AI 带偏的同行也适合刚入行、想少走弯路的新人。核心关键词就几个AI、UI、PSD、Codex、prefab——这几个词基本覆盖了从设计输入到工程产出的完整链路。先说结论免得你带着错误预期往下读AI 不是替你设计它是替你实现。设计判断、交互逻辑、品牌调性这些仍然得人来定但把判断翻译成结构、把结构翻译成代码这部分 AI 已经能扛下七八成。想清楚这个边界后面的所有技巧才有意义。2. AI 生成界面的能力边界哪些它能干哪些别指望2.1 布局与结构生成这是它最强的地方AI 在界面生成上最稳的能力是把语义化的描述转成合理的布局结构。比如你说一个顶部导航栏左边 logo中间三个菜单项右边一个头像下拉它给出的结构基本不会错——容器怎么嵌套、用什么布局方式、元素之间怎么对齐这些它理解得很到位。原因也不复杂主流界面框架的布局模式高度收敛无非就是弹性布局、网格、绝对定位那几套训练数据里这类模式海量且规律性强。我实测下来对于信息层级清晰、组件类型常见的页面AI 一次生成的结构可用率能到七成以上。什么叫常见列表、卡片、表单、弹窗、标签页、侧边栏这些。什么叫不常见高度定制的可视化、复杂的拖拽交互、带物理动效的转场——这些它给的结构往往只是看起来对实际跑起来一堆问题。这里有个经验描述里带上布局意图比只描述内容效果好得多。你只说一个商品列表它可能给你网格也可能给你单列你说商品列表两列网格每个卡片上方图片下方标题和价格卡片间距 12它给的结构就非常接近成品。多花三十秒把布局说清楚能省掉后面十分钟的返工。2.2 视觉还原颜色和间距是重灾区结构之外视觉细节是 AI 的弱项。颜色它经常差不多但不对——你给个品牌色它可能给你一个相近但色值不同的颜色间距它倾向于用一套它自己觉得和谐的数值而不是你设计稿里的精确值。这不是它笨而是视觉精确还原需要的是查表能力而生成模型擅长的是模式补全两者机制不同。所以我的做法是让 AI 管结构视觉参数我自己接管。生成完之后我会把颜色、字号、间距、圆角这些统一抽成变量对着设计稿逐个校准。这一步不能省省了就是给自己埋雷——上线后设计走查一堆问题返工成本比一开始校准高得多。2.3 交互逻辑能搭骨架细节必须人补交互是另一个分水岭。简单的显隐切换、状态变化、表单校验AI 能写得像模像样但涉及状态机复杂、边界条件多的交互比如多步骤表单的联动校验、列表的虚拟滚动加选中态管理、拖拽排序的落点计算它给的代码往往能跑但经不起推敲。我遇到过生成的代码在正常路径下没问题一到异常路径网络失败、数据为空、快速连点就崩的情况。我的处理原则是AI 生成的交互代码一律当成初稿对待。正常路径跑通只是第一步异常路径、边界条件、性能表现都得自己过一遍。尤其是防抖节流、请求竞态、内存泄漏这些AI 经常忽略必须人工补。2.4 一张表看清能力边界环节AI 可靠度说明布局结构生成高常见组件和布局模式基本一次到位组件拆分中高能拆但粒度未必符合你的工程规范视觉参数还原低颜色间距需人工校准简单交互逻辑中正常路径可用异常路径需补复杂状态管理低容易出竞态和边界问题响应式适配中断点逻辑常需调整无障碍属性低基本不会主动加需人工补这张表是我踩了几个月坑总结出来的你可以直接拿去当预期管理工具。把 AI 用在高可靠度的环节把人力集中在低可靠度的环节整体效率才是正的。3. 把 PSD 和自然语言喂给 AI输入决定输出质量3.1 PSD 到结构化描述先做一次翻译很多人以为可以直接把 PSD 丢给 AI 就完事实测下来效果并不好。原因在于 PSD 是图层堆叠的表达而界面是结构树的表达两者之间隔着一层语义鸿沟。AI 拿到一堆图层很难判断哪些图层属于同一个逻辑组件、哪些是装饰、哪些是状态。我的做法是先人工做一次翻译把 PSD 里的图层按逻辑组件归组标注出每个组件的类型、层级关系、关键尺寸。这一步听起来麻烦但其实很快——一个页面十几分钟就能理清。理清之后再喂给 AI生成质量会有质的提升。具体怎么翻译我一般会产出一份这样的结构化描述页面商品详情页 - 顶部导航栏固定 - 返回按钮左 - 标题文本中居中 - 分享按钮右 - 商品主图区 - 轮播图高度 375圆角 8 - 指示器底部居中 - 商品信息区 - 价格大号品牌色 - 标题两行截断 - 标签行横向排列可换行 - 规格选择区 - 规格组多个每组一个标题加若干选项 - 底部操作栏固定 - 客服、购物车、加入购物车、立即购买这份描述里层级用缩进表达组件类型用括号补充关键约束固定、居中、截断明确写出。AI 拿到这个基本能一次生成对的结构。这比直接丢 PSD 靠谱太多。3.2 自然语言描述的写法具体、有序、带约束如果你手上没有 PSD纯靠自然语言描述那写法就更讲究。我总结了一个三段式模板整体定位这是什么页面、给谁用、核心目标是什么结构清单从上到下、从外到内列出所有区块和组件约束条件尺寸、间距、颜色、交互、适配要求举个例子同样是做个登录页两种描述效果天差地别差的写法帮我做个登录页。好的写法做一个移动端登录页。整体垂直居中顶部是 logo 和欢迎语中间是手机号输入框和验证码输入框带获取验证码按钮60 秒倒计时下方是登录按钮品牌色圆角 8高度 48底部是用户协议勾选和第三方登录入口。输入框聚焦时边框变品牌色按钮在未勾选协议时置灰不可点。第二种描述里每个组件的状态和交互都点到了AI 生成出来的东西基本能直接用。这就是输入决定输出最直观的体现。3.3 用 Codex 类工具做代码级生成说到把描述转成代码Codex 这类代码生成工具是绕不开的。它的价值在于直接产出可运行的工程代码而不是伪代码或结构图。我一般会这样用它先用自然语言或结构化描述生成组件骨架再针对每个组件单独让它补全样式和逻辑最后人工做一轮代码审查和参数校准这里有个关键技巧分而治之别一次性让它生成整个页面。一次性生成大页面它容易在细节上偷懒而且出错后很难定位。拆成组件逐个生成每个组件质量可控组装起来也清晰。另外给 Codex 的提示里最好带上技术栈和规范约束比如用函数组件加 hooks样式用 CSS 变量遵循项目的命名规范。不带这些约束它可能给你一套和你项目风格完全不搭的代码改起来比自己写还累。3.4 输入环节的常见坑坑一描述里混用中英文术语导致歧义。比如卡片和card混着说AI 可能理解成两种东西。统一术语或者第一次出现时标注清楚。坑二省略了显而易见的约束。你觉得按钮肯定要能点是废话但 AI 不一定默认加点击态。该说的都得说。坑三一次给太多页面。信息过载会让 AI 顾此失彼一次一个页面或一个组件最稳。4. 生成之后prefab 化与工程落地的关键动作4.1 为什么要把生成结果 prefab 化在游戏和客户端开发里prefab预制体是复用界面的基本单位。AI 生成的界面如果只是散落的代码或节点复用性很差把它封装成 prefab才能进入正常的工程流程——被多个场景引用、被不同页面组合、被版本管理追踪。我现在的习惯是AI 生成结构后第一件事就是按逻辑边界拆 prefab。一个列表项、一个卡片、一个弹窗各自独立成 prefab。拆的时候遵循一个原则能被独立复用、有明确输入输出的就拆出来。这样后面无论怎么组合都不用重复劳动。拆 prefab 还有个隐性好处它逼你把接口想清楚。一个 prefab 需要哪些外部传入的数据、暴露哪些事件这些在拆的时候就得定下来。定清楚了AI 后续生成的代码也更容易对齐。4.2 从生成代码到工程规范的最后一公里AI 生成的代码和你的工程规范之间永远隔着最后一公里。这公里怎么走决定了你是真提效还是假提效。我的做法是建一套后处理清单命名规范化AI 起的名字往往随意统一改成项目规范样式抽离把硬编码的颜色间距抽成变量或主题 token状态管理对齐AI 可能用局部状态项目要求全局状态的要改异常处理补全空数据、加载失败、超时这些补上无障碍属性补充语义标签、焦点管理、读屏支持性能检查不必要的重渲染、大列表未虚拟化这些排查一遍这套清单我每次都会过一开始觉得繁琐做熟了其实很快。关键是别跳过——跳过任何一项后面都会以 bug 的形式还回来。4.3 版本管理与协作AI 生成内容怎么进仓库AI 生成的内容进版本库有几个现实问题一是来源标注二是审查流程三是责任归属。我的做法是提交信息里注明哪些部分是 AI 生成、哪些是人工修改AI 生成的部分同样走代码审查不因为是 AI 写的就放松标准明确一点AI 是工具提交代码的人对代码负责这三点看着是流程问题其实是团队协作的底线。我见过团队因为AI 生成的没人细看导致线上事故的教训很实在。4.4 一个完整的落地示例假设要做一个设置页我的完整流程是这样的描述输入写出设置页的结构清单和约束结构生成让 AI 生成页面骨架和分组结构prefab 拆分把设置项分组标题开关行拆成独立 prefab样式校准对着设计稿调颜色、间距、字号交互补全开关切换、跳转、二次确认这些补上异常处理加载态、空态、错误态规范对齐命名、状态管理、无障碍审查提交走正常审查流程进仓库这套流程走下来一个中等复杂度的设置页从描述到可提交大概两三个小时。纯手写的话一天起步。效率提升是实打实的但前提是每个环节都不偷懒。5. 踩过的坑与实战心得5.1 坑一过度信任生成结果跳过校准这是我最早踩的坑。刚开始用 AI 生成界面看结构对了就直接用结果上线后设计走查一堆问题——颜色偏了、间距不对、圆角不一致。返工的成本比一开始校准高好几倍。后来我强制自己生成结果一律当草稿视觉参数必须逐个校准。这个习惯救了我很多次。5.2 坑二描述太笼统反复返工做个好看的页面这种描述AI 只能靠猜。猜错了你就得重来来回几次比一开始说清楚还费时间。我现在的原则是宁可描述多花五分钟也不让返工多花五十分钟。描述里把结构、约束、状态都写清楚一次到位的概率高很多。5.3 坑三忽略响应式和适配AI 生成的界面经常是单尺寸思维在它假设的那个尺寸下好看换个屏幕就崩。我现在的做法是生成时就明确要求响应式或者生成后自己补断点逻辑。尤其是移动端和桌面端共用的组件适配必须单独过一遍。5.4 坑四把 AI 当设计用有段时间我偷懒直接让 AI设计界面结果出来的东西千篇一律没有品牌感。后来想明白了AI 是实现的工具不是设计的工具。设计判断、视觉调性、交互创意这些仍然得人来定。AI 负责把你的判断高效落地这个分工不能乱。5.5 几条压箱底的经验建立自己的描述模板库把常用的页面类型列表页、详情页、表单页、设置页的描述模板存下来下次直接改效率翻倍。维护一份AI 常犯错误清单每次遇到 AI 生成的问题就记下来下次生成前主动规避。生成结果先跑通再优化别一上来就追求完美先让结构跑起来再逐步精修。保留人工审查环节无论 AI 多强进仓库前的人工审查不能省这是质量底线。定期回顾生成质量每隔一段时间统计一下 AI 生成内容的可用率看看描述方式有没有改进空间。6. 关于工具选型和心态的几句实在话工具这块Codex 这类代码生成工具适合做代码级产出设计稿解析工具适合做 PSD 到结构的转换两者配合用效果最好。但工具不是关键关键是你的工作流有没有围绕人定方向、AI 做实现这个分工来设计。工具会换分工逻辑不会。心态上我见过两种极端一种是把 AI 当万能神什么都丢给它结果质量失控另一种是抵触 AI觉得它抢饭碗结果效率被同行甩开。这两种都不可取。我的态度是AI 是放大器放大你的判断力也放大你的懒惰。你用得好它让你事半功倍你用得糙它让你返工到怀疑人生。最后说个我自己的体会自从把 AI 接进界面工作流我花在拼上的时间少了大概六成但花在想上的时间多了——想结构怎么拆、接口怎么定、边界怎么处理。这其实是好事因为拼是重复劳动想才是真正的价值所在。AI 把重复劳动接走了人就能腾出手来做更值得做的事。这大概就是标题里那句再也不想拼 UI的真正含义——不是不做了而是把精力放到了更该放的地方。