taste-skill：给 AI 做前端时加一层审美检查
前面几篇讲的，都是文章里的 AI 味。
shuorenhua 管中文表达。
Humanizer-zh 管写作痕迹。
stop-slop 管套路句和模板腔。
今天这个 taste-skill，换了一个地方下手。
它管界面。
你应该见过那种 AI 做出来的网页。
紫蓝渐变。
居中大标题。
三个功能卡片。
玻璃拟态按钮。
再来一点发光边框。
单个元素都能解释。放在一起，就很像“AI 默认前端皮肤”。
taste-skill 想解决的就是这个问题。
它做的事，比“让页面更好看”更具体：先读需求，再判断设计语言，然后用一堆硬规则拦住那些最常见的模板味。
1. 先把来源说清楚
taste-skill 的仓库在这里：
https://github.com/Leonxlnx/taste-skill
仓库作者是 Leonxlnx。
项目采用 MIT License。
这个仓库里不止一个 Skill。
README 里把它们分成两类：
一类是实现类 Skill，负责生成或改造前端代码。
一类是图片生成类 Skill，负责生成网页、移动端、品牌板这类视觉参考图。
这篇主要讲默认的 taste-skill，安装名是：
design-taste-frontend
它现在是 v2 experimental。
仓库里也保留了老版本：
design-taste-frontend-v1
如果你只想安装默认版本，可以把这个地址给 AI：
https://github.com/Leonxlnx/taste-skill
然后说：
帮我安装这个仓库里的 design-taste-frontend Skill。
2. 它先看页面场景
很多人让 AI 做页面，会这么说：
做得高级一点。
不要太普通。
有设计感。
这些话都能懂，但太虚。
AI 听完以后，常常会拿出那套熟悉答案：大标题、渐变背景、三张卡片、圆角按钮。
你说“高级”，它理解成“加一点光”。
你说“有设计感”，它理解成“加一点动效”。
taste-skill 的思路不一样。
它先问：这到底是什么页面？
是 SaaS landing page？
是设计师作品集？
是老网站重做？
是公共服务页面？
不同页面不能用同一套审美。
一个面向采购委员会的 B2B 页面，不能做成 Awwwards 风。
一个创意工作室作品集，也不该像后台管理系统。
所以 taste-skill 的第一步先不写代码。
它先做一个 Design Read。
它要求 AI 先用一句话说清楚：
Reading this as: 什么页面，给谁看，是什么气质，应该靠近哪类设计语言。
这一步看起来普通，但很管用。
它先把“审美”放回具体场景里。
3. 它最核心的三个拨盘
taste-skill 里有三个核心拨盘：
DESIGN_VARIANCE
MOTION_INTENSITY
VISUAL_DENSITY
可以把它们理解成三个问题。
布局要多大胆？
DESIGN_VARIANCE 低一点，页面就更对称、更稳。高一点，页面可以更不规则，更像创意站。
动效要多重？
MOTION_INTENSITY 低一点，只需要 hover 和 active 反馈。高一点，才会考虑滚动叙事、磁吸按钮、GSAP、ScrollTrigger。
信息要多密？
VISUAL_DENSITY 低一点，页面更空，更像画廊。高一点，页面更紧，更适合信息多的产品界面。
这三个拨盘的好处，是把“审美偏好”变成可以执行的参数。
你不用只说“高级一点”。
你可以让 AI 明确：这个页面应该更稳，还是更大胆？更安静，还是更有动效？更留白，还是更密？
这比一句“做得好看点”靠谱。
4. 它怎么拦住 AI 默认味
我看 SKILL.md 时，最有意思的是那些禁令。
它把很多 AI 前端页面的典型毛病列得很细。
比如：
- 不要默认紫蓝渐变和发光按钮。
- 不要一上来就做三张一模一样的功能卡片。
- 不要把所有 section 都写成小眉标题加大标题。
- 不要在 hero 里塞版本号、
BETA、EARLY ACCESS这类假标签。 - 不要用假截图。也就是不要拿一堆
<div>拼出一个看起来像产品界面的假 dashboard。 - 不要乱用 em dash。
- 不要用
John Doe、Acme、SmartFlow这种一眼假的名字。
这些东西听起来琐碎。
但页面的坏味道，常常就藏在这些地方。
一个页面用三张卡片，问题不大。
每个 AI 页面都用三张卡片，问题就来了。
一个 hero 用渐变，也没什么。
但每次都是紫蓝渐变、居中大字、发光 CTA，读者一眼就知道是 AI 模板。
taste-skill 的价值，是把这些“我感觉哪里不对”拆成可以检查的规则。
5. 它也不只会说“不许”
如果一个 Skill 只写禁令，很容易把 AI 逼成另一种死板。
taste-skill 比较好的地方，是它会给替代路径。
比如它不让 AI 随便重造设计系统。
如果需求像 Microsoft 企业应用，就用 Fluent UI。
如果像 Google 风格，就考虑 Material。
如果像 IBM B2B，就看 Carbon。
如果是公共服务，就看 GOV.UK Frontend 或 USWDS。
如果只是某种审美，比如玻璃拟态、Bento、Brutalism、Editorial，它会明确说：这些属于视觉风格，要用 CSS、Tailwind 或组件库去实现，不要假装有一个官方包。
这点挺实在。
很多 AI 会把“像某某风格”写成“使用某某设计系统”，听起来专业，其实是乱说。
taste-skill 在这里做了一层事实约束：官方设计系统就用官方包；审美风格就老实说是风格，不要冒充系统。
6. 它的 pre-flight check 很重
taste-skill 最后有一大段 Final Pre-Flight Check。
这部分很像上线前检查表。
它会要求 AI 自查很多东西：
- 有没有先做 brief inference？
- 三个拨盘有没有给出理由？
- CTA 文字有没有换行？
- 按钮对比度够不够？
- Hero 是否首屏能放下？
- 导航在桌面端是不是一行？
- 有没有重复 CTA 意图？
- 有没有真实图片，而不是纯文字或假截图？
- 移动端有没有明确折叠方案？
- 动效有没有
prefers-reduced-motion？ useEffect动画有没有清理？- 有没有用
h-screen导致移动端高度问题？
这已经不只是“审美建议”。
它更接近前端交付检查表。
我觉得这是 taste-skill 最值得学的地方。
它把“不要丑”拆成了很多可以验证的小问题。
AI 很怕这种检查表。
因为检查表会把它从“我大概做了”拉回“你到底做没做”。
7. 适合谁用
如果你经常让 AI 写前端页面，这个 Skill 值得看。
尤其适合这几类场景：
- 做 landing page。
- 做个人作品集。
- 重做一个老网站首页。
- 做品牌展示页。
- 让 AI 根据参考图或产品气质生成页面。
但它不适合所有前端任务。
它自己也写得很清楚：主要场景不包括 dashboard、数据表格、多步骤表单、代码编辑器、原生移动端、实时协作 UI。
这些东西有自己的设计系统和交互规则。
拿 taste-skill 硬套，反而可能跑偏。
所以别把它当成“前端万能审美包”。
更准确地说，它适合处理营销页、作品集、品牌页、视觉导向的重设计。
8. 这类 Skill 最值得学什么
我拆 taste-skill，重点是看它怎么写规则。
它里面有些规则很硬。比如完全禁止 em dash，比如默认不爱用 Inter。放到具体项目里，这些判断未必永远成立。
但它的写法值得学。
它没有停在“让界面更高级”这种空话上，而是把审美拆成了一条流程：先读场景，再定拨盘，再选设计系统，再列 AI 常见坏味道，接着给替代方案，最后用检查表收尾。
这套结构可以迁移到很多地方。
比如你想写一个“公众号文章风格 Skill”，也可以这么拆：先读读者和文章类型，再定语气、信息密度和案例比例，接着列出禁止句式和可用替代表达，最后给一份发布前检查表。
这样写，比一句“写得像人一点”更能落地。
9. 我的判断
taste-skill 最有价值的地方，不在设计术语，而在于把审美判断工程化。
审美当然不能完全靠清单解决。但没有清单，AI 很容易滑回默认模板。尤其是前端页面，模型太熟那套东西了：居中 hero、三张卡片、紫蓝渐变、玻璃按钮、假截图。看起来都能交差，也就只是能交差。
taste-skill 至少会逼 AI 多问几句：这个页面到底给谁看？它该稳一点，还是大胆一点？这里应该用设计系统，还是只是一种视觉风格？这个动效有没有用？这个截图是不是真的？
这些问题问出来，页面就已经比默认模板强一截了。这也是我觉得它值得讲的原因。
