AI开发

给AI装上「品味」:taste-skill如何终结模板化设计

2026-07-22 · 42 次阅读 · 约 7 分钟
#taste-skill #AI设计 #开源项目

给AI装上「品味」:taste-skill如何终结模板化设计

如果你最近让AI帮你写过一个落地页,八成会收到这样的"礼包":深紫色到蓝色渐变背景、居中的大Hero标题、三列功能卡片排排坐、Inter字体系列走天下。打开浏览器DevTools一看,好家伙,h-screen 怼上去的满屏大区块,SVG图标手写到飞起。不能说难看,但——你一眼就知道这是AI写的。

这种"AI味儿"已经成了新一代的模板化。就像90年代的中文网站都爱挂计数器+闪烁GIF,2024-2025年的AI生成网页标准配置就是紫色渐变+三栏布局+居中大标题。你让十个不同的AI工具写一个SaaS落地页,九个半长得像失散多年的亲兄弟。

直到taste-skill出现。

这是一个SKILL.md,但不是你想的那种

taste-skill是谁?GitHub上 46K+ Stars 的开源项目,作者 Leonxlnx。乍一看它就是个 SKILL.md 文件——对,就是Cursor和Claude Code里用来约束AI行为的那种指令文件。但这东西足足 800多行,它不是教你AI怎么写代码,而是给AI装上了一套「审美检查器」。

这玩意儿本质上是一本给AI看的《设计规范圣经》,但它不跟你扯什么黄金比例和色彩心理学,它的方法粗暴得多:与其教AI什么是对的,不如直接列清楚什么是错的。

三旋钮:你的设计需要多浪?

taste-skill最聪明的设计是引入了三个"旋钮",严格来说叫 Design Variance Design System(DVDS)

  • DESIGN_VARIANCE(布局花样)1-10 — 1是极简到性冷淡,10是视觉冲击拉满。你要做一个企业官网?调3差不多。你要做一个创意工作室的首页?干到8以上。
  • MOTION_INTENSITY(动画强度)1-10 — 控制动效的疯狂程度。低数值就老实本分的淡入淡出,高了就上视差滚动、交错动画。
  • VISUAL_DENSITY(内容密集度)1-10 — 控制页面"挤不挤"。仪表盘、数据产品可以调高;叙事型落地页就调低,让呼吸感出来。

写任何一行代码之前,先确定这三个值。不是等到设计做完了再"加亿点细节",而是从一开始就给AI划定边界。这就好比厨师做菜前先确定:这顿是做清淡的、重口的、还是创意融合的?

禁令清单:30+种AI翻车写法被永久封杀

taste-skill最狠的部分是它的禁令列表。我数了数,封杀了 30多种 AI 最爱的默认行为。随便列几个感受一下:

  • 🚫 默认使用 Inter 字体 — 你但凡让AI写页面,Inter字体出现的概率几乎100%。taste-skill直接ban掉,要求显式指定品牌字体。
  • 🚫 紫色/蓝色AI渐变 — 那个从 #7C3AED#3B82F6 的渐变,AI圈已经用出工伤了。
  • 🚫 居中Hero布局 — "居中是安全的"是AI最大的错觉。taste-skill要求要么左对齐,要么别用Hero。
  • 🚫 h-screen — 这是个极妙的点。AI特别喜欢 h-screen 让每个section刚好占满一屏,但这种做法在移动端适配时各种翻车。taste-skill强制用 min-h-[100dvh],语义完全不一样——内容不够就不要撑满。
  • 🚫 emoji当图标 — 你见过那种用 🚀 当火箭图标的落地页吧?taste-skill拒绝这种偷懒。
  • 🚫 手写SVG路径 — AI画的图标只有它能看懂。禁止手写,要求用现成图标库。
  • 🚫 width/height做动画 — 这是性能老生常谈了,只能用 transform + opacity,但AI就是记不住。taste-skill替它记住。

还有更多细节:禁止"Jane Doe"假人名、禁止"Acme Inc"假公司名、禁止"Quietly in use at"这种经典AI话术、禁止三卡并列这种AI最爱结构……封杀清单长到可以当AI反模式百科全书读。

强制流程:先想再写

taste-skill规定了AI生成设计的执行流水线:

  1. 读需求,理解业务场景
  2. 写一句"设计宣言" — 一句话概括这个页面长什么样。比如"这是一款面向独立开发者的支付工具,设计上需要极简、信任感、突出数据"
  3. 不确定?只准问一个问题 — 这是我觉得最有趣的设计。AI经常一个问题接一个问题问个没完("你喜欢什么颜色?"、"要不要圆角?")。taste-skill限制AI只能问一个最关键的问题,倒逼它学会做判断。
  4. 调三个旋钮
  5. 写代码

这五个步骤让AI从"猜你喜欢什么"变成了"我有判断,但你也可以纠正我"。这个心态转变对最终产出质量的影响是巨大的。

设计系统映射:你是给谁做的?

taste-skill还内置了一套品牌映射规则:

  • 微软风格 → Fluent UI
  • Google风格 → Material Web
  • SaaS产品 → shadcn/ui
  • Shopify生态 → Polaris
  • 游戏/创意 → 特定风格库

不是让AI自由发挥设计系统,而是基于业务场景给它一个明确的参照系。这比AI天马行空自己"发明"一套组件库要靠谱得多。

那些让人会心一笑的细节

这个项目最让我佩服的不是它的技术实现——它本身只是一个 SKILL.md 文件,技术上没有任何门槛。真正值钱的是观察的颗粒度。作者显然花了大量时间观察AI产物中的"流行病",然后一条一条地、精确地把它写进禁令。

比如禁止一些AI写页面时默认贴上去的空话套话——"Start building your next project"、"Trusted by thousands"、"Join the waitlist"——这些在AI看来是标准的CTA文案,在taste-skill看来就是噪音,是被禁止的AI Tells(AI痕迹)。

你甚至可以把这个文件当作一本 《AI生成UI的常见问题诊断手册》 来读,因为它把你有审美直觉但说不出来的那种"不对劲"写成了精确的代码规则。

我装上以后的体验

说真的,我自己在Claude Code里挂上taste-skill之后,最直观的感受是:生成的页面不再像AI写的了。

不是说突然变成了Apple设计大奖的水平——这个文件并没有让AI突然拥有审美天才。它的作用是把及格线抬高了。以前AI出的活,60%的情况你会觉得"算了能用就行"。现在至少80%的情况你会觉得"嗯,这看起来像个正经产品"。

它不是在教AI怎么设计,而是给它装了一堆"不准"的过滤器。AI本来就是个超级模仿者,它不缺能力,缺的是约束。taste-skill提供了这层约束——逼着AI每次都从真实需求和品牌背景出发做选择,而不是走那条最安全的、被训练数据反复强化过的老路。

如果你想让你家AI写的页面少一点"AI味儿",去GitHub搜一下 taste-skill,丢进你的项目配置里。46K Stars不是白给的,AI被紫色渐变荼毒太久,是时候给它装一装品味了。