pbakaus/impeccable

来源：https://github.com/pbakaus/impeccable

Impeccable

你未曾意识到需要的设计词汇。1项技能、23条命令，以及精心策划的反模式指南，助力无可挑剔的前端设计。

快速开始： 访问 impeccable.style (https://impeccable.style) 下载可直接使用的捆绑包。

为什么选择 Impeccable？

Anthropic 的前端设计技能 (https://github.com/anthropics/skills/tree/main/skills/frontend-design) 是 Claude 首个广泛使用的设计技能。Impeccable 在此基础上诞生。

所有模型都基于相同的 SaaS 模板进行训练。跳过指导，你会在每个项目上看到同样的那几个标志性特征：处处用 Inter 字体、紫蓝渐变、卡片嵌套卡片、彩色背景上的灰色文字、每个标题上方带圆角方块的图标瓷砖。

Impeccable 新增了：

• 7 个领域参考文件（查看源码）。涵盖排版、色彩、动效、空间、交互、响应式、UX 写作。每次执行命令时都会加载，同时附带品牌与产品的注册表，用于调整默认值。
• 23 条命令。与你的 AI 共享设计词汇：polish（打磨）、audit（审查）、critique（评审）、distill（提炼）、animate（动画）、bolder（更大胆）、quieter（更柔和）等。
• 27 条确定性反模式规则，外加 12 条 LLM 评审规则。CLI 和浏览器扩展无需 LLM、无需 API 密钥即可运行确定性规则。每条规则都对应技能所教导的特定设计指南。

包含内容

技能：impeccable

一项全面的设计技能，包含 7 个领域特定参考文件（查看技能）：

23 条命令

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

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

使用示例

/impeccable audit blog # 审查博客中心及文章页面 /impeccable critique landing # UX 设计评审 /impeccable polish settings # 发布前最终完善 /impeccable harden checkout # 添加错误处理与边界情况

或者直接使用 /impeccable 加描述：

/impeccable redo this hero section

反模式

技能中包含了明确应避免的指导：

• 不要使用过度使用的字体（Arial、Inter、系统默认字体）
• 不要在彩色背景上使用灰色文字
• 不要使用纯黑/灰色（始终进行染色）
• 不要将所有内容包裹在卡片中，或卡片嵌套卡片
• 不要使用弹跳/弹性缓动（显得过时）

实际效果

访问 impeccable.style (https://impeccable.style#casestudies) 查看使用 Impeccable 命令改造真实项目的前后对比案例研究。

安装

方式一：CLI 安装器（推荐）

在项目根目录运行：

bash npx impeccable skills install

这将自动检测你的工具链，并将编译后的构建文件写入正确位置（.claude/skills/、.cursor/skills/ 等）。适用于 Cursor、Claude Code、Gemini CLI、Codex CLI 以及所有其他受支持的工具。之后重新加载你的工具链。

Claude Code 用户也可以使用 /plugin marketplace add pbakaus/impeccable 安装插件。通用命令 npx skills add pbakaus/impeccable 同样有效，不过它会安装一个所有工具链通用的构建文件，而非针对你的工具链编译的版本。

方式二：从网站下载

访问 impeccable.style (https://impeccable.style)，下载适用于你工具的 ZIP 包，并解压到你的项目中。

方式三：从仓库复制

Cursor：

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

注意： Cursor 技能需要额外设置：

1. 在 Cursor 设置 → Beta 中切换到 Nightly 频道
2. 在 Cursor 设置 → Rules 中启用 Agent Skills

了解更多关于 Cursor 技能的信息 (https://cursor.com/docs/context/skills)

Claude Code：

``bash

项目专用

cp -r dist/claude-code/.claude your-project/

或全局（适用于所有项目）

cp -r dist/claude-code/.claude/* ~/.claude/
``

OpenCode：

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

Pi：

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

Gemini CLI：

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

注意： Gemini CLI 技能需要额外设置：

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

了解更多关于 Gemini CLI 技能的信息 (https://geminicli.com/docs/cli/skills/)

Codex CLI：

``bash

项目本地

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

或用户级

mkdir -p ~/.agents/skills
cp -r dist/agents/.agents/skills/* ~/.agents/skills/
``

asset-producer 子代理嵌套在技能自身的 agents/ 文件夹内，Codex 会自动发现。无需单独复制到 .codex/agents/。

GitHub Copilot：

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

Trae：

``bash

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：

``bash

项目专用

cp -r dist/rovo-dev/.rovodev your-project/

或全局（适用于所有项目）

cp -r dist/rovo-dev/.rovodev/skills/* ~/.rovodev/skills/
``

Qoder：

``bash

项目专用

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

或全局（适用于所有项目）

cp -r dist/qoder/.qoder/skills/* ~/.qoder/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 在此处使用技能，而非 /prompts: 命令。打开 /skills 或输入 $impeccable。仓库本地安装位于 .agents/skills/；用户级安装位于 ~/.agents/skills/。GitHub Copilot 使用 .github/skills/。如果新安装的技能未显示，请重启工具。

CLI

Impeccable 包含一个独立的 CLI，无需 AI 工具即可检测反模式：

bash npx impeccable detect src/ # 扫描目录 npx impeccable detect index.html # 扫描 HTML 文件 npx impeccable detect https://example.com # 扫描 URL（需要 Puppeteer） npx impeccable detect --fast --json . # 仅正则，JSON 输出

该检测器可识别 24 类问题，涵盖 AI 风格通病（侧边栏边框、紫色渐变、弹跳缓动、深色发光）以及通用设计质量（行长、间距过紧、触摸目标过小、标题跳过等）。

受支持的工具

• Cursor (https://cursor.com)
• Claude Code (https://claude.ai/code)
• OpenCode (https://opencode.ai)
• Pi (https://pi.dev)
• Gemini CLI (https://github.com/google-gemini/gemini-cli)
• Codex CLI (https://github.com/openai/codex)
• VS Code Copilot (https://code.visualstudio.com)
• Kiro (https://kiro.dev)
• Trae (https://trae.ai)
• Rovo Dev (https://www.atlassian.com/software/rovo)
• Qoder (https://qoder.com)

社区与生态

加入社区和生态讨论：

• GitHub Discussions：提交 Bug、请求功能、帮助新手。
• npm 上的 Impeccable (https://www.npmjs.com/package/impeccable)：获取 CLI、关注发布、给包加星标。
• 在 Twitter 上关注 @pbakaus 获取发布说明、示例 lint 报告以及新规则的视频亮点。

贡献

参与贡献请参阅 DEVELOP.md 中的贡献指南和构建说明。

许可证

Apache 2.0。详见 LICENSE。

Impeccable 技能基于 Anthropic 的原始前端设计技能 (https://github.com/anthropics/skills/tree/main/skills/frontend-design) 构建。署名信息见 NOTICE.md。

由 Paul Bakaus (https://www.paulbakaus.com) 创作。