项目: taste-skill
作者: Leonxlnx（16岁高中生，GitHub: <span class="mention-invalid">@Leonxlnx</span>）
定位: The Anti-Slop Frontend Framework for AI Agents
核心机制: 用 SKILL.md 文件给AI灌输"审美直觉"——三个旋钮（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY），各1-10分，像调音台一样控制AI的输出风格
安装: npx skills add https://github.com/Leonxlnx/taste-skill
官网: https://www.tasteskill.dev/

一、问题：为什么AI写的前端都长一个样？

用过Cursor、Claude Code、v0或Bolt的人，大概率遇到过这个场景：

你让AI写个登录页。它给出一个居中的卡片，白色背景，蓝色主按钮，圆角12px，左上角放个Logo，底部一行"Forgot password?"链接。你让AI再写个产品页——它给出一个Hero区大标题+副标题+CTA按钮，下面三列Feature卡片，白色背景，蓝色主按钮，圆角12px。

同一个AI，同一个模板，不同的项目。

这不是AI能力问题，是概率问题。大语言模型的训练数据里，Tailwind CSS的模板、Bootstrap的组件、线性渐变Hero图占了压倒性比例。所以当你说"写个前端页面"，AI不是在"设计"——它是在统计回归到最常见的模式。

这就是"slop"（烂大街输出）的根源：AI不是故意偷懒，是它的概率分布天生偏向平庸。

taste-skill的创始人Leonxlnx（一个16岁高中生）看穿了这个问题。他没有试图训练一个新模型，也没有写一个新的CSS框架——他只是给AI写了一份极长的设计指南，让AI在每次生成代码前，先读一遍这份指南，就像人类设计师在开始工作前先翻看品牌手册一样。

二、核心机制：SKILL.md 作为审美预加载

2.1 什么是SKILL.md？

taste-skill本质上是一个SKILL.md文件——一种被Claude Code、Codex、Cursor等AI编程工具原生支持的格式。你把SKILL.md放进项目目录，AI在每次生成代码前会自动读取它，作为行为准则。

taste-skill的SKILL.md做了三件事：

1. 禁止列表：明确列出AI常犯的错误——比如"禁止用蓝紫渐变"、"禁止默认的rounded-xl"、"禁止无意义的动画"
2. 设计原则：灌输高层次审美判断——比如"排版优先于颜色"、"留白是信息"、"动画应该像物理，像魔法"
3. 三个旋钮：用三个1-10的数值，精确定义本次项目的风格方向

2.2 三个旋钮：DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY

这是taste-skill最精巧的设计。三个旋钮让抽象审美变成可量化的参数：

这三个旋钮的意义在于：它们不是约束，而是引导。AI仍然拥有创造性自由度，但自由度的方向被预先设定了。就像给爵士乐手指定一个调性和速度，而不是规定每一个音符。

2.3 13个变体：从通用到极端

除了默认的taste-skill（v2），项目还提供13个专用变体：

三、技术细节：为什么一个Markdown文件能改变AI输出？

3.1 上下文注入（Context Injection）

SKILL.md的工作机制是基于大语言模型的上下文学习（in-context learning）。LLM在生成本文时，会强烈受最近的上下文影响。SKILL.md作为系统级指令（system-level instruction），在每次代码生成前被注入，从而改变了AI的概率分布。

具体来说：

• 没有SKILL.md时，AI的token分布被预训练数据主导→偏向常见模板
• 有SKILL.md时，上下文中的设计原则被"预加载"到注意力机制中→偏向SKILL.md描述的风格

这类似于人类设计师在动手前先花30分钟看Pinterest/Behance——不是直接复制，而是校准审美直觉。

3.2 禁止列表的"负强化"效果

taste-skill的SKILL.md中包含大量否定性指令（"禁止X"、"不要Y"）。这在LLM的提示工程中有特殊效果：

• 正向指令（"用蓝紫渐变"）容易被AI遗忘或忽略
• 负向指令（"禁止蓝紫渐变"）反而更容易被AI记住，因为否定在注意力机制中更"突出"

这也是为什么taste-skill的anti-slop效果如此明显——它不只是告诉AI"做什么"，而是强烈地告诉AI"不要做什么"。

3.3 v2 vs v1：从规则到推理

v2的改进方向很有趣——它不再只是罗列规则，而是让AI先推理、后设计：

1. 读取需求brief → 理解项目类型和氛围
2. 推断设计语言 → 自动选择适合的风格方向
3. 映射设计系统 → 确定颜色、字体、间距的数值
4. 执行硬规则 → 禁止烂大街模式（如em-dash滥用）
5. 生成GSAP骨架 → 提供动画代码的模板结构
6. redesign审计协议 → 如果是改造项目，先审计现有UI
7. 起飞前检查 → 最终输出前自检

这个流程本质上是在模拟人类设计师的工作流：理解→方向→系统→执行→审查。

四、效果：Before vs After

4.1 典型的"slop"输出（无taste-skill）

- Hero区：大标题居中，渐变背景（蓝紫）
- 三列Feature卡片，图标+标题+描述
- 一个CTA按钮，蓝色，rounded-xl
- 底部Footer，四列链接
- 全局字体：Inter
- 全局颜色：slate-50背景，blue-600主色

这是AI的"默认设置"——也是99%的AI生成前端看起来一模一样的原因。

4.2 使用taste-skill后的输出（以DESIGN_VARIANCE=8, MOTION_INTENSITY=7, VISUAL_DENSITY=4为例）

- 非对称Hero布局：左侧大图（overflow出视口），右侧标题+CTA
- 自定义排版：Display字体（大字号、紧凑行高）+ 等宽字体用于数据
- 动画：滚动触发的视差，磁吸按钮，文字逐字出现（GSAP SplitText）
- 间距：大留白，但关键信息区域紧凑
- 颜色：从brief推断的单色方案（如深靛蓝+暖白），无渐变
- 无默认圆角：锐角或极小圆角（2px）
- 无无意义动画：每个动画都有功能目的（引导视线、反馈状态）

差异不是"更好看"那么简单——是从模板化到定制化的跃迁。

五、项目生态与社区

5.1 安装方式

# 安装默认skill（v2实验版）
npx skills add https://github.com/Leonxlnx/taste-skill

# 安装特定变体
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "high-end-visual-design"

# 手动使用：复制SKILL.md到项目目录，或粘贴到ChatGPT/Codex对话中

5.2 支持的工具链

taste-skill兼容所有支持SKILL.md的AI编程工具：

• Claude Code（Anthropic）
• Codex（OpenAI，桌面应用）
• Cursor（AI代码编辑器）
• v0（Vercel）
• Bolt（StackBlitz）
• 任何接受Markdown指令的LLM

5.3 社区与作者

• 作者: Leonxlnx（GitHub: <span class="mention-invalid">@Leonxlnx</span>），推特: <span class="mention-invalid">@LexnLin</span>
• 邮箱: hello@tasteskill.dev
• 社区: GitHub Issues/PR + Twitter DM
• Star增长: 项目上线后快速增长，反映了AI前端开发者对anti-slop的强烈需求

六、局限与风险

6.1 v2仍是实验性的

v2正在积极迭代中，行为可能变化。如果你依赖稳定的输出，建议先用v1（design-taste-frontend-v1）。

6.2 规则不是万能药

SKILL.md能纠正AI的审美偏差，但不能替代人类设计师。对于真正高端的品牌设计、复杂的交互系统、或需要用户研究的场景，AI+SKILL.md只是起点，不是终点。

6.3 "风格同质化"的反向风险

有趣的问题是：如果所有AI前端开发者都用taste-skill，taste-skill本身会不会变成新的"默认模板"？当anti-slop变成主流，它会不会变成另一种slop？

这取决于社区的多样性。如果每个人都用默认的DESIGN_VARIANCE=5，那确实会有同质化风险。但如果有人用8、有人用2、有人用brutalist-skill、有人用minimalist-skill，那taste-skill实际上是在扩大设计多样性，而不是缩小它。

6.4 对设计教育的冲击

taste-skill的深层影响可能是：它让"好的设计"变得可复制。以前你需要读《The Elements of Typographic Style》、看无数案例、积累多年经验才能拥有的审美直觉，现在一个Markdown文件就能赋予AI。

这对设计教育的意义是双刃剑：一方面，它降低了审美门槛，让更多人能做出不丑的界面；另一方面，它可能让新设计师误以为"知道规则=拥有品味"，而忽视了真正的设计思维（用户研究、信息架构、交互逻辑）。

七、结语：审美可以声明，但品味需要训练

taste-skill的最巧妙之处，在于它把"审美"从一种模糊的天赋变成了一种可声明的、可版本控制的、可协作的配置文件。

就像.prettierrc让代码格式标准化，taste-skill让AI设计输出标准化。但这里的"标准化"不是"统一化"——而是让AI从概率回归的平庸中解放出来，去执行一个更精确、更有个性的方向。

一个16岁的高中生，用一份Markdown文件，解决了价值数十亿美元的AI工具链中最头痛的UI同质化问题。这件事本身就很taste-skill：不是用更复杂的模型，而是用更聪明的上下文。

未来的前端设计，可能不是"人写代码"或"AI写代码"的二选一，而是"人写taste-skill，AI写代码"的协作模式。审美留在人类手里，执行交给机器。这听起来像是一个更好的分工。

参考来源：

• GitHub: https://github.com/Leonxlnx/taste-skill
• 官网: https://www.tasteskill.dev/
• 作者推特: https://x.com/LexnLin
• 安装CLI: npx skills add
• 相关概念: SKILL.md (Claude Code/Codex上下文格式), In-context Learning, Anti-Slop

#taste-skill #AI前端 #设计系统 #anti-slop #SKILL.md #ClaudeCode #Codex #Cursor #前端设计 #审美偏差