你是不是也遇到过这个问题?
用 AI 写完一个项目,功能没问题,但打开界面一看——
清一色蓝紫色渐变背景 + 紫色 blob 光晕 三栏等宽的 feature 卡片,整整齐齐 标题两行,副标题二十个字,再加一个「Scroll ↓」提示 整页看下来,和上周做的那个项目长得一模一样
这就是所谓的 「AI slop」——千人一面的 AI 生成烂界面。
有没有办法治?有,而且一行命令就够了。
Taste Skill 是什么?
Taste Skill(tasteskill.dev)是一个开源的前端设计规则框架,专门用来「纠正」AI 编程助手的审美。
它的核心是一个叫 SKILL.md 的文件。你把它放进项目根目录,Cursor、Claude Code、Codex、Gemini CLI、v0、Lovable 等工具读取后,就会按照里面的规则来生成界面——而不是靠模型默认的「AI 审美直觉」。
一句话总结:给 AI 编码助手配一个有品位的设计顾问。

安装方法(真的就一行)
npx skills add Leonxlnx/taste-skill安装后项目根目录出现 SKILL.md 文件,不需要其他配置,AI 工具下次生成代码时自动读取。
如果只想装核心的设计技能(不要全套),可以更精确地指定:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"v2 版本做了什么改进?
目前默认安装的是 v2 experimental,这是 2026 年的大改版,核心升级是让 AI 在动手之前先「读懂需求」。
§0 Brief 推断:AI 会先从你的描述里抓关键词——「minimalist」「editorial」「SaaS」「portfolio」——然后自行判断应该走哪种设计方向,而不是默认出一套紫色卡片。
§2 设计系统映射:当需求暗示是 Material 风格、Fluent 风格、Shadcn/UI 或 Tailwind 时,AI 会主动引入对应的官方库,而不是手搓一个山寨版。
§8 暗色模式协议:默认双主题。明暗两套配色都要满足 WCAG AA 对比度,层级感保持一致,背景色用 off-black / off-white 而不是纯黑纯白。
§14 发货前检查清单:每个 checkbox 都必须诚实通过才能输出,防止 AI 交出「半成品」。
它到底禁了哪些「烂设计陋习」?
这是 Taste Skill 最直接有用的部分——一份明确的「禁止清单」,让 AI 不再踩雷:
window.addEventListener('scroll') |
你也可以打开 SKILL.md 自己编辑,加入项目专属的设计规范,AI 下次生成时会以你的规范为最高优先级。
兼容哪些 AI 编码工具?
目前官方支持:
Cursor、Claude Code、Codex(OpenAI)、Gemini CLI、AI Studio、v0、Lovable、OpenCode、Windsurf、GitHub Copilot
本质上,只要工具支持读取项目里的 SKILL.md 文件,就能用。
适合哪些人?
- 独立开发者 / 个人项目:不请设计师,但不想让 AI 出一堆烂界面
- 全栈开发者:专注后端逻辑,但也想前端看起来像样
- Vibe coder:用自然语言驱动 AI 写整个项目,现在可以加上设计约束
- 团队前端:把团队设计规范写进 SKILL.md,让 AI 遵守而不是「发挥创意」
快速上手总结
项目目录下运行 npx skills add Leonxlnx/taste-skill确认根目录出现了 SKILL.md正常使用 Cursor / Claude Code / Codex 写前端 如果有团队规范,直接编辑 SKILL.md顶部加入需要特定风格?按需安装 soft-skill、minimalist-skill等变体
项目完全开源,官方网站:tasteskill.dev
夜雨聆风