Impeccable：提升 AI 前端设计质量的技能包

Impeccable 是 Paul Bakaus 创建的开源 AI 前端设计技能包，采用 Apache 2.0 协议。它不是组件库或CSS主题，而是一套用于约束AI设计输出的“设计词汇层”，帮助Cursor、Claude Code、Gemini CLI、Codex CLI等工具生成更有设计感、可用性更好的界面。

主要功能

• 设计命令集：提供/polish、/audit、/critique、/typeset、/colorize、/layout、/animate等命令。
• 设计参考文件：覆盖排版、OKLCH色彩、间距、动效、交互、响应式布局和UX文案。
• 反模式检测：识别低对比度、默认字体、过度渐变、嵌套卡片和缺乏层次等常见问题。
• Live Mode：在浏览器中选中元素并添加修改意见，实时生成变体并通过HMR预览。
• 图像到代码：先生成网页或移动端设计参考图，再分析并还原为前端代码。
• 项目设计文档：通过/impeccable teach和/impeccable document生成品牌及设计规范文件。
• CLI与Chrome扩展：支持扫描项目反模式，并将结果接入CI或PR检查流程。

如何使用Impeccable

推荐执行npx skills add pbakaus/impeccable安装，也可在Claude Code中添加对应插件。安装后运行/impeccable teach初始化项目设计上下文，再使用/impeccable audit checkout审计页面，或使用/impeccable polish、/impeccable redo优化界面。项目地址：官网。

核心优势

• 专注视觉质量：弥补普通AI编码工具在排版、配色和交互设计上的不足。
• 规则驱动：使用明确的设计原则和反模式规则减少模板化输出。
• 跨工具兼容：同一套技能可在多个AI编程工具中复用。
• 支持实时迭代：能够直接在浏览器中观察、比较和应用设计变化。
• 覆盖完整流程：从品牌定位、设计稿、代码实现到审计和文档沉淀均可使用。

应用场景

• SaaS界面优化：改善仪表盘、设置页、结账页和数据组件的视觉层次。
• 品牌官网制作：建立配色、字体、间距和视觉风格统一的营销页面。
• 设计稿转代码：将高保真图片参考转换为HTML、CSS或前端组件。
• 旧项目改版：审计现有界面并制定现代化重构方案。
• 设计系统建设：整理项目中的设计Token、组件和页面规范。
• CI视觉检查：在开发流程中自动发现常见设计反模式。

Impeccable的建议仍需结合真实用户、无障碍标准、响应式适配和浏览器兼容性进行人工验证。