1. 为什么生成UI会分成两条完全不同的路子最近在很多开发团队里都能听到类似的争论AI 都能直接生成 UI 了为什么我们还要维护组件库、搭模板、写配置有人把 Vercel 的 v0、bolt.new 的生成界面甩到群里几秒钟出一个完整页面看起来确实惊艳。可真把 AI 自由生成的界面放进生产环境跑两周问题就全冒出来了——样式不统一、交互逻辑随机、无障碍属性缺失、代码没人敢动。另一边那些坚持用配置模板渲染的团队又总被业务方抱怨做个落地页还要排期。这两拨人其实都没错只是他们在讨论的根本不是同一件事。先说结论自由生成和配置模板渲染不是同一个问题的两个解法而是两个完全不同的问题的解法。自由生成解决的是从无到有的探索效率配置模板渲染解决的是从有到稳的控制成本。选哪条路线取决于你的产品处在哪个阶段、界面承担什么角色、团队能接受多大的不确定性。这篇文章我想把这两条路线的底层逻辑拆开讲清楚各自适合什么场景、成本藏在哪儿、以及怎么用一套判断框架做选型。最后会聊聊我实际践行的混合路线因为大多数产品最终都会走到先自由探索、后模板固化这条路上去。1.1 从一句话出一个页面说起很多人对 AI 生成 UI 的第一印象来自这类动图输入做一个 SaaS 数据分析的 Dashboard左边侧边栏中间图表区深色主题几秒钟后一个漂亮的页面就出来了。自由生成路线的基本流程是你把需求用自然语言描述清楚大模型理解后直接输出前端代码——一般是 HTML、CSS、Tailwind 或者 React 组件代码——有些工具甚至直接给你一个可预览的链接。它模仿的是设计师的工作方式给定一个抽象需求人脑快速想象出一个具体的视觉与布局方案。这套逻辑的优势写在了明面上没有边界。没有预设组件、没有模板字段、没有系统不支持这个布局。你想要任何形式的页面它都能给你画出来。再加上对话式修改——把图表换成卡片按钮改成圆角密度调高一点——整个低保真探索过程被压缩到了分钟级。但问题恰恰也出在没有边界上。你让 AI 自由生成十个版本的页面它给你十个不同风格的页面你让 AI 修改一个按钮颜色它可能连整体的阴影、圆角、间距一起改了。这种随机性在探索阶段是灵感在交付阶段是灾难。1.2 一个容易忽略的前提UI 的生成发生在哪一层要理解两条路线的本质差异得先搞清楚一个问题UI 的生成发生在什么层级自由生成发生在代码层。AI 直接生成的是浏览器最终运行的那套标记和样式没有中间层没有结构化描述。页面长什么样、交互怎么走全部硬编码在生成的代码里。你要改页面只能改代码或者让 AI 重新生成一段新代码。配置模板渲染发生在数据层。页面长什么样由一个 JSON 或 Schema 来描述运行时由渲染引擎把这个配置翻译成真实的 UI。组件是预先封装好的交互是预先定义好的配置只负责控制显示哪个组件、传什么参数、按什么顺序排列。这两条路线的差异根源就在这个层的选择上。代码层直出效率高但不可控数据层中间多了一层牺牲一定自由度换来了规则和管理能力。这也是为什么很多人在做选型时容易混淆他们拿配置模板渲染的不够自由去对比自由生成的生产效率却忽略了自己项目的核心诉求到底是快速出活还是长期可控。搞清楚这个问题选型的方向就清楚了一大半。2. 自由生成效果上限高但自由的另一面是失控2.1 自由生成到底是怎么工作的自由生成工具的底层逻辑本质上还是大模型生成代码。你可能觉得这不稀奇但这里有个值得琢磨的技术细节它生成的不只是能看的页面而是可以直接进入工程体系的代码资产。拿 v0 举例它背后用了 React Tailwind CSS shadcn/ui 这套现代前端技术栈。生成出来的代码是模块化的、可以直接复用的组件代码而不是一张写死的图片。这意味着你在探索阶段产出的东西理论上可以直接组装进真实应用。再比如 screenshot-to-code 这种工具直接把设计稿图片变成 HTML/CSS 代码。它的本质同样是代码生成只不过输入从自然语言变成了图像。这里要补充一个重要认知自由生成的价值不在于生成而在于快速逼近目标。你描述需求→得到页面→提出修改→再得到新页面这个反馈循环的速度才是它真正的杀手锏。传统方式下一个交互视觉方案从脑暴到可评审的稿子需要 1-2 天AI 自由生成把这个过程压缩到了 10 分钟。探索的边际成本趋近于零你可以放心大胆地试错。2.2 自由生成适合的现场高探索、低复用那自由生成适合用在什么场景我的经验是高探索、低复用的场景尤其适合自由生成。举几个具体的例子第一个用户落地页、营销活动页、产品介绍页。这类页面追求视觉冲击力和独特性没有严格的组件规范约束而且基本是一次性使用不需要跨页面复用。让 AI 从空白画布开始自由发挥效率极高。第二个产品早期的概念验证PoC。你想验证这个产品形态有没有人用需要先快速做一个有视觉质感的 Demo 去跟投资人、早期用户沟通。这时候连业务逻辑都不稳定更别说沉淀设计系统。自由生成模式可以让你在一周内做出三个完全不同风格的 Demo 出去测试市场反应。第三个设计灵感探索。设计师拿草稿让 AI 快速生成多种视觉风格进行对比拓宽设计思路。这种开放性生成本身就是在做探索自由生成在机制上和这个场景天然匹配。在这些场景里自由生成的随机性反而是优点。因为你要的就是多样化地发散、快速地看效果你不需要每一次生成结果都严格一致。2.3 绕不开的三笔账一致性、可维护性、可测试性但自由生成的账迟早要还。还的方式就是下面这三笔。一笔是一致性账。AI 生成的组件是独立的、没有一个统一的视觉规范在背后约束它。同一个按钮在 A 页面是蓝色圆角在 B 页面可能就是深蓝直角。哪怕你明确要求统一风格模型也只能在一个有限的上下文窗口里保持一致。当你的产品扩展到几十个页面时靠自然语言约束的一致性必然会崩溃。一笔是可维护性账。AI 生成的代码质量参差不齐。这次生成的组件用了 Tailwind 的 flex下次可能用了 grid这次状态管理写的是 useState下次可能直接甩个全局变量。当你需要在这个代码基础上迭代时你会发现团队改 AI 生成的代码跟改别人写的祖传代码一样痛苦。而且更麻烦的是很多人让 AI 生成代码之后从不做代码审查直接提交生产。还有一笔是可测试性账。自由生成出来的 UI没有对应的自动化测试和可预期的渲染结果。UI 自动化测试需要有稳定的 DOM 结构和定位方式自由生成的代码在多次修改后结构可能每次都不同测试脚本的价值大打折扣。这一点在后面做混合路线时特别重要——你最终会需要把自由生成的可视结果收敛成一套可测试的稳定结构。前面提到热搜词里有人问前端和 UI 区别其实放在这里正好能说明问题自由生成的页面是UI是一眼看得到的视觉层但把它变成前端变成可持续维护、可测试、可扩展的工程资产中间的鸿沟需要人或者配置体系来补。3. 配置模板渲染把 UI 变成结构化数据把变化收敛到配置层3.1 渲染引擎 Schema模板渲染的最小构成配置模板渲染这条路线听起来技术味很重其实就是日常大家熟悉的后台界面配置化和低代码渲染本质都是这个思路。它的核心构成只有两块**一份 Schema结构描述用 JSON 或 YAML 描述页面里有哪些组件、每个组件的位置、属性、数据来源、交互行为。它是UI 的数据化表达。一个渲染引擎Runner读这份 Schema按规则实例化真实的组件接管事件交互处理数据绑定最终把 UI翻译到界面上。渲染引擎加上一套成熟的组件库就是模板渲染的最小闭环。现实里的实现很多开源的Amis百度出品JSON 配置生成后台页面、国外的JSON Forms专攻表单渲染、FormlyAngular 生态、还有各种基于 headless UI 库自研的 Schema 渲染器。前端热词里提到的Element UI就常常作为这类渲染器背后的组件底座——配置描述这个位置放一个 el-input渲染器就去实例化一个 Element UI 的输入框并绑上事件和数据。这套机制能把 UI 的变化全部数据化产品经理改页面不用改代码直接改配置服务端下发一个新配置前端立刻渲染出新界面。配置即界面这就是模板渲染和自由生成在层上最本质的分叉。3.2 一个能用起来的最小配置例子光说不练没用我给你一个最小可运行的配置模板渲染例子你一看就懂。假设我用 Amis 来渲染一个带搜索框和表格的简单页面配置长这样{ type: page, title: 订单管理, body: [ { type: form, body: [ { type: input-text, name: keyword, label: 关键词, placeholder: 输入订单号 }, { type: button, label: 搜索, actionType: reload, target: orderTable } ] }, { type: table, name: orderTable, source: { method: get, url: /api/orders?keyword${keyword} }, columns: [ { name: order_no, label: 订单号 }, { name: amount, label: 金额 }, { name: status, label: 状态 } ] } ] }这份 JSON 描述了一个完整页面一个输入框、一个按钮、一个绑定远程数据源的表格。渲染引擎拿到它就会在界面上渲染出对应的真实组件并且自动处理搜索、刷新、数据请求这些逻辑。这就是配置模板渲染的缩影。你会发现页面是什么组件堆出来的、数据从哪来、交互怎么走全部变成了可验证、可比对、可版本控制的配置。同一份配置放在测试环境和生产环境渲染出来的 UI 结构完全一致。这给 UI 自动化测试带来的好处是直接的——DOM 结构稳定测试脚本就有稳定的锚点。3.3 配置模板不是做不了复杂交互而是把复杂拆成可控很多人一听到配置模板第一反应是那只能做做后台管理系统这种规规矩矩的页面吧。这其实是一个误区。配置模板渲染的真正优势不在于只能做简单 UI而在于它能通过分层组合把复杂交互也变成可配置的复杂。拿一个常见的自定义工作流页面来举例。里面有动态表单、步骤条、分支条件、懒加载区、上下文的级联联动——这些交互逻辑如果用传统前端硬编码改一次需求动一次代码。但用配置模板渲染你可以做三件事把复杂组件封装成可配置组件条件分支组件、步骤条组件、流程连接线组件这些在渲染引擎里注册好后配置层只用写type: flow-step加几个属性就能用。把页面拆成可嵌套的子配置配置可以互相引用、嵌套一个大的复杂页面可以拆成多个子 Schema分团队维护最终由一个聚合 Schema 组合渲染。把交互状态变成可配置的数据流组件与组件之间的联动选择省份后动态加载城市数据在模板渲染里通常通过事件编排和数据源绑定实现逻辑清晰、可测试不复用全局变量和隐式依赖。所以配置模板渲染限制不了你的想象力它只是把想象的代价前置了你需要提前定义好组件边界和交互协议之后所有的变化都只在配置数据里流动。自由生成是每次都能画一张新画配置模板是把笔画和规则定义好之后每次只改写的字。4. 我的选型判断框架四个问题直接定方向现在进入最实操的部分。落到具体项目时到底应该怎么选我看了很多团队在这个问题上反复摇摆本质原因都是凭感觉在投票。我自己总结了一套判断框架用四个问题来定方向每个问题都指向一个不可回避的技术现实。4.1 这页 UI 是给用户看还是给流程用第一问题判断界面的本质属性。如果这页 UI 的核心价值是看——视觉冲击力、品牌氛围、IP 形象、情感共鸣——比如营销落地页、品牌官网、新品发布会页面那自由生成是首选。因为它追求的是不可复制的独特性每页都可以长得不一样这正是自由生成的优势区。如果这页 UI 的核心价值是用——完成任务、填写信息、查看数据、审批流转——比如后台管理系统、中后台工作台、数据报表、配置面板那配置模板渲染就更合适。这类界面用户要的是效率、稳定、可预期而不是视觉新奇。用户每天都在点同一个按钮按钮的位置至少得固定。我把这叫做展示型页面 vs 操作型页面的识别。很多项目纠结选型其实是一个系统里同时存在两种页面有展示型的官网也有操作型的后台。不要试图一条路线通吃分开处理是最高效的。4.2 你的界面改版频率有多高第二个问题评估界面变化的节奏。如果这个 UI 一个月改一次版或者每次营销活动都要全新换皮自由生成是划算的。因为它省掉了维护设计规范的成本每次都从零开始生成快且不需要考虑旧资产的兼容性。如果这个 UI 每周甚至每天都有微小调整——加一个字段、调一个排序、增加一种流程状态——那配置模板渲染的价值就展现出来了。改配置的边际成本远低于改代码更低于是重新让 AI 生成一遍代码。改配置还天然带审计日志——你永远知道这个字段是什么时候、被谁改过来的。这在合规严格的企业内部系统里是硬性需求。判断标准就一条你的 UI 是一次性的还是持续演进的一次性的走自由生成持续演进的走模板渲染。4.3 团队能不能兜住不确定性第三个问题最容易被忽视却往往决定成败团队的工程能力和风险偏好。自由生成路线的最大隐性成本是不确定性。AI 生成的代码你无法预测它的结构、它的依赖、它的边界行为。团队里必须有人具备能力去审查、修正、兜底——如果没有人能真正理解 AI 生成这段代码的含义并且能在它出错时把它改对那么初期的效率红利会在后期被技术债连本带利地吞掉。相比之下配置模板渲染的不确定性很低。配置是结构化数据有 Schema 校验有组件库的能力边界约束。组件库本身是开发团队一行行写出来的渲染行为是可预期的。哪怕出问题排查范围也固定在配置对错或者组件 Bug这两个象限里不会出现为什么 AI 生成了一百行我看不懂的烂代码这种灾难。所以团队里有没有人能兜住 AI 生成代码的不确定性直接决定了你有没有资格享受自由生成的效率红利。4.4 上游数据模型是否稳定第四个问题看向依赖的数据层。做配置模板渲染的前置条件是你至少能大致描述出数据模型——订单有哪些字段、用户有哪些状态、审批流有哪些节点。因为配置模板里的每一个组件本质上是结构化数据在界面上的投影它的字段、类型、关联关系要基本稳定渲染层才能建立起稳定的映射。如果数据模型还在剧烈变动期——今天有价格字段明天改成原价/折扣价两段式后天冒出个会员专属价——那自由生成反而更合适。直接用 AI 在界面上铺陈一个模糊但好看的结构跟着数据模型的摇摆快速迭代。等数据模型稳定了再把界面固化到模板渲染路线上。你可以用需求烂熟度来辅助判断需求反复横跳、讲不清楚的场景自由生成需求已经形成清晰的字段和流程定义配置模板。四个问题做完了最后再叠加一个决策矩阵你可以直接对号入座判断维度偏向自由生成偏向配置模板渲染页面属性给用户看展示/营销给流程用操作/管理变更频率一次性/低复用持续演进/高频微调团队不确定性兜底有资深前端审查兜底组件与配置边界清晰数据模型成熟度需求未定型、字段快速变化字段/流程基本稳定典型场景官网、活动页、MVP Demo后台、工作台、审批流5. 混合路线真正能落地的做法是先自由后收敛5.1 探索-固化-渲染的三阶段流程大多数真实产品走到最后都既不是纯自由生成也不是纯配置模板而是混合路线。我自己的项目就是典型例子产品是后台管理系统核心页面走配置模板渲染但每当我们设计一个新模块也是用自由的 AI 生成工具先跑出几个不同风格的初稿。探索、评审、确定方向之后才把确定下来的视觉和结构固化到模板组件里然后拿到渲染引擎上去多场景复用。我把这个流程叫探索—固化—渲染三阶段探索阶段用自由生成工具让 AI 快速产出多个布局和视觉方向供产品、设计、开发一起评审。这时候追求的是快和多一定要打开脑洞让 AI 自由发挥。固化阶段评审选定方向后设计师/前端把这套定调的视觉语言拆解成可复用的组件和样式规范在组件库里注册成新的可配置组件。这一步是把一次性的灵感转成标准化的资产。渲染阶段新组件正式进入模板配置库后续所有新页面复用不再需要 AI 生成一次代码。页面之间的排列组合变成了修改配置数据。这个模式的好处是什么它把自由生成放在它该在的位置——灵感探索把配置模板渲染放在它擅长的地方——工程交付。两者各司其职不打架。5.2 混合落地时三个最容易踩的坑混合路线听起来美好实际操作里坑非常多。我把我踩过的或者见证别人踩过的三个先列出来你再走会顺很多。第一个坑探索阶段过度信任 AI 生成的设计。AI 生成的 UI 视觉效果往往很好但很少考虑无障碍对比度、移动端适配、不同字体渲染下的留白塌陷、以及 loading/error/empty 这些边界状态。你把一个只有理想态的页面当成最终方案去固化等于把隐患一起固化进了组件库。正确的做法是AI 生成结果只当作视觉方向固化成组件前必须穷举空态、加载态、错误态。第二个坑固化阶段的成本被严重低估。把 AI 生成的一次性页面固化成标准化、可配置的模板组件不是简单地把代码复制进组件库里就行。你要做 state 设计、props 规范、Schema 定义、事件协议、单元测试、文档。这些工作量加起来常常比直接从头手写一个组件还大导致团队在这个环节很容易滑坡。我实际尝试下来的建议是固化的节奏要克制优先固化复用频率最高、复杂度中等偏上的组件——不是所有页面都值得固化。第三个坑Schema 设计过度/不足。配置模板渲染里Schema 的设计直接决定灵活性。过度设计配置写起来比写代码还麻烦每个字段都一堆可选项设计不足页面一复杂就需要在配置里写大量custom组件退化成换皮硬编码。Schema 设计的核心原则是只暴露业务变化的维度把实现细节全部封装在组件内部。训练有素的配置开发团队看一眼配置就能知道这一页的结构是清晰还是失控。配置也是代码也要有 code review。它只是把 UI 的代码换成了数据。提示接上前面提到的 UI 自动化话题混合路线在测试上的最佳实践是——在固化阶段给组件接上稳定的>