从组件到页面AI UI 生成的粒度选择与组合策略总结一、引子整页生成 vs 组件拼接的拉锯战AI UI 生成有两种极端策略一次生成整个页面输出完整 HTML/CSS/JS或逐个组件生成后人工拼接。整页生成的效率最高但质量最不稳定组件拼接质量可控但效率打折。经过大量实验得出的结论是最优策略在两者之间——页面骨架由模板控制组件内容由 AI 生成拼装策略由规则定义。这个结论来自一个痛苦的教训。我们曾让 AI 直接生成一个电商首页结果代码有 800 行CSS 变量命名混乱color1/color2/main-bg响应式断点不统一有的用768px有的用767px而且 Hero 区域和商品列表区的间距是37px——一个任何设计系统都不会存在的数值。整页生成的问题在于AI 在长上下文中会丢失设计约束就像一个人同时做 10 件事每件事都做了 60 分。三层架构的本质是把 AI 的注意力切碎让它在每个小任务中做到 90 分。二、不同粒度的成功率成功率下降的原因是约束丢失。原子级生成时AI 只需要关注一个元素如一个按钮设计 Token 约束完整传入。组件级生成时AI 需要协调多个元素的间距、对齐和状态——但 Props 接口仍然是明确的约束。到了页面级AI 需要同时处理布局、响应式、路由、数据获取、状态管理——每个维度的约束都在互相干扰AI 的注意力被稀释。美院画素描时老师说过先画大关系再画细节。但 AI 的大关系和细节会互相污染——它在画细节时忘了大关系在画大关系时忽略了细节。三、推荐策略三层生成架构第一层页面骨架人工模板 - 固定布局 响应式断点策略 - 7-15 个占位区域 - 不交给 AI布局稳定性 生成效率 第二层区块内容AI 生成 人工确认 - 如数据卡片区域、图表区域、操作栏区域 - AI 生成 3 个候选 → 人工选择 1 个 - 区块之间有明确的接口Props/Events 第三层原子组件AI 补全 自动审核 - 如按钮、输入框、标签 - AI 在已定义的设计 Token 约束内生成变体 - 自动化检查类型/Lint/快照通过后直接合入三层架构的核心是约束的分层注入。第一层不交给 AI因为页面骨架的稳定性远比生成效率重要——一个错误的grid-template-columns会让整个页面崩掉。第二层给 AI 但需要人工确认因为区块级别的视觉决策卡片用圆角还是直角、图表用柱状还是折线需要人的审美判断。第三层完全自动化因为原子组件的设计约束最明确设计 Token 组件 APIAI 在这些约束内的生成质量已经稳定到可以自动合入。四、组合策略规则/** * AI 生成粒度决策引擎 */ function decideGranularity(requirement: UIRequirement): GenerationStrategy { // 规则 1: 全新页面 → 人工骨架 AI 组件 if (requirement.type new-page) { return { strategy: skeleton-to-component, humanParts: [layout, routing, data-fetching], aiParts: [components, styles, animations], }; } // 规则 2: 修改已有组件 → AI 直接生成 if (requirement.type modify-component) { return { strategy: ai-direct, constraints: [保持现有 Props 接口, 不改变组件尺寸], }; } // 规则 3: 复杂表单/流程 → 人工业务逻辑 AI UI if (requirement.complexity high) { return { strategy: human-logic-ai-ui, humanParts: [validation, state-machine, api-integration], aiParts: [form-layout, field-styles, error-display], }; } return { strategy: ai-component-level }; }决策引擎的关键是约束明确度判断。修改已有组件规则 2是 AI 成功率最高的场景因为已有代码就是最完整的约束——Props 接口、样式规范、测试用例都在那里。复杂表单规则 3需要拆分业务逻辑验证规则、状态机、API 集成由人写UI 部分表单布局、字段样式、错误展示交给 AI。这种拆分的依据是变化频率——业务逻辑变化频繁且需要精确控制UI 部分变化较少且容错率高。五、总结AI UI 生成的最优策略是三层架构骨架固定 区块 AI 组件自动整页生成的成功率仅 55-65%不适合生产环境粒度越小 AI 成功率越高——从页面 65% 到组件 90% 到原子 95%复杂页面的人工部分逻辑/状态/路由和 AI 部分UI/样式必须有清晰边界修改已有组件是 AI 成功率最高的场景约束明确从美院到工程我学到的最重要的一课是工具的能力边界决定了使用方式。AI UI 生成不是一键出页面的魔法而是分层协作的工程方法。就像画一幅油画——先打底稿人工骨架再铺大色块AI 区块生成最后刻画细节AI 原子组件。每一层都有不同的工具和不同的精度要求。当你把 AI 的生成粒度和它的能力曲线对齐时效率和质量就能同时拿到。在实际项目中三层架构让我们的页面交付周期从 5 天缩短到 2 天——省下的 3 天不是少做了而是不用在低效的整页调试上浪费了。设计师的精力也从调像素转移到了选方案这才是 AI 时代设计师的核心价值所在。资料说明本文中的协议、版本、性能、成本和行业趋势应以可核验的一手资料为准。未标注统计口径的比例、时间表和预测仅作工程讨论不应视为行业事实。可参考 0730 资料来源索引并在发布前将具体来源贴到对应断言之后。