Impeccable Skill：让 Claude Code 等 AI 一键告别 Inter 字体和紫蓝渐变的设计操作系统

Skill超级捕获手 技术创作者 2026-08-01 42 阅读

2026 上半年，AI 设计代码生成的最大槽点终于有了系统性解药。pbakaus/impeccable 这款开源 Skill，把”AI 前端永远是 Inter 字体、紫蓝渐变、卡片套卡片”的顽疾，打包成 1 个 skill + 23 个 slash commands + 59 条确定性检测规则，让 Claude Code、Cursor、Codex、Gemini CLI、Grok Build 等所有主流 AI 编码客户端在生成 UI 时不再掉进同一个模子。它直接继承自 Anthropic 官方 frontend-design，上线 8 个多月迅速登顶 GitHub Trending，本周狂揽 3,774 星，是当前 AI 设计增强赛道最炙手可热的 Skill 仓库。

功能与原则

Impeccable 围绕”让 AI 真正懂得设计”这一目标，把能力拆成四个层次：先建模、再生成、再迭代、最后发版。它通过 /impeccable init 一次性写入 PRODUCT.md 和 DESIGN.md，让模型从此拥有”产品上下文 + 设计语言”双记忆，后续每条命令都基于这两份档案做出符合品牌的一致决策。核心原则是不只给模型塞 prompt，而是建立一套确定性规则 + 浏览器内实时迭代 + LLM 评审的三层防线：59 条 detector rules 由 CLI 与浏览器扩展执行、完全无需 API Key，LLM 只负责”感性评审”，把成本与延迟都压到最低。

认可度

  • GitHub Stars：53,455（截至 2026-08-01，GitHub API 实时核对）
  • Forks：3,167 · Watchers：154 · Open Issues：37
  • 本周新增 3,774 stars，连续多周霸榜 GitHub Trending TypeScript 与 JavaScript 周榜
  • 同时进入 GitHub Trending Daily 与 Weekly Top 10
  • 项目站点 impeccable.style 上线”Neo Mirai”完整 before/after 案例，吸引大量 X/Twitter 设计圈 KOL 转发
  • 协议：Apache-2.0（可商用、衍生友好）

链接

GitHub 仓库：https://github.com/pbakaus/impeccable

项目官网（含 case study 与文档）：https://impeccable.style

原作者

Paul Bakaus（GitHub：@pbakaus，X：@pbakaus），Google Creative Technologist，jQuery UI 与 Google for Creators 的原作者，现任 Spotter Studio 创始人。GitHub 粉丝 2,070，26 个公开仓库，长期活跃在前端与创意编程交叉地带——这为他做”AI 设计感提升”项目提供了天然背书。

介绍

Impeccable 自我定位是”AI Harness 的设计语言层”，把 Claude Code、Cursor、Codex CLI、Gemini CLI、Grok Build、GitHub Copilot、Trae 等十余款主流 AI 编码客户端的设计输出，从”统一 SaaS 模板味”拉回”有品牌感的真设计”。它不依赖外部 SaaS、完全本地运行：项目目录下的 .impeccable/ 子目录就是它的工作区，存放配置文件、critique 截图、live-mode 会话状态等。

整套 Skill 由三层构成：Setup 层（/impeccable init 写品牌上下文）、Command 层（23 条 slash 命令覆盖 craft / polish / audit / critique / distill / animate / colorize / typeset / layout / harden / onboard / delight / overdrive / clarify / adapt / optimize / live 等工作流）、Rule 层（59 条 detector + LLM-only critique）。用户可以单独 /impeccable audit blog 检查博客页，也可以 /impeccable redo this hero section 直接叫模型重做局部。Live Mode 还能在浏览器里并行渲染多个变体供开发者挑选——这是 23 条命令里最高级的一条。

特点

  • 一命令安装：项目根目录跑 npx impeccable install，自动检测 Claude / Codex / Grok / Cursor 目录，按需写入对应 skills/agents/hooks
  • 23 条 slash commands，覆盖从 setup → design → audit → polish → ship 的完整链路，可用 /impeccable pin audit 自行钉快捷指令
  • 59 条确定性 detector 规则 + LLM-only critique，CLI 与浏览器扩展可脱机运行，零 API Key 也能先做机械体检
  • 支持十余款 AI 编码客户端：Claude Code、Cursor、Codex CLI、Gemini CLI、Grok Build、GitHub Copilot、OpenCode、Pi、Qoder、Trae（国际/中国）、Rovo Dev、Mistral Vibe、Google Antigravity
  • Live Mode 浏览器实时迭代：在浏览器里并排渲染多个变体，设计师/开发者点选落地
  • 避免反模式清单内置：禁用 Arial / Inter / 系统默认字体、禁灰字配彩底、禁纯黑灰、禁卡片套娃、禁弹性缓动——这条 negative prompt 本身就是 design playbook

使用方法

# 1. 在项目根目录安装（自动检测你的 AI 客户端）
npx impeccable install

# 2. 启动你常用的 AI 编码工具，重启/重载 harness
# 3. 第一次运行：初始化产品与设计上下文
/impeccable init

# 4. 开始一条设计流：先做再评再迭代
/impeccable craft landing
/impeccable audit blog
/impeccable polish settings
/impeccable harden checkout

进阶玩法：用 npx impeccable install --providers=claude,cursor --scope=project 跳过交互；用 git submodule add https://github.com/pbakaus/impeccable .impeccable 把仓库 vendored 进团队仓，用 npx impeccable link --source=.impeccable --providers=claude,cursor 链接子模块以保持版本受控；想在 Claude Code 里走 marketplace 路线则 /plugin marketplace add pbakaus/impeccable。

使用场景与人群

  • 独立开发者 / 副业项目：一个人做出”看起来像有设计师参与”的产品页面
  • 初创公司前端团队：没有专职 UI 设计师时，让 AI 输出符合品牌调性的页面
  • 外包/咨询团队：在多个客户项目间切换时，用同一套设计纪律保证输出稳定
  • 大型公司内 AI 编程推广：给数百名工程师提供一致的设计语言层，避免每个 PR 都”换个字体就合并”
  • 设计 KOL / 教学场景：讲解”AI 设计感如何提升”的最佳反面/正面教材

输入与输出案例

输入（用户在 Claude Code / Cursor 里发的 prompt）：

/impeccable craft landing

输出（Impeccable 在你的项目里做的事）：

  • 读取 .impeccable/PRODUCT.md + DESIGN.md，确认品牌定位（brand vs product）、目标用户、anti-references
  • 让 LLM 先生成 3 个 layout shape 方案 → 通过 59 条 detector 规则筛掉有反模式（卡片套娃、Inter、紫蓝渐变）的方案
  • Live Mode 在浏览器里并排渲染幸存方案，附 critique 截图与说明
  • 用户选完 → 模型继续 build，再走 /impeccable audit 做 a11y / 性能 / 响应式体检 → /impeccable polish 做最后一轮对齐

输入：/impeccable polish the hero section

输出：只对 hero 区域做”polish pass”——加 micro-interaction、调整字体节奏、对齐视觉密度、输出对比截图并写入 .impeccable/critique/。无副作用、零扩散到其他组件。

作为 Anthropic 官方 frontend-design 的最强社区继任者，Impeccable 用一种”AI 也能学的设计纪律”的思路，重新定义了 Skill 在设计领域的标准形态——它不只是一份 prompt 模板，而是一套带状态机、带规则引擎、带 Live Mode 的设计操作系统。如果你正被 AI 生成 UI 的”千篇一律感”折磨，现在正是上车的时候。

GitHub: https://github.com/pbakaus/impeccable

评论区

0 条评论

登录后可评论。

Skill超级捕获手 42 阅读