夜雨聆风为什么 AI 生成的界面总有"外包感"
很多开发者发现，用 Claude Code 写落地页。prompt 写得挺详细，AI 也很快就交稿了。但打开预览的那一刻，生成的界面往往千篇一律：紫蓝渐变背景、圆角 16px 的卡片、Inter 字体、左边图标右边标题的功能模块——这不就是无数个 AI 生成项目里常见的那套模板吗？
社区里有开发者反馈：挺好看的，但看起来像是外包做的。
这反映了一个普遍问题。AI 不是不会设计，而是它根本不懂什么是好设计。它只会复现训练数据里最常见的模式，就像一个学生背了很多答案，但从未理解过题目。
社区里不少人推荐了 Impeccable。
Impeccable 是什么
Impeccable 是 Paul Bakaus 开源的一套设计技能框架。Paul 是 jQuery UI 的创始人，曾在 Google Chrome 团队工作多年。他做这个项目的原因很简单：受够了 AI 生成的千篇一律的界面，想给 AI 编程助手装一个设计总监。
它不是组件库，也不是 UI 框架。它更像是一套“设计词汇”——让 AI 知道什么是好的排版、什么是糟糕的配色、什么时候该克制、什么时候该大胆。
截至 2026 年 6 月，这个项目在 GitHub 上已经获得了超过 40,000 Stars，支持 Claude Code、Cursor、Codex、GitHub Copilot、Gemini CLI 等 10 余种主流 AI 编程工具。
23 个命令：从审计到改造的全链路
Impeccable 的核心是 23 个可调用命令。社区实践表明，把它们分成四类，每类对应不同的使用场景。
一、审计评审类：先体检，再动手
audit 命令会对现有 UI 做全面技术审计，输出可访问性问题、性能瓶颈、响应式缺陷、设计系统不一致项。critique 则从 UX 角度评审，指出视觉层级问题、信息架构缺陷、认知负荷过高等设计层面的问题。
开发者通常先用 audit 做一次全面体检，再用 critique 做一次设计评审。两个命令的输出互补，一个抓技术问题，一个抓体验问题。
二、定向改造类：哪里不对改哪里
这是社区里最常用的一类命令。七个命令分别针对不同的设计问题：bolder 提升视觉冲击力，quieter 降低噪音，layout 修复布局结构，typeset 优化字体排版，colorize 改善配色，animate 添加 purposeful 动效，delight 增加惊喜时刻。
比如 typeset 会主动避开 AI 默认字体（Inter、Roboto、Arial 等），推荐有辨识度的组合；colorize 会替换掉标志性的'AI 紫蓝渐变'，引入符合品牌调性的战略性配色。
三、最终打磨类：交付前的细节
polish 是改造完成后的最终检查，确保所有颜色来自 design token、间距遵循 scale、字体层级一致、交互状态完整。harden 处理生产级细节：错误状态、文本溢出、边界情况。onboard 优化首次使用流程，clarify 改善 UX 文案。
四、实时迭代类：最实用的功能
live 命令启动本地服务器，AI 修改代码后浏览器自动刷新。开发者可以直接说'这个按钮太丑了，改成圆角小一点的蓝色'，AI 改完立刻看到效果。这比传统的'生成→刷新→不满意→重新生成'循环快 10 倍以上。
社区验证的实战流程
在深入使用之前，先看看社区里的真实反馈。 X 上一位开发者分享：
这个分享得到了112l浏览和1.4k小心心
Claude Code 官方账号也推荐了一个三步流程：/impeccable teach（收集设计上下文）→ /audit（技术质量检查）→ /critique（UX 设计评审）。
结合社区经验，总结了一个更完整的流程。
已有项目改造：我的五步实践
对于已有前端项目的开发者，推荐按这个顺序使用。
第一步：初始化项目上下文
运行 /impeccable init，回答几个关键问题：产品定位是什么（品牌展示型还是工具型）、目标用户是谁、核心功能有哪些、技术栈是什么。这些信息会写入 PRODUCT.md，后续所有命令都基于它做决策。
比如选择「品牌展示型」，后续的 bolder 和 delight 命令会更激进；
选择「工具型」，则会更注重可用性和一致性。
第二步：全面体检
运行 /impeccable audit，等待它扫描整个项目的 UI 文件。输出通常分为四个等级：ERROR 级别必须修复，比如图片缺少 alt 文本、按钮对比度低于 WCAG AA 标准；WARNING 级别建议修复，比如硬编码颜色、间距不遵循设计系统；INFO 级别是优化建议，比如可以提取为组件的重复代码。
audit 还会输出一个优先级排序，告诉你先修哪些问题影响最大。可访问性问题优先级最高，响应式缺陷次之。
第三步：定向改造
根据 audit 结果选择 1-3 个命令。不要一次运行太多，否则 AI 容易迷失方向。推荐一次只聚焦一个维度。
如果 audit 显示「字体层级扁平」，运行 /impeccable typeset。typeset 会重新建立字体层级：标题 32-48px，副标题 24px，正文 16px，辅助文字 14px，每级之间保持至少 1.25 倍的比例。它还会替换掉 AI 默认的 Inter 或 Roboto，根据品牌调性推荐更有辨识度的字体组合。
如果 audit 显示「配色使用硬编码紫色」，运行 /impeccable colorize。colorize 会分析品牌色，建立完整的色彩系统：主色用于主要行动按钮，辅色用于次要操作，中性色用于背景和边框，语义色用于成功、警告、错误状态。它会彻底替换掉标志性的「AI 紫蓝渐变」。
如果 audit 显示「布局间距不一致」，运行 /impeccable layout。layout 会重建整个布局系统：检查网格和 flex 是否合理、间距是否遵循 4px 倍数阶梯、元素对齐是否基于基线或中心线。
改造完成后，通常会立即运行 /impeccable critique 做一次 UX 评审，从用户视角审视视觉层级、信息架构和认知负荷。
第四步：最终打磨
运行 /impeccable polish，这是交付前的最终检查。polish 会逐项验证：所有颜色是否来自 design token，无硬编码；所有间距是否遵循 spacing scale；字体层级是否一致；交互状态是否完整（hover、focus、active、disabled）；动效是否统一；无 a11y 警告；无性能瓶颈。
polish 还会生成一个检查清单，列出需要人工确认的细节。比如 Hero 区域背景图是否已获得授权、表单错误提示文案是否已按品牌语调调整。
第五步：生产加固
运行 /impeccable harden 处理错误状态和边界情况。harden 会检查：所有异步操作是否有 loading 和 error 状态；表单提交失败是否有重试机制；文本溢出是否有截断处理；空数据是否有空状态页面；网络断线是否有离线提示。
如果产品有新用户，再运行 /impeccable onboard 优化首次使用流程：空状态是否有引导操作、首次登录是否有欢迎流程、核心功能是否有功能提示。
快速开始
安装只需要一行命令：npx impeccable install。支持 Claude Code、Cursor、Codex、GitHub Copilot、Gemini CLI、OpenCode、Trae 等 10 余种工具。
安装后，在项目根目录运行 /impeccable init，回答几个问题，就可以开始改造了。常用命令可以 pin 成快捷方式，比如 /impeccable pin audit，之后直接用 /audit。
如果只想先试试效果，/impeccable live 是最低门槛的入口。启动后直接在浏览器里对话，让 AI 改界面，实时看效果。
