메뉴
反平庸 UI 设计 Skill：让 AI 生成的前端界面摆脱样板化、去AI味，提升布局、排版、动效和间距品质。当用户说'反平庸设计'、'去AI味UI'、'提升界面品质'、'设计系统'、'UI太模板化'、'界面不够精致'、'去掉AI生成的UI感'、'让页面更有设计感'时触发。核心特点：框架无关的设计规则、三档参数调节（DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY）、anti-slop 反重复机制、8大设计方向体系。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
企业级全栈迭代工作流Agent：当用户说'开始开发这个需求'、'处理本次迭代'、'全栈开发闭环'、'跑一个迭代'、'enterprise iteration'、'迭代开发'、'需求交付'、'开发闭环'时触发。自动按需求→设计→开发→测试→Review→部署→记忆7阶段推进，维护迭代状态机，路径感知（自动读取需求目录与代码目录），协调多个子Skill协作完成企业级CRM全栈需求交付。支持状态回退、并行分支、上下文继承。
企业级CRM全栈开发规范：基于Vue 2 + Element UI + Java Spring Boot的标准化开发指南。覆盖前端配置式列表页、详情页、国际化、权限控制，后端分层架构、接口规范、数据库设计。当用户说'CRM开发'、'Vue 2列表页'、'Element UI表单'、'Java后端接口'、'全栈开发规范'、'中后台系统开发'、'工单系统开发'、'客户管理系统开发'时触发。核心特点：前后端标准化、配置式开发、企业级权限、国际化支持。
网络安全分析师技能库：754个结构化安全技能，让AI具备Senior Analyst级别的全栈安全分析能力。覆盖威胁狩猎、数字取证、事件响应、渗透测试、代码安全审计、威胁情报、恶意软件分析等26个安全领域。映射MITRE ATT&CK v19.1、NIST CSF 2.0、MITRE ATLAS v5.4、MITRE D3FEND v1.3、NIST AI RMF 1.0五大框架。当用户说'安全分析'、'威胁狩猎'、'威胁情报'、'渗透测试'、'事件响应'、'MITRE'、'代码审计'、'数字取证'、'恶意软件分析'、'红队'、'蓝队'、'SOC'、'漏洞分析'、'安全运营'、'网络攻防'、'入侵检测'时触发。渐进式加载设计，500-2000 tokens完整加载，避免上下文溢出。
算法艺术生成器：用p5.js/Canvas代码生成程序化艺术作品，包括粒子系统、几何图形、种子随机、噪声纹理、动态壁纸。当用户说'生成艺术'、'算法壁纸'、'p5.js艺术'、'代码画画'、'生成海报'、'粒子效果'、'噪声纹理'、'程序化艺术'时触发。核心特点：种子可控复现、参数化设计、数学美学、代码即画布。
Cloudflare Worker边缘函数构建指南：用Wrangler CLI开发、调试、部署Serverless函数，实现轻量API/边缘缓存/中间层/反向代理。当用户说'写个Worker'、'边缘函数'、'Cloudflare部署'、'Serverless API'、'轻量后端'、'边缘计算'、'CF Worker'时触发。核心特点：Wrangler工作流、边缘环境特性、KV/DO/R2存储、TypeScript最佳实践、本地调试到部署全链路。
Remotion React视频生成器：用React代码编写、渲染和导出视频。当用户说'生成视频'、'做动画视频'、'React视频'、'把图表做成视频'、'产品演示视频'、'数据动画'、'字幕视频'时触发。核心特点：React组件化视频、30+composition最佳实践、FFmpeg导出、程序化视频生成。
| 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 生成的。"
让 AI 产出的前端界面摆脱千篇一律的「AI 样板感」，通过设计意图规则（而非框架 API 绑定）提升布局、排版、动效和视觉密度的整体品质。
AI 生成的前端界面普遍存在以下「AI 味」问题：
| 问题 | 典型表现 |
|---|---|
| 紫渐变泛滥 | Hero 区必用蓝紫渐变背景 |
| 卡片堆砌 | 三栏等宽卡片 + 阴影 + 圆角 |
| 排版单调 | 全站一个字号层级，无节奏 |
| 动效套路 | 淡入淡出 + 轻微上浮，千篇一律 |
| 间距随意 | 8px/16px/24px 机械递增 |
| 色彩贫乏 | 主色 + 灰色，无情绪 |
| 图片占位 | 统一使用 unsplash 风景图 |
Taste Skill 通过设计意图规则和参数化控制，让 AI 输出有风格、有节奏、有品质的界面。
规则针对设计意图，不绑定具体框架 API：
内置「样板检测器」，自动识别并拒绝以下模式：
rounded-xl + shadow-lg 卡片通过三档核心参数精确控制输出风格：
控制界面与「标准 AI 模板」的偏离程度。
| 档位 | 值 | 效果 |
|---|---|---|
| 保守 | 1-3 | 在常见模式基础上微调，适合商务/企业场景 |
| 平衡 | 4-6 | 明显有设计感但不激进，适合大多数产品 |
| 激进 | 7-10 | 大胆突破，适合创意/艺术/品牌表达 |
各档位具体规则：
控制界面中动画和交互反馈的强度。
| 档位 | 值 | 效果 |
|---|---|---|
| 静态 | 1-3 | 几乎无动画，仅必要的 Hover 反馈 |
| 流畅 | 4-6 | 自然的滚动动效、入场动画、微交互 |
| 戏剧 | 7-10 | 强烈的视差、变形、路径动画、页面转场 |
动效原则：
prefers-reduced-motion控制界面元素的密集程度和留白比例。
| 档位 | 值 | 效果 |
|---|---|---|
| 呼吸 | 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 |
输入：
用户：这个页面看起来太像 AI 生成的了，帮我提升设计感
当前页面：一个 SaaS 产品落地页，三栏卡片介绍功能，
蓝紫渐变 Hero，白色背景，标准导航栏
AI 处理：
### 示例 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 可以被规则化，规则可以被学习。"