AI 编程助手也能懂设计 - Impeccable

每次让 AI 生成前端界面，结果都是千篇一律的白底蓝字方框？Impeccable 就是来解决这个问题的——它是一套设计技能，让你的 AI 编程助手真正「懂设计」。

什么场景下需要用？

场景 1：AI 生成的界面丑到没法看

你用 Claude Code 或 Cursor 写前端，AI 确实能生成功能完整的页面，但配色、间距、字体永远一股「程序员审美」。Impeccable 内置了 46 条设计检测规则，从对比度、间距、字体选择到色彩搭配，AI 会按照这些规则自动优化界面。

场景 2：不想手写 CSS，但想要好看的 UI

你希望 AI 能直接生成漂亮的界面，而不需要自己调 CSS。Impeccable 让 AI 在生成代码时自动遵守设计规范，包括响应式布局、无障碍访问（WCAG 标准）、颜色系统等，出来的页面直接就能用。

场景 3：在浏览器里实时调试设计

Impeccable 支持在浏览器中实时迭代——AI 生成页面后，你可以直接在浏览器中查看效果，然后让 AI 根据视觉反馈继续调整，不需要在代码和浏览器之间来回切换。

怎么用？

安装

Impeccable 的安装非常简单，一条命令即可：

# 在项目根目录运行
npx impeccable install

在 AI 工具中使用

安装完成后，在 AI 编程工具中初始化：

# 在 Claude Code、Cursor 或 Codex 中运行
/impeccable init

这会自动配置好所有的设计规则和命令。

常用命令

Impeccable 提供了 23 个命令，覆盖设计审核的方方面面：

# 审核当前页面的设计质量
/impeccable audit

# 修复配色问题
/impeccable fix-colors

# 优化间距和对齐
/impeccable fix-spacing

# 检查无障碍访问
/impeccable check-a11y

# 生成设计规范文档
/impeccable generate-guide

进阶用法

你可以在 .impeccable 目录下自定义设计规则，定义自己的品牌色、字体、间距规范：

{
  "brand": {
    "primary": "#6366F1",
    "secondary": "#8B5CF6",
    "font": "Inter, sans-serif"
  },
  "rules": {
    "minContrast": 4.5,
    "borderRadius": "8px",
    "spacingUnit": 4
  }
}

之后 AI 生成的所有页面都会遵循这些自定义规则。

注意事项

• • Impeccable 是一个 Skill（技能），不是独立的工具，需要配合 Claude Code、Cursor 或 Codex 使用
• • 设计规则默认比较严格，如果觉得太死板，可以调整 .impeccable 配置
• • 建议在项目一开始就安装 Impeccable，而不是在界面写完后才补救
• • 支持 10+ 种 AI 编程工具，包括 Claude Code、Cursor、Codex、Gemini CLI、OpenCode 等

总结

Impeccable 的价值在于把「设计规范」变成 AI 能理解和执行的「代码规则」。如果你用 AI 写前端，但一直对界面美观度不满意，装上 Impeccable 后，你会发现 AI 生成的页面从「能用」变成了「好看」。

这个项目在 GitHub 上已有 47K Stars，是设计圈和 AI 编程圈的交叉热点。