pbakaus impeccable

Impeccable

你未曾意识到自己需要的词汇表。1 项技能、23 条命令，以及精心整理的 anti-patterns，助你实现无可挑剔的前端设计。

快速开始： 访问 impeccable.style 下载即用型捆绑包。

为什么选择 Impeccable？

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

Impeccable 新增：

7 个领域参考文件（[查看源码](view source)）：排版、色彩、动效、空间、交互、响应式、UX 写作。每条命令加载时一并载入，同时附带一个品牌 vs 产品寄存器，用于调整默认值。
23 条命令。与你的 AI 共享设计词汇：polish、audit、critique、distill、animate、bolder、quieter 等。
27 条确定性 anti-pattern 规则，外加一轮 12 条规则的 LLM 评审。CLI 和浏览器扩展可运行确定性规则，无需 LLM 和 API 密钥。每条规则都对应技能所反对的特定设计指导。

包含内容

技能：impeccable

一项全面的设计技能，包含 7 个领域特定参考（[查看技能](view skill)）：

| 参考 | 覆盖内容 | |------|----------| | typography | 字体系统、字体搭配、模数缩放、OpenType | | color-and-contrast | OKLCH、着色中性色、深色模式、无障碍设计 | | spatial-design | 间距系统、网格、视觉层级 | | motion-design | 缓动曲线、交错、减少动效 | | interaction-design | 表单、焦点状态、加载模式 | | responsive-design | 移动优先、流式设计、容器查询 | | ux-writing | 按钮标签、错误消息、空状态 |

23 条命令

所有命令通过 /impeccable 访问：

| 命令 | 功能 | |------|------| | /impeccable craft | 完整的“塑形-构建”流程，附带视觉迭代 | | /impeccable init | 一次性设置：收集设计上下文，编写 PRODUCT.md 和 DESIGN.md，配置实时模式，推荐后续步骤 | | /impeccable document | 从现有项目代码生成根目录 DESIGN.md | | /impeccable extract | 将可复用组件和 token 提取到设计系统中 | | /impeccable shape | 在编写代码前规划 UX/UI | | /impeccable critique | UX 设计评审：层级、清晰度、情感共鸣 | | /impeccable audit | 运行技术质量检查（a11y、性能、响应式） | | /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 加描述：

/impeccable redo this hero section

Anti-Patterns

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

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

查看实际效果

访问 impeccable.style，查看使用 Impeccable 命令改造真实项目的前后案例研究。

安装

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

在项目根目录运行：

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 同样有效，但会为所有工具链安装一个共享构建，而非针对你的工具编译的版本。

选项 2：从网站下载

访问 impeccable.style，下载适用于你工具的 ZIP 文件，并解压到项目目录。

选项 3：从仓库复制

Cursor：

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

注意：Cursor 技能需要设置：

在 Cursor Settings → Beta 中切换到 Nightly 频道
在 Cursor Settings → Rules 中启用 Agent Skills
了解更多关于 Cursor 技能的信息

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 技能需要设置：

安装预览版：npm i -g @google/gemini-cli@preview
运行 /settings 并启用 "Skills"
运行 /skills list 验证安装
了解更多关于 Gemini CLI 技能的信息

Codex CLI：

# 项目本地
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：

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

Trae：

# Trae 中国（国内版）
cp -r dist