交付前怎么检查 AI 生成的界面

1. 机械检查

技能自带一个零依赖的扫描脚本，检查 HTML、CSS、JSX、TSX、Vue、Svelte 和 Astro 里常见的无障碍、健壮性、文案和“AI 套路”问题。严格模式下，警告也会让它失败。

它基于文本模式，会有误报，改代码前先看匹配的那一行。例如我们自己就遇到过：日期格式化里的 padStart(2, '0') 曾被当成“装饰性数字”，后来改成读到日期代码时跳过。

node <skill-root>/scripts/quality-gate.mjs <文件或目录> --strict

阅读完整的质量基线 →

2. 看渲染结果

源码通过不等于页面好看。打开渲染后的页面，逐项过一遍：

• 眯起眼睛看，层级是否一眼清楚；
• 间距、字号来自一小组 token，而不是每处各写一个值；
• 手机上是重新排布的，不是把桌面版缩小；
• 按钮有悬停、焦点、按下、加载、错误和成功的反馈；
• 真实的长文本、空状态和失败内容不会撑坏版面。

3. 找生成器的惯用手法

不管产品是什么，生成的界面常常收敛到同一批做法。技能的基线要求每一个都要有“关于这个产品任务”的理由，“看起来有设计感”不算理由。常见的有：

• 标题上方全大写、加字距的小标签；
• 装饰性数字：补零的计数、步骤编号、答不出任何问题的大号统计；
• 工具页里的口号和推广卡片；
• 每个区块都是带边框、圆角、阴影的卡片，卡片里套卡片；
• 三个方向共用一个骨架，只换配色。

4. 真的操作一遍

扫描通过只是静态预检。用键盘逐个按 Tab，看实际算出来的焦点样式；在 prefers-reduced-motion: reduce 下再试一次。记录你检查的页面、视口、操作、预期和实际结果，以及没测的部分。

不要把“我们测了几个夹具”说成“验证了所有以后生成的页面”，也不要凭检查脚本声称符合 WCAG。