https://github.com/Leonxlnx/taste-skill
现在让 AI 写一个网页，已经不是什么难事。
你只要告诉 Codex、Cursor 或 Claude Code：‘帮我做一个现代感的产品首页’，几分钟后，它就能交出一套能运行的 React 页面。
问题是，这些页面常常长得很像。
深色背景、紫色渐变、居中的大标题，下面放三个圆角功能卡片，再加一点毛玻璃和循环动画。单独看好像没什么问题，连续看几个 AI 生成的网站，就会发现它们像是从同一个模板里出来的。
最近看到的开源项目 Taste Skill，就是专门解决这个问题的。
它对自己的定位很直接：
The Anti-Slop Frontend Framework for AI Agents
可以翻译成：给 AI 编程智能体使用的“反套路前端框架”。
它不是组件库，而是给 AI 看的设计规则
Taste Skill 不是 shadcn/ui、Material UI 那样的组件库，也不会提供一套现成按钮和卡片。
它主要由一组 SKILL.md 文件组成。这些文件写给 AI 看，告诉 AI 在生成网页之前应该如何判断需求，写代码时要避开什么套路，完成以后又该检查哪些问题。
可以把它理解成一位设计总监写给 AI 的工作手册。
普通 Prompt 可能只会说：
做一个简洁、高级、有现代感的网站。
这类要求很模糊，AI 往往会调用自己最熟悉的视觉套路。Taste Skill 则会把“高级感”继续拆解：
- 这是落地页、作品集，还是旧网站改版？
- 用户是普通消费者、企业采购人员，还是设计师？
- 页面应该偏克制、偏实验，还是强调可信度？
- 是否已有品牌颜色、字体和图片？
- 这个项目是否涉及政府、儿童、无障碍等特殊场景？
它要求 AI 先读懂场景，再选择设计语言，而不是看到“现代感”三个字就自动生成紫色渐变。
用三个旋钮控制设计方向
Taste Skill 有一个比较有意思的设计：用三个数值控制页面风格。
分别是：
DESIGN_VARIANCE：布局变化程度MOTION_INTENSITY：动画强度VISUAL_DENSITY：页面信息密度
比如，一个强调可信度的政府服务页面，布局变化和动画都应该比较低，信息密度可以稍高。
一个创意工作室的作品集，则可以采用更大胆的不对称布局、更强的滚动动画，但信息密度不宜太高。
这套方法的好处是，它把“高级一点”“活泼一点”“不要太乱”这类模糊要求，变成了 AI 更容易执行的参数。
当然，这三个数字并不能代替真正的设计判断。它们更像是方向盘，帮助 AI 不要一路滑向默认模板。
它整理了很多 AI 网页的典型毛病
Taste Skill 最有价值的部分，是它收集了大量“AI 设计痕迹”。
例如：
- 默认使用紫色或蓝色光晕；
- 首屏永远是居中标题；
- 每个功能都装进一张圆角卡片；
- 连续使用相同的三栏布局；
- 每个小标题上面都放一行大写英文；
- 为了显得丰富，加入没有实际作用的状态圆点；
- 用几个
div拼出假的产品截图； - 动画很多，但与内容没有关系；
- 所有按钮都写成不同版本的“立即开始”；
- 桌面端看着不错，手机端只是粗暴地堆成一列。
这些问题并不一定都是错误。居中标题、圆角卡片和紫色渐变都可以用，问题在于 AI 太喜欢反复使用它们。
Taste Skill 的做法不是简单地禁止某种风格，而是要求 AI 说明：为什么这个项目适合这样设计？
如果没有理由，就不要使用。
不只管审美，也管页面能不能真正交付
这个项目并非只讨论颜色、字体和排版。最新版还加入了不少工程层面的要求。
例如：
- 使用第三方库前先检查
package.json； - 不要在 React 中用
useState跟踪连续滚动数据； - 动画需要支持
prefers-reduced-motion； - 按钮和文字要通过基本的对比度检查；
- 首屏标题不能把按钮挤到屏幕下面；
- 移动端布局必须明确设计，不能假设框架会自动处理；
- 改版旧网站时，先审计现有结构，不能随意修改导航、表单字段和品牌信息；
- 交付前执行一套 Pre-Flight 检查。
它甚至给出了 GSAP 滚动堆叠、横向滚动和 Motion 入场动画的参考代码，减少 AI“知道这个效果，但写出来不能用”的情况。
所以，它更接近“设计规范、代码规范和交付检查表”的组合。
这个仓库其实不只有一个 Skill
虽然项目名叫 Taste Skill，但仓库里已经包含多种不同用途的 Skill：
design-taste-frontend：通用的反套路前端设计规则；gpt-taste：针对 GPT 和 Codex 的严格版本；image-to-code：先生成设计参考图，再分析图片并实现网页；redesign-existing-projects：用于改造已有项目；high-end-visual-design：偏克制、柔和的高端视觉；minimalist-ui：偏 Notion、Linear 的编辑式界面；industrial-brutalist-ui：工业、粗野主义风格；full-output-enforcement：防止 AI 只给半成品或留下占位代码；imagegen-frontend-web：生成网页设计参考图；imagegen-frontend-mobile：生成移动端界面参考图；brandkit：生成品牌视觉参考板。
这也是它比一份普通 Prompt 更实用的地方：不同任务可以加载不同 Skill，不必把所有规则一次性塞给 AI。
如何安装
项目支持 Agent Skills 的安装方式：
npx skills add https://github.com/Leonxlnx/taste-skill如果只想安装默认的前端设计 Skill：
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend"它主要面向 Codex、Cursor、Claude Code 等支持读取技能文件或项目指令的 AI 编程工具。也可以直接复制某个 SKILL.md，放进项目上下文中使用。
项目采用 MIT 许可证。目前默认的 design-taste-frontend 已经进入 v2，但作者明确标注为实验版本。如果项目依赖稳定行为，也可以安装保留的 v1：
npx skills add https://github.com/Leonxlnx/taste-skill \
--skill "design-taste-frontend-v1"它也不是装上就能变成设计师
Taste Skill 能减少 AI 的惯性，但不能让 AI 自动拥有真正的审美。
它目前更适合落地页、作品集和营销网站，不适合复杂仪表盘、数据表格、多步骤业务系统和原生移动应用。它的一些规则也比较强硬，如果不结合项目背景使用，可能从“避免套路”变成另一套套路。
而且默认 Skill 内容很长。规则越多，AI 越可能顾此失彼。实际使用时，最好选择与任务最接近的 Skill，而不是把整个仓库全部加载进去。
它最适合的场景，是你已经能让 AI 写出页面，但总觉得页面“能用，却没有设计感”。这时再加入 Taste Skill，让 AI 在生成代码之前多做一步判断，在交付之前多做一轮检查。
AI 生成网页的下一个问题，不是能不能写，而是像不像模板
AI 编程正在快速解决“把页面写出来”的问题。
接下来真正拉开差距的，可能不再是会不会写 React，而是能不能读懂品牌、用户和场景，做出合适的布局、字体、颜色和交互。
Taste Skill 没有给 AI 一套万能审美。它做的事情更实际：把经验丰富的设计师会注意的细节，整理成 AI 可以读取和执行的规则。
这或许也是 Skill 最值得期待的地方。
Prompt 通常只负责告诉 AI“这次要做什么”，Skill 则可以长期告诉 AI：
这类事情，应该怎样做得更像样。
