夜雨聆风你有没有发现，让AI写个网页，十个模型九个长得一样？紫色渐变、居中Hero、三张等宽卡片、Inter字体、slate-900背景……这不是巧合，这是AI的"审美癌"。
· · ·
一个让人哭笑不得的现象
最近我在研究AI Agent的Skill生态时，发现了一个特别有意思的现象：不管你怎么描述需求，AI生成的前端页面永远在"长得一样"的边缘试探。
你说"帮我做一个SaaS落地页"，它给你紫色渐变+居中Hero+三张特性卡。你说"做个作品集网站"，它给你紫色渐变+居中Hero+三张特性卡。你说"设计一个高端品牌官网"，它还是给你紫色渐变+居中Hero+三张特性卡。
这种千篇一律的设计，有人叫它"AI Slop"——AI生成的、毫无灵魂的、模板化的内容。就像流水线上的罐头，看着完整，吃着没味。
直到我遇到了 Taste Skill，一个专门给AI"装上审美"的开源项目。
· · ·
Taste Skill 是什么？
一句话：它是一套"反模板化"的前端设计规则，以SKILL.md文件的形式，注入到AI编码助手中，让AI生成的界面不再像AI生成的。
项目地址：https://github.com/Leonxlnx/taste-skill
它不是一个UI框架，不是组件库，不是设计系统。它是一份设计决策说明书，告诉AI：
- ●
什么时候该用什么设计语言 - ●
什么风格是"AI默认"必须避开的 - ●
如何根据需求推断正确的设计方向 - ●
布局、动效、密度怎么调
核心理念：AI生成的前端之所以丑，不是因为模型能力不够，而是因为模型缺乏"设计判断力"。 它不知道什么该做、什么不该做，所以永远选择最安全（也最无聊）的中间路线。
Taste Skill 就是给AI装上这个判断力。
· · ·
三个旋钮，解决一切
Taste Skill 最精妙的设计，是它把前端设计的核心维度浓缩成了三个旋钮：
1. DESIGN_VARIANCE（设计变化度）：1-10
控制布局的"疯狂程度"。
- ●1
= 完美对称，所有元素居中排列 - ●10
= 艺术混沌，不对称、错位、打破网格
默认值：8。这意味着Taste Skill鼓励AI大胆一点，不要永远把Hero放在正中间。
2. MOTION_INTENSITY（动效强度）：1-10
控制动画的深度和复杂度。
- ●1
= 纯静态，没有任何动画 - ●10
= 电影级，物理引擎、磁性交互、滚动驱动动画
默认值：6。适度的动效让页面有生命力，但不至于让用户晕头转向。
3. VISUAL_DENSITY（视觉密度）：1-10
控制每个视口的信息量。
- ●1
= 美术馆风格，大量留白，呼吸感 - ●10
= 驾驶舱风格，信息密集，数据仪表盘
默认值：4。留白是奢侈品，AI通常不理解这一点。
三个旋钮，组合出无穷变化。 一个极简主义博客可能是 5/3/2，一个创意机构官网可能是 9/8/3，一个政务服务平台可能是 3/2/5。
· · ·
"先读懂需求，再动手写代码"
这是Taste Skill最反直觉、也最重要的设计：在写任何代码之前，AI必须先输出一行"设计解读"。
比如用户说"帮我做一个设计师作品集"，AI必须先说：
"Reading this as: solo designer portfolio for hiring managers, with an editorial / kinetic-type language, leaning toward native CSS + scroll-driven animation + custom typography."
（解读：这是一个面向招聘经理的设计师作品集，走编辑/动态排版风格，用原生CSS+滚动驱动动画+自定义字体。）
这一步为什么关键？
因为它强制AI在动手之前先"读题"。大多数AI生成界面丑的原因，不是执行能力差，而是它根本没有理解用户想要什么风格就直接开干了。它默认选择了"安全"的选项——紫色渐变、居中布局、Inter字体——因为这些在训练数据中出现频率最高。
Taste Skill 用这一个步骤，从根源上解决了问题。
· · ·
专治AI的18种"审美癌"
如果说三个旋钮是"骨架"，那Taste Skill中大量的反面规则就是"灵魂"。它系统性地识别并封禁了AI生成界面的常见"病灶"：
颜色病
- ●Lila规则
：禁止AI默认的紫色/蓝色渐变发光。紫色不是问题，问题是AI把紫色当成"万能安全色"用在每个项目上。 - ●奶油棕禁令
：高端消费品页面永远是米色背景+黄铜色点缀+深咖啡文字——这个组合被Taste Skill直接拉黑。因为它已经被AI用烂了，品牌辨识度为零。 - ●颜色一致性锁定
：一个页面选定一个强调色，从头用到尾。第7个section突然冒出一个蓝色CTA按钮？不允许。
排版病
- ●Inter字体降级
：Inter不再是默认选择。优先推荐Geist、Outfit、Satoshi等更有辨识度的字体。 - ●衬线体纪律
：AI有一个顽固偏见——"创意项目=用衬线体"。Taste Skill明确要求：衬线体只在品牌brief明确要求时才用，不是所有"有创意"的项目都需要Serif。 - ●混搭字体禁令
：想在无衬线标题里强调一个词？用同族的斜体或粗体，不要突然塞一个衬线词进去。
布局病
- ●反居中偏见
：当设计变化度>4时，Hero区域禁止居中。用分屏、左对齐、滚动固定等替代方案。 - ●Section布局重复禁令
：8个section中至少用4种不同的布局方式。不能从头到尾都是"左文右图"或"三列网格"。
动画病
- ●禁止滚动监听
：直接用 window.addEventListener('scroll')在React中追踪滚动位置——这个操作被Taste Skill封禁。它会导致性能灾难。正确做法是用Motion库的useScroll。 - ●说到做到规则
：如果你声明了动效强度>4，页面上必须真的有动画。否则就把旋钮降到3，老老实实做静态页面。
文案病
- ●破折号全面禁令
：页面上不允许出现任何em-dash（—）。这是AI生成文本最常见的标志物。用连字符（-）或重组句子。 - ●版本号禁令
：营销页面上不允许出现"V0.6"、"BETA"、"INVITE-ONLY PREVIEW"这类标签。 - ●滚动提示禁令
：不允许出现"Scroll"、"↓ scroll"、"Scroll to explore"这类装饰性文字。
这些规则不是审美偏好，而是从大量真实生产环境中总结出的"AI行为模式"。 每一条禁令背后，都是无数次AI生成界面被用户吐槽"又丑又一样"的教训。
· · ·
不止一个Skill，是一整个"审美工具箱"
Taste Skill 不是单个文件，而是一个包含13个Skill的完整生态：
核心编码Skill：
- ●design-taste-frontend
：默认主力，v2实验版，全功能反模板前端Skill - ●gpt-taste
：针对GPT/Codex优化的加强版，布局变化更激进 - ●redesign-skill
：专门改造现有项目，先审计再修改 - ●output-skill
：防止AI偷懒，强制完整输出，不留占位符
风格化Skill：
- ●soft-skill
：高端、温柔、昂贵感的UI风格 - ●minimalist-skill
：Notion/Linear式的极简编辑风格 - ●brutalist-skill
：瑞士排版、硬核机械美学
图像生成Skill：
- ●imagegen-frontend-web
：生成高质量网站参考图 - ●imagegen-frontend-mobile
：生成移动端界面参考图 - ●brandkit
：生成品牌视觉方案
它兼容所有主流AI编码工具：Cursor、Claude Code、Codex、Gemini CLI、v0、Lovable、OpenCode……只要工具支持SKILL.md格式，就能无缝接入。
安装只需要一行命令：
代码bash
· · ·
它和"让AI写好Prompt"有什么区别？
你可能会想：我直接在Prompt里说"不要用紫色渐变"、"不要居中布局"不就行了？
不行。 原因有三：
1. Prompt是临时的，Skill是持久的。
你不会每次让AI写前端都记得加"不要用Inter字体"。但Skill装好之后，规则永远生效。
2. Prompt是零散的，Skill是系统的。
你可以在Prompt里加5条审美约束，但Taste Skill有上百条互相配合的规则，覆盖从字体选择到动画实现到深色模式适配的全流程。这不是一个人能手动维护的。
3. Prompt是描述性的，Skill是可执行的。
Taste Skill不只是告诉你"不要做什么"，它还告诉你"应该做什么"。比如封禁了默认GSAP滚动动画的同时，它给出了三个标准代码模板：Sticky-Stack、Horizontal-Pan、Scroll-Reveal Stagger，直接复制就能用。
· · ·
为什么这个项目值得关注？
对开发者
它是一个即插即用的前端质量保证工具。不需要学新的框架，不需要改技术栈，一个SKILL.md文件就能让你的AI助手产出更专业的界面。
对AI从业者
它展示了Skill生态的巨大潜力。当我们在讨论AI Agent的能力边界时，Taste Skill用一个非常实际的案例证明：给AI注入领域知识，比单纯提升模型能力更有效。
对设计师
它是一个AI时代的"设计规范"。不是教你怎么做设计，而是系统性地记录了"AI做设计时容易犯的错"。这些洞察，本身就是一份极有价值的设计知识库。
· · ·
最后说两句
Taste Skill让我看到了一个有意思的趋势：AI工具的下一步进化，不是更大的模型、更多的参数，而是更好的"领域知识注入"。
一个不懂设计的AI，即使参数万亿，也只会生成千篇一律的紫色渐变页面。但一个被注入了设计判断力的AI，即使模型不大，也能产出让人眼前一亮的作品。
Skill、Rules、System Prompt——这些看似"小"的东西，可能才是AI真正变好的关键。
如果你也在用AI做前端，试试这个项目。一行命令，让你的AI助手从此告别"审美癌"。
· · ·
项目地址： https://github.com/Leonxlnx/taste-skill
官方网站： https://tasteskill.dev
安装命令：npx skills add https://github.com/Leonxlnx/taste-skill
— 全文完 —
如果对你有帮助，欢迎点个 在看 👀 或 转发 给朋友 🙌
