AI 生成页面那股味,被一套命令拆开了
一个给 AI coding agent 的设计 skill,24 个命令、62 条检测规则,专门拆紫渐变、卡片套卡片和 Inter 字体。有人拿它重做财务面板,改完的对比比口号直观。
AI 生成的前端页面,看多了会形成条件反射。紫到蓝的渐变,Inter 字体铺满全站,卡片里再套卡片,标题上方顶着一个圆角方形图标。单看每个元素都正常,放在一起就像同一套模板换了几次文案。
Impeccable 想处理的就是这层模板脸。它是 Paul Bakaus 做的一个设计 skill,面向 AI coding agent,Github 上拿到 91K star。它做的事很具体:给 AI 一套可执行的设计命令和检查规则。安装从项目根目录跑 npx impeccable install,然后在 AI 工具里执行 /impeccable init。init 会把产品上下文写进 PRODUCT.md,后续命令知道受众、用途、约束和语气,不会把所有页面都当成同一个 SaaS 落地页。
命令拆得细:/impeccable layout 调间距和排版,/impeccable typeset 改字体和层级,/impeccable distill 砍掉多余东西,/impeccable polish 做上线前打磨,/impeccable critique 给设计挑毛病。官方列了 24 个命令,还有 62 条确定性检测规则,专门抓 AI 生成前端常见毛病,比如侧边 tab 边框、紫色渐变、bounce 缓动、深色发光、彩色背景上的灰字、卡片嵌套。CLI 和浏览器扩展跑检测规则时不需要 LLM,也不需要 API key。
Damir Sokolovsky 用这套东西重做了一个 vibecoded dashboard。原推标题叫 Unslopping a vibecoded dashboard,视频里是一个深紫色财务概览界面,左侧导航,右侧显示本月收入 48,210 美元、总收入 124,860.40 美元,下方是每周收入柱状图。改完的效果比 AI 味三个字直观。视频放在这里:
有用户建议别一次把所有命令跑完。先 layout 把骨架理顺,再 typeset 统一字体和标题层级,第三步用 distill 砍装饰和重复信息,最后 polish 整体打磨。每改一步逐屏对照原稿,改坏能立刻回退。这个顺序比一键美化靠谱。另有用户追问 critique 的评分标准,能不能指出差几像素的间距和层级问题。这个疑问成立。工具给的是设计词汇和检测清单,不等于替人做审美判断。也有用户反馈,layout 能解决不少问题,但一些冗余设计还是避免不了。
Impeccable 值得看的地方,是它把 AI 味拆成了可以检查的条目。命令名本身在教 AI 和人怎么描述问题。它不会自动让页面变高级,跑完也不该直接上线。先拿一个页面试 layout 和 distill,对照原稿看差异,比一次全改更容易判断它到底帮了什么。
发布时间: 2026-10-29 03:43