架构进阶期的 AI UI 思考：生成质量与运行性能的双重保障

架构进阶期的 AI UI 思考生成质量与运行性能的双重保障一、AI 能生成 500 个组件文件但你不敢合并——焦虑不是 AI 不够强而是信任锚点没建好7 月的前两周我用 AI 辅助写了 49 篇文章、9 个领域的实践代码CSS 混合模式、Sliver 动画、OKLCH 色彩空间、多 Agent 审查流水线、视觉回归智能过滤……每一篇都有生产级代码和详细的边界分析。如果在 3 年前有人告诉我要写这么多主题我会说需要三个月。AI 用 10 天完成了这些主题的技术调研和代码实现——但除了产出量更关键的收获是我找到了在AI 能写代码和AI 写的代码能上线之间缺的那几块拼图。架构进阶期——不是刚接触 AI 辅助编程的兴奋期那个阶段已经过了也不是完全把项目放手给 AI 的躺平期还没到也可能永远不会到。这个阶段的特点是信任了 AI 的生产能力生成速度快、语法正确、模式识别准但不信任 AI 的生产质量Token 合规性、性能副作用、跨组件一致性。这篇文章是对过去 5 天 49 篇实践的系统反思——到底哪些工作AI 做了但人类得复审、哪些AI 应该做但还没做到、以及如何把这期间的教训沉淀成可复用的工程准则。二、AI 辅助 UI 开发的三层信任模型flowchart TD subgraph 第一层生成信任已建立 G1[组件结构生成] -- G2[样式骨架生成] -- G3[Hook 逻辑生成] end subgraph 第二层规范信任半建立 S1[Token 合规性检查br/✅ 自动扫描可做] -- S2[命名一致性检查br/✅ 自动扫描可做] -- S3[可访问性规则检查br/⚠️ 规则可用但误报多] -- S4[视觉还原度检查br/⚠️ 差异能看但需人判语义] end subgraph 第三层运行信任未建立 R1[性能副作用预测br/❌ AI 不知道 100 个 CSSbr/animation 会卡] -- R2[跨组件一致性保证br/❌ 组件 A 和 B 的br/行为一致性 AI 无感知] -- R3[长期维护成本评估br/❌ AI 不知道这个br/写法半年后会怎样] end G1 -- S1 G2 -- S2 G3 -- S3 S1 --|当前方向| R1 S2 -- R2 S3 -- R3 style G1 fill:#d1fae5,stroke:#10b981 style G2 fill:#d1fae5,stroke:#10b981 style G3 fill:#d1fae5,stroke:#10b981 style S1 fill:#fef3c7,stroke:#f59e0b style S2 fill:#fef3c7,stroke:#f59e0b style S3 fill:#fee2e2,stroke:#ef4444 style S4 fill:#fee2e2,stroke:#ef4444 style R1 fill:#fecaca,stroke:#dc2626 style R2 fill:#fecaca,stroke:#dc2626 style R3 fill:#fecaca,stroke:#dc2626第一层已解决的问题生成信任组件结构的生成Props JSX 骨架AI 已经非常准确CSS 样式的基本生成布局、颜色、间距使用 Token 变量后准确率到 90%Hook 逻辑useState/useEffect/自定义 Hook简单到中等复杂度不需要改进了——保持现状只加一层自动化 lint 即可。第二层半解决的问题规范信任Token 合规检查扫描工具到位0715/01、0715/08但 Token 注册表的维护是瓶颈——谁在什么时候更新注册表命名一致性ESLint Stylelint 能检查但 CSS 类名的语义审查这个名字对得上它的用途吗AI 看不懂可访问性规则eslint-plugin-jsx-a11y 能用但 label 的充分描述性需要元素语义理解AI 不够准确视觉还原度pixelmatch 三层过滤0715/06可以筛掉 85% 假阳性但剩下的 15% 仍然需要人判改进方向将规范检查嵌入 CI把人工复审从每次看 200 个 diff减少到每次看 5 个语义上有疑问的 diff。第三层未解决的问题运行信任这是最难的一层——它要求 AI 具备代码的运行后果预测能力生成 100 个 CSS animation 时AI 不知道这对页面的 FPS 影响——如果它知道它应该建议用 CSS Paint API 或 Canvas见 0715/07组件 A 和组件 B 修改了同一个 Hook 的不同部分——AI 不会发现这会导致 A 和 B 的行为不一致一个写法的性能在 10 个组件时 OK100 个时卡了——AI 现在只能在已知场景下给出性能建议没有预测未知规模下瓶颈的能力改进方向需要运行时性能数据回写。不是让 AI 预测性能而是让 CI 在每次 PR 合并后跑一次性能基准对比——把性能退化的数据喂给 AI 做根因分析。三、五天的核心工程教训浓缩教训 1Token 是工程世界的货币单位没有统一度量就没有自动化5天中出现了 6 次Token 相关的应用场景Token 生成0711/04、Token 主题切换0713/03、Token 跨团队治理0714/03、Token 规范检查0715/01、Token 血缘追踪0715/08、Token 颜色空间0715/03。每一次实现都在不同维度上依赖一个准确的 Token 注册表。没有 Token 注册表 规范检查是噪音、血缘追踪无数据、色彩空间计算没有目标。结论AI 辅助设计系统的起点不是 AI是一个维护良好的 Token 注册表文件JSON/YAML可被 CI 读取。如果 Token 只在 Figma 里、不在代码仓库里所有自动化都是空中楼阁。教训 2AI 生成的组件需要一个体检报告而不是一个合格章视觉回归测试0711/06、0715/06的教训非常深刻把差异标记为通过或失败的二元判断是无意义的。真正有用的是——这个差异是字体渲染导致的风险 0这个差异是渐变色导致的风险 1这个差异是布局变化需要人看。结论AI 审查的产物不应该是 pass/fail 布尔值而是一个带风险等级和分类标签的结构化报告。合并 Agent0715/04的决策依赖的是报告的质量不是报告的数量。教训 3动画性能的瓶颈总在你以为不是瓶颈的地方0715/05Sliver GC 瓶颈、0715/07CSS animation 数量瓶颈、0712/02逐帧动画方案对比的共同主题性能瓶颈很少是算法太慢——更常是创建/销毁了太多对象或触发了太多层级的样式计算。AI 可以帮你写一个能跑的动画但它不会主动分析这个动画在 1000 个元素下的帧预算。结论动画相关的 AI 生成代码必须有性能基线对照才能合并。跑一个 1 个元素、100 个元素、1000 个元素的阶梯测试自动生成性能曲线报告。AI 审报告人审 AI 的结论。教训 4无障碍规范是检验 AI 对 Web 标准理解深度的终极测试5 天中有 3 篇文章覆盖无障碍主题焦点可见性0715/09、动态内容通知0712/05、可访问性声明生成0714/08。这些主题的共同特点是——规则数量少但语义深度深。AI 能记住alt 属性不能为空但它不能在alt 应该写什么这个问题上给出足够好的答案需要理解图片内容的语义。结论无障碍的自动化应分成两层——语法层ESLint a11y 规则AI 全自动和语义层alt 文本描述、ARIA label 内容审查AI 人审。教训 5AI 辅助 UI 开发最缺的不是更强的模型是更好的环境建模AI 能很好地生成一个脱离环境的代码片段——但你把这个片段放入你的项目它知道你的 Token 体系吗知道你的组件层次吗知道这个 button 改了之后会影响哪些页面吗当前模型的局限在于——不管你给多长的 system prompt它都没法真正理解一个 10 万行代码库的结构。结论不要试图让 AI 理解整个项目。取而代之把项目编译成AI 可消费的规格文件——Token 注册表JSON、组件 API 文档TS type definitions、路由图谱JSON、性能基线数据。AI 不读源码AI 读这些编译产物。四、接下来要做但还没做到的事目标当前状态路径跨组件一致性自动检测没有为每个组件的视觉属性建立一个 JSON 快照CI 中对比前后两次的差异超过阈值的属性 → AI 分析性能副作用预测没有给每个 AI 生成的组件标注复杂度标签DOM 节点数、动画数、事件监听数在合并时累计检查这些标签是否超过硬上限Token 注册表自动更新半手动Figma Token 导出插件 → 自动更新注册表 JSON → 触发 CI 重新评分视觉还原度的 AI 语义审查只有像素级将差异截图喂给多模态 LLM给它组件的语义描述这是一个按钮和实际截图让它判断视觉上是否符合语义五、总结三层信任模型生成信任AI 写代码→已建立 规范信任AI 查违规→半建立 运行信任AI 预测性能→未建立| Token 注册表是所有自动化的根——没有结构化 Token 文件就没有规范检查/血缘追踪/色彩空间计算 | AI 审查的产物应是带风险等级的结构化报告分类标签置信度不是 pass/fail 二元判断 | 动画性能瓶颈多见于对象创建/销毁频次和样式计算层级数需要阶梯式性能基线测试1/100/1000 元素| 无障碍分两层语法层ESLint a11y → AI 全自动和语义层alt 描述 → AI 人审| 不给 AI 读源码给 AI 读编译产物Token 注册表 JSON、组件 API TypeDoc、路由图谱、性能基线 | 接下来需要的四件事跨组件一致性检测、性能副作用预测、Token 注册表自动更新、视觉还原度语义审查——这些都是运行信任层的建设内容 | 5 天 50 篇文章 9 个方向的实践结论AI 辅助 UI 开发不是找代写是建立一个多层质量的自动化检测体系——AI 负责生成和初步审查人类把精力集中在语义和信任判断上。