Impeccable是一个开源的AI前端设计语言和技能库，旨在帮助AI编程助手（如Claude Code、Cursor等）生成更高质量、更具美感的UI设计，避免千篇一律的“AI塑料感”界面。该项目在Anthropic的frontend-design基础上进行了扩展，提供了包含7个领域特定参考文件的技能库、20条控制指令以及精心整理的反模式（Anti-patterns）指南。通过这些资源，开发者可以明确指导AI在编写前端代码时避免常见的设计误区（如滥用卡片嵌套、使用纯灰纯黑、缺乏视觉节奏等），并支持使用简单的斜杠指令（如/audit、/normalize、/critique、/polish等）对AI生成的UI进行自动化审查、规范化对齐、体验评估和细节打磨，从而显著提升AI在前端UI/UX设计领域的表现。
功能列表
- 提供20条AI控制指令：包含
/audit（审查UI质量并生成报告）、/normalize（对齐设计系统与规范化间距）、/critique（进行用户体验交互审查）、/polish（上线前的最终视觉打磨）等，覆盖前端设计的全流程。 - 内置7个领域特定参考文件：拓展了AI在排版、色彩、间距、动效、组件设计等不同专业维度的知识，使AI具备更深厚的前端设计素养。
- 防劣质设计反模式库（Anti-patterns）：明确告知AI在设计时“不要做什么”，例如不要使用纯黑/纯灰色（应带色调）、不要滥用卡片嵌套、不要使用系统默认或过度使用的字体等。
- 支持多款AI工具集成：完美兼容Anthropic最新推出的Claude Code终端工具，同时也为Cursor、Windsurf等AI编程编辑器提供了现成的配置文件和Prompt包。
- 前后效果对比案例：提供了使用Impeccable指令集前后的真实UI设计对比案例，方便开发者直观评估其对AI生成代码的改善效果。
使用帮助
欢迎使用 Impeccable，这是一个专门为提升 AI 编程助手（如 Claude Code, Cursor 等）在前端界面（UI/UX）设计能力的开源指令集和技能库。本帮助文档将详细指导您如何进行安装、如何操作各项特色指令以及如何在实际开发中高效配合 AI 使用，确保您阅读后可以立即上手！
一、 如何安装 Impeccable
根据您日常使用的 AI 工具不同，Impeccable 提供了多种安装和集成方式：
1. 在 Claude Code 中安装（推荐）
如果您正在使用 Anthropic 官方推出的终端 AI 编程助手 Claude Code，安装 Impeccable 非常简单，只需要在终端中运行一条命令即可：
- 第一步： 打开您的终端（Terminal）。
- 第二步： 确保您已经全局安装并登录了 Claude Code。
- 第三步： 复制并运行以下命令：
claude install-skill https://github.com/pbakaus/impeccable - 第四步： 安装完成后，Claude Code 将自动加载 Impeccable 的 20 条专业指令和反模式库，您可以随时在对话中使用它们。
2. 在 Cursor 编辑器中安装
如果您喜欢使用 Cursor 这款 AI 原生代码编辑器，可以通过复制配置文件的方式将 Impeccable 的能力注入您的项目：
- 第一步： 访问 Impeccable 的 GitHub 仓库或者官方网站下载最新的项目压缩包，解压它。
- 第二步： 找到解压文件夹中的
dist/cursor/.cursor目录。 - 第三步： 将该目录下的所有配置文件直接复制到您正在开发的本地项目根目录下的
.cursor文件夹中。 - 第四步： 重启您的 Cursor 编辑器或刷新上下文，此时 Cursor 在针对该项目生成代码时便会默认遵守 Impeccable 的设计规范。
3. 在其他 AI 工具中使用（如 Web 端 Claude、ChatGPT、v0 等）
如果您没有使用上述本地客户端，仍然可以通过手动复制 Prompt（提示词）来享受 Impeccable 的设计指导：
- 第一步： 打开 Impeccable 的开源仓库，进入规则或提示词存放的文件夹（如
dist或src）。 - 第二步： 将其中整理好的设计原则、反模式规则以及操作指令说明全文复制。
- 第三步： 在向 AI 提问前，先将这些内容作为上下文（System Prompt）喂给 AI，或者直接作为对话的第一条消息发送，并告诉它：“在接下来的前端开发中，请严格遵守这些设计规范。”
二、 核心特色指令与具体操作流程
Impeccable 的核心在于其精心设计的 20 条斜杠（/）指令。熟练掌握这些指令，能够让你对 AI 生成的 UI 质量拥有绝对的控制权。以下是几个最常用、最核心的指令操作详解：
1. /audit —— 自动化 UI 质量审查
- 功能介绍： 运行质量检查并输出一份详细的 UI 审查报告。该指令只会指出当前 UI 界面存在的设计问题，默认情况下不会直接修改代码。
- 适用场景： 在你让 AI 大改动代码前，先了解当前页面有哪些地方不合规。
- 操作范例：
/audit blog（对博客聚合页和文章详情页进行 UI 质量审查）/audit dashboard（检查控制台仪表盘的各类组件是否规范）
2. /normalize —— 规范化与设计系统对齐
- 功能介绍： 将代码与标准的 UI 设计系统进行对齐。它会帮你修复混乱的间距、不规范的字体大小，并将零散的颜色值替换为统一的设计 Token。
- 适用场景： 在完成
/audit审查后，或者你觉得 AI 生成的界面有些凌乱、没有对齐时使用。 - 操作范例：
/normalize blog（应用设计 Token 并修正博客页面的间距）/normalize buttons（标准化项目中所有按钮的样式与尺寸）
3. /critique —— 深度 UX（用户体验）审查
- 功能介绍： 提供高水准的交互与用户体验设计反馈。它不会过多关注代码细节，而是从可用性、易用性的角度提出反馈，并给予 AI 建议。
- 适用场景： 当你想寻求 UI 设计上的反馈和灵感，而不是直接进行技术性修复时。
- 操作范例：
/critique landing page（审查落地页的整体用户体验和转化动线）/critique onboarding（检查新用户引导流程是否存在认知负荷）
4. /polish —— 视觉精细化打磨
- 功能介绍： 针对 UI 进行最后的润色。修复细微的像素瑕疵、调整对比度、优化留白，让页面看起来更加精致和专业。
- 适用场景： 在将代码部署到生产环境、正式发布前的最后一步。
- 操作范例：
/polish feature modal（在上线前，对新功能的弹窗组件进行细致的视觉优化）
三、 进阶：如何组合指令完成复杂工作流
Impeccable 的强大之处还在于你可以将多条指令进行组合，让 AI 按照特定流程一气呵成地优化你的项目。
- 全流程自动化优化： 如果你想对某个模块进行彻底的翻新，可以输入：
/audit /normalize /polish blog
执行逻辑： AI 会先对博客模块进行全面审查，接着应用规范修正杂乱的设计，最后在输出前进行高精度的视觉打磨。 - 体验与健壮性双重提升： 如果你要优化核心流程（如支付），可以输入：
/critique /harden checkout
执行逻辑： AI 会先从 UX 的角度优化支付流程的交互，然后使用/harden指令为页面增加各种边缘情况的错误处理逻辑，确保界面不仅好看，而且稳定。
四、 让 AI 远离“劣质设计”的反模式原则
除了主动发出指令，Impeccable 还内置了丰富的“反模式库”（Anti-patterns），这也是它能让 AI 写出更高级 UI 的秘密武器。在日常配合 AI 时，你无需频繁提及，AI 会在潜移默化中遵守以下原则：
- 不要滥用无意义的卡片嵌套： AI 极其喜欢给每个元素都套一个卡片边框。Impeccable 会严格制止 AI 这种“卡片套卡片”的坏习惯。
- 拒绝纯黑与纯灰： 现实的高级设计中极少使用纯黑或纯灰色，往往会带有一丝冷暖色调。Impeccable 会强迫 AI 使用带有微弱色调（Tint）的暗色，提升界面的质感。
- 禁用过度泛滥的中性字体： AI 默认非常喜欢用系统自带字体或 Arial, Inter 等万能字体。Impeccable 提倡根据页面调性在排版中加入更具性格的字体选择。
通过上述详细的教程和技巧，您现在已经完全掌握了 Impeccable 的使用方法。快去您的项目中召唤 AI 助手，体验极具设计感的前端开发吧！
应用场景
- 企业官网与落地页开发
使用Impeccable的/critique和/polish指令，可以让AI助手告别千篇一律的AI模板风格，生成具有高级质感、良好排版与动效的企业官网，大大提升转化率。 - 复杂管理后台与仪表盘重构
在重构庞大且混乱的管理后台时，通过/audit和/normalize指令组合，AI助手能自动找出设计不一致的地方，并一键对齐设计系统，统一全局的间距与色调。 - 交互密集型产品原型设计
对于具有大量表单、弹窗、操作链路的产品，利用Impeccable的防嵌套卡片规则和/harden健壮性指令，AI助手能写出结构清晰、防呆防错的高质量交互代码。
QA
- Impeccable只能配合Claude Code使用吗？
不是的。虽然它内置了对Claude Code的直接安装支持，但它同时也为Cursor、Windsurf等AI原生编辑器提供了专门的配置文件，甚至可以手动将里面的提示词提取出来用于任何大语言模型。 - 为什么我使用AI生成的UI总是看起来像典型的“AI塑料风格”？
因为大模型训练自全网海量代码，默认会偏向使用最中规中矩的模板（如Inter字体、紫色渐变、多层卡片嵌套等）。Impeccable正是为了解决这一痛点，通过明确的反模式和指令来纠正AI的这种偏好。 - 使用Impeccable会改变我现有的项目UI框架吗？
不会。Impeccable是一套设计语言逻辑和指令，它不依赖于特定的前端框架。无论你使用的是React、Vue，还是Tailwind CSS或纯CSS，它都能通过指导AI的思维方式来提升产出的代码质量。
