7 月第 2 周回顾AI UI 工程工具链的实践进展与待解问题一、一周实践从AI 能不能到AI 做哪段这周的 9 篇文章从 AI 辅助 UI 开发的不同切面展开覆盖了代码生成、自动化测试、视觉还原、设计系统自动化、无障碍增强五个方向。文章中跑过的代码、验证过的结论、踩过的坑核心可以归结为一个问题AI 在 UI 工程中不是能不能做的问题——几乎所有方向上 AI 都能产出能跑的结果——而是做哪一段最划算的投资回报率计算。让我把这一周的实践按AI 参与程度 × 工程稳定性矩阵做个汇总。二、五个方向的实践进展graph LR subgraph 高稳定性 A[样式冗余检测br/规则化、确定性高] B[设计 Token 自动生成br/OKLCH 插值可复现] C[版本管理 Changelogbr/Conventional Commits 解析] end subgraph 中稳定性 D[组件骨架生成br/模板约束可保证结构] E[视觉回归差异分类br/形态学规则可过滤 80%] F[色彩系统 Token 校对br/对比度计算边界清晰] end subgraph 低稳定性 G[AI 原生组件生成br/约束求解不确定性] H[Figma→代码生成br/硬编码尺寸问题] end方向一设计系统自动化进展可落地。色彩 Token 的自动生成已经可以在生产项目中运行——基于 OKLCH 色彩空间、感知均匀的 L 值线性插值、WCAG 对比度校验——这三个步骤的确定性很高不依赖 AI 的概率采样。组件分级策略基础/复合/业务三层模型为 AI 代码生成建立了明确的可碰/不可碰边界这是本周投入产出比最高的实践。方向二AI 辅助测试进展可试点。视觉回归测试的 AI 差异分类器基于形态学特征的斑块分析可以对差异热力图进行自动 markdown 级的风险标注——blocking / warning / ignore三种级别。当前模型的精度在 80% 左右剩余 20% 的边缘场景动画中间帧、字体渲染差异仍需人工确认。交互测试方面Toast/Snackbar/Dialog 的状态机模型为 AI 验证交互时序提供了一套可形式化描述的状态转换规范。方向三代码生成与重构进展需约束框架。模板约束方案3 层约束API Schema → Token Registry → Template Skeleton有效遏制了一致性问题。但 AI 仍会在约束空间中产生合法但不符合设计意图的输出。例如一个符合 Schema 的 Button 但使用了不该用的 variant——校验器不会报错但设计师会皱眉。CSS 冗余样式检测是本周在规则化程度上最高的实践——PostCSS AST 遍历 特异性计算 覆盖检测都是确定性算法不依赖 AI 的黑箱推理。方向四动效与交互进展方案收敛。逐帧动画、视差滚动、毛玻璃效果三个方向本周都给出了具体的技术选型决策树。AI 在这些领域的角色目前局限在方案建议层面因为动画的性能调优严重依赖设备的 GPU 特性和驱动实现同一段backdrop-filter代码在 Adreno GPU 和 Apple GPU 上的渲染路径不同这不是 AI 可以预测的参数。方向五无障碍与平台互通进展规范先行。ARIA Live Region 的实现是确定的行为——aria-livearia-atomic的组合语义不会被浏览器误解。AI 在这块的辅助方向是自动注入无障碍属性——根据 DOM 结构推测该用什么 role、什么 aria-label——但这个方向还在早期因为 3/4 的无障碍属性依赖开发者知道用户在这个区域做什么而不是 DOM 结构本身能完整表达的。Flutter Platform Channel 的动画互通虽然代码量大但本质上是通道模式 帧同步的工程问题AI 可以辅助生成通道注册的样板代码。三、三个待解的核心问题问题一AI 生成组件的可解释性缺失。本周文章多次提到组件生成的约束框架——Schema、Token、Template。但目前这个框架是编译检查级——它告诉你输出合法还是非法不告诉你为什么 AI 做这个选择。上周四我用模板约束生成了一个 Table 组件AI 选择了列头 sticky body scroll的方案而我期望的是整表外部滚动。两种方案都合法——Schema 没有禁止任何一项。但我需要理解 AI 为什么做这个选择才能在 Prompt 中修正它的偏好。当前 AI 的reasoning能力还不足以支撑这种细粒度的决策解释。问题二一次生成永久维护的幻觉。AI 生成一个组件只要 10 秒但维护这个组件可能花费 10 个小时。当你对一个 AI 生成的组件做第 3 次需求变更时你会面对修改代码还是重新生成的两难。修改代码——你看着一段你自己没写过的 JSX 和非直觉的状态管理逻辑AI 生成的代码在组织方式上和人有细微差异改起来花的时间是手写代码的 1.5 倍。重新生成——AI 不记得之前的两轮修改它生成的新版本可能把之前修过的 Bug 重新引入。这引出一个工程哲学问题AI 生成的代码是否应该被视作临时脚手架——生成后立即做人工重写并在 git commit message 中标注Human-rewritten from AI scaffold问题三AI 工具链的隐形复杂度。本周 CI 集成的脚本——breaking change 检测、视觉回归测试、样式冗余检测——加起来约 900 行。这些脚本是 AI 辅助工程的基础设施。但基础设施本身会腐化PostCSS 的插件 API 变了、pixelmatch 的大版本升级了参数签名、Conventional Commits 的 Regex 需要支持新的 scope 格式。维护这些基础设施的边际成本没有计入大多数AI 提效 50%的宣传口径中。当 AI 生成的代码库规模超过 50 个组件时基础设施的维护会变成新的瓶颈。四、下周优先级基于本周的实践反馈下周的写作方向将集中在两个主题AI 生成代码的性能可靠性运行时内存、Bundle Size、渲染帧率和设计系统与 AI 的深层整合Token→组件→页面的全链自动化验证。以及开始动手做一件事写一个 AI prompt 的决策日志系统——记录每一次 AI 生成时使用的 prompt 版本、Template 版本、Token 版本为AI 组件的可追溯性做最低限度的工程保障。五、总结AI 在 UI 工程中的角色应定位为确定性任务的加速器和非确定性任务的建议者不应混淆两者边界。本周可落地的三个实践设计 Token 自动生成、CSS 冗余样式检测、视觉回归差异自动分类形态学规则版。需要约束框架的三个方向组件代码生成3 层约束、Figma-to-Code骨架人工改写、动效选择决策树。AI 生成代码的可解释性是当前最大短板——Schema 校验告诉你合不合法但不告诉你为什么这么选。一次生成永久维护的假设是危险的——AI 生成代码应在 git commit 中标注为 scaffold便于后续定位和维护决策。AI 工具链的 CI 基础设施检测脚本等需要持续维护——引入 AI不是减负是转移负担的类型。下周重点AI 生成代码的性能可靠性 全链自动化 Token 验证体系。决策日志系统prompt 版本 模板版本 Token 版本是 AI 组件可追溯性的最低工程保障。无障碍属性的 AI 辅助方向目前局限于静态标签自动注入交互行为的无障碍化仍需人工标记。动效性能调优是 AI 的已知盲区——GPU 驱动差异使同一段 CSS 在不同设备上的性能表现不可预测。
