impeccable audit完整指南可访问性、性能、响应式一次查完【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableimpeccable是一款为 AI 编码助手提供设计指导的开源项目其核心命令/impeccable audit能一次性完成可访问性A11y、性能、主题化、响应式设计四大维度的技术质检并输出带评分和严重级别的审计报告。无需手动逐项排查一条命令即可得到 20 分制健康分、P0~P3 问题清单和下一步修复建议。1. /impeccable audit 是什么impeccable 包含 23 条设计命令polish、audit、critique、distill等其中audit定位是技术级代码审计而不是设计点评只查可度量、可验证的实现问题比如对比度是否达标、图片是否懒加载、触屏目标是否小于 44×44px只记录、不修复报告生成后交由adapt、optimize、polish等命令去执行修复支持指定检查范围例如只审计博客页头部命令的完整检查清单定义在 reference/audit.md这是理解 audit 行为的关键文件。2. audit 的五大检查维度 ⚠️audit 会对 5 个维度各打 0~4 分任何一项不及格都会拉低整体分数2.1 可访问性Accessibility检查项包括文字对比度是否低于 4.5:1AAA 级别要求 7:1交互元素是否缺少 ARIA 角色、标签、状态键盘导航焦点指示缺失、Tab 顺序混乱、键盘陷阱语义化 HTML标题层级跳级、缺少 landmark、用 div 冒充按钮图片 alt 文本缺失或质量差表单输入框无 label、错误提示不友好2.2 性能Performance布局抖动在循环中反复读写布局属性昂贵的动画随手动画布局属性、无限制的 blur/filter/shadow 效果图片未懒加载、资源未优化will-change滥用不必要的依赖和重复渲染2.3 主题化Theming硬编码颜色而非使用 design tokens暗色模式缺失或对比度崩坏token 混用、主题切换后数值不更新2.4 响应式设计Responsive写死的固定宽度在移动端撑破布局交互元素小于 44×44px窄视口出现横向滚动放大文字后布局碎裂缺少移动端/平板断点2.5 实现一致性Implementation Integrity这是 audit 的重头戏audit 会运行内置的确定性检测器逐条验证命中结果找出重复出现的实现捷径、设计系统漂移和换到别的产品上也毫无违和感的模板化结构并且会把确定性发现与主观视觉判断分开、明确指出误报。检测器的规则实现在 checks.mjs共59 条确定性规则覆盖对比度、字体滥用、边框条纹等常见 AI 生成页面的 tells 。3. 读懂你的 Audit Health Score audit 结束后会输出一张健康分表格总分 20 分#维度分数关键发现1可访问性?最严重的 a11y 问题2性能?3响应式设计?4主题化?5实现一致性?合计??/20评级档位评级档位18–20 优秀只差轻微打磨14–17 良好补齐薄弱维度10–13 及格需要较多工作6–9 较差需要大改0–5 危急存在根本性问题4. 报告如何落地P0~P3 分级 修复命令建议 ️报告不只是列出问题而是每条问题都带完整上下文级别含义行动P0 阻断阻止用户完成任务立即修复P1 严重明显困难或 WCAG AA 违规发布前修复P2 轻微有变通方案的不便下一轮处理P3 打磨不影响真实用户有时间再修每条问题包含位置组件/文件/行号、分类、用户影响、违反的标准如 WCAG、修复建议以及推荐执行的下一条命令——比如响应式问题对应/impeccable adapt性能问题对应/impeccable optimize收尾统一用/impeccable polish。报告结尾会提示你这些命令可以一条一条跑、一次性全跑、或者任意顺序跑修复后重新运行/impeccable audit即可看到分数提升——这正是 audit 的核心用法量化 → 修复 → 复测的闭环。5. 不止 AI 命令独立 CLI 检测器也能用即使不在 AI 工具里impeccable 也提供独立 CLI不依赖 LLM、无需 API Key即可扫描npx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描单个 HTML 文件 npx impeccable detect https://example.com # 扫描线上 URL npx impeccable detect --json . # 输出 CI 友好的 JSON配合npx impeccable ignores add-file src/legacy/**可以忽略历史目录甚至支持在文件内写impeccable-disable注释做单文件豁免。这对把 audit 接入 CI 流水线的团队非常友好。6. 安装与快速上手 方式一CLI 安装器推荐在项目根目录执行npx impeccable install安装器会自动检测你的 AI 工具目录如~/.claude、.cursor选择安装到当前项目还是全局然后在你的 AI 工具里运行/impeccable init # 一次性初始化写入 PRODUCT.md / DESIGN.md /impeccable audit # 开始第一次全量审计 /impeccable audit 首页 # 只审计指定区域方式二Git Submodule希望随 Git 更新管理的项目可以git clone https://gitcode.com/GitHub_Trending/im/impeccable .impeccable npx impeccable link --source.impeccable --providersclaude,cursor安装后如命令未出现重启一次 AI 工具即可。7. 原生平台也有专属审计 如果你的项目是 iOS / Android / 自适应应用audit 会自动切换到原生版检查清单 reference/audit.native.md维度变为可访问性VoiceOver / TalkBack 标签、读屏顺序、Dynamic Type性能启动速度、列表虚拟化、主线程卡顿外观与主题语义系统色、Material 颜色角色、暗色外观平台一致性系统手势、刘海屏安全区、Web 风格控件自适应平板拉伸、横屏、分屏多窗口、折叠屏评分体系与 Web 版完全一致方便跨平台项目对照。8. 新手常见问题Qaudit 和 critique 有什么区别critique是 UX 设计评审层级、清晰度、情感共鸣偏主观audit是代码级技术检查偏客观可验证。两者互补。Qaudit 会直接改我的代码吗不会。它的职责是记录问题修复由推荐的其他命令执行。Q误报怎么办audit 要求验证后再报告会主动标注误报你也可以用ignores配置或行内impeccable-disable注释做豁免。Q测试用例能参考吗参考文件在 tests/fixtures/ 目录下should-pass.html/should-flag.html等样例清晰展示了规则命中与通过的边界。写在最后一句话记住impeccable audit的工作方式五维打分 → P0~P3 分级 → 推荐命令 → 复测提分。把它放进你的开发循环可访问性、性能、响应式这三件最容易事后补票的事就能在发布前一次性查完。现在就在你的项目里跑一条/impeccable audit看看你的健康分能拿到多少。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考