5w颗星！前Google工程师为Agent打造的设计系统

项目简介

Anthropic 的 frontend-design 是第一个被广泛使用的 Claude 设计技能。Impeccable 从那里起步。

每个模型都在相同的 SaaS 模板上训练。如果跳过指导，每个项目都会出现同样的几个“套娃特征”：一切都用 Inter、紫到蓝的渐变、卡片套卡片、彩色背景上的灰色文字、每个标题上方的圆角方形图标瓦片。

Impeccable 增加了：

• 一次设置流程。/impeccable init 会写入 PRODUCT.md 并提供 DESIGN.md，让后续命令了解受众、品牌/产品方向、语气、反参考、颜色、字体和组件。
• 23 条命令。 与你的 AI 共享一套设计词汇：polish、audit、critique、distill、animate、bolder、quieter 等。
• 59 条确定性检测规则，外加仅由 LLM 执行的 critique 检查。CLI 和浏览器扩展可运行确定性规则，无需 LLM，也无需 API 密钥。

包含内容

技能：impeccable

该技能以一条命令安装：

/impeccable <command> 

每个新项目都从以下开始：

/impeccable init

init 会询问该界面是品牌（营销、落地页、作品集）还是产品（应用 UI、仪表盘、工具），然后写入每个后续命令都会读取的设计上下文。

23 条命令

所有命令都通过 /impeccable 访问：

使用 /impeccable pin  可创建独立快捷方式（例如 pin audit 会创建 /audit）。

使用示例

/impeccable audit blog           # 审计博客中心 + 文章页
/impeccable critique landing     # UX 设计评审
/impeccable polish settings      # 上线前最终打磨
/impeccable harden checkout      # 增加错误处理 + 边界情况

也可以直接用 /impeccable 加上描述：

/impeccable redo this hero section

反模式

该技能包含明确的“避免事项”指导：

• 不要使用过度滥用的字体（Arial、Inter、系统默认字体）
• 不要在彩色背景上使用灰色文字
• 不要使用纯黑/纯灰（始终加色调）
• 不要把所有东西都包进卡片，或卡片套卡片
• 不要使用 bounce/elastic 缓动（感觉过时）

安装

选项 1：CLI 安装器（推荐）

在项目根目录运行：

npx impeccable install

它会显示检测到的 harness 文件夹（例如 ~/.claude、~/.codex、~/.grok，或项目本地的 .cursor），让你保留检测结果或自定义提供方，然后询问是安装到当前项目还是全局。可用 --providers=claude,codex,cursor,grok 和 --scope=project|global 在脚本中跳过这些选择。在 Claude Code、Cursor、Codex、GitHub Copilot 和 Grok Build 上，它还会为当前项目安装提供方原生的 hook 清单。适用于 Cursor、Claude Code、Gemini CLI、Codex CLI、Grok Build 以及所有其他受支持的工具。安装后请重新加载你的 harness。

刷新已有安装：

npx impeccable update

Codex 用户应在安装或更新后打开 /hooks，并在提示时批准项目 hook。Codex 按 hook 定义跟踪信任，因此会改动 .codex/hooks.json 的更新可能需要再次批准。Grok Build 用户需要项目文件夹信任（/hooks-trust 或使用 --trust 启动）后，.grok/hooks/ 脚本才会运行。

选项 2：Git 子模块

适合希望通过 Git 将 Impeccable 纳入版本控制并持续更新的团队：将本仓库添加为子模块，并把编译后的提供方构建链接到 harness 文件夹：

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
git add .gitmodules .impeccable .claude .cursor
git commit -m "Add Impeccable skills"

使用项目需要的提供方，例如 claude、cursor、gemini、codex、github、grok、opencode、pi、qoder、trae、trae-cn、rovo-dev 或 vibe。该命令会从 .impeccable/dist/universal/ 链接各个技能文件夹，除非传入 --force，否则不会覆盖已有的真实技能目录。

之后更新：

git submodule update --remote .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor

选项 3：插件安装

Claude Code：

/plugin marketplace add pbakaus/impeccable

仅限 Claude Code。添加 marketplace 后，打开 /plugin 并从列表中安装 Impeccable。

Grok Build：

grok plugin install pbakaus/impeccable#plugin --trust

仅限 Grok Build。#plugin 后缀安装精简插件包（技能、agents 和 hooks），而不是完整 monorepo。然后在 Grok 会话中运行 /impeccable init。通过 npx impeccable install --providers=grok 进行项目级安装同样有效，会写入 .grok/skills/ 以及 .grok/hooks/impeccable.json。

选项 4：从网站下载

访问 impeccable.style，下载对应工具的 ZIP，并解压到项目中。

选项 5：从仓库复制

Cursor：

cp -r dist/cursor/.cursor your-project/

注意： Cursor skills 需要设置：

1. 在 Cursor Settings → Beta 中切换到 Nightly 通道
2. 在 Cursor Settings → Rules 中启用 Agent Skills

了解更多 Cursor skills

Claude Code：

# 项目级
cp -r dist/claude-code/.claude your-project/

# 或全局（应用于所有项目）
cp -r dist/claude-code/.claude/* ~/.claude/

OpenCode：

cp -r dist/opencode/.opencode your-project/

Pi：

cp -r dist/pi/.pi your-project/

Gemini CLI：

cp -r dist/gemini/.gemini your-project/

注意： Gemini CLI skills 需要设置：

1. 安装预览版：npm i -g @google/gemini-cli@preview
2. 运行 /settings 并启用 “Skills”
3. 运行 /skills list 验证安装

了解更多 Gemini CLI skills

Codex CLI：

# 项目本地
cp -r dist/agents/.agents your-project/
mkdir -p your-project/.codex
cp dist/codex/.codex/hooks.json your-project/.codex/hooks.json

# 或用户级安装技能。把 .codex/hooks.json 复制到每个希望运行设计 hook 的项目中。
mkdir -p ~/.agents/skills
cp -r dist/agents/.agents/skills/* ~/.agents/skills/

asset-producer 子 agent 嵌套在技能自己的 agents/ 文件夹中，Codex 会自动发现。无需单独复制 .codex/agents/。hook 是项目本地的，因为 Codex 从受信任项目配置旁的 .codex/hooks.json 发现 hooks。

GitHub Copilot：

cp -r dist/github/.github your-project/

Trae：

# Trae 中国（国内版）
cp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/

# Trae 国际版
cp -r dist/trae/.trae/skills/* ~/.trae/skills/

注意： Trae 有两个版本，配置目录不同：

• Trae 中国：~/.trae-cn/skills/
• Trae 国际：~/.trae/skills/

复制后重启 Trae IDE 以激活技能。

Rovo Dev：

# 项目级
cp -r dist/rovo-dev/.rovodev your-project/

# 或全局（应用于所有项目）
cp -r dist/rovo-dev/.rovodev/skills/* ~/.rovodev/skills/

Qoder：

# 项目级
cp -r dist/qoder/.qoder your-project/

# 或全局（应用于所有项目）
cp -r dist/qoder/.qoder/skills/* ~/.qoder/skills/

Mistral Vibe：

# 项目级
cp -r dist/vibe/.vibe your-project/

# 或全局（应用于所有项目）
cp -r dist/vibe/.vibe/skills/* ~/.vibe/skills/

Grok Build：

# 项目级
cp -r dist/grok/.grok your-project/

# 或全局（应用于所有项目）
cp -r dist/grok/.grok/skills/* ~/.grok/skills/

更推荐 npx impeccable install --providers=grok 或 grok plugin install pbakaus/impeccable#plugin --trust，这样设计 hook 也会一并安装。项目 hooks 需要每个文件夹执行一次 /hooks-trust（或 --trust）。

Google Antigravity：

# 项目级
cp -r dist/antigravity/.agent your-project/

# 或全局（应用于所有项目）
mkdir -p ~/.gemini/config/skills
cp -r dist/antigravity/.agent/skills/* ~/.gemini/config/skills/

使用

安装完成后，所有命令都通过单一的 /impeccable 技能运行：

/impeccable audit        # 发现问题
/impeccable polish       # 最终清理
/impeccable distill      # 去掉复杂度
/impeccable critique     # 完整设计评审

单独输入 /impeccable 可查看完整命令列表。

大多数命令可接受可选参数，以聚焦特定区域：

/impeccable audit the header
/impeccable polish the checkout form

如果经常使用某一条命令，可用 /impeccable pin audit 固定它，从而得到独立快捷方式 /audit。

注意： Codex 在这里使用 skills，而不是 /prompts: 命令。打开 /skills 或输入 $impeccable。仓库本地安装位于 .agents/skills/；用户级安装位于 ~/.agents/skills/。GitHub Copilot 使用 .github/skills/。如果新安装的技能没有出现，请重启工具。

项目地址

https://github.com/pbakaus/impeccable

感谢阅读。如果本文对你有帮助，欢迎点赞、在看，或转发给需要的朋友。