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 设计规则引擎 布局规则 拒绝等分网格 ：避免 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 可以被规则化，规则可以被学习。"