让 AI 编码 Agent 擅长设计的设计语言
更新于 2026-09-17 · 上次 2026-08-09（57k★ 时代，本次补 v4.1 系列更新）
← 返回汇总治好 AI 生成前端的「千篇一律病」
继承 Anthropic frontend-design skill 的衣钵再进化：用 1 个 skill + 24 个命令 + 61 条确定性检测规则，把「设计品味」变成 AI Agent 可执行的工作流。/impeccable init 一次写入 PRODUCT.md + DESIGN.md（受众、品牌/产品定位、声音、反参考、配色、字体、组件），后续每个命令都读这份上下文。关键差异化：确定性规则无需 LLM/API key，CLI 和浏览器扩展直接跑。适合想让 AI 写出「不像 AI 生成」的前端、或团队要统一设计语言再让 Agent 执行的开发者。
覆盖 Claude Code / Cursor / Codex / Gemini CLI / Grok Build / OpenCode / Kiro / Trae / Vibe / Qoder / RovoDev / Pi / Hermes / Antigravity 等主流 runtime，几乎每个都有对应 .xxx/skills/impeccable 目录。三件套同日发版（2026-08-26）：skill v4.1.2 · cli v3.6.1 · 扩展 v1.3.3；1,656 commits，官网 impeccable.style。
所有模型都在同一批 SaaS 模板上训练，跳过设计引导就会在每个项目留下同样的「指纹」：
什么字体都用 Inter / Arial / system 默认，毫无个性。
purple-to-blue 渐变成了 AI 设计的默认皮肤。
cards nested in cards，层层嵌套，视觉混乱。
gray text on colored backgrounds，对比度灾难。
每个标题上方一块 rounded-square icon tile，千篇一律。
用 #000/#fff 不带色调（impeccable 原则：always tint）。
从零搭建
initcraftshapedocumentextract审查质量
critiqueauditlive打磨细节
polishbolderquieterdistilldelightoverdrive工程健壮性
hardenonboardclarifyadaptoptimize单一维度
animatecolorizetypesetlayout/impeccable pin 创建独立快捷方式
pin audit → /audit| 命令 | 阶段 | 做什么 |
|---|---|---|
init | 设置 | 区分 brand（营销/落地/作品集）vs product（App UI/仪表盘/工具），写入设计上下文 |
shape | 规划 | 写代码前先规划 UX/UI，避免边写边改 |
craft | 构建 | 完整 shape-then-build 流程 + 可视化迭代 |
critique | 评估 | UX 设计评审：层级、清晰度、情感共鸣 |
audit | 评估 | 技术质检：a11y、性能、响应式 |
polish | 精修 | 终检 + 设计系统对齐 + 发布就绪 |
live | 迭代 | 可视化变体模式：浏览器里逐元素迭代 |
harden | 强化 | 错误处理、i18n、文本溢出、边界情况 |
命令可带目标：/impeccable audit blog 审博客页 · /impeccable polish settings 精修设置页 · /impeccable harden checkout 强化结算流程。
这是与 frontend-design 最关键的差异——确定性规则不依赖模型判断，CLI 和浏览器扩展直接跑，结果稳定可复现。
# 1. 项目根目录安装（自动检测 runtime 文件夹） npx impeccable install # 2. AI 工具里初始化（写入 PRODUCT.md + DESIGN.md） /impeccable init # 3. 规划 → 构建 → 评审 → 终检 /impeccable shape # 先规划 UX/UI 再写码 /impeccable craft # shape-then-build 全流程 /impeccable critique # UX 设计评审 /impeccable audit # a11y / 性能 / 响应式 /impeccable polish # 终检 + 发布就绪
也可直接描述需求：/impeccable redo this hero section。/impeccable pin <cmd> 把常用命令提升为顶层快捷方式（如 /audit）。
设计取向：大胆、情感驱动、视觉冲击。允许更多装饰性元素、动画、强对比。目标是吸引注意力、传达品牌个性。
适用命令：bolder · delight · overdrive
设计取向：克制、信息密度、效率优先。强调层级清晰、状态明确、可访问性。目标是让用户高效完成任务。
适用命令：quieter · harden · optimize
这一分叉决定后续所有命令的默认基调——同样是 polish，brand 面会倾向加强视觉，product 面会倾向收敛。这是 impeccable 比 frontend-design 更「懂业务」的关键。
还含 Vibe / Qoder / RovoDev / Pi 等。三种安装方式：① npx impeccable install（推荐，自动检测 + hook 清单）② Git submodule 团队托管 ③ 手动 clone。Claude/Cursor/Codex/Copilot/Grok 还会装 provider-native hook 实现自动化。
| 维度 | frontend-design | Impeccable |
|---|---|---|
| 定位 | 首个广泛使用的设计 skill | 继承衣钵 + 工程化演进 |
| 上下文 | 依赖对话内引导 | PRODUCT.md + DESIGN.md 持久化 |
| 命令 | 单一 skill 触发 | 24 个语义化子命令 |
| 检测 | 纯 LLM 判断 | 59 条确定性规则（零 LLM）+ LLM critique |
| brand/product | 不区分 | init 分叉，基调自适应 |
| 迭代 | 对话轮次 | live 浏览器可视化变体模式 |
| runtime | 主要 Claude | 14+ runtime + hook 自动化 |
craft 生成的每个「设计世界」现在都带裁决——交付给你的方向，已经吸收了落选世界做得更好的部分。你从一手被打过的牌里选，不是盲抽safer / bolder 沿「熟悉→大胆」轴瞄准下一次发牌；骰子没选中时 IMPECCABLE'S PICK 展示模型自己的最爱data-impeccable-ignore 只静默携带它的那个元素，不再一刀切关掉整条规则color-mix() 内嵌 hex 不再误触渐变对比；虚线单向规则不再被当网格背景/styles.css 的页面不再被「裸判」；.. 越界路径拒绝并警告projectRoots 优先，父级设计系统只在真拥有该路径时继承官方口径「The same 59 rules, quieter」——规则数不膨胀，误报率下陈才是检测器的进化方向，和 lint 工具成熟路径一致。
本地构建的交互式检测器，左边输入 HTML/CSS，右边实时跑 15 条代表性规则，即时标红违规 + 给出 impeccable 命令修法。零 LLM、零 API key，确定性规则直接跑。
粘贴 HTML 即时跑规则，200ms 防抖，边改边看结果
切换基调，规则集自适应——product 面更克制，brand 面更个性
内置「典型 AI 味 / 已治愈 / 卡片套娃」三组对比样本
extract 从现有代码抽取可复用组件和 token，document 生成 DESIGN.md「AI 设计品味」赛道的事实标准候选。68.6k stars 远超原版 frontend-design，确定性检测 + 命令词汇表 + runtime 全覆盖的组合构成强护城河。若 hook 自动化 + 浏览器扩展形成「写完即审」闭环，可能成为 AI 前端开发的 lint 那样的基础设施。