Impeccable 架构全景图设计技能、检测CLI与浏览器扩展的协作指南【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable 是一款面向 AI 编码工具的设计技能包它为 AI 提供 23 个设计命令、59 条确定性反模式检测规则并附带检测 CLI 与浏览器扩展。本文带你一次看懂这三者如何分工协作让 AI 写出不再一眼 AI的前端界面。一张图看懂整体架构 Impeccable 由三大组件构成各自解决一个环节的问题组件位置职责设计技能Skillskill/教 AI 怎么设计命令、流程、反模式清单检测 CLIcli/机器可执行的质检59 条规则扫描代码或线上页面浏览器扩展extension/在任意网页上一键检测 UI 反模式三者共享同一套规则与配置形成设计 → 检测 → 修复的闭环。组件一设计技能Skill——AI 的设计手册技能是 Impeccable 的核心。安装后你在 AI 工具里输入/impeccable 命令即可调用共 23 个命令例如audit技术质检、polish发布前打磨、bolder放大胆设计、quieter收敛过度设计、live浏览器内实时迭代变体。命令的行为定义来自 skill/SKILL.src.md每个命令对应一份剧本playbook存放在 skill/reference/ 目录skill/reference/init.md一次性初始化写入 PRODUCT.md 与 DESIGN.mdskill/reference/audit.md技术质量检查无障碍、性能、响应式skill/reference/live.md浏览器可视化变体模式skill/reference/hooks.md管理检测钩子技能还内置了脚本能力例如 skill/scripts/detect.mjs 供 AI 在会话中直接调用检测器skill/scripts/live-server.mjs 支撑 live 模式的本地预览服务。组件二检测 CLI —— 无需 AI 的确定性质检CLI 最大的价值在于确定性不依赖大模型、不需要 API Key同样的代码永远给出同样的结果。典型用法npx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描单个 HTML 文件 npx impeccable detect https://example.com # 扫描线上页面 npx impeccable detect --json . # 输出 CI 友好的 JSON实现上CLI 入口是 cli/engine/cli/main.mjs规则注册表在 cli/engine/registry/antipatterns.mjs。检测引擎按目标分成四类位于 cli/engine/engines/regex 引擎detect-text.mjs扫描源码文本中的反模式如滥用 Inter 字体、紫色渐变、bounce 缓动static-html 引擎detect-html.mjs 配合 css-cascade.mjs 分析静态页面与 CSS 级联browser 引擎detect-url.mjs用 Puppeteer 打开真实页面visual 引擎screenshot-contrast.mjs基于截图检测文字遮挡与对比度问题检测结果可被豁免.impeccable/config.json中配置ignoreRules或在文件内写!-- impeccable-disable overused-font: 品牌字体 --行内豁免管理命令见 README.md 的 CLI 章节。组件三浏览器扩展 —— 随手检测任意网页扩展面向普通用户manifest 定义在 extension/manifest.jsonManifest V3描述为Detect common UI anti-patterns in any web page。功能分布在图标弹窗extension/popup/popup.html点击工具栏图标即可检测当前页面DevTools 面板extension/devtools/devtools.html 与 extension/devtools/devtools.js在开发者工具侧边栏展示检测发现后台脚本extension/background/service-worker.js 负责跨页面调度三者如何协作规则同源技能、CLI、扩展都消费同一份 59 条规则清单改一处规则三个端同时生效。钩子打通编辑流在 Claude Code、Cursor、Codex 等工具中安装时会注册设计钩子见 skill/scripts/hook.mjsAI 每次修改 UI 文件后自动跑检测器问题实时反馈给 AI 修复。配置统一共享配置存放在项目的.impeccable/config.json/impeccable hooks命令与npx impeccable detect读取同一份忽略规则。live 模式串起设计与检测浏览器里选中元素 → AI 生成变体 → 你点选满意方案源码由 skill/scripts/live/ 下的适配脚本自动回写到代码库。快速上手三步走 第 1 步安装技能npx impeccable install命令会自动识别你的 AI 工具目录如.claude、.cursor并写入技能与钩子。第 2 步初始化设计上下文在 AI 工具中运行/impeccable init它会询问你的产品定位品牌型还是产品型并生成 PRODUCT.md 与 DESIGN.md供后续所有命令读取。第 3 步按需调用命令/impeccable audit blog # 审计博客页面 /impeccable polish settings # 打磨设置页 /impeccable detect # 或命令行npx impeccable detect src/延伸阅读 完整命令表与安装选项README.md各 AI 工具的钩子/技能支持矩阵docs/HARNESSES.md贡献与构建指南docs/DEVELOP.md测试套件含大量反模式用例tests/演示项目demos/landing-demo/总结Impeccable 的架构本质是一个规则中心 三个执行端设计技能负责教会 AI 设计检测 CLI 负责在代码与 CI 里把关浏览器扩展负责让普通用户随时体检任意网页。理解这条设计 → 检测 → 修复的协作链路你就掌握了用好这套工具的全部钥匙。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Impeccable 架构全景图：设计技能、检测CLI与浏览器扩展的协作指南
Impeccable 架构全景图设计技能、检测CLI与浏览器扩展的协作指南【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableImpeccable 是一款面向 AI 编码工具的设计技能包它为 AI 提供 23 个设计命令、59 条确定性反模式检测规则并附带检测 CLI 与浏览器扩展。本文带你一次看懂这三者如何分工协作让 AI 写出不再一眼 AI的前端界面。一张图看懂整体架构 Impeccable 由三大组件构成各自解决一个环节的问题组件位置职责设计技能Skillskill/教 AI 怎么设计命令、流程、反模式清单检测 CLIcli/机器可执行的质检59 条规则扫描代码或线上页面浏览器扩展extension/在任意网页上一键检测 UI 反模式三者共享同一套规则与配置形成设计 → 检测 → 修复的闭环。组件一设计技能Skill——AI 的设计手册技能是 Impeccable 的核心。安装后你在 AI 工具里输入/impeccable 命令即可调用共 23 个命令例如audit技术质检、polish发布前打磨、bolder放大胆设计、quieter收敛过度设计、live浏览器内实时迭代变体。命令的行为定义来自 skill/SKILL.src.md每个命令对应一份剧本playbook存放在 skill/reference/ 目录skill/reference/init.md一次性初始化写入 PRODUCT.md 与 DESIGN.mdskill/reference/audit.md技术质量检查无障碍、性能、响应式skill/reference/live.md浏览器可视化变体模式skill/reference/hooks.md管理检测钩子技能还内置了脚本能力例如 skill/scripts/detect.mjs 供 AI 在会话中直接调用检测器skill/scripts/live-server.mjs 支撑 live 模式的本地预览服务。组件二检测 CLI —— 无需 AI 的确定性质检CLI 最大的价值在于确定性不依赖大模型、不需要 API Key同样的代码永远给出同样的结果。典型用法npx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描单个 HTML 文件 npx impeccable detect https://example.com # 扫描线上页面 npx impeccable detect --json . # 输出 CI 友好的 JSON实现上CLI 入口是 cli/engine/cli/main.mjs规则注册表在 cli/engine/registry/antipatterns.mjs。检测引擎按目标分成四类位于 cli/engine/engines/regex 引擎detect-text.mjs扫描源码文本中的反模式如滥用 Inter 字体、紫色渐变、bounce 缓动static-html 引擎detect-html.mjs 配合 css-cascade.mjs 分析静态页面与 CSS 级联browser 引擎detect-url.mjs用 Puppeteer 打开真实页面visual 引擎screenshot-contrast.mjs基于截图检测文字遮挡与对比度问题检测结果可被豁免.impeccable/config.json中配置ignoreRules或在文件内写!-- impeccable-disable overused-font: 品牌字体 --行内豁免管理命令见 README.md 的 CLI 章节。组件三浏览器扩展 —— 随手检测任意网页扩展面向普通用户manifest 定义在 extension/manifest.jsonManifest V3描述为Detect common UI anti-patterns in any web page。功能分布在图标弹窗extension/popup/popup.html点击工具栏图标即可检测当前页面DevTools 面板extension/devtools/devtools.html 与 extension/devtools/devtools.js在开发者工具侧边栏展示检测发现后台脚本extension/background/service-worker.js 负责跨页面调度三者如何协作规则同源技能、CLI、扩展都消费同一份 59 条规则清单改一处规则三个端同时生效。钩子打通编辑流在 Claude Code、Cursor、Codex 等工具中安装时会注册设计钩子见 skill/scripts/hook.mjsAI 每次修改 UI 文件后自动跑检测器问题实时反馈给 AI 修复。配置统一共享配置存放在项目的.impeccable/config.json/impeccable hooks命令与npx impeccable detect读取同一份忽略规则。live 模式串起设计与检测浏览器里选中元素 → AI 生成变体 → 你点选满意方案源码由 skill/scripts/live/ 下的适配脚本自动回写到代码库。快速上手三步走 第 1 步安装技能npx impeccable install命令会自动识别你的 AI 工具目录如.claude、.cursor并写入技能与钩子。第 2 步初始化设计上下文在 AI 工具中运行/impeccable init它会询问你的产品定位品牌型还是产品型并生成 PRODUCT.md 与 DESIGN.md供后续所有命令读取。第 3 步按需调用命令/impeccable audit blog # 审计博客页面 /impeccable polish settings # 打磨设置页 /impeccable detect # 或命令行npx impeccable detect src/延伸阅读 完整命令表与安装选项README.md各 AI 工具的钩子/技能支持矩阵docs/HARNESSES.md贡献与构建指南docs/DEVELOP.md测试套件含大量反模式用例tests/演示项目demos/landing-demo/总结Impeccable 的架构本质是一个规则中心 三个执行端设计技能负责教会 AI 设计检测 CLI 负责在代码与 CI 里把关浏览器扩展负责让普通用户随时体检任意网页。理解这条设计 → 检测 → 修复的协作链路你就掌握了用好这套工具的全部钥匙。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考