#Taste Skill — 反 AI 平庸设计框架

Taste Skill 是一个反 AI 平庸设计（anti-slop）的前端框架，通过可移植的 SKILL.md 指令文件注入到 AI 编码代理中，从根本上提升 AI 生成 UI 的设计质量。它解决了 LLM 生成前端代码的典型问题：霓虹发光、紫色渐变、暗色网格上的居中 Hero、到处都是 em-dash、数学上完美但没有灵魂的布局。

#核心理念

Taste Skill 的核心不是告诉 AI "写好看的代码"，而是强制它在写代码之前先像设计师一样思考：

1. 推断 Brief（Brief Inference） — 评估页面类型、氛围关键词、参考信号、受众、品牌资产、隐性约束六个信号
2. 选择设计系统 — 根据 Brief 自动映射到官方设计系统（Material、Fluent、Carbon、Polaris、shadcn/ui 等）
3. 设置三旋钮 — 用三个 1-10 的数值旋钮控制设计方向
4. 遵循硬性规则 — 排版、色彩、布局、动画、内容的不可协商规则
5. 通过 Pre-Flight Check — 发布前的强制检查清单，任何一项无法勾选则页面未完成

#三个配置旋钮

Taste Skill 的核心机制是三个数值旋钮（1-10），在每次生成前设定，控制整体设计方向：

场景预设：

#可用技能（13 个）

#设计与 UI 技能

#工作流技能

#图像生成技能

#安装

# 安装默认技能（design-taste-frontend v2）
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 "redesign-existing-projects"

#硬性规则（节选）

以下规则是 Taste Skill 的不可协商底线：

#AI 平庸设计特征（Forbidden Patterns）

Taste Skill 内置了一份"AI 味"检测清单——这些模式在 LLM 生成的 UI 中极为常见，但一眼就能看出是 AI 做的：

• 霓虹发光和过度饱和的强调色
• 纯黑（#000000）或纯白（#ffffff）背景
• 默认使用 Inter 字体
• 泛滥的紫色渐变和暗色网格背景
• 通用占位名称（"John Doe"、"Acme Corp"）
• 完美无缺的数字（"10,000+ 用户"、"99.9% 可用"）
• 区块编号 eyebrow（"01 — 功能"、"02 — 优势"）
• 装饰性状态圆点和 div 假产品预览
• "向下滚动"提示箭头

#设计系统自动映射

Taste Skill 会根据 Brief 自动选择合适的设计系统，每个项目只用一个，不混用：

#使用场景

#场景一：SaaS 落地页

> 安装 design-taste-frontend，设置旋钮为 6/5/5
> 创建一个项目管理 SaaS 的落地页，目标受众是中小型团队

Agent 会先推断 Brief、选择 shadcn/ui，避免居中 Hero 默认布局，强制使用真实图片，通过 Pre-Flight Check 后输出代码。

#场景二：改造现有项目

> 安装 redesign-existing-projects
> 审查并改进当前项目的首页设计

Agent 会先审计现有 UI（品牌 Token、信息架构、内容块、SEO 基线），然后按优先级应用改造杠杆：排版刷新 → 间距调整 → 色彩校准 → 动效层 → Hero 重构 → 完整区块替换。

#场景三：图片优先开发

> 安装 image-to-code + imagegen-frontend-web
> 为健身 App 生成一套落地页设计稿，然后实现代码

Agent 会先生成参考图片，分析设计方向，最后实现匹配的前端代码。

#场景四：高端客户项目

> 安装 high-end-visual-design
> 为奢侈品牌创建一个产品展示页面

柔和对比、高级字体、克制配色——适合需要"昂贵感"的客户项目。

#框架兼容性

Taste Skill 默认栈为 React/Next.js + Tailwind v4 + Motion library，但其规则针对设计意图而非特定框架 API，因此兼容：

#与其他设计类 Skills 的区别

#Skills 组合建议

#下一步

• 前端通用 Skills — 跨框架的 UI 设计、Web 规范、UnJS 工具链
• React 生态 Skills — React 专属 Skills
• Vue 生态 Skills — Vue 专属 Skills
• 前端开发最佳实践 — 完整的前端开发指南
• 前端场景实战指南 — 实战案例（含 Taste Skill 改造案例）