AI 写的前端全长一个样?这个开源工具专门治这个病

用 AI 工具写前端，有没有一种感觉：生成出来的页面风格都差不多？

Inter 字体、紫蓝渐变、卡片套卡片……因为所有模型都在同一批 SaaS 模板上训练过，不加任何约束，AI 会给你生成一个"行业标准模板脸"。

impeccable 就是专门解决这个问题的开源工具：给 AI 编码 Agent 加一套设计语言，让 Claude、Codex、Grok 们在写前端时有自己的判断力，而不是每次输出同一个模子。

基础介绍

impeccable 是一套给 AI 编码 Agent 用的设计技能工具集，由前 Google 工程师 Paul Bakaus 开发，从 Anthropic 官方的 frontend-design skill 出发，扩展出了完整的体系。

它的核心思路很简单：用一次初始化把你的产品定位、品牌颜色、字体偏好、设计反参考写进项目根目录，后续每次让 AI 写/改界面时，AI 会读这份上下文，不再从零瞎猜。

51k Star，JavaScript 实现，今日单日新增 413 Star，支持 Claude Code、Codex、Grok 等主流 AI 编码工具。

解决什么问题

AI 生成前端界面有几个典型"指纹"：

•字体清一色 Inter，从不思考

•紫蓝渐变背景，永远

•卡片套卡片，每个标题上方必有圆角方块图标

•有色背景上配灰色文字（可读性极差）

这不是 AI 不聪明，是训练数据里这类设计太多了，缺少约束时它只能走最安全的路。

impeccable 用两层机制来修这个问题：

第一层：品牌上下文注入

/impeccable init 会向你提问：这是品牌型页面（官网、落地页）还是产品型 UI（Dashboard、工具）？然后写入 PRODUCT.md 和 DESIGN.md，后续所有 23 个命令都会读这份文件，AI 的每一次修改都在你定义的边界内运行。

第二层：60 条确定性检测规则

这部分不依赖 LLM，不需要 API key，CLI 和浏览器扩展本地跑。检测规则覆盖字体滥用、颜色对比度、嵌套层级、动效过度等具体问题，有问题直接报出来。

接入方式

从项目根目录开始，整个流程三步：

它会自动检测你用的是哪个 AI harness（~/.claude、~/.codex、~/.grok 等），把 skill 装到对应位置。

init 会问你几个问题，生成 PRODUCT.md 和 DESIGN.md。这是一次性的。

23 个命令覆盖了从规划（shape）、构建（craft）、审查（audit/critique）、发布前检查（polish/harden）到边缘场景（onboard/animate/overdrive）的完整流程。

预期效果：运行 /impeccable audit 后，你会看到具体的可改项（哪里对比度不够、哪里字体层级混乱），而不是"这个设计看起来不错"这种废话。

为什么值得收藏

如果你每天用 Claude Code、Cursor 或 Codex 写前端，impeccable 是目前少有的、真正有体系的设计质量护栏。

它的价值在于：把设计判断力从你这里转移到工具里。你不需要每次提示 AI "不要用 Inter、不要用紫蓝渐变"，init 一次，后续所有命令都在约束内运行。

适合谁：用 AI 工具做独立开发、SaaS 产品、个人项目的开发者；前端 + 设计都得自己来的小团队。

局限：本质是 prompt 增强 + 规则检测，设计主观判断仍靠 LLM；原生移动端开发暂不适用；对已经有完整设计系统的大团队提升幅度有限。