taste-skill

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

来源: 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 可以被规则化，规则可以被学习。"