AI生成页面为何千篇一律？这款开源工具助你摆脱AI味设计
Impeccable：1项技能、23条指令、27条禁令，让AI编程助手输出具备设计审美的UI
紫蓝渐变背景，Inter字体，嵌套卡片，圆角方块图标，半透明毛玻璃按钮……
在 Cursor、Claude Code 或 Copilot 等工具中生成页面时，你可能会注意到一个令人尴尬的现象：无论项目如何，AI 输出的页面看起来都惊人地相似。
这并非巧合。所有 AI 模型都在同一批 SaaS 模板和设计系统上接受训练。没有明确的指导，它们就会本能地生成那些“安全模板”——Inter 字体主导，紫蓝渐变泛滥，内容被塞进卡片中。
问题不在于 AI 编写代码的能力，而在于它缺乏设计品味。
今天介绍一个开源解决方案——Impeccable，旨在解决这一具体问题。它不替代 AI 工具，而是为 AI“注入设计大脑”。
Impeccable 是由知名前端开发者 Paul Bakaus 开发的开源项目，基于 Apache 2.0 协议。它源自 Anthropic 的 frontend-design 技能，但经过了显著的扩展和重构。
核心理念很简单：为 AI 编程助手提供一套完整的设计词汇和审美标准，以确保 UI 设计不再千篇一律。
它包含三个核心组件：
一条安装命令，立即可用。
### 📚 7 大设计领域参考文件
Impeccable 预装了 7 个领域的设计知识库，每次执行命令时都会自动加载：
这确保了 AI 不再凭“直觉”设计，而是遵循系统化的标准。
### 🎛️ 23 条设计指令
这是 Impeccable 的核心——一套你和 AI 共享的设计词汇表：
全流程指令：
设计规划：
审查与优化：
风格调整（这部分最有趣）：
专项优化：
用法示例：
每条指令都可以通过 /impeccable pin 固定为快捷方式，例如 pin audit 之后直接用 /audit。
### 🚫 反模式检测：拦截“AI味”
Impeccable 内置了 27 条确定性反模式规则，明确告诉 AI“不要做什么”：
典型反模式包括：
这些规则不需要 LLM 参与，也不需要 API 密钥，纯粹是确定性检测。
### 🔍 独立 CLI 检测器
Impeccable 还提供了一个独立的命令行工具，可以在没有 AI 环境的情况下使用：
检测器能识别 24 类问题，涵盖 AI 生成痕迹（侧边条纹边框、紫蓝渐变、弹性缓动、暗色发光）和通用设计质量（行长、间距过紧、触摸目标过小、跳过标题层级等）。
关键在于：这个检测器可以集成到 CI/CD 流水线中。在 PR 提交时自动检测“AI味”代码，不符合标准则阻止合并。这相当于为团队增加了一道“设计品味的代码审查”。
### 🎨 品牌模式 vs 产品模式
Impeccable 有一个聪明的功能：它区分品牌页面和产品界面两种模式。
每条指令都会自动识别当前是哪种模式，并调整设计策略。落地页和数据仪表盘的设计规则本来就不同，Impeccable 深知这一点。
### 🔄 Live Mode（Beta）：实时迭代
这是一个正在测试的功能，但已经非常有用：
1. 在运行的 dev server 中选中任意元素
2. 输入设计指令（如“more elegant”或“bolder ×3”）
3. 点击 Go
4. 3 个生产级变体通过 HMR 即时替换到你的应用中
变体直接写入源代码文件，而非临时预览。你可以审查 diff，选择保留或撤销。
### 📋 DESIGN.md：可移植的设计系统
/impeccable document 命令生成 DESIGN.md 文件，遵循 Google Stitch 规范。色彩系统、字体层级、组件库——全部以结构化方式记录。
该文件可被任何支持 DESIGN.md 格式的工具读取，实现设计系统跨工具迁移。
几乎覆盖所有主流工具：
就一条。它会自动检测你当前的 AI 编程工具（Cursor、Claude Code、Copilot 等），并将相应的技能文件安装到正确位置。安装后重新加载工具即可。
也可以访问 impeccable.style 直接下载对应工具的安装包。
AI 编程工具正在飞速进化，写代码的能力已经非常强。但在“设计品味”方面，AI 仍停留在“抄模板”阶段。
Impeccable 的价值不在于替代设计师，而在于给 AI 提供设计标准。有了 Impeccable 的引导，Cursor 或 Claude Code 生成的页面不再是千篇一律的“AI味”页面，而是真正符合设计原则的、有品味的 UI。
在 AI 越来越能写代码的时代，“设计品味”可能正是人类最不可替代的能力。而 Impeccable 正在将这种能力传递给 AI。
📎 项目地址： https://github.com/pbakaus/impeccable
📎 官方网站： https://impeccable.style
📎 npm 包： https://www.npmjs.com/package/impeccable
*声明：本文基于项目官方文档和公开信息整理，仅供参考。项目持续更新中，具体功能以最新版本为准。*