✨ Impeccable｜设计流畅度 AI 技能｜给 AI 装上设计大脑 23个设计命令·29条反模式检测·Live Mode实时迭代 开源免费/Apache 2.0·多平台兼容

官网/网页工具地址:点击访问

📌 一、基础信息概述

Impeccable 是由 Paul Bakaus（Renaissance Geek）打造的开源 AI 设计技能，旨在给 AI 装上真正的设计大脑。大多数人缺乏设计词汇，而 Impeccable 教授你的 AI 深层的设计知识，并提供 23 个命令来精准操控设计输出。它内置七份参考文件（字体排印、色彩、动效、空间、交互、响应式、UX 写作），在每次生成前加载，让 AI 真正理解设计是如何运作的。同时包含 29 条确定性反模式检测规则，可自动识别紫色渐变、嵌套卡片、低对比度文字等 AI 生成界面的常见问题，并可集成到 CI/CD 流程中。Impeccable 支持 Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Antigravity、Kiro、OpenCode、Pi 等主流 AI 编码工具。GitHub 已获得 27K+ 星标。

🎯 产品定位

定位为 AI 的设计流畅度技能，以"给 AI 装上真正设计大脑"为核心理念，解决大多数人缺乏设计词汇、无法准确描述需求的痛点。Impeccable 教授你的 AI 真实的设计知识——不仅仅是"好看"，而是为什么好看、怎么做到好看。23 个命令对应具体的设计学科（/typeset 对应字体排印、/colorize 对应色彩、/animate 对应动效），让用户可以用精确的设计语言与 AI 沟通。核心解决 AI 生成界面千篇一律、缺乏设计深度、用户无法精准控制设计方向的行业痛点。

💪 核心优势

• 📚 七层设计基础：在运行任何命令之前，Impeccable 先教授 AI 设计如何运作。七份参考文件在每次提示时加载：字体排印、色彩、动效、空间、交互、响应式、UX 写作
• 🎯 23个精准设计命令：23 个命令给你和 AI 共享的设计词汇，每个对应一个设计学科——/typeset（字体）、/colorize（色彩）、/animate（动效）、/polish（打磨）、/audit（审计）、/critique（评审）等
• 🚫 29条反模式检测：29 条确定性规则，自动检测紫色渐变、嵌套卡片、低对比度标签、渐变文字标题等 AI 生成界面的常见问题，无需 LLM 参与，可在 CI 中运行
• 🖥️ Live Mode 实时迭代：在浏览器中选择任意元素，留下评论或标记，AI 生成三个生产级变体，通过框架的 HMR 即时替换，接受即可写回源代码
• 🎨 Brand + Product 双模式：品牌模式（设计即产品：营销、作品集、编辑）和产品模式（设计服务于产品：应用 UI、工具、仪表盘），命令自动调整其选择以匹配
• 📄 PRODUCT.md + DESIGN.md：产品上下文文件和设计规范文件，每次命令都读取，确保输出始终符合品牌调性，遵循 Google Stitch DESIGN.md 标准格式
• 🔧 CLI 检测工具：npx impeccable detect 可扫描项目目录，29 条确定性规则，JSON 输出，支持 CI/CD 集成，可在 PR 分支上运行
• 🌐 Chrome 扩展：一键检测任意页面上的反模式，在浏览器中高亮显示问题位置，零配置即刻使用
• 🆓 开源免费 Apache 2.0：完全开源，Apache 2.0 协议，技能、命令、CLI、检测引擎全部免费

🎬 适配场景

• 🌐 落地页与营销页面设计：使用 /impeccable craft 从设计草图到生产级代码的全流程实现
• 📊 产品 UI 与仪表盘设计：使用产品模式，确保功能界面的可用性和一致性
• 🎯 设计审计与质量检查：使用 /impeccable audit 或 CLI impeccable detect 对现有界面进行审计
• 🖼️ 品牌视觉系统搭建：使用 /impeccable teach 和 /impeccable document 建立品牌设计系统
• 🔄 设计迭代与打磨：使用 Live Mode 在浏览器中实时迭代 UI，三个生产级变体即时对比
• 🔍 CI/CD 质量门禁：集成 npx impeccable detect 到 PR 流程，自动拦截 AI 反模式
• 🛠️ 代码库设计对齐：使用 /impeccable polish 将现有代码对齐到设计规范
• 🔬 竞品设计分析：使用 Chrome 扩展分析任意网页的设计质量

👥 核心受众

前端开发者与 UI 设计师、AI 编码工具（Claude Code/Cursor/Codex 等）用户、产品经理与设计负责人、追求高品质设计输出的团队、需要设计质量自动化的工程团队、对 AI 生成界面质量不满意的用户、品牌设计与产品设计双领域从业者。

🎪 适配定位

专注 AI 设计流畅度技能、设计命令系统、反模式检测引擎、实时设计迭代赛道。核心强项是 23 个精准设计命令体系、29 条确定性反模式检测、七层设计基础文件、Live Mode 浏览器实时迭代、Brand + Product 双模式设计、PRODUCT.md + DESIGN.md 标准化设计记忆、CLI + Chrome 扩展双端检测；主打 AI 驱动的前端设计与开发场景。核心解决 AI 生成界面千篇一律、用户缺乏设计词汇无法精准控制、AI 界面质量无法自动检测的行业痛点。

🧩 二、核心功能清单

📚 七层设计基础（核心）

在运行任何命令之前，Impeccable 先教授你的 AI 设计如何运作。七份参考文件在每次提示时加载：字体排印、色彩、动效、空间、交互、响应式、UX 写作。运行 /impeccable teach 一次即可设置项目设计上下文，所有命令均受益。

🎯 23个精准设计命令

23 个命令给你和 AI 共享的设计词汇，每个对应一个设计学科：/typeset（字体排印）、/colorize（色彩）、/animate（动效）、/polish（打磨）、/audit（审计）、/critique（评审）、/bolder（强化）、/quieter（弱化）、/layout（布局）、/delight（愉悦感）、/craft（工艺实现）、/shape（形态探索）、/harden（加固）、/distill（提炼）、/live（实时模式）等。可通过 /impeccable pin <命令> 将常用命令固定为独立快捷键。

🚫 29条反模式检测引擎

29 条确定性检测规则，无需 LLM 参与，无需 API Key，无波动评分。自动检测：紫色渐变、嵌套卡片（Cardocalypse）、低对比度文字、渐变文字标题、侧边标签卡片、Inter 字体泛滥、模板化布局、过度使用 Fraunces/Geist/Space Grotesk 等流行字体。支持 --json 输出和 CI exit codes。

🖥️ Live Mode 实时迭代 Alpha

在浏览器中选择任意元素，留下评论或标记，点击 Go，AI 即刻生成三个生产级变体，通过框架的 HMR 即时替换。接受你想要的那个，它会自动写回源代码。支持 Vite、Next.js（含 monorepo）、SvelteKit、Astro、Nuxt。无需外部工具或 IDE 扩展。

🎨 Brand + Product 双模式

品牌模式（设计即产品：营销、作品集、编辑）和产品模式（设计服务于产品：应用 UI、工具、仪表盘）。命令如 typeset、animate、colorize、bolder、quieter、layout、delight 自动调整其选择以匹配当前模式。模式从你的任务推断并在 PRODUCT.md 中确认。

📄 PRODUCT.md + DESIGN.md

共享设计记忆。PRODUCT.md 命名受众、品牌个性、反参考和语域（品牌 vs 产品）。DESIGN.md 遵循 Google Stitch DESIGN.md 标准格式，包含颜色、字体排印、组件等六个固定部分。每次命令都读取，确保输出始终符合品牌调性。

🔧 CLI 检测工具

npx impeccable detect src/ 可扫描项目目录，29 条确定性规则，支持 CSS、HTML、JSX/TSX、Vue、Svelte 及 CSS-in-JS。支持 --json 结构化输出、--fast 正则模式用于大型代码库、框架自动检测。可在 PR 分支上运行，与 lint 和 type check 同等地位的门禁。

🌐 Chrome 扩展

一键检测任意页面上 29 条反模式，在浏览器中实时高亮显示问题位置。阅读实时计算样式，交互式面板展示发现。支持本地开发、staging、生产环境或任意第三方网站。

🖼️ 可视化 → 构建工作流

/impeccable shape 进行结构化发现访谈（目的、受众、目标），生成本设计简报。/impeccable craft 将设计简报链入完整实现流程，从图像参考到生产代码。支持从生成图像参考到真实网站的端到端交付。

📋 /impeccable critique 设计评审

多角色子 Agent 并行评审，按 Nielsen 10 条启发式评分，自动运行检测器，打开浏览器覆盖层逐项检查。每次运行写入带时间戳的快照文件，支持评审问题持久化和 ignore.md 用户策展。

补充说明：Impeccable 的核心差异化壁垒为「23个精准设计命令体系+29条确定性反模式检测引擎+七层设计基础文件教授真实设计知识+Live Mode浏览器实时迭代+Brand/Product双模式+PRODUCT.md+DESIGN.md标准化设计记忆+CLI+Chrome扩展双端检测」，区别于普通 AI 前端工具仅生成代码缺乏设计深度、无法精确控制设计方向、无法自动检测设计质量的痛点。

💰 三、免费与收费规则（仅供参考以官网最新为准）

Impeccable 为开源项目，基于 Apache 2.0 协议，完全免费使用。

真实规则说明：

1. Impeccable 基于 Apache 2.0 协议，完全免费，技能、命令、CLI、检测引擎全部开源
2. 安装方式：npx skills add pbakaus/impeccable
3. 由 Paul Bakaus（Renaissance Geek）创建并维护
4. 支持 Cursor、Claude Code、Gemini CLI、Codex CLI 等 11+ 种 AI 工具
5. 所有功能开源完整开放

🖥️ 四、支持使用方式与运行说明

🚀 1. 支持使用方式

Impeccable 为 AI 编码工具的 Skill，通过 npx skills add pbakaus/impeccable 安装。也支持 Claude Code 插件市场安装、手动下载 ZIP 解压等。支持 Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Antigravity、Kiro、OpenCode、Pi 等主流 AI 工具。

标准使用流程：npx skills add pbakaus/impeccable 安装 → 在 AI 工具中输入 /impeccable teach 设置项目设计上下文 → 使用 /impeccable 命令列表中的具体命令 → 或直接描述需求让 AI 自动选择合适的命令 → 通过 Live Mode 在浏览器中实时迭代。

⚙️ 2. 运行说明

• 🆓 开源免费，Apache 2.0，全功能开放
• 🔌 支持 Cursor、Claude Code、Gemini CLI、Codex CLI、VS Code Copilot、Antigravity、Kiro、OpenCode、Pi 等
• 📚 七层设计基础文件在每次提示时加载
• 🎯 23 个设计命令，可通过 /impeccable pin 固定为独立快捷键
• 🚫 29 条确定性反模式检测规则，无需 LLM
• 🖥️ Live Mode Alpha 直接在浏览器迭代
• 🎨 Brand + Product 双模式自动适配
• 📄 PRODUCT.md + DESIGN.md 设计记忆持久化
• 🔧 CLI: npx impeccable detect CI/CD 可用
• 🌐 Chrome 扩展一键检测任意页面
• 🔄 持续更新，npx impeccable skills update 保持最新

📍 五、产品核心优势与适用人群落地场景

⚠️ 六、官方使用须知

1. Impeccable 核心聚焦 AI 设计流畅度技能、设计命令系统、反模式检测、实时设计迭代，主打 AI 驱动的前端设计与开发场景。
2. 基于 Apache 2.0 协议，完全开源免费，技能、命令、CLI、检测引擎全部免费。
3. 23 个命令现已统一纳入 /impeccable 命名空间，可通过 /impeccable pin 固定为独立快捷键。
4. 七层设计基础在每次提示时加载：字体排印、色彩、动效、空间、交互、响应式、UX 写作。
5. 29 条确定性反模式检测规则，无需 LLM，无需 API Key，支持 CI/CD。
6. 运行 /impeccable teach 一次生成 PRODUCT.md，运行 /impeccable document 生成 DESIGN.md。
7. Live Mode（Alpha）支持 Vite、Next.js、SvelteKit、Astro、Nuxt。
8. Chrome 扩展可在 Chrome Web Store 安装。
9. 由 Paul Bakaus（Renaissance Geek）创建并维护。
10. 功能以 GitHub 仓库最新状态为准。

❓ 七、常见问题解答

🔍 八、替代方案与对比参考

1. AI设计智能 Skill 竞品对比

2. 设计质量检测工具竞品对比

3. 主流通用大模型设计能力横向对比

4. 模型选型适配场景与渠道指南

5. 模型下载渠道推荐