gaoqiongxie 来源: 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 |
设计规则引擎
布局规则
- 拒绝等分网格：避免 3 栏等宽、4 栏等宽等机械布局
- 黄金比例应用：关键区域尝试 1:1.618 或 2:3 比例
- 非对称平衡：左右两侧视觉重量平衡但内容不等量
- 打破网格：允许关键元素溢出容器边界
- Z 轴层次：通过重叠、阴影、透明度建立空间深度
排版规则
- 字号阶梯：至少 4 个层级（Display / H1 / Body / Caption），比例建议 1:1.25 或 1:1.5
- 字重对比：标题与正文字重差异至少 2 档（如 700 vs 400）
- 行高节奏：标题 1.1-1.2，正文 1.5-1.7，注释 1.4
- 度量对齐：文本块宽度控制在 45-75 字符（理想 66 字符）
- 字体搭配：最多 2 种字体家族，有明确分工
色彩规则
- 主色克制：主色占比不超过 10%，其余用中性色和辅助色
- 情绪色彩：根据设计方向选择色温（暖/冷/中性）
- 对比度合规：正文对比度至少 4.5:1，大文本 3:1
- 渐变有因：使用渐变时需有明确理由（模拟光线、深度、品牌）
- 暗色模式：考虑暗色适配，不是简单反色
间距规则
- 8 基准变奏：以 8px 为基准，但允许 12px、20px、36px 等变奏
- 区域呼吸：大区域间距 > 小区域间距，形成节奏
- 亲密性原则：相关元素间距小，无关元素间距大
- 边缘留白：页面边缘留白 >= 内容区域最小间距
图像规则
- 拒绝通用图库：不使用无意义的风景/办公场景图
- 图像有叙事：每张图片都服务于内容叙事
- 处理一致性：同一页面的图片应有统一的色调/风格处理
- 留白构图：优先选择有呼吸感的构图，非满铺
使用示例
示例 1：提升现有 AI 生成页面品质
输入：
用户：这个页面看起来太像 AI 生成的了，帮我提升设计感
当前页面：一个 SaaS 产品落地页，三栏卡片介绍功能，
蓝紫渐变 Hero，白色背景，标准导航栏
AI 处理：
- 识别 slop 模式：蓝紫渐变、三栏等宽卡片、无字号层级
- 设定参数：DESIGN_VARIANCE=5, MOTION_INTENSITY=4, VISUAL_DENSITY=4
- 选择方向：科技冷峻 (Tech Cold)
- 输出设计改进方案：
- 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 可以被规则化，规则可以被学习。"