Taste Skill 怎么用？给 AI 前端生成加一点审美约束

Sat, 06 Jun 2026 22:22:56 +0800

Leonxlnx/taste-skill 是一个很有意思的前端 Agent Skill 项目。它的目标不是再做一个 UI 组件库，而是给 Codex、Cursor、Claude Code 这类 AI 编程工具加一套“审美约束”，减少那种一眼 AI 味的模板界面。

项目 README 里把它叫做 Anti-Slop Frontend Framework。这个说法有点夸张，但方向很准：AI 写前端最大的问题，经常不是不会写代码，而是默认布局太平、层级太弱、间距像自动生成、动效和字体都没有判断。

它到底是什么

Taste Skill 本质上是一组可安装、可复制、可粘贴的 Agent Skills。它们不是运行时依赖，也不是浏览器插件，而是给 AI Agent 的工作规则。

它会要求模型在生成前端时更关注：

这类 skill 的价值不在于“多写几句 prompt”，而是把一些前端审美判断固定成可复用规则，让不同项目里都能调用。

README 推荐用 npx skills add 安装：

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

如果只安装默认前端设计 skill，可以指定：

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

如果你依赖旧版行为，也可以安装 v1：

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

项目也说明，可以直接复制任意 SKILL.md 到项目里，或者把内容粘贴到 ChatGPT / Codex 对话中使用。也就是说，它不是必须绑定某个具体平台。

Taste Skill 不是只有一个文件。README 里列了多种 skill：

另外还有 image generation skills，用来生成网页、移动端和品牌板参考图。它们不直接输出代码，而是产出视觉参考，再交给 Codex、Cursor 或 Claude Code 实现。

如果你只是让 AI 写一个后台表单，直接说清楚需求也许就够了。但如果你要做：

那 Taste Skill 会更有用。它帮你提前约束“这应该是什么气质的界面”，而不是等 AI 生成一堆卡片后再一点点骂回去。

我会这样用：

Taste Skill 解决的是“AI 前端输出太模板”的问题，但它不是设计师替代品。

几个边界要说清楚：

换句话说，它更像一个“前端生成的审美脚手架”。它能把默认下限抬高，但最终效果还是要靠你审稿、截图、调 CSS 和真实设备检查。

taste-skill 的价值在于，它把很多前端设计经验变成了 Agent 可执行的规则。对 Codex、Cursor、Claude Code 这类工具来说，这种 skill 很适合补齐“会写代码但容易没品”的短板。

如果你经常用 AI 生成前端页面，尤其受够了大渐变、大圆角、满屏卡片、随机图标和没层级的模板感界面，可以把它当成一个起点。但别把它当成设计总监，真实项目仍然需要你自己做取舍。