夜雨聆风GitHub Hot / AI Frontend / Design Skill
AI 生成的页面总像一个模板刻出来的？这个 GitHub 热门项目，专治“前端 AI 味”
昨天还在嫌 AI 不会写，今天已经开始嫌 AI 写得“太像 AI”了。
按钮一股模板味，配色一股 SaaS 味，字体一上来就是 Inter，标题下面再摆个圆角小卡片，仿佛全世界的首页都在同一家店里批发。
如果你也有这种感觉，今天这个 GitHub 上正在热的项目，值得看一眼。
一句话导语
impeccable 想解决的不是“AI 会不会生成页面”，而是“AI 生成的前端，能不能别再一眼像流水线模板”。
它到底是什么？
pbakaus/impeccable 是一个面向 AI 编码工具的前端设计技能仓库。根据 2026 年 6 月 2 日 我查阅到的最新可得 GitHub 页面结果，它当前大约有 32.5k stars、1.8k forks；同一天 GitHub Trending 页面快照里，还能看到它有 612 stars today。
如果用最简单的话解释，它像一套“给 AI 的审美训练和前端质检说明书”。README 写得很直白：它提供 1 个 skill、23 个 commands，以及一组专门用来识别前端反模式的规则。
你不用再只靠一句“帮我做得高级一点”。你可以直接告诉 AI：去做设计审查、去修层级、去收敛风格、去减少土味、去补一点合适的动效。它把模糊要求，拆成了更明确的命令和规则。
为什么值得关注
这不是又一个“帮你生成页面”的工具，而是开始处理下一阶段更真实的问题：AI 生成的页面，怎么摆脱一眼模板味。
impeccable 的重点不是替你画图，而是给 AI 一套更像设计总监的“审美词汇表”和检查标准。它为什么现在很火？
因为很多开发者现在遇到的问题，已经不是“AI 能不能写页面”，而是“AI 写出来怎么总有一股熟悉的廉价感”。
README 直接点名了几种常见毛病：什么都用 Inter、爱上紫蓝渐变、卡片套卡片、彩色背景上放灰字、标题上方总挂一个圆角标签。这些就是大家常说的“AI 味前端”。
它不是只吐槽，还给了解法。最新可得 README 页面里，项目明确写了三组硬货：7 个参考域、23 个命令、27 条确定性反模式规则加 12 条 LLM critique 规则。
这很重要，因为新手最怕的不是不会写，而是不知道“丑”到底丑在哪。`impeccable` 把“哪里不对劲”拆成了可执行的动作。
它的价值不是让 AI 突然变成顶级设计师，而是先让 AI 少犯那些一眼能看出来的低级审美错误。
这类项目最适合谁先看
1. 已经在用 AI 搭页面，但总觉得结果“不像正经产品”的人。
2. 没有专职设计师的独立开发者和小团队。
3. 正在做 Agent、Plugin、MCP 工具或 SaaS 官网的人。
它能帮小白解决什么问题？
最典型的场景是：你已经会用 AI 生成页面，但结果总是不够像正式产品。结构没错，功能也有，可视觉层级、间距、按钮、标题和留白一组合，就透露出一种模板味。
impeccable 干的事，就是把这些“说不清哪里怪”的问题，变成更具体的检查动作。比如你可以用 critique 看阅读节奏，用 typeset 盯字体层级，用 layout 修空间结构，再用 polish 做收尾。
对于纯小白来说，这种帮助很实在，因为它不是逼你先学完整套设计理论，而是先给你一个更像“检查清单”的入口。
它到底怎么上手？
README 给了很明确的安装方式。最推荐的命令是：
npx impeccable skills install
项目说明，这条命令会自动识别你在用哪种 AI 编码工具，并把对应版本装到正确位置。README 最新可得页面还明确列出它支持 Cursor、Claude Code、Gemini CLI、Codex CLI、GitHub Copilot 等多种工具。
如果你只是想先看看它能不能帮你发现问题，也可以试它自带的检测 CLI：
npx impeccable detect .
这个命令的思路很简单：先扫你的页面或项目，把常见反模式揪出来。README 还提到，检测器目前会抓一批典型问题，比如紫色渐变滥用、弹跳动画、边框阴影过重、标题过大、图片损坏、文字溢出等。
对新手来说，建议按这个顺序来：先装上它，不急着全学会；找一个你已经让 AI 生成过的页面跑一次检查；先重点看字体、层级和留白；再试一次 `polish` 或 `critique`，对比前后差别。
impeccable 最容易快速见效的使用场景。使用时要注意什么？
第一，别把它当魔法棒。它能显著减少常见“AI 味”，但不能凭空替你理解品牌定位、用户人群和业务目标。
第二，别一上来命令连发。`critique`、`layout`、`typeset`、`polish` 一起乱上，反而容易把页面改散。新手更适合一轮只盯一个问题。
第三，检测结果不是圣旨。规则能帮你发现大概率问题，但最终是否保留，还要看你的产品场景。不是所有大胆设计都该被磨平。
第四，先解决基础可读性，再追求惊艳。比起炫技动效，手机端阅读舒服、标题层级清楚、按钮够明显，通常更值钱。
读完怎么做
1. 找一个你已经让 AI 生成过的旧页面，别拿全新项目练手。
2. 先跑一次检测或 critique，只挑 1 到 2 类问题改。
3. 最后再用 polish 收尾，对比前后是不是少了“模板味”。
参考链接
1. GitHub 仓库：pbakaus/impeccable
https://github.com/pbakaus/impeccable
2. GitHub Trending：https://github.com/trending
3. README：官方说明
https://github.com/pbakaus/impeccable#readme
4. Releases：版本更新
https://github.com/pbakaus/impeccable/releases
5. 官网演示：impeccable.style
https://impeccable.style
如果这篇内容对你有帮助，欢迎点赞、在看、转发。关注转发不迷路。
