项目简介 Anthropic 的 frontend-design 是第一个被广泛使用的 Claude 设计技能。Impeccable 从那里起步。 每个模型都在相同的 SaaS 模板上训练。如
<div class="detail-content-box has-mask large">
<section style='color: rgb(39, 52, 68);background-color: rgb(255, 255, 255);font-size: 16px;font-weight: 400;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;line-height: 29.6px;text-align: left;margin: 0px;padding: 0px;border-radius: 0px;display: block;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: border-box;width: 100%;' lang="en" data-pm-slice="0 0 []"><span data-octopus-pseudo="before" aria-hidden="true" style='color: rgb(39, 52, 68);font-size: 16px;font-weight: 400;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;line-height: 29.6px;text-align: left;margin: 0px;padding: 0px;border-radius: 0px;display: table;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: content-box;width: 0px;height: 0px;min-width: 0px;min-height: 0px;transform-origin: 0px 0px;z-index: auto;'></span><h2 lang="en" style='color: rgb(17, 24, 39);font-size: 19px;font-weight: 700;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;letter-spacing: -0.38px;line-height: 26.98px;text-align: left;margin: 0px 0px 14px;padding: 0px 0px 0px 12px;border-bottom: 0.666667px solid rgb(216, 222, 228);border-left: 4px solid rgb(37, 99, 235);border-radius: 0px;display: block;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: border-box;'><span lang="en" style='color: rgb(17, 24, 39);font-size: 19px;font-weight: 700;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;font-synthesis: none;letter-spacing: -0.38px;line-height: 26.98px;text-align: left;margin: 0px;padding: 0px;border-radius: 0px;display: inline;word-break: break-word;overflow-wrap: break-word;list-style-type: disc;vertical-align: baseline;text-rendering: optimizelegibility;box-sizing: border-box;'><span leaf="">项目简介</span></span></h2>
Anthropic 的 frontend-design 是第一个被广泛使用的 Claude 设计技能。Impeccable 从那里起步。
每个模型都在相同的 SaaS 模板上训练。如果跳过指导,每个项目都会出现同样的几个“套娃特征”:一切都用 Inter、紫到蓝的渐变、卡片套卡片、彩色背景上的灰色文字、每个标题上方的圆角方形图标瓦片。
Impeccable 增加了:
/impeccable init 会写入 PRODUCT.md免费获取企业 AI 成熟度诊断报告,发现转型机会
DESIGN.mdpolish、audit、critique、distill、animate、bolder、quieter 等。该技能以一条命令安装:
/impeccable <command>
每个新项目都从以下开始:
/impeccable init
init 会询问该界面是品牌(营销、落地页、作品集)还是产品(应用 UI、仪表盘、工具),然后写入每个后续命令都会读取的设计上下文。
所有命令都通过 /impeccable 访问:
/impeccable craft | |
/impeccable init | |
/impeccable document | |
/impeccable extract | |
/impeccable shape | |
/impeccable critique | |
/impeccable audit | |
/impeccable polish | |
/impeccable bolder | |
/impeccable quieter | |
/impeccable distill | |
/impeccable harden | |
/impeccable onboard | |
/impeccable animate | |
/impeccable colorize | |
/impeccable typeset | |
/impeccable layout | |
/impeccable delight | |
/impeccable overdrive | |
/impeccable clarify | |
/impeccable adapt | |
/impeccable optimize | |
/impeccable live |
使用 /impeccable pin 可创建独立快捷方式(例如 pin audit 会创建 /audit)。
/impeccable audit blog # 审计博客中心 + 文章页
/impeccable critique landing # UX 设计评审
/impeccable polish settings # 上线前最终打磨
/impeccable harden checkout # 增加错误处理 + 边界情况
也可以直接用 /impeccable 加上描述:
/impeccable redo this hero section
该技能包含明确的“避免事项”指导:
在项目根目录运行:
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/ 脚本才会运行。
适合希望通过 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
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。
访问 impeccable.style,下载对应工具的 ZIP,并解压到项目中。
Cursor:
cp -r dist/cursor/.cursor your-project/
注意: Cursor skills 需要设置:
在 Cursor Settings → Beta 中切换到 Nightly 通道 在 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 需要设置:
安装预览版: npm i -g @google/gemini-cli@preview运行 /settings并启用 “Skills”运行 /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
感谢阅读。如果本文对你有帮助,欢迎点赞、在看,或转发给需要的朋友。
关注公众号

扫码关注,获取最新 AI 资讯
3 步完成企业诊断,获取专属转型建议
已有 200+ 企业完成诊断