让AI生成的前端设计不再「AI味」——Impeccable体验报告

AI 生成的前端设计丑哭了？用它拯救一下

用 Claude Code 或者 Cursor 写前端页面，功能没问题，但出来的设计总是差点意思——千篇一律的 Inter 字体、紫蓝渐变、卡片套卡片。不是说丑，只是「AI 味」太重了，一看就知道不是人设计的。

如果你也被这个问题困扰，Impeccable 这个 Skill 值得一试。它的核心目标很简单：让 AI 编码工具真正理解设计，做出来的东西不只是能跑，还要好看。

它能做什么？

Impeccable 提供了 23 个命令，涵盖从初始化到最终交付的完整设计流程：

• /impeccable init：一键初始化项目设计上下文，写好 PRODUCT.md 和 DESIGN.md，后续命令都能读取
• /impeccable shape：在写代码之前先规划 UX/UI 结构，避免后期推翻重来
• /impeccable critique：UX 设计review，检查层级、清晰度、情感共鸣
• /impeccable audit：技术质量检查，包括无障碍、性能、响应式
• /impeccable polish：最终交付前的整体润色，对齐设计系统
• /impeccable live：浏览器实时可视化迭代，直接在页面上调整元素

除此之外还有 bolder、quieter、distill、harden、animate 等命令，分别对应放大设计张力、收敛过于张扬的设计、提炼核心、补充边缘情况处理、加动效等具体场景。

59 条设计规则，自动检测不用排队

Impeccable 内置了 59 条确定性检测规则，涵盖字体选择、颜色搭配、布局结构、间距节奏等。运行 /impeccable audit 时，这些规则会直接跑一遍，不需要调用 LLM，也不消耗 token——出结果非常快。

规则里明确列出了 AI 常见的设计「坏习惯」：

• 滥用 Arial、Inter、系统默认字体
• 灰色文字配彩色背景
• 纯黑/纯灰用色不加色调
• 用卡片嵌套卡片
• 弹跳/弹性缓动（看起来过时）

这些规则对应检测，发现问题直接改，效率很高。

多工具支持

Impeccable 支持 Claude Code、Cursor、Codex、Gemini CLI、Grok Build、GitHub Copilot、Trae 等主流 AI 编码工具。安装方式统一用 npx impeccable install，根据提示选择工具和安装范围（项目级或全局）即可。

实际体验

我试着用它跑了一个落地页的 critique，AI 给出的反馈很具体：标题层级不够、CTA 按钮不够突出、背景色和文字对比度不足——每条都对应明确的改进方向，不是泛泛而谈「整体还不错」。

配合 /impeccable polish 做最终交付前检查，能覆盖掉大部分「AI 味」的设计遗留问题。对于经常用 AI 写前端但又不想设计翻车的朋友，这个工具很实用。

GitHub 上 53K+ star，3.2K fork，更新很活跃，社区反馈也不错。工具本身免费，想提升 AI 前端设计质量的话值得收藏。

GitHub 地址 →

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