返回 Skills Library
设计 来源：GitHub 协议：Apache-2.0 协议已标注

Impeccable

一套让 AI 设计、审查和打磨前端界面的设计语言与工作流。

45K GitHub stars 2026-07-09 星标同步 2026-07-09 收录时间
#ui#ux#frontend#critique

快速判断

一句判断

更像一套 UI 设计工作语言，而不是单个组件指南。

一套让 AI 设计、审查和打磨前端界面的设计语言与工作流。

读原文顺序

  1. 先读 README 开头，判断仓库解决的问题。
  2. 再看能力结构或包含内容，确认是否需要整体安装。
  3. 最后看安装、许可证和维护说明。

需要让 Agent 设计、重设计、审查、打磨或增强前端界面时。

需要系统处理视觉层级、可访问性、响应式、动效、颜色、排版和 UX copy 时。

更像一套 UI 设计工作语言，而不是单个组件指南；适合需要 Agent 反复审查、修改和抬高完成度的前端任务。

策展备注： 更像一套 UI 设计工作语言，而不是单个组件指南；适合需要 Agent 反复审查、修改和抬高完成度的前端任务。

预览 · README.md

中文为 README 译文；English 保留 GitHub README 原文。

Impeccable

让你的 AI harness 更擅长设计的设计语言。

Impeccable 为 coding harness 增加一套设计取向的 skills 和命令，让 Agent 不只会“把功能做出来”，也能更系统地塑造、审查、打磨和交付界面。

Why Impeccable?

AI 很容易生成“能用但无聊”的界面：卡片堆叠、默认字体、灰色文本、缺少层级、缺少状态、没有真正的视觉判断。Impeccable 的目标是给 Agent 一套可执行的设计语言，让它在写代码前先塑形，在交付前做审查和打磨。

What's Included

Impeccable 提供一个核心 skill、命令体系、安装器、多平台输出和 design hook。它覆盖 Claude Code、Cursor、Codex、Gemini CLI、OpenCode、GitHub Copilot、Grok Build、Qoder、Trae、Rovo Dev 等工具。

The Skill: impeccable

所有命令都通过 /impeccable 访问。初始化后，它会读取项目上下文和设计语境，再根据任务选择形状设计、审查、打磨、强化、收敛、动效、排版、布局、文案和响应式等流程。

/impeccable init

init 会询问当前界面属于 brand surface（marketing、landing、portfolio）还是 product surface（app UI、dashboard、tool），然后写入后续命令都会读取的设计上下文。

23 Commands

Command作用
/impeccable craft完整的先塑形再构建流程，并带视觉迭代
/impeccable init一次性初始化：收集设计上下文，写入 PRODUCT.md 和 DESIGN.md，配置 live mode，并推荐下一步
/impeccable document从现有项目代码生成根目录 DESIGN.md
/impeccable extract抽取可复用组件和 tokens 到设计系统
/impeccable shape写代码前规划 UX/UI
/impeccable critiqueUX 设计评审：层级、清晰度、情绪感
/impeccable audit运行技术质量检查：a11y、性能、响应式
/impeccable polish最后一轮打磨、设计系统对齐和发布准备
/impeccable bolder放大过于无聊的设计
/impeccable quieter收敛过于张扬的设计
/impeccable distill去掉多余复杂度，保留本质
/impeccable harden补齐错误处理、i18n、文本溢出和边界情况
/impeccable onboard首次使用流程、空状态和激活路径
/impeccable animate增加有目的的动效
/impeccable colorize引入有策略的颜色
/impeccable typeset修正字体选择、层级和字号
/impeccable layout修复布局、间距和视觉节奏
/impeccable delight增加令人愉悦的细节
/impeccable overdrive增加技术上更出彩的效果
/impeccable clarify改善不清晰的 UX 文案
/impeccable adapt适配不同设备
/impeccable optimize性能优化
/impeccable live可视化 variant 模式：在浏览器里迭代元素

可以用 /impeccable pin <command> 创建独立快捷命令，例如 pin audit 会创建 /audit。

Usage Examples

/impeccable audit blog           # 审计 blog hub 和文章页
/impeccable critique landing     # UX 设计评审
/impeccable polish settings      # 发布前最后打磨
/impeccable harden checkout      # 增加错误处理和边界情况

也可以直接把描述交给 /impeccable：

/impeccable redo this hero section

Anti-Patterns

这个 skill 明确要求避免：

  • 不要使用过度常见的字体（Arial、Inter、系统默认字体）。
  • 不要在彩色背景上使用灰色文字。
  • 不要使用纯黑或纯灰；颜色应带有轻微倾向。
  • 不要把所有东西都包进卡片，也不要卡片套卡片。
  • 不要使用 bounce / elastic easing，这会显得过时。

See It In Action

访问 Neo Mirai case study，查看一个真实项目通过 Impeccable 命令完成改造的前后对比。

Installation

在项目根目录运行：

npx impeccable install

安装器会显示检测到的 harness 文件夹，例如 ~/.claude、~/.codex 或项目内 .cursor，让你选择保留检测结果或自定义 providers，并询问安装到当前项目还是全局。可以用 --providers=claude,codex,cursor 和 --scope=project|global 在脚本中跳过交互。Claude Code、Cursor 和 Codex 会同时安装项目原生 hook manifest。安装后需要重新加载你的 harness。

更新已有安装：

npx impeccable update

Codex 用户在安装或更新后应打开 /hooks，并在提示时批准项目 hook。Codex 按 hook 定义跟踪信任，因此 .codex/hooks.json 改变后可能需要重新批准。

Option 2: Git Submodule

如果团队希望通过 Git vendoring 和更新 Impeccable，可以把仓库作为 submodule 加入，并把编译后的 provider build 链接到 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"

按项目需要选择 providers，例如 claude、cursor、gemini、codex、github、opencode、pi、qoder、trae、trae-cn 或 rovo-dev。该命令会从 .impeccable/dist/universal/ 链接单个 skill 文件夹，除非传入 --force，否则不会覆盖已有真实 skill 目录。

后续更新：

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

Option 3: Plugin install

Claude Code:

/plugin marketplace add pbakaus/impeccable

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

Grok Build:

grok plugin install pbakaus/impeccable --trust

Grok Build only。然后在 Grok session 中运行 /impeccable init。

Option 4: Download from Website

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

Option 5: Copy from Repository

Cursor:

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

Cursor skills 需要切换到 Nightly channel，并在 Cursor Settings -> Rules 中启用 Agent Skills。

Claude Code:

# Project-specific
cp -r dist/claude-code/.claude your-project/

# Or global (applies to all projects)
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 需要安装 preview 版本，运行 /settings 并启用 Skills，再用 /skills list 验证安装。

Codex CLI、GitHub Copilot、Trae、Rovo Dev、Qoder 的复制路径也在 README 中列出。Trae 分为国内版 ~/.trae-cn/skills/ 和国际版 ~/.trae/skills/；复制后需要重启 Trae IDE。

Usage

安装后，所有命令都通过同一个 /impeccable skill 运行：

/impeccable audit        # Find issues
/impeccable polish       # Final cleanup
/impeccable distill      # Remove complexity
/impeccable critique     # Full design review

只输入 /impeccable 可以查看完整命令列表。多数命令可以带一个可选参数来聚焦具体区域：

/impeccable audit the header
/impeccable polish the checkout form

常用命令可以通过 /impeccable pin audit 固定成 /audit 这样的独立快捷命令。

注意：Codex 在这里使用 skills，而不是 /prompts: commands。打开 /skills 或输入 $impeccable。Repo-local 安装位于 .agents/skills/；用户级安装位于 ~/.agents/skills/。GitHub Copilot 使用 .github/skills/。如果新安装的 skill 没出现，请重启工具。

Keeping .impeccable out of git

运行命令时，Impeccable 会在 .impeccable/ 下写入工作文件：critique 和 polish 截图、live-mode session、preview state、runtime caches 和每个开发者的配置。大多数是临时文件，不应提交；少数共享项目产物应留在仓库中。README 提供了 # impeccable-ignore-start / # impeccable-ignore-end 包裹的 .gitignore 片段。

应保持跟踪的共享产物包括：

  • .impeccable/config.json：统一共享配置。
  • .impeccable/live/config.json：live-mode 框架接线。
  • .impeccable/design.json：共享设计 spec。
  • .impeccable/critique/*.md：评审报告。

如果某个临时文件在加入 ignore block 前已经被提交，.gitignore 不会自动取消跟踪；需要运行 git rm --cached <path>。

Design hook

npx impeccable install 和 npx impeccable update 会在 Claude Code、GitHub Copilot、Codex 和 Cursor 上安装 provider-native hook manifest。hook 会在直接编辑 UI 文件时运行 Impeccable design detector，并把发现反馈回 agent flow。Claude Code、GitHub Copilot 和 Codex 在编辑后展示发现；Cursor 会在写入前阻止不好的 proposed writes。

安装位置包括：

  • Claude Code：.claude/settings.local.json，运行 ${CLAUDE_PROJECT_DIR}/.claude/skills/impeccable/scripts/hook.mjs。
  • GitHub Copilot：.github/hooks/impeccable.json，运行 .github/skills/impeccable/scripts/hook.mjs。
  • Cursor：.cursor/hooks.json，运行 .cursor/skills/impeccable/scripts/hook-before-edit.mjs。
  • Codex：.codex/hooks.json，运行 .agents/skills/impeccable/scripts/hook.mjs。

安装器会保留无关 hook 和 settings。如果 hook manifest 格式错误，默认会中止；可用 --force 备份为 .bak 并替换。调试时可设置 hook.auditLog 或旧环境变量 IMPECCABLE_HOOK_LOG 写入 NDJSON 日志。Codex 仍需用户手动打开 /hooks 并批准项目 hook。

完整 hook 文档见 impeccable.style/docs/hooks。

CLI

Impeccable 也包含一个不依赖 AI harness 的 CLI，用于检测反模式：

npx impeccable detect src/                   # scan a directory
npx impeccable detect index.html             # scan an HTML file
npx impeccable detect https://example.com    # scan a URL (Puppeteer)
npx impeccable detect --json .               # CI-friendly JSON output
npx impeccable detect --no-config src/       # raw scan, ignoring project config/context
npx impeccable ignores list                  # show detector ignores
npx impeccable ignores add-file "src/legacy/**"
npx impeccable ignores add-value overused-font Inter --reason "Brand font"

detector 会捕捉 45 类确定性问题，覆盖 AI slop（side-tab borders、purple gradients、bounce easing、dark glows）和一般设计质量问题（行长、拥挤 padding、小触控目标、跳过 heading 等）。默认会读取 .impeccable/config.json 和 .impeccable/config.local.json 中的 detector 配置。

可以在文件里加入 inline waiver，例如 `。该标记可作用于整个文件，也可用 impeccable-disable-line / impeccable-disable-next-line` 作用于单行。

完整 detector 文档见 impeccable.style/docs/detector。

Supported Tools

Community & Ecosystem

  • GitHub Discussions：提交 bug、请求功能，并帮助新用户。
  • Impeccable on npm：获取 CLI、关注 releases、star package。
  • 关注 @pbakaus 的 Twitter，获取 release notes、lint report 示例和新规则视频。

Contributing

贡献指南和构建说明见 DEVELOP.md。

License

Apache 2.0。见 LICENSE。

---

Created by Paul Bakaus。