CI/CD集成Impeccable：提交前设计检查与PR门禁配置完整指南

CI/CD集成Impeccable提交前设计检查与PR门禁配置完整指南【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable是一套让 AI 编程助手更懂设计的设计语言技能除了 23 条设计命令它还内置了59 条确定性设计检测规则——不依赖 LLM、不需要 API Key用一条 CLI 命令就能把紫色渐变、Inter 字体、卡片套卡片等 AI 生成的设计坏味道扫出来。本文教你把Impeccable detect接入 CI/CD实现提交前设计检查与PR 门禁让设计质量像单元测试一样可拦截、可豁免、可追溯。为什么设计检查值得进 CI传统 CI 门禁只关心能不能跑不关心好不好看。AI 生成前端时代同一批模板审美反复出现Inter 字体、紫蓝渐变、灰色文字压在彩色背景上……这些设计 slop肉眼难查却极易规模化。Impeccable 的 59 条规则全部是确定性检测覆盖两大类问题AI slop 特征侧边边框、紫色渐变、bounce 缓动、暗色霓虹光晕等通用设计质量行宽过长、内边距拥挤、触控目标过小、标题层级跳跃等规则源码在 cli/engine/registry/antipatterns.mjs 与 cli/engine/rules/checks.mjs想确认某条规则的判定逻辑可以直接翻源码。核心命令impeccable detect 设计检测器CI 集成只需要记住一条命令完整用法见 README.md 的 CLI 章节npx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描单个 HTML npx impeccable detect --json . # CI 友好的 JSON 输出 npx impeccable detect --no-config src/ # 裸扫忽略项目配置它对 CI 友好的三个关键特性实现见 cli/engine/cli/main.mjs退出码即门禁信号发现非建议级问题时以退出码2结束无问题或仅有 advisory建议级笔记时以0结束。advisory 类规则只展示、永不阻塞自动化。--json输出结构化结果可直接被工作流步骤解析、上报、写回 PR 评论。尊重项目配置自动读取.impeccable/config.json的detector.ignoreRules/ignoreFiles/ignoreValues设置CI 与本地行为完全一致。 扫描 URL 时会走 Puppeteer 真实渲染扫描本地文件走静态 HTML/CSS 分析无需浏览器速度快、适合放进每个 PR。一键安装步骤接入前的一次性配置在业务项目根目录执行npx impeccable install它会探测你的 AI 工具目录Claude Code、Cursor、Codex 等并安装技能与design hook。如果暂时只想用 CI也可以跳过此步——detect命令本身独立可用无需 AI 工具在场。PR门禁配置最小可用的 CI 工作流在.github/workflows/design-gate.yml中放一个最小门禁思路与 Impeccable 仓库自身的 ci.yml 一致——push/PR 触发、按变更裁剪、失败即红name: Design Gate on: pull_request: branches: [main] jobs: detect: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 with: node-version: 22 - name: Run Impeccable design detector run: npx impeccable detect --json src/ findings.json - name: Show summary on failure if: failure() run: cat findings.json退出码2会让该步骤直接失败PR 状态即变为红 ✅→❌门禁完成。几个调优建议只扫 UI 相关目录src/、app/避免全仓扫描拖慢 CI--scope type,layout可按设计域收窄规则集先拦最严重的团队想先观察后拦截可先不加exit-code失败策略把 JSON 结果上传为 artifact 观察两周再收紧豁免与忽略让门禁不误伤好的门禁要可解释地放行Impeccable 提供了两层豁免机制① 仓库级配置——写在.impeccable/config.json的detector键下{ detector: { ignoreRules: [bounce-easing], ignoreFiles: [src/legacy/**] } }也可用 CLI 管理见 cli/bin/commands/ignores.mjsnpx impeccable ignores add-file src/legacy/** npx impeccable ignores add-value overused-font Inter --reason Brand font② 文件级内联豁免——随代码一起走 diffreviewer 一眼可见理由!-- impeccable-disable overused-font: 导出的品牌文档保留 Inter -- /* impeccable-disable-line overused-font */ // impeccable-disable-next-line bounce-easing: 有意的弹跳效果规则品牌遗留代码用ignoreFiles整目录豁免单处例外用内联注释。这样 CI 报告永远是零噪音团队才不会绕过门禁。提交前实时拦截design hook 设计钩子CI 是事后拦截design hook 则是事前拦截。在 Claude Code、GitHub Copilot、Codex、Cursor、Grok Build 上npx impeccable install会额外安装 provider 原生 hook 清单Cursor在坏写入落盘之前直接拦截Claude Code / Copilot / Codex编辑后把检测结果回灌给 agent支持在 Stop 时机做深度复查hook 与detect共享同一套detector忽略配置CI 与本地判定口径统一各 provider 的 hook 清单路径如.cursor/hooks.json、.codex/hooks.json在 README.md 的 Design hook 一节有完整列表。配合本文的 PR 门禁就形成了编辑时提示 → 提交前检查 → PR 门禁兜底的三道防线。进阶从 Impeccable 自家 CI 学三门功课Impeccable 仓库的 ci.yml 本身就是 CI/CD 设计的教科书按变更裁剪测试scripts/ci-test-plan.mjs 先分析 PR 改了什么只跑相关的测试组detector、live、framework 各自按需触发PR 门禁快而准慢测试挪到夜间全量完整 live-e2e 矩阵对 PR 太慢改为每日 cron 对 main 全量跑一次PR 只跑 smoke 组僵尸 PR 自动管理sheriff.yml 每天定时运行 scripts/github/sheriff.mjs超过 7 天无响应的 PR 自动留言提醒14 天后关闭保持 PR 队列健康。把变更检测 分级执行 夜间全量这套模式套到你的设计门禁上PR 上跑detect秒级主分支每日跑含 URL 渲染的完整扫描成本与覆盖率兼得。常见配置问题排查清单现象原因与解法CI 报cannot access扫描路径不存在或未 checkout 子模块检查paths本地过、CI 挂本地.impeccable/config.local.json已 gitignore与 CI 配置不同用--no-config对比裸扫结果门禁误报品牌字体impeccable ignores add-value overused-font 字体 --reason 品牌字体想临时关门禁工作流加continue-on-error: true或--no-advisory收紧范围扫描提示建议扫 URL检测到本地 dev server 在跑可改扫http://localhost:端口获得真实渲染结果调试细节如 hook 审计日志hook.auditLog见 docs/DEVELOP.md 与 README.md。总结把 Impeccable 接入 CI/CD 只需三步detect --json进工作流 → 配置.impeccable/config.json豁免 → 用 exit code 2 做 PR 门禁。再叠加 design hook 的编辑时拦截你的团队就拥有了不依赖 LLM、不烧 token、毫秒级出结果的确定性设计质量防线。设计不再靠感觉不错而是和测试覆盖率一样变成一个可以持续度量的数字。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考