Impeccable：为 AI 配备设计技能的利器

# Impeccable：AI 设计驾驭技能 来源：https://impeccable.style/ 无需指令、无需检测，Impeccable 先教 AI 真正的设计。7 大维度深度参考知识，每次写代码自动载入。 运行一次 `/impeccable teach` 即可为项目设定设计上下文，此后所有指令都受益。 18 条指令构成你与 AI 的共享词汇，每条对应一门具体设计学科，精准操控。 所有 AI 模型都套用过相同模板，无干预时会犯同样的可预期错误。Impeccable 给它们命名、检测并教会 AI 规避。 设计问题直接高亮在页面上，无需截图、无需猜测。Impeccable 悬浮层告诉你哪里出错、错在哪里。 25 条确定性检查 无需 LLM，模式匹配即可捕获紫色渐变、滥用字体、嵌套卡片、低对比度等常见问题。 三种用法 **Chrome 扩展** 可作用于任意站点；AI 设计评审时嵌入 `/critique`；或独立运行 `npx impeccable live`。 Impeccable Chrome 扩展面板列出检测到的反模式 现已上线 Chrome 扩展 立即安装 →（https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf） ### 1 安装技能（推荐） 18 条指令实时引导 AI 做出更好设计，完整 Impeccable 体验。 $ `npx skills add pbakaus/impeccable` 支持 Cursor、Claude Code、Gemini CLI、Codex CLI 等。 安装后执行 `/impeccable teach` 初始化项目设计上下文。 其他安装方式 Claude Code 插件 $ `/plugin marketplace add pbakaus/impeccable` 然后在 Claude Code 中打开 `/plugin` 手动下载（共 11 家提供商） ### 2 安装 CLI（Beta） 在终端扫描任意文件、目录或在线 URL 的反模式。可检测渐变文字、AI 配色、嵌套卡片、低对比度等 20+ 规则，支持 HTML、CSS、JSX/TSX、Vue、Svelte。可用于 CI、pre-commit 或一次性审计，防止 AI 垃圾进入生产。 $ `npm i -g impeccable` 或直接 `npx impeccable detect src/` 免安装使用。 完整命令参考 →（https://www.npmjs.com/package/impeccable） ### 3 浏览器扩展 点击工具栏图标，当前页面所有反模式即时高亮：渐变文字、紫色配色、嵌套卡片、超小正文等。支持 localhost、staging、生产环境或任意网站。适合抽查竞品、视觉审 PR 或日常锐眼看网页。 从 Chrome 网上应用店安装 →（https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf） ### 4 保持更新 定期获取最新指令、反模式及背后的设计思考。 $ `npx impeccable skills update` 关注 X @impeccable_ai（https://x.com/impeccable_ai） - 指令从 21 精简到 18 条。去除重叠与混淆：`/arrange` 更名为 `/layout`，`/normalize` 并入 `/polish`（设计系统对齐放到终检），`/onboard` 并入 `/harden`（空状态与首次运行归入生产就绪），`/extract` 改为 `/impeccable extract`（与 craft、teach 并列子命令）。每条指令职责清晰。 - 自动清理废弃技能。更新后首次加载会检测并删除重命名或合并指令的残留文件，无需手工清理。 - 将 `frontend-design` 更名为 `impeccable`。核心技能与项目同名，teach 子命令从 `/teach-impeccable` 改为 `/impeccable teach`，一个技能一个命名空间。 - 技能基于内部评估框架重写。对前沿模型在同一需求下有无技能进行对比，衡量输出是否陷入单一样板。结果：字体与色彩多样性大幅提升，整体设计质量更锐利，对 Codex 支持显著增强。最大突破是“反吸引子”流程：强制模型先列举并拒绝默认反射选项再选择。已在 gpt-5.4 与 Qwen 3.6 Plus 横跨 15 个细分领域验证。 - 反模式检测引擎。25 条确定性规则覆盖排版、色彩、布局、动效与质量。支持 oklch、oklab、lch、lab 色值格式，识别 border 简写中的 CSS 变量、渐变文字、仅表情节点等。 - CLI：`npx impeccable detect`。可扫描 HTML、CSS、JSX/TSX、Vue、Svelte 与 CSS-in-JS。含框架检测、多文件 import 追踪、Puppeteer 实时 URL 扫描、CI 友好 JSON 输出，以及 `--fast` 正则模式用于超大型代码库。 - Chrome DevTools 扩展。一键检测任意页面：本地、staging、生产或他人网站。读取实时计算样式，在交互面板展示结果并高亮元素。已提交 Chrome 网上应用店审核。 - `/critique` 更有料。多 persona 子代理并行评审，按 Nielsen 启发式打分，自动运行检测器，并打开实时浏览器悬浮层，让你就地查看每条发现。 - 新的创作方式。`/shape` 先进行关于目标、受众与目的的结构化访谈，生成设计简报后再写代码。`/impeccable craft` 将该简报直接接入完整实现流，让你交付一个经设计的功能，而非默认卡片网格。 - 全新文档站。顶层 Docs（https://impeccable.style/skills）、Anti-Patterns（https://impeccable.style/anti-patterns）、Visual Mode（https://impeccable.style/visual-mode）。18 个技能页面含前后对比演示与内嵌 SKILL.md，两篇教程（https://impeccable.style/tutorials），38 张规则卡片附内联视觉示例。 - 新 harness：Rovo Dev。共支持 11 款 AI 工具。 查看旧版更新 - 新提供商：**Trae**（中国 + 国际） - `/critique` 现按 Nielsen 10 条启发式评分，使用 persona 原型测试并评估认知负荷 - `/audit` 现按 5 个维度评分，含 P0-P3 严重级别与结构化行动计划 - 优化技能描述，提升代理自动发现能力 - 修复无效 YAML frontmatter，解决 GitHub 预览与 Codex 加载问题 (#67) - Codex CLI 命令引用改用正确 `$` 前缀 - `/typeset` 现为应用 UI 推荐固定字阶，仅对营销/内容页使用流式排版 - 3 个新技能：`/typeset`（修复排版）、`/arrange`（修复布局与间距）、`/overdrive`（非凡动效，Beta） - 技能现通过 `.impeccable.md` 自动收集设计上下文。运行一次 `/teach-impeccable`，所有技能共享 - 支持命令深链接（`#cmd-overdrive` 等） - 新增 OpenCode 提供商支持 - 新增 Pi 提供商支持 - 将 `/onboard` 重新归类为增强指令 - 新增 Kiro 支持（`.kiro/skills/`） - 恢复前缀切换：下载带 `i-` 前缀的包避免命名冲突 - 审计与评审技能仅推荐真实已安装的命令 - 统一技能架构：指令即技能，带 `user-invocable: true` - 新增 VS Code Copilot 与 Google Antigravity 支持（`.agents/skills/`） - 新安装流：`npx skills add` 为主，通用 ZIP 为后备 - 新增通用 ZIP，内含 5 家提供商目录 - 将 `/simplify` 更名为 `/distill`，避免与 Claude Code 冲突 - 初始版本，增强 frontend-design 技能 - 17 条设计指令：/polish、/audit、/distill、/bolder 等 - 支持 Cursor、Claude Code、Gemini CLI、Codex CLI - 交互式指令速查表 下载的文件放哪里？ 最简单的方法是 `npx skills add pbakaus/impeccable`，它会自动检测 AI harness 并把文件放到正确位置。 若下载了**通用 ZIP**，请解压到**项目根目录**（与 `package.json` 或 `src/` 同级）。它会为各支持工具创建隐藏文件夹：`.cursor/`、`.claude/`、`.gemini/`、`.codex/`、`.agents/`。 项目级安装优先级最高，并支持版本控制。 如何更新到最新版？ 在项目根目录运行 `npx impeccable skills update`。它会下载最新技能、清理废弃文件，并保留你使用的前缀。 - **备选：**`npx skills add pbakaus/impeccable` 会重新安装。 - **Claude Code 插件：**打开 `/plugin`，进入 Discover 标签。 - **手动 ZIP：**从上方下载并解压到项目根目录。 你的 `.impeccable.md` 上下文文件不会被覆盖。 指令或技能没出现怎么办？ **指令：**在 AI harness 输入 `/` 查看是否列出 /audit、/polish 等。若未出现，请确认文件路径正确。 **技能：**技能在相关场景自动生效。如需验证，可在提示中显式写明“使用 impeccable 技能”，强制 AI 识别并应用。 **各工具设置：** - **Cursor：**需 Nightly 通道 + 在 Settings → Rules 中启用 Agent Skills - **Gemini CLI：**需 `@google/gemini-cli@preview` 并通过 `/settings` 启用 Skills 我是 AI harness 新手，该从哪里开始？ 技能与指令属于进阶功能。如果你刚起步，请先掌握基础： - **Claude Code：**官方文档（https://docs.anthropic.com/en/docs/claude-code） - **Cursor：**Cursor 文档（https://docs.cursor.com/） - **Gemini CLI：**Gemini CLI 文档（https://geminicli.com/docs/） - **Codex CLI：**Codex GitHub（https://github.com/openai/codex） 熟悉基本提示与代码生成后，再来尝试 Impeccable。 Impeccable 免费吗？ 是的，全部**Apache 2.0** 开源：技能、指令、CLI、检测引擎，完全免费。 ## 与我合作 Impeccable 由 Renaissance Geek（https://renaissance-geek.ai/）打造。我与企业团队合作，提供大规模部署、定制集成及设计师/开发者培训。如果你是前沿实验室、设计工具公司或希望提升 AI 设计质量的企业，欢迎联系。 取得联系（https://impeccable.style/cdn-cgi/l/email-protection#d1a1b0a4bd91a3b4bfb0b8a2a2b0bfb2b4fcb6b4b4baffb0b8）