用 AI 生成过网页或 UI 的开发者，可能都见过这种场景：
- 按钮又大又圆，配色蓝紫渐变：一看就是 AI 批量产的
- 布局永远居中，间距全部相等：没有层次，没有呼吸感
- 动效全是 fade-in：没有缓动，没有节奏，没有质感
- 换个 Prompt 还是一样丑：风格没变化，审美没升级
这不是 AI 不够强，而是 缺少设计品味的引导机制。
taste-skill（The Anti-Slop Frontend Framework for AI Agents）解决的就是这个问题。
taste-skill 是一套 面向 AI Agent 的设计品味框架，核心理念是：
不是限制 AI 的能力，而是引导 AI 产生更高质量的设计决策。
它通过一系列 Skill（技能包），让 AI 在生成前端时：
- 理解 布局的变化性（Layout Variance）
- 掌握 动效的深度（Motion Intensity）
- 拿捏 信息的密度（Visual Density）
taste-skill 的设计语言由三个可调节的维度组成（每个维度 1-10）：
| 低分 | 高分 |
|---|---|
| 居中、干净、传统 | 非对称、现代、实验性 |
低分策略：适合企业官网、文档类页面
高分策略：适合产品首页、创意类站点
| 低分 | 高分 |
|---|---|
| Hover 效果 | 滚动动画、磁性效果 |
低分策略：适合数据仪表盘、后台系统
高分策略：适合营销页、产品展示
| 低分 | 高分 |
|---|---|
| 大量留白，奢侈感 | 密集仪表盘，信息丰富 |
低分策略：适合 Notion、Linear 这类工具型产品
高分策略：适合监控面板、交易终端
taste-skill 提供多个独立的 Skill，每个只做一件事：
| Skill | 场景 |
|---|---|
design-taste-frontend（v2） |
默认推荐，通用网页设计引导 |
design-taste-frontend-v1 |
保守场景，依赖 v1 精确行为时使用 |
gpt-taste |
GPT/Codex 专用，更严格的规则和动效 |
image-to-code |
图片 → 参考图 → 代码的完整 pipeline |
redesign-existing-projects |
审计现有项目 UI，修复问题 |
high-end-visual-design |
高端、柔和、昂贵感 UI |
minimalist-ui |
Notion/Linear 风格的极简产品 UI |
industrial-brutalist-ui |
瑞士字体、硬对比、实验性布局 |
stitch-design-taste |
Google Stitch 兼容规则 |
| Skill | 场景 |
|---|---|
imagegen-frontend-web |
网站稿：Hero、落地页、多区块强排版 |
imagegen-frontend-mobile |
移动端：iOS/Android/Cross-platform 流程图 |
brandkit |
品牌套件：Logo 方向、色彩、字体、身份应用 |
taste-skill 推荐的完整 Pipeline：
1. 用 imagegen-frontend-web 生成参考图（展示你想要的风格）2. 用 image-to-code 分析参考图，提取设计语言
3. 将分析结果交给 Codex/Cursor/Claude Code 实现这样 AI 生成的不是 ” 随机结果 ”，而是 有参照物的精确实现。
传统的 AI 前端生成问题是：AI 倾向于产生 ” 最安全 ” 的输出——最常见的布局、最保守的配色、最简单的动效。
taste-skill 通过：
- 明确的风格维度：不是 ” 做好看点 ”，而是 ” 把 VARIANCE 调到 7″
- 反 Slop 规则：禁止 em-dash 滥用、强制 GSAP 代码骨架、预设预检协议
- 可验证的设计系统映射：输出带设计决策说明，不是黑箱
本质上，taste-skill 把 设计师的隐性知识显性化了。
| 场景 | 推荐 Skill |
|---|---|
| AI 生成网页太丑 | design-taste-frontend（v2）+ imagegen-frontend-web |
| 现有项目 UI 太丑 | redesign-existing-projects |
| 想用 AI 做品牌设计 | brandkit |
| 移动端 App 设计 | imagegen-frontend-mobile |
| GPT/Codex 专用规则 | gpt-taste |
| 极简产品 UI | minimalist-ui |
| 高端奢侈感 UI | high-end-visual-design |
npx skills add https://github.com/Leonxlnx/taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"如果你的 AI 前端项目总是 产出 ” 塑料感 ” 很强的结果，taste-skill 是一个立竿见影的方案：
- 不是限制 AI，而是 引导 AI 的审美决策
- 三个维度把设计变成 可量化、可调节的参数
- 支持图像到代码的完整 Pipeline，从参考图到实现
- 开源免费，Skill 可独立安装，按需使用
推荐指数：⭐⭐⭐⭐⭐
🚀 体验地址：https://github.com/Leonxlnx/taste-skill
🌐 官网：https://www.tasteskill.dev
💡 安装：npx skills add https://github.com/Leonxlnx/taste-skill
本文由 AI 开发者实验室出品，关注 AI 工程化实践。