你有没有发现，现在用AI生成的网页，看多了总觉得哪里不对劲？
不是代码跑不起来，而是——它们看起来都一样。
紫蓝渐变背景 + 居中大标题 + 三张等宽功能卡片 + 通用毛玻璃效果。
不管做什么产品，出来的页面都像从一个模子里刻出来的。这就是业内现在叫 "AI slop"（AI工业废料）的现象。
今天，我要给你介绍一个专门对抗这种现象的开源项目 —— Taste Skill。
它不写代码，但它能让写代码的AI，写出有品位的网页。
一、问题出在哪？AI为什么总写出"一眼假"的网页？
先来看几张图。如果你用过 ChatGPT、Claude、或者任何 AI 编码工具生成过网页，你一定见过这些画面：
🎨 AI 紫色渐变 — 几乎每个 AI 生成的 SaaS 落地页，背景都是那种梦幻的紫蓝色 mesh gradient
📐 三张等宽卡片 — "三大功能"，永远三张一模宽的卡片排排坐
🔤 Inter 字体 — 全球最无聊的无衬线字体，被 AI 当成默认选项
💬 em-dash（——） — 每个标题里都忍不住加个破折号，显得"很有设计感"
👤 "Jane Doe" 名字 — 客户评价永远是 "John Doe"、"Sarah Smith"
🏷️ 每段标题上面都有个小标签 — 像眉毛一样悬在标题上方，全是 uppercase tracking-[0.18em]
这些就是 AI 的"设计套路"。 不是故意偷懒，而是模型在海量训练数据里看到了太多同样的模式，然后遇到新需求时，就自动套用最熟悉的模板。
如果你也受够了千篇一律的 AI 生成页面，想让 AI 写出有个性、有品位的设计，那 Taste Skill 就是为你准备的。它解决的核心问题就一个：让 AI 每次输出的页面都不一样，而且都好看。
这个项目由德国开发者 Leon Lin（Leonxlnx）创建，GitHub 上已经拿到了 67,000+ 颗星，4,600+ 个 Fork，是 2025 年 7 月上线后增长最快的前端 AI 技能项目之一。
Taste Skill 的作者把这个现象做了一个形象的比喻：
AI 就像一个只会一种烹饪手法的厨师。 不管给它牛排还是蔬菜，它都用同一种方式做出来——因为这是它见过的最多、最安全的做法。
Taste Skill 要做的事，就是教会这个厨师：不同的食材，需要不同的刀法和火候。
二、Taste Skill 是什么？一句话讲清楚
Taste Skill 是一套写给 AI 的"设计品味指南"。
它不是一个框架、不是一组组件库、也不是一个可视化工具。
它是一个 1200 多行的超级指令文件（SKILL.md），告诉 AI：
"在做前端页面之前，先读懂需求；在选颜色之前，想想用户是谁；在加动画之前，问问自己为什么要加。"
它覆盖的场景很明确：落地页、个人作品集、品牌官网、营销页面。 不做后台管理系统，不做数据表格，不做多步骤表单。
三、核心机制：三个旋钮，决定一切设计
Taste Skill 最精妙的设计，是它的 "Three Dials"（三个旋钮） 系统。
你可以把这三个旋钮想象成汽车的方向盘和油门：
🎛️ 旋钮一：DESIGN_VARIANCE（设计变异度）
档位 效果 适合场景
1-3 完美对称，中规中矩 政府网站、金融后台
4-7 打破对称，错位排版 普通 SaaS 落地页
8-10 大胆不对称，艺术感强 创意工作室、Awwwards 风格
默认值：8。 也就是说，Taste Skill 默认鼓励 AI 跳出舒适区，不要搞对称网格。
🎛️ 旋钮二：MOTION_INTENSITY（动效强度）
档位 效果 适合场景
1-3 完全静态，只有 hover 效果 无障碍优先、政府网站
4-7 CSS 过渡动画，流畅自然 大多数商业页面
8-10 滚动叙事、视差、物理引擎 创意展示、品牌大片
默认值：6。 中等偏上，但有一个铁律：如果声明了高动效，就必须真的做出动效来。 不能嘴上说"cinematic"（电影感），实际做出来的页面一动不动。
🎛️ 旋钮三：VISUAL_DENSITY（视觉密度）
档位 效果 适合场景
1-3 美术馆式留白，大面积空白 高端品牌、奢侈品
4-7 日常 App 间距，标准布局 大多数商业页面
8-10 驾驶舱式密集，信息满满 数据分析面板、专业工具
默认值：4。 偏稀疏，强调呼吸感。
这三个数字，会贯穿整个页面的每一个设计决策。 字体大小、间距、动效、布局……全部由这三个旋钮驱动。
四、实战流程：从"读需求"到"交作业"
Taste Skill 规定了一套严格的执行流程。每一步都不能跳。
第一步：读需求（Brief Inference）
在写任何一行代码之前，AI 必须先回答一个问题：这个页面是给谁看的？
它会读取以下信号：
这是什么类型的页面？（SaaS 落地页？设计师作品集？品牌官网？）
用户用了什么关键词？（"极简"？"酷"？"Apple 风格"？）
目标受众是谁？（技术采购负责人？招聘经理？普通消费者？）
有没有已有的品牌资产？（Logo、配色、字体？）
有没有什么硬性约束？（无障碍要求？合规要求？）
读完之后，AI 必须输出一句话的 "Design Read"（设计判断）：
"Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion."
翻译过来就是："我判断这是一个面向技术买家的 B2B SaaS 落地页，风格偏向 Linear 式的极简主义，技术栈用 Tailwind + Geist 字体 + 克制的动效。"
这一步的意义在于：强制 AI 在动手前先思考，而不是条件反射地输出默认模板。
第二步：选基础设施（Design System Map）
有了设计判断，接下来选"地基"。
Taste Skill 有一个非常诚实的规则：如果有现成的官方设计系统，就用官方的，别自己造轮子。
举个例子：
微软风格 → 装 Fluent UI
Google 风格 → 装 Material Web
IBM 企业级 → 装 Carbon
Shopify 应用 → 装 Polaris
现代 React → 装 shadcn/ui
通用现代 SaaS → 用 Tailwind v4
绝不混用两个设计系统。 不能用 Fluent 的 React 又同时用 Carbon 的样式，那就像穿西装配运动鞋。
第三步：开始设计（Design Engineering）
这是最精彩的部分。Taste Skill 在这里列出了几十条具体的设计规则，每一条都在对抗 AI 的"默认套路"。
🚫 禁止 AI 紫色
Taste Skill 给这个现象起了一个正式的名字："The Lila Rule"（莉拉法则）。
默认情况下，禁止 AI 紫色/蓝色辉光美学。禁止自动出现的紫色按钮发光效果，禁止随机的霓虹渐变。
替代方案： 用中性色基底（Zinc / Slate / Stone），搭配一个高对比度的单一强调色（翠绿、电光蓝、深玫瑰红、焦橙色）。
🚫 禁止 Inter 字体作为默认
Inter 是最安全的字体，也是最无聊的字体。Taste Skill 把它从默认列表中踢掉了。
推荐替代： Geist、Outfit、Cabinet Grotesk、Satoshi，或者根据品牌选择衬线体。
🚫 禁止 em-dash（——）
这是 Taste Skill 里最严格的一条规则，被作者称为 "the single most-violated Tell"（被违反最多的 AI 特征）。
em-dash 完全禁止。在标题里、正文里、引用里、按钮文字里、图片说明里——零容忍。
替代方案： 用句号、逗号、冒号、括号。
为什么这么严格？因为 em-dash 是 AI 写作中最标志性的风格特征之一，就像某些厨师做菜必放味精一样。
🚫 禁止"三张等宽功能卡片"
❌ 错误示范：
┌──────────┬──────────┬──────────┐
│ 图标 │ 图标 │ 图标 │
│ 标题 │ 标题 │ 标题 │
│ 描述文字 │ 描述文字│ 描述文字│
└──────────┴──────────┴──────────┘
✅ 正确做法：
- 2列交错排列（左图右文 / 左文右图交替）
- 非对称网格
- 横向滚动
- Masonry 瀑布流🚫 禁止"Jane Doe"效应
❌ 错误示范：
"John Doe" · CEO at Acme Corp
"Sarah Smith" · Designer at Nexus Inc
"Jack Su" · Developer at SmartFlow
✅ 正确做法：
- 用真实感强的名字（根据文化背景）
- 用有意义的品牌名（而不是 Acme/Nexus/SmartFlow）
- 用有机而不整齐的数据（47.2% 而不是 50%）🚫 禁止虚假精确数字
❌ 错误示范：
"提升 99.99% 的性能"
"延迟仅 4.1×"
"支持 48k 用户"
✅ 正确做法：
- 使用真实数据
- 或者明确标注为模拟数据（<!-- mock -->）🚫 禁止"每段标题上面的小标签"
Taste Skill 发现了一个令人不安的现象：几乎所有 AI 生成的页面，每一段标题上面都有一个小小的 uppercase 标签。
━━━━━━━━━━━━━━━━━━━━━━━━━━
SELECTED WORK
━━━━━━━━━━━━━━━━━━━━━━━━━━
HOW IT WORKS
━━━━━━━━━━━━━━━━━━━━━━━━━━
THE HARDWARE
━━━━━━━━━━━━━━━━━━━━━━━━━━这太模板化了。Taste Skill 的规定是：
每 3 个段落最多允许 1 个 eyebrow（小标签）。 一个 9 段的页面，最多只能有 3 个。
第四步：检查清单（Pre-Flight Check）
写完代码后，不能直接交。Taste Skill 提供了一个 40+ 项的检查清单，每一项都必须打勾。
让我举几个关键的：
[ ] 全文零 em-dash（一个都不许有）
[ ] 整个页面只用一个主题（不能一半亮色一半暗色）
[ ] 只用一个强调色（不能这段用蓝色、那段用绿色）
[ ] 只用一套圆角系统（不能按钮是圆的、卡片是方的）
[ ] 每个按钮的文字都能在一行内显示完整
[ ] Hero 区域的内容必须在首屏内完整可见
[ ] 导航栏在桌面端必须只有一行
[ ] 每个多列布局都要明确声明移动端如何折叠
[ ] 所有动画都必须有理由（不是为了好看而好看）
[ ] 全页只允许最多一个无限滚动横幅
[ ] 没有两个 CTA 按钮表达同一个意图（"联系我们"和"开始项目"算重复）
如果任何一个检查项无法通过，页面就算没做完。
五、高阶能力：不只是"好看"，还要"好用"
🖼️ 图片策略：拒绝"纯文字页面"
Taste Skill 有一条铁律：
纯文字页面不是极简主义，是不完整的作品。
（原文："A page with no images is not minimalism. It is incomplete work."）
即使是极简风格的页面，也至少需要 2-3 张真实图片（Hero 图、产品展示图、辅助图片）。
图片获取优先级：
AI 图片生成工具（如果有）→ 先生成图片，再写代码
真实网络图片（Picsum、Unsplash）→ 用描述性 seed
明确标注占位符 → 绝不用<div>拼 fake screenshot
🌙 暗色模式：必须双模式
默认设计亮色和暗色两种模式。除非用户明确要求只做一种，否则不能只交付单色版本。
而且有一个重要规则：页面主题必须锁定。 不能在页面中间突然从深色跳到浅色，让用户感觉"走进了另一个网站"。
♿ 无障碍：不是可选项
动效强度超过 3 时，必须尊重prefers-reduced-motion（用户系统级减少动效设置）
所有按钮文字与背景的对比度必须达到 WCAG AA 标准
表单输入框、占位符、焦点环都必须可读
禁止纯黑色（#000000）和纯白色（#ffffff），用灰度值代替
⚡ 性能：不是事后考虑
Hero 图片必须设置priority属性
动画只使用transform和opacity（GPU 加速）
模糊效果只用于固定元素，不能用于滚动容器
LCP < 2.5s、INP < 200ms、CLS < 0.1
六、进阶技能包：Taste Skill 全家桶
Taste Skill 不仅仅只有一个主文件。它是一个技能生态系统：
技能名称 功能 一句话描述
taste-skill (v2) 旗舰主技能 完整的反套路前端设计体系
image-to-code 图像→代码管线 先生成设计参考图，再翻译成代码
redesign-skill 现有项目改版 审计→诊断→升级，不动功能只改皮
soft-skill 高端视觉设计 学习顶级agency的审美标准
minimalist-skill 极简风格 Notion/Linear 式的克制美学
brutalist-skill 粗野主义 Swiss Industrial + Tactical Telemetry
brandkit 品牌看板 生成品牌色板、字体、组件库
output-skill 输出保障 强制 AI 输出完整代码，不截断
gpt-taste GPT 专用版 在 GPT/Codex 中使用更严格的版本
其中 image-to-code 特别有意思。它的工作流程是：
用户提需求 → AI 先生成设计参考图 → AI 深度分析图片 → 翻译成代码它有一个"组合变化引擎"，从多个维度随机组合搭配：
主题基调（纯净亮色 / 深邃暗色 / 大胆工作室 / 安静高级中性）
背景质感（技术网格 / 纯色渐变 / 电影级图像 / 纹理表面）
字体性格（干净 grotesk / 精致 grotesk / 表现型 display / 编辑衬线+无衬线）
Hero 架构（居中极简 / 非对称分割 / 浮动拍立得 / 内联巨型排版 / 编辑偏移 / 大图主导）
段落系统（模块化 Bento / 交替编辑块 / 海报式堆叠 / 画廊节奏 / 瑞士网格 / 非对称高端）
每次生成都会随机组合，确保不会两次输出相同的布局。
七、一个真实案例：如果让普通 AI 和 Taste Skill 分别做一个页面
假设你告诉 AI：
"帮我做一个手工锅具品牌的落地页。"
普通 AI 会做什么：
紫蓝色渐变背景
居中大标题："Redefine Your Cooking Experience"
三张等宽卡片："Premium Materials" / "Ergonomic Design" / "Lifetime Warranty"
客户评价来自 "John Doe, CEO"
字体：Inter
每个标题上面都有个小标签
按钮文字："Get Started"（两行换行显示）
整个页面用 AI 紫色调
Taste Skill 会怎么做：
先判断： "这是一个高端消费品品牌，面向注重生活品质的消费者"
设旋钮： VARIANCE=7, MOTION=6, DENSITY=3（偏稀疏，中等变异）
配色： 禁止 AI 默认的暖米色+黄铜色+咖啡色（这是高端消费品最常见的 AI 套路！）
改用：冷银灰 + 铬色 + 烟雾色，或者 深绿 + 骨色 + 琥珀色点缀
字体： 不用 Inter，用 Cabinet Grotesk Display + Satoshi
Hero： 非对称分割（左文右图），标题不超过 2 行，副标题不超过 20 个字
布局： 不用三列等宽卡片，改用 Bento 网格或交错排列
图片： 先生成一张产品摄影图（黑白极简风格），放在 Hero 区域
文案： "Crafted for the way you actually cook."（具体、真实、不浮夸）
检查： 全文零 em-dash，零 Jane Doe，零 Acme Corp，零 AI 紫色
区别不在于"哪个更好看"，而在于"哪个看起来是专门为这个品牌设计的"。
八、为什么 Taste Skill 值得你关注？
- 它解决的是一个普遍痛点
不管你会不会写代码，只要你用 AI 生成过任何东西（网页、PPT、海报、邮件），你就一定遇到过"AI 味"的问题。Taste Skill 从根源上解决这个问题。 - 它不是教 AI"怎么做"，而是教 AI"什么时候不做"
大部分设计指南都在说"你应该做什么"。Taste Skill 花了一半以上的篇幅说"你不应该做什么"：
不要默认用 Inter
不要默认用紫色
不要默认三张等宽卡片
不要每段标题都加 eyebrow
不要用 em-dash
不要生成虚假数字
不要做 fake screenshot
知道"不该做什么"，往往比知道"该做什么"更难，也更重要。 - 它是一套可以复用的知识
Taste Skill 不是一个一次性的 prompt。它是一个结构化的技能文件，可以被任何支持 A2A 协议的 AI agent 加载和使用。
这意味着：
你可以把它集成到你的 AI 工作流中
它可以被持续更新和改进
它的设计原则可以迁移到不同的项目和场景中 它背后的研究支撑
Taste Skill 不仅仅是经验总结。它背后有一份关于 "LLM Laziness"（LLM 惰性） 的研究：
为什么 AI 总是输出千篇一律的东西？
训练数据偏差如何导致设计同质化？
如何通过参数调整和提示工程缓解这个问题？这份研究让 Taste Skill 的规则不是凭空想象的，而是有实证数据支撑的。
九、怎么开始用？
如果你是开发者
克隆仓库：git clone https://github.com/Leonxlnx/taste-skill
将skills/taste-skill/SKILL.md配置到你的 AI agent 中
让你的 AI agent 在生成前端页面时加载这个 skill
如果你是非技术人员
你不需要直接操作代码。但你可以在使用任何 AI 编码工具时，把你的需求描述得更具体：
❌ "帮我做一个 landing page"
✅ "帮我做一个面向设计师的个人作品集网站，风格参考 Linear，暗色主题，不要太满"
Taste Skill 的第一个步骤就是"读懂需求"。你的需求描述越具体，AI 的判断就越准确。
如果你想深入了解
推荐阅读顺序：
主 SKILL.md 的 Section 0-4（基础理念 + 三个旋钮 + 设计规范）
Section 9（AI 套路识别，最有意思的部分）
Section 14（Pre-Flight 检查清单，了解什么叫"交付标准"）research/laziness/（研究论文，理解为什么 AI 会这样）
十、结语
Taste Skill 最打动我的一句话是："A page with no images is not minimalism. It is incomplete work."
（一个没有图片的页面不是极简主义，是不完整的作品。）
这句话揭示了一个深刻的道理：真正的品味，不在于你知道多少技巧，而在于你懂得克制什么。
Taste Skill 不是在教 AI 做更多的事，而是在教 AI 少做一些平庸的事。
当你下次再用 AI 生成页面，觉得"好像哪里不对"的时候，不妨想想——也许缺的不是更多的功能，而是一个更好的 taste。项目地址：https://github.com/Leonxlnx/taste-skill
如果觉得有帮助，点个在看 👀
评论0
暂时没有评论