拯救AI前端,开源项目impeccable:23个设计命令,让AI变成你的专属设计副手

工具推荐 1780884713更新

0

用 AI 编程工具写过前端的人,大概都踩过这个坑:功能它能给你写出来,但一让你说"把这个页面做得好看点",它就开始犯迷糊了。

要么配色花里胡哨,要么间距挤成一团,要么字号大小随意发挥。你跟它说"要有高级感",它给你整出一堆渐变色;你跟它说"要简约",它给你一个白屏加几个方块按钮。

问题出在哪?

AI 能写代码,但它不懂设计决策。

"好看"这东西,本质上是一种品味判断——什么时候该用衬线字体、什么时候该留白、什么时候该用暖色调……这些没有标准答案,但有高下之分。而 AI 训练数据里,有大量"先跑通再说"的粗糙实现,它自然就学了这套。

结果是:不管你换哪个 AI 工具,它们给你的设计提案总是一个味道——好像用的是同一套模板。

怎么解决?

之前我写了两篇文章,介绍了三个工具来解决这个问题:

  • Taste Skill 用三个配置维度引导 AI 推理你想要什么风格
  • Awesome DESIGN 直接给 AI 看优秀案例,让它照着临摹
  • UI-PRO-MAX 像是一个设计大脑,根据你的需求自动推理出一套设计系统

今天要介绍的第四个思路,来自一个叫 impeccable 的开源项目。它跟前三个都不一样——它不是一套设计规范,而是一套给 AI 用的设计命令

23 个命令,让 AI 帮你做设计审查、帮你改稿、帮你迭代。

简单说,impeccable 是一个给 AI 用的设计技能包

它不是教你怎么做设计,而是教 AI 怎么做设计。

它包含两样东西:

第一,7 份设计参考文档。 涵盖字体、颜色、动效、空间、交互、响应式、UX 文案。你把它装进 AI 工具里,AI 每次执行设计任务时会自动加载这些知识。

第二,23 个设计命令。 通过 /impeccable 调用,覆盖从初始化到最终交付的整个流程。

/impeccable audit        # 检查无障碍、响应式、性能/impeccable critique     # UX 设计评审/impeccable polish       # 最终上线前的整理/impeccable bolder       # 把无聊的设计放大胆子/impeccable quieter      # 把过于激进的设计收一收/impeccable live         # 可视化边看边改

最实用的是 /impeccable live。它会在浏览器里打开一个可视化迭代模式,你可以直接看到 AI 生成的设计变体,一边看一边改,直到满意为止。

impeccable 最有意思的地方,是它那 27 条确定性反模式规则

它明确告诉 AI:这些东西不要用。

  • 不要用 Arial、Inter 这种被用烂的字体
  • 不要在彩色背景上用灰色文字
  • 不要用纯黑或纯灰——一定要带色调
  • 不要把一切都包在卡片里,更不要嵌套卡片
  • 不要用弹跳/弹性缓动——那玩意儿已经过时了

这 27 条是纯规则检测,完全不需要 AI 参与,跑起来飞快。

但还有另外 12 条规则,需要 AI 辅助评审。这些会更深入地检查设计的一致性、情感共鸣、视觉层次。简单说,规则检测告诉你"哪个地方错了",AI 评审告诉你"这个地方为什么不够好"。

两套结合,才是完整的 design review。

就像给 AI 配了一个老设计师在旁边念叨:"哎哎哎,这个别这么做。而且这个配色,逻辑上没问题,但看起来有点奇怪……"

CLI 检测不需要 API key,纯本地运行:

npx impeccable detect src/npx impeccable detect index.htmlnpx impeccable detect https://example.com

impeccable 支持的主流 AI 编程工具基本都覆盖了:

Cursor、Claude Code、OpenCode、Pi、Gemini CLI、Codex CLI、VS Code Copilot、GitHub Copilot、Kiro、Trae、Rovo Dev、Qoder……

安装就一行命令:

npx impeccable skills install

它会自动检测你用的是哪个工具,然后写入正确的配置目录。

Taste Skill、Awesome DESIGN、UI-PRO-MAX、impeccable 这四个工具,解决的是同一个问题,但思路完全不同:


工具思路像我什么
Taste Skill三个配置维度引导 AI 推理告诉 AI"我要什么风格"的调味料
Awesome DESIGN直接给 AI 看优秀案例临摹字帖
UI-PRO-MAX自动推理引擎生成设计系统设计大脑
impeccable给 AI 一套设计命令 + 反模式规则给 AI 配一个设计副手

Taste Skill 适合你想要灵活控制、愿意参与设计决策的场景。Awesome DESIGN 适合你有明确参考对象、想要快速复刻的场景。UI-PRO-MAX 适合你从零开始、不懂设计但想快速出结果。

而 impeccable 的定位更像是——让 AI 变成你的设计助手。你有任何设计需求,直接喊它:/impeccable audit 帮我检查一下这个页面

当然,真正的创意决策还是得人来干。但对于日常的开发场景,一个能帮你做设计审查、帮你打磨细节的 AI 助手,可能比一个只会写代码的工具实用得多。

感兴趣的可以去看看:

GitHub:https://github.com/pbakaus/impeccable

官网:https://impeccable.style

有完整的文档和案例演示。