ai-design-check

ai-design-check 是面向使用编程智能体构建界面的团队的开源 UI 检查器与配套 Agent Skill。它处理的是 AI 辅助实现中很常见的一类问题：页面功能可以正常运行，却逐渐出现不一致的间距、薄弱的无障碍提示、不自然的响应式行为和模板化视觉习惯。项目既检查源码，也可在支持的命令中检查已渲染页面；它不是设计生成器，也不能替代产品判断。

它检查什么

• 项目静态检查：CLI 读取 Web 项目及受支持的移动端 UI 代码，检查排版、间距、控件、文案、动效、本地化和组件一致性相关规则。
• 渲染页面检查：scan 会在 Chrome 中打开可访问页面，检查计算后的布局、对比度、溢出、加载失败和源码无法确认的可见 UI 模式。
• 机械修复：--fix --dry-run 先预览答案明确的修改，例如将间距调整到现有刻度；仓库刻意把主观的产品和文案选择留给人工评审。
• Agent 工作流：随包提供的 Skill 可引导 Agent 进行基于度量的重设计、保留内容，并对比改前改后结果，而不是只凭代码 diff 宣称完成。

实用工作流

在干净的代码检出中运行 npx @enmera/ai-design-check。先阅读报告，再执行 --fix --dry-run，逐项检查建议后才移除 dry-run。对于正在运行的应用，先扫描不含敏感数据的预发布路由。若报告包含需要判断的项，先补充项目的视觉系统和产品约束，再让 Agent 重设计页面。每次修改后都要重新运行检查器，以及现有的无障碍、视觉和产品测试。

适用位置

当 React、Vue、Svelte、HTML、SwiftUI、Jetpack Compose、Flutter 或 React Native 界面由编程智能体实现后虽可用但缺少可重复的 UI 护栏时，ai-design-check 很合适。它可与更宽泛的 UI Skills 配合，后者提供界面指导集合；也不同于评测 Agent 重建网站能力的 WebsiteBench。ai-design-check 聚焦于检查单个项目的 UI 质量。

局限与安全

规则集体现维护者的设计取向；通过检查不等于界面适合某个受众、在每种情境都无障碍，或不存在回归。渲染扫描会在 Chrome 打开页面，因此不要在未经数据处理与认证审查的情况下指向含有私密用户数据的生产页面。项目说明可为受保护页面传入 cookie 或 header，应避免把这些信息写入 shell 历史或 CI 日志。

定价与开始方式

仓库采用 MIT 许可证，静态检查不需要 API key。Agent 驱动的重设计仍可能使用你选择的模型、浏览器、CI 和计算资源。阅读官方 README，先在一个代表性页面运行检查，保留截图和报告作为基线，再决定哪些问题应纳入团队的评审门槛。

常见问题

它是自动设计工具吗？

不是。它报告可度量的问题，并提供 Agent 辅助修复流程；产品决策仍由团队负责。

能替代人工评审吗？

不能。应把它当作回归护栏，另外评审响应式布局、内容层级、品牌契合度和真实辅助技术行为。

总结

当 AI 编程工作流需要的不只是截图和一句“让页面更好看”时，ai-design-check 很有价值。先从小而可复核的报告开始，只采用符合产品自身视觉与无障碍标准的检查项。