pbakaus impeccable

以下是您要求的英文文章的中文翻译，已按照保留原文结构、技术术语不翻译、代码块保持原样等要求处理。

Impeccable Design guidance for AI coding agents.

1 项技能，23 条命令，实时浏览器迭代，以及 60 条用于 AI 生成前端设计的确定性检测规则。

快速开始： 在项目根目录下运行 npx impeccable install，然后在 AI 编码工具中运行 /impeccable init。完整文档请访问：impeccable.style。

为什么选择 Impeccable？

Anthropic 的前端设计是 Claude 首个广泛使用的设计技能。Impeccable 正是由此起步。每个模型都在相同的 SaaS 模板上训练。跳过指导，你会在每个项目上看到同样的老套路：到处用 Inter 字体、紫色到蓝色的渐变、卡片嵌套卡片、彩色背景上的灰色文字、每个标题上方都有的圆角方形图标块。

Impeccable 增加了：

一套设置流程。 /impeccable init 会生成 PRODUCT.md 并提供 DESIGN.md，让后续命令了解目标受众、品牌/产品赛道、语气、反面参考、颜色、字体和组件。
23 条命令。 与 AI 共享的设计词汇：polish、audit、critique、distill、animate、bolder、quieter 等等。
60 条确定性检测规则 以及仅限 LLM 的评审检查。CLI 和浏览器扩展无需 LLM 和 API 密钥即可运行确定性规则。

包含内容

技能：impeccable

该技能安装为一条命令：/impeccable

每个新项目从以下命令开始： /impeccable init

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

23 条命令

所有命令通过 /impeccable 访问：

| 命令 | 功能 | |------|------| | /impeccable craft | 完整的先塑形再构建流程，包含视觉迭代 | | /impeccable init | 一次性设置：收集设计上下文，写入 PRODUCT.md 和 DESIGN.md，配置实时模式，推荐后续步骤 | | /impeccable document | 从现有项目代码生成根目录 DESIGN.md | | /impeccable extract | 将可复用组件和令牌提取到设计系统中 | | /impeccable shape | 在编写代码前规划 UX/UI | | /impeccable critique | UX 设计评审：层次结构、清晰度、情感共鸣 | | /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 | 改进不清晰的 UX 文案 | | /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 redo this hero section

反模式

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

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

实际效果

访问 Neo Mirai 案例研究，查看一个真实项目在使用 Impeccable 命令前后的对比。

安装

选项 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 上，它还会为当前项目安装提供商原生的钩子清单。适用于 Cursor、Claude Code、Gemini CLI、Codex CLI、Grok Build 以及其他所有支持的工具。之后请重新加载你的 harness。

要刷新现有安装，运行：

npx impeccable update

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

Grok Build 用户 需要项目文件夹信任（/hooks-trust 或使用 --trust 启动），然后 .grok/hooks/ 中的脚本才能运行。

选项 2：Git 子模块

对于希望将 Impeccable 通过 Git 进行版本管理和更新的团队，将此仓库添加为子模块，并将编译后的提供商构建链接到你的 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。添加市场后，打开 /plugin 并安装 Impeccable。