想让 AI 生成的前端不再千篇一律？Taste Skill 为 AI 编程代理打造的设计系统，通过 DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY 三大参数调校布局、动效、密度，支持主流框架，告别 Generic Slop。
🎤 引言
你有没有这种感觉：让 AI 写代码，前端出来总觉得哪里眼熟？卡片、按钮、间距……处处透着一股"模板味"，像是从同一个模具里倒出来的。
这就是 GitHub 上最近挺火的一个概念——Generic Slop（通用垃圾）。AI 习惯用最安全、最通用的模式生成界面，导致大量网站看起来像远房亲戚。
Taste Skill 就是来解决这个问题的。它是一套专为 AI 编程代理设计的前端设计系统，把设计品味变成可配置的参数，让 AI 生成的前端界面真正有辨识度。
🌟 核心亮点
1. 三大设计参数：VARIANCE / MOTION / DENSITY
Taste Skill 的核心是三个 1-10 的刻度盘：
- DESIGN_VARIANCE：布局实验度（低=居中保守，高=不对称现代）
- MOTION_INTENSITY：动效深度（低=悬停反馈，高=滚动+磁吸）
- VISUAL_DENSITY：信息密度（低=留白透气，高=密集仪表盘）
根据项目需求调这三个参数，AI 生成的前端风格就会完全不同。你可以理解为：Taste Skill 是 AI 前端的"设计品味旋钮"，让输出从千篇一律变成量身定制。
2. 多个专业技能（Skills）按需安装
Taste Skill 不是单一工具，而是一组可拆卸的技能包：
| 技能 | 用途 |
|---|---|
design-taste-frontend（默认） | 通用设计系统（现在是 v2 实验版） |
design-taste-frontend-v1 | 保守稳定的 v1 版本 |
gpt-taste | GPT/Codex 严格模式，更激进的布局和动效 |
redesign-existing-projects | 审计并改进现有项目 UI |
minimalist-ui | Notion/Linear 风的编辑产品风 |
soft-skill | 高端柔和 UI，弱对比、大留白、弹簧动效 |
brutalist-skill | 瑞士字体、锐利对比、实验性布局 |
stitch-design-taste | Google Stitch 兼容规则 |
image-to-code | 图片→分析→代码的完整流水线 |
imagegen-frontend-web | 网站效果图生成（配合 ChatGPT Images 用） |
imagegen-frontend-mobile | 移动端界面生成 |
brandkit | 品牌套件：Logo、色板、字体、Identity |
按需安装，不用全拿。哪个场景用哪个。
3. 框架无关，兼容 React/Vue/Svelte
Taste Skill 的规则针对的是设计意图，而不是某个框架的 API。所以无论你用 React、Vue 还是 Svelte，都能直接套用。不会遇到"这个skill只能用 Tailwind"这种尴尬。
4. 支持图片生成工作流
Taste Skill 附带了一组纯图片生成的技能（imagegen-frontend-web、imagegen-frontend-mobile、brandkit），配合 ChatGPT Images 或 Codex 的图片模式使用：先生成设计参考图，再丢给编码代理实现。相当于把设计稿→代码的流程也自动化了。
📥 安装与使用
通过 npx 一键安装（推荐）：
# 安装全套技能
npx skills add https://github.com/Leonxlnx/taste-skill
# 或者只安装某个特定技能
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
# 从 v1 升级到 v2
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"如果遇到网络问题，或者你用的是 ChatGPT/Claude 对话界面，直接复制对应 SKILL.md 的内容粘贴进去也行——它本质上就是一个 Markdown 文件。
更新已有技能：
如果已经装过 v1，重新运行安装命令就会自动升级到 v2，文件名不变，只是内容被替换。
降级到 v1（如果 v2 出现兼容问题）：
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"🛠 适用场景
适合使用 Taste Skill 的情况：
- 你是 AI 编程代理（Claude Code/Cursor/Codex）的重度用户，对 AI 生成的前端质量不满意
- 需要给客户交付有辨识度的 UI，而不是"又是这种卡片布局"
- 想要一个可量化、可重复的设计系统，而不是每次都靠感觉
不太适合的情况：
- 设计师手动写代码，不需要 AI 辅助生成
- 项目对设计要求极低（比如内部工具），快速出活就行
- 团队已有成熟的设计系统，AI 生成只是辅助
🔍 与同类工具对比
| 工具 | 设计模式 | AI 集成度 | 框架支持 | 适用场景 |
|---|---|---|---|---|
| Taste Skill | 可配置参数系统 | 高（专为 AI 代理设计） | 框架无关 | AI 编程代理场景 |
| Tailwind UI | 组件库 | 低 | Tailwind | 快速拼装 UI |
| shadcn/ui | 组件库 | 低 | React | React 项目快速上手 |
| Design Systems (Figma) | 设计稿 | 低（需要人工导入） | 框架无关 | 设计-开发协作 |
Taste Skill 最大的差异点是专为 AI 编程代理设计，不是传统的 UI 组件库。它解决的是 AI 生成代码的"品味问题"，而不是提供现成的组件。
✅ 总结
Taste Skill 是一个很小众但很实用的方向——把"设计品味"这种东西参数化，让 AI 能够理解和执行。
如果你经常用 AI 写前端，对"又一套通用卡片布局"已经审美疲劳了，这套技能值得试试。三大参数配合不同场景，输出质量提升明显。
GitHub 地址：Leonxlnx/taste-skill