AI 做的网页总撞脸？这个 Skill 带 61 条规则，替你把毛病挨个挑出来

先说清楚，「AI 脸」到底长什么样

作者 Paul Bakaus 在项目说明里讲了一个很实在的道理：所有大模型都是拿同一批网页模板训练出来的。你不给它额外的指引，它就会在每个项目上犯同一套毛病。

他列了几条，你可以对照自己做过的页面看看：

• 字体永远是 Inter，或者干脆用系统默认字体；
• 紫色到蓝色的渐变，到处都是；
• 卡片里套卡片，什么东西都要框起来；
• 彩色底上放灰色的字，看着发虚；
• 每个标题上面都顶一个圆角方块小图标。

这些不是某一次运气不好，而是模型的默认习惯。 你不说，它就一直这么做。所以问题不在你的提示词写得不够好，而在于没人告诉它「这些东西别用」。

Impeccable 干的就是这件事。它是从 Anthropic 官方的 frontend-design 设计技能起步做的，作者在那个基础上加了三样：一套开工前的问答，24 个命令，61 条检测规则。

24 个命令，其实就是一套跟 AI 聊设计的词汇

装好以后，你跟 CodeX 说话时多了一批「设计词」。我把常用的分成三组，你看一眼就知道什么时候用哪个。

看病的三个。 audit 是体检，查可访问性、性能、手机端适配这些技术指标；critique 是挑刺，从层次、清晰度、情绪感受这些设计角度给你一份评审；polish 是最后一遍润色，对齐设计规范、准备上线。

调味道的几个。 bolder 让无聊的页面更大胆，quieter 把用力过猛的页面收一收，distill 是去掉多余的东西只留骨架，colorize 是有策略地加颜色，typeset 专管字体和字号层级，layout 专管排版、间距和节奏，animate 加有目的的动效。

补漏的几个。 harden 补错误处理、文字溢出、各种边角情况；onboard 管第一次打开时的引导和空白状态；clarify 改那些让人看不懂的界面文案；adapt 适配不同设备。

你不用背。它的价值在于，你以前只会说「好看一点」，现在能说「quieter」或者「typeset」。 指令越具体，AI 改得越准。作者说这是「一套你和 AI 共用的设计词汇」，这话说得挺到位。

开工前它先问你两个问题

第一次用要先跑 init。它会看一遍你的项目，然后问你几个问题：这个东西是给谁用的，要传达什么，在什么场景下用，有什么限制，说话是什么调性。你答完，它把这些写进一份叫 PRODUCT.md 的文件。

后面所有命令都照着这份来。你跑 critique，它评的是「这个页面对你的用户来说清不清楚」，不是泛泛地评好不好看。

这一步别敷衍。 你答「给所有人用」「传达专业」，它就只能给你一个平均值。你答「给刚开始记账的自由职业者用，要让他们觉得记账不可怕」，后面每一步的判断都会不一样。给 AI 干活的背景越具体，它越不用猜，这个道理在这儿一样成立。