# Taste Skill

> 反平庸 UI 设计 Skill：让 AI 生成的前端界面摆脱样板化、去AI味，提升布局、排版、动效和间距品质。当用户说'反平庸设计'、'去AI味UI'、'提升界面品质'、'设计系统'、'UI太模板化'、'界面不够精致'、'去掉AI生成的UI感'、'让页面更有设计感'时触发。核心特点：框架无关的设计规则、三档参数调节（DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY）、anti-slop 反重复机制、8大设计方向体系。

- Skill: `gaoqiongxie/taste-skill` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gaoqiongxie/taste-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/taste-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gaoqiongxie/taste-skill

---


> **来源**: GitHub Trending 热门 Skill（作者 Leonxlnx，约 32.7k stars）
>
> **发布时间**: 2026-06-03
>
> **理念**: "AI 生成的界面不应该看起来像 AI 生成的。"

# Taste Skill — 反平庸 UI 设计

让 AI 产出的前端界面摆脱千篇一律的「AI 样板感」，通过设计意图规则（而非框架 API 绑定）提升布局、排版、动效和视觉密度的整体品质。

---

## 为什么需要 Taste Skill？

AI 生成的前端界面普遍存在以下「AI 味」问题：

| 问题 | 典型表现 |
|------|---------|
| **紫渐变泛滥** | Hero 区必用蓝紫渐变背景 |
| **卡片堆砌** | 三栏等宽卡片 + 阴影 + 圆角 |
| **排版单调** | 全站一个字号层级，无节奏 |
| **动效套路** | 淡入淡出 + 轻微上浮，千篇一律 |
| **间距随意** | 8px/16px/24px 机械递增 |
| **色彩贫乏** | 主色 + 灰色，无情绪 |
| **图片占位** | 统一使用 unsplash 风景图 |

Taste Skill 通过**设计意图规则**和**参数化控制**，让 AI 输出有风格、有节奏、有品质的界面。

---

## 核心技术特点

### 1. 框架无关

规则针对**设计意图**，不绑定具体框架 API：
- 适用于 HTML/CSS、React、Vue、Svelte 等任何前端技术栈
- 输出的是「设计决策」而非「代码实现」
- 可与任何 UI 框架配合使用

### 2. Anti-Slop 反重复机制

内置「样板检测器」，自动识别并拒绝以下模式：
- 三栏等宽卡片布局（无变化）
- 蓝紫渐变 Hero 背景
- 统一的 `rounded-xl` + `shadow-lg` 卡片
- 无意义的 Lorem 占位文本
- 千篇一律的淡入动画

### 3. 参数化设计控制

通过三档核心参数精确控制输出风格：

---

## 参数控制面板

### DESIGN_VARIANCE — 设计差异度

控制界面与「标准 AI 模板」的偏离程度。

| 档位 | 值 | 效果 |
|------|-----|------|
| **保守** | 1-3 | 在常见模式基础上微调，适合商务/企业场景 |
| **平衡** | 4-6 | 明显有设计感但不激进，适合大多数产品 |
| **激进** | 7-10 | 大胆突破，适合创意/艺术/品牌表达 |

**各档位具体规则：**

- **保守 (1-3)**：使用经典网格，配色克制，动效 subtle，适合 SaaS/企业官网
- **平衡 (4-6)**：非对称布局，有意识的留白，品牌色主导，适合产品落地页
- **激进 (7-10)**：打破网格，实验性排版，强烈视觉对比，适合作品集/活动页

### MOTION_INTENSITY — 动效强度

控制界面中动画和交互反馈的强度。

| 档位 | 值 | 效果 |
|------|-----|------|
| **静态** | 1-3 | 几乎无动画，仅必要的 Hover 反馈 |
| **流畅** | 4-6 | 自然的滚动动效、入场动画、微交互 |
| **戏剧** | 7-10 | 强烈的视差、变形、路径动画、页面转场 |

**动效原则：**
- 每个动效必须有**目的**（引导注意力、反馈状态、建立层级）
- 禁止无意义的「装饰性动画」
- 尊重 `prefers-reduced-motion`

### VISUAL_DENSITY — 视觉密度

控制界面元素的密集程度和留白比例。

| 档位 | 值 | 效果 |
|------|-----|------|
| **呼吸** | 1-3 | 大量留白，元素稀疏，强调品质感 |
| **舒适** | 4-6 | 平衡的信息密度，适合内容型产品 |
| **紧凑** | 7-10 | 高密度信息展示，适合工具/数据型界面 |

---

## 设计方向体系

8 大预设设计方向，覆盖从极简到粗野主义的完整光谱：

| 方向 | 核心特征 | 适用场景 | 推荐参数组合 |
|------|---------|---------|-------------|
| **极简 (Minimal)** | 极致留白，单色调，无装饰 | 高端产品、作品集 | D:5 M:2 V:2 |
| **粗野主义 (Brutalist)** | 大字体、高对比、去修饰 | 创意机构、艺术项目 | D:8 M:4 V:6 |
| **高端柔和 (Lux Soft)** | 低饱和、大圆角、柔和阴影 | 生活方式、健康应用 | D:4 M:5 V:3 |
| **科技冷峻 (Tech Cold)** | 深色背景、细线条、数据感 | 开发者工具、SaaS | D:5 M:3 V:5 |
| **编辑风 (Editorial)** | 杂志排版、大图、长文本 | 内容平台、博客 | D:6 M:4 V:4 |
| **有机自然 (Organic)** | 不规则形状、暖色调、手绘感 | 教育、环保、儿童 | D:6 M:6 V:4 |
| **复古数字 (Retro Digital)** | 像素风、CRT 效果、霓虹 | 游戏、复古品牌 | D:7 M:7 V:5 |
| **新粗野 (Neo-Brutalism)** | 亮色块、黑边框、 playful | 年轻品牌、社交媒体 | D:8 M:6 V:6 |

---

## 设计规则引擎

### 布局规则

1. **拒绝等分网格**：避免 3 栏等宽、4 栏等宽等机械布局
2. **黄金比例应用**：关键区域尝试 1:1.618 或 2:3 比例
3. **非对称平衡**：左右两侧视觉重量平衡但内容不等量
4. **打破网格**：允许关键元素溢出容器边界
5. **Z 轴层次**：通过重叠、阴影、透明度建立空间深度

### 排版规则

1. **字号阶梯**：至少 4 个层级（Display / H1 / Body / Caption），比例建议 1:1.25 或 1:1.5
2. **字重对比**：标题与正文字重差异至少 2 档（如 700 vs 400）
3. **行高节奏**：标题 1.1-1.2，正文 1.5-1.7，注释 1.4
4. **度量对齐**：文本块宽度控制在 45-75 字符（理想 66 字符）
5. **字体搭配**：最多 2 种字体家族，有明确分工

### 色彩规则

1. **主色克制**：主色占比不超过 10%，其余用中性色和辅助色
2. **情绪色彩**：根据设计方向选择色温（暖/冷/中性）
3. **对比度合规**：正文对比度至少 4.5:1，大文本 3:1
4. **渐变有因**：使用渐变时需有明确理由（模拟光线、深度、品牌）
5. **暗色模式**：考虑暗色适配，不是简单反色

### 间距规则

1. **8 基准变奏**：以 8px 为基准，但允许 12px、20px、36px 等变奏
2. **区域呼吸**：大区域间距 > 小区域间距，形成节奏
3. **亲密性原则**：相关元素间距小，无关元素间距大
4. **边缘留白**：页面边缘留白 >= 内容区域最小间距

### 图像规则

1. **拒绝通用图库**：不使用无意义的风景/办公场景图
2. **图像有叙事**：每张图片都服务于内容叙事
3. **处理一致性**：同一页面的图片应有统一的色调/风格处理
4. **留白构图**：优先选择有呼吸感的构图，非满铺

---

## 使用示例

### 示例 1：提升现有 AI 生成页面品质

**输入：**
```
用户：这个页面看起来太像 AI 生成的了，帮我提升设计感

当前页面：一个 SaaS 产品落地页，三栏卡片介绍功能，
蓝紫渐变 Hero，白色背景，标准导航栏
```

**AI 处理：**
1. 识别 slop 模式：蓝紫渐变、三栏等宽卡片、无字号层级
2. 设定参数：DESIGN_VARIANCE=5, MOTION_INTENSITY=4, VISUAL_DENSITY=4
3. 选择方向：科技冷峻 (Tech Cold)
4. 输出设计改进方案：
   - Hero：深色背景 + 细线网格纹理 + 大标题左对齐
   - 功能区：2+1 非对称布局（左大右小）
   - 色彩：深蓝灰背景 + 青色强调色
   - 排版：Display 字号 64px / 正文 16px / 注释 14px
   - 动效：滚动时细线网格缓慢移动（视差）
```

### 示例 2：指定设计方向生成界面

**输入：**
```
用户：帮我设计一个设计师作品集首页，要高端柔和风格
```

**AI 处理：**
- 方向：高端柔和 (Lux Soft)
- 参数：DESIGN_VARIANCE=4, MOTION_INTENSITY=5, VISUAL_DENSITY=3
- 输出：
  - 大面积米白/暖灰背景
  - 低饱和莫兰迪色系点缀
  - 大圆角卡片（24px+）+ 柔和弥散阴影
  - 作品展示：不规则瀑布流，非等宽
  - 微动效：悬停时图片轻微放大 + 阴影加深
  - 字体：衬线体标题 + 无衬线正文

### 示例 3：图像优先工作流

**输入：**
```
用户：我有一张参考图，想要类似的风格做落地页
[上传图片：一张粗野主义风格的设计参考]
```

**AI 处理：**
1. 分析参考图视觉特征：高对比、大字体、去修饰、黑白为主
2. 匹配方向：粗野主义 (Brutalist)
3. 设定参数：DESIGN_VARIANCE=8, MOTION_INTENSITY=4, VISUAL_DENSITY=6
4. 提取设计 tokens：
   - 色彩：#000000 / #FFFFFF / #FF0000（单一强调色）
   - 字体：超大字号（120px+），无衬线粗体
   - 布局：无网格约束，元素自由定位
   - 边框：粗黑边框（4px+）划分区域
5. 生成对应前端代码

---

## 快速入口

```
"这个 UI 太 AI 了" → 自动检测 slop 模式 + 输出改进方案
"去 AI 味 UI" → 应用 anti-slop 规则重写设计
"提升界面品质" → 基于当前设计选择方向 + 参数优化
"设计系统" → 输出完整的设计 tokens + 组件规范
"让页面更有设计感" → 分析 + 应用设计方向
"不要紫渐变" → 替换为更有意图的色彩方案
"打破模板感" → 非对称布局 + 个性化排版
```

---

## 与其他 Skill 的关系

| Skill | 关系 | 协作方式 |
|-------|------|---------|
| **stop-slop** | 互补 | `stop-slop` 去除**文字** AI 味，`taste-skill` 去除**视觉** AI 味。两者结合 = 内容 + 界面都去 AI 化 |
| **huashu-design** | 互补 | `huashu-design` 提供 20 种设计哲学和完整工作流，`taste-skill` 提供参数化精细控制和 anti-slop 检测。先用 `huashu-design` 定大方向，再用 `taste-skill` 微调品质 |
| **web-artifacts-builder** | 协同 | `web-artifacts-builder` 负责复杂 React 组件架构，`taste-skill` 负责视觉设计决策。两者结合 = 既复杂又好看的生产级界面 |
| **prd-to-demo** | 前置 | `prd-to-demo` 快速生成原型，`taste-skill` 在原型基础上提升视觉品质 |
| **frontend-code-review** | 后置 | `taste-skill` 输出设计，`frontend-code-review` 审查代码实现质量 |

**最佳实践链：**
```
需求 → huashu-design（选设计哲学）→ taste-skill（参数化精细调优 + anti-slop）
  → web-artifacts-builder（生产级实现）→ frontend-code-review（代码审查）
```

**文字 + 视觉双去 AI 味：**
```
内容层：stop-slop（去文字 AI 味）
视觉层：taste-skill（去 UI AI 味）
```

---

## 设计品质自检清单

生成界面后，使用以下清单自检：

- [ ] 没有蓝紫渐变 Hero 背景
- [ ] 没有三栏等宽卡片
- [ ] 字号至少 4 个层级
- [ ] 有明确的视觉焦点（知道眼睛先看哪）
- [ ] 动效有目的，不是装饰
- [ ] 色彩有情绪，不是随机选
- [ ] 留白有节奏，不是均匀分布
- [ ] 图像有叙事，不是占位图
- [ ] 整体有风格方向，不是通用模板
- [ ] 如果遮住 logo，还能感受到品牌气质

---

> "好的设计不是让 AI 像人，而是让 AI 产出有品味的东西。Taste 可以被规则化，规则可以被学习。"