Taste Skill：5.8 万星，专治 AI 写出“千篇一律的烂 UI”

让 AI 写前端，最容易翻车的地方不是报错，而是——

它生成的页面，永远长一个样。

居中标题、紫色渐变、圆角卡片、三栏 feature、一句 CTA。

换十个需求，出来的还是那一套。社区管这种东西叫“slop”——AI 泔水。

模型越来越强，但出来的 UI 还是没味道。

Taste Skill 想解决的就是这件事。

它给 AI 加上“品味”，让生成的前端不再是千篇一律的样板货。

目前在 GitHub 已经 5.8 万星，由 Leonxlnx 维护，MIT 协议。

今天这篇，我们就用一篇公众号文章，把 Taste Skill 讲清楚：

○  它到底是什么

○  为什么 AI 总爱生成“slop”

○  里面有哪些 skill

○  怎么调它的“品味”

○  怎么上手

Taste Skill 到底是什么？

一句话版：

Taste Skill 是一组可移植的 Agent Skill，专门用来提升 AI 生成的前端界面品质。

它的官方定位写得很直白——The Anti-Slop Frontend Framework for AI Agents（给 AI Agent 用的反样板前端框架）。

关键词有三个：

○  Anti-Slop：反对千篇一律的烂 UI

○  Agent Skill：它是给 AI agent 用的“技能包”，不是给人用的组件库

○  Portable：可移植，兼容 Codex、Cursor、Claude Code 等主流编码 agent

它不绑定某个框架，React、Vue、Svelte 都能用，因为它的规则针对的是“设计意图”，而不是某个框架的 API。

所以它不是又一个 UI 组件库，而是给 AI 的“设计审美说明书”。

为什么 AI 总爱生成“slop”？

这点很有意思，作者专门放了一个 research/
 目录做研究。

它把“AI 偷懒”这件事拆成了几个根因：

○  训练数据偏置：训练集里居中布局、紫色渐变太多，模型形成了“安全审美”

○  RLHF 与算力：被人类反馈强化过的“中庸解”，最不容易出错，也最没个性

○  输出长度限制：为了在有限篇幅里完成，AI 会退缩到最熟悉的套路

○  认知捷径：模型倾向走“最高频路径”，因为这样最省事

对应的，它给出了几类补救方法：提示词工程、参数调节、架构模式、参考 prompt。

也就是说，Taste Skill 不是凭感觉写规则，而是基于对“AI 为什么偷懒”的研究来设计约束。

这点比一般的“设计 prompt”更扎实。

里面有哪些 skill？

它不是一个 skill，而是一组——每个 skill 只干一件事，按需取用。

代码类 skill（输出代码）

生图类 skill（只出图不出码）

生图 skill 的用法是：用 ChatGPT Images 或类似工具生成参考图，再把图喂给编码 agent 去实现。一条龙把“设计参考 → 落地代码”串起来。

怎么调它的“品味”？

这是 Taste Skill 最有意思的设计。

主 skill 文件顶部有三个 1-10 的旋钮：

○  DESIGN_VARIANCE（设计方差）：低=居中、干净；高=不对称、现代

○  MOTION_INTENSITY（动效强度）：低=hover 微动；高=滚动、磁吸

○  VISUAL_DENSITY（视觉密度）：低=留白多；高=信息密集的仪表盘风

调这三个数，就能在“稳”和“潮”、“安静”和“躁”、“空”和“满”之间滑动。

而不是像调组件库那样改一堆参数——它直接改的是 AI 的“审美倾向”。

这个思路很巧：把抽象的“品味”量化成几个可调的维度。

怎么上手？

它走的是 Vercel 的 agent-skills
 标准，一条命令装：

npx skills add https://github.com/Leonxlnx/taste-skill 

想装单个 skill，用它的 install name（SKILL.md 里 frontmatter 的 name:
 字段，不是文件夹名）：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" 

也可以不用 CLI，直接把某个 SKILL.md
 复制进你的项目，或粘进 ChatGPT / Codex 的对话框里——skill 本质就是一个可移植的指令文件。

几个使用建议（来自作者）：

○  通用场景，先用默认 taste-skill

○  给 GPT/Codex 用，选 gpt-taste

○  已有项目改造，用 redesign-skill

○  视觉方向已经定了，按风格加 soft / minimalist / brutalist

○  AI 老是输出截断，加 output-skill

○  要的是图不是码，用 imagegen-frontend-web / mobile 或 brandkit

适合谁用？

如果你满足下面任意一条，值得装：

○  经常用 AI 写前端，受够了千篇一律的“AI 泔水”

○  想给 vibe coding 加点设计审美约束

○  做的页面需要不同视觉风格，但不想每次重新调 prompt

○  用 Codex / Cursor / Claude Code，想让产出更像专业前端做的

如果你只是用 AI 写写后端逻辑、不碰前端，那它暂时用不上。

但只要你让 AI 碰界面，Taste Skill 这种“把审美固化为可调技能”的思路，能省掉大量“生成 → 觉得丑 → 重生成”的来回。

最后一句

Taste Skill 戳中的是一个很真实的痛点：

AI 能写代码，但默认不懂“好看”。

模型训练让它趋向最安全、最高频的解，结果就是满屏千篇一律。

Taste Skill 的做法不是去改模型，而是把“专业前端的审美判断”做成一层 skill，套在 AI 外面——

用研究找出 AI 偷懒的根因，用可调旋钮把抽象品味量化，用一组细分 skill 覆盖不同风格。

对 vibe coding 来说，这是个很实在的“审美补丁”。

如果这篇对你有帮助，欢迎点个在看。 也可以留言聊聊：你让 AI 写前端时，最常翻车的“AI 味”是哪一种？

参考资料/来源

official

○  https://github.com/Leonxlnx/taste-skill

○  https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/README.md

○  https://www.tasteskill.dev

○  https://github.com/vercel-labs/agent-skills

reference

○  https://www.tasteskill.dev/changelog

○  https://github.com/emilkowalski/animations.dev