Impeccable

Impeccable 是由 jQuery UI 作者 Paul Bakaus 发起的开源设计指导包，以 Apache-2.0 许可发布。它为 AI 编码助手补上缺失的「设计词汇」：一个 impeccable 技能、24 个 /impeccable 命令、实时浏览器迭代，以及 61 条确定性检测规则。目标很直接——让 AI 生成或改造的前端界面能通过专业设计评审，而不是停留在「一看就是 AI 做的」。

宿主适配

Impeccable 以一套源优先的设计规范编译成各宿主原生分发格式，同一套设计语言可以在不同工具里复用，而不是为每个工具维护互不相干的提示词。官方 README 列出的宿主与入口如下。

宿主	安装入口	关键要求
Claude Code	/plugin marketplace add pbakaus/impeccable，或复制 dist/claude-code/.claude	添加市场后需在 /plugin 中安装
Cursor	npx impeccable install，或复制 dist/cursor/.cursor	需切到 Nightly 通道并在设置中开启 Agent Skills
Codex CLI	dist/agents/.agents 配合 dist/codex/.codex/hooks.json	装/更新后需在 /hooks 批准项目 hook；调用走 $impeccable
GitHub Copilot	VS Code 扩展 renaissance-geek.impeccable，或复制 dist/github/.github	需 VS Code 1.109.3+ 与 Copilot Chat；该扩展只装技能、不装 hooks
Gemini CLI	复制 dist/gemini/.gemini	需 @google/gemini-cli@preview 并在 /settings 开启 Skills
Grok Build	grok plugin install pbakaus/impeccable#plugin --trust	项目 hook 需 /hooks-trust 或 --trust
其他	Hermes Agent、Veto、OpenCode、Pi、Trae、Rovo Dev、Qoder、Mistral Vibe、DeepSeek Harness、Google Antigravity	多为复制对应 dist/ 子目录到宿主配置目录，Trae 区分国内版与国际版路径

核心能力

技能全部能力通过单一入口 /impeccable 暴露，命令按工作阶段划分，并可携带目标范围参数，例如 /impeccable audit the header、/impeccable polish the checkout form。

• 建立项目上下文：init 一次性梳理耐久的产品事实并写入 PRODUCT.md；document 从既有代码生成根级 DESIGN.md；extract 把可复用组件与设计令牌沉淀进设计系统。
• 设计与构建：craft 走完整的「先定形、再实现」流程并做视觉迭代；shape 在写代码前规划 UX/UI；live 与 generate 在浏览器里实时迭代与生成变体。
• 评审与收尾：critique 做层级、清晰度与情感表达评审；audit 跑可访问性、性能、响应式等技术检查；polish 做最终对齐与交付就绪检查。
• 定向调整：bolder、quieter、distill、colorize、typeset、layout、animate、delight、overdrive、clarify、adapt、optimize、harden、onboard 分别对应视觉强度、字体与层级、版式节奏、动效、文案、多设备适配、性能、边界状态与首次体验等具体维度。

安装与调用

推荐在项目根目录使用 CLI 安装器，它会自动探测本机已有的宿主目录或 CLI，允许保留探测结果或自定义提供方，并选择装入当前项目还是全局。

# 推荐：CLI 安装器
npx impeccable install

# 脚本化：跳过交互
npx impeccable install --providers=claude,codex,cursor,grok,hermes,veto --scope=project

# 刷新已有安装
npx impeccable update

也可以用 Git 子模块方式把仓库 vendored 进项目，再链接指定宿主的编译产物；该命令只链接技能目录，除非显式加 --force，不会覆盖已有的真实技能目录。

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
git submodule update --remote .impeccable

装好后先在项目里跑一次初始化，再按需调用具体命令。安装完成后需要重载或重启宿主工具，新技能才会出现。

/impeccable init              # 一次性初始化，生成 PRODUCT.md
/impeccable audit blog        # 体检博客首页与文章页
/impeccable critique landing  # 落地页 UX 评审
/impeccable pin audit         # 生成 /audit 独立快捷命令

亮点

与常见的提示词合集相比，Impeccable 的差异化在于「确定性」和「事实分层」两点。

• 检测不依赖模型：61 条确定性规则由 CLI 与浏览器扩展本地执行，不需要 LLM、不需要 API Key，因此适合放进 CI 流程。
• 产品事实与视觉方向分离：PRODUCT.md 记录受众、目标、运行环境、约束与语气，DESIGN.md 单独记录既有或新建的视觉体系，避免把事实和表层风格混为一谈。
• 反模式清单明确：官方直接写出要避免的做法，例如滥用 Arial、Inter 与系统默认字体，彩色背景上使用灰字，使用纯黑纯灰而不做色偏，把所有内容塞进卡片或卡片套卡片，以及使用已显过时的 bounce/elastic 缓动。
• 可验证的成果展示：官网提供 Neo Mirai 案例的前后对比，展示真实项目经命令改造后的效果。

它的定位不是「再给 AI 加一段设计提示词」，而是一套可复用、可检测、可进 CI 的设计质量标准。

使用要点：明确目标与验收

impeccable 为 AI 提供前端设计和改进指导，覆盖视觉层次、布局、交互、可访问性，以及错误和空状态等细节。

比如一个注册页面看起来漂亮，但错误提示不清楚，手机上按钮又被挤到下面，就可以明确让它检查并修改这条流程。它也适用于新页面设计和已有界面的视觉调整。

这份技能范围较广，交任务时更要指定目标：是降低表单理解难度、改善移动端，还是建立统一样式。文档要求完成后做有范围的检查，避免陷入反复微调；真正的验收仍应围绕用户能否顺利完成页面里的任务。

把「检查并修改这条流程」说清楚，比泛泛地说「优化设计」更容易得到可验收的结果。

适合谁

它适合把 AI 编码助手用在真实产品前端上的团队与个人，尤其是下面几类场景。

• 用 Claude Code、Cursor、Copilot、Codex 等工具生成界面，但产出总是同质化、缺少设计感的开发者。
• 需要把设计系统落到代码里的团队：用 extract 与 document 沉淀组件与令牌，再让后续生成遵循同一套规则。
• 需要在提交前做一轮可访问性、响应式与性能体检的工程流程，可用 audit 与本地检测规则做卡点。
• 想在不引入复杂设计工具链的前提下，给现有界面做定向视觉调整的产品与设计协作场景。

局限与注意

它是一份技能包，不替代设计判断，也不是零成本的即插即用方案，下面这些边界需要在收录决策时一并考虑。

• 安装方式带来不同依赖：npx impeccable 安装器需要 Node；手工复制或 Git 子模块方式不依赖 Node。技能本体通过内置启动器调用自包含的引擎二进制，引擎会随启动器就地运行或首次运行时下载到 ~/.impeccable/bin/。
• hook 需要宿主信任授权：Codex 更新后可能需重新批准 .codex/hooks.json；Grok Build 需项目文件夹信任；Hermes 会为项目级技能要求一次 hermes skills trust，因为技能属于流程文档，自动加载被视为提示注入风险。
• 部分宿主有前置版本要求：Cursor 需 Nightly 通道并开启 Agent Skills；Gemini CLI 需 preview 版并开启 Skills；Copilot 扩展需 VS Code 1.109.3+，且只装技能不装 hooks，同一工作区应避免重复安装同一技能。
• 版本信息需以仓库为准：仓库把 .claude-plugin/plugin.json 的 version 作为版本真源，本次收录未从公开资料获得具体版本号与最近发布时间，使用前建议直接在仓库确认。
• 工作目录需忽略：运行过程会在 .impeccable/ 下写入截图、实时模式会话与缓存，官方提供了带标记的 .gitignore 片段，需自行加入项目。
• 非 LLM 检测不等于全部检查：确定性规则无需模型，但设计批判类检查仍由 LLM 完成，结果质量受所选模型与上下文影响。

相关链接

• 官方仓库 pbakaus/impeccable
• 官方网站与文档 impeccable.style
• hook 信任与验证说明
• Neo Mirai 前后对比案例
• VS Code Marketplace 扩展
• Anthropic frontend-design 技能（Impeccable 的起点）

产品界面