让AI生成的前端不再千篇一律！这个85k stars的Skill让设计脱盲

你有没有这种感觉——AI 生成的前端，首页永远是一个蓝紫渐变hero，加三个圆角卡片，再加一个Inter字体的CTA按钮？

不是我一个人。

这东西有个名字：AI Slop。统计上的平均，视觉上的平庸。LLM 训练数据里 Tailwind 模板太多了，所以它每次都往那个方向退化——不是不会设计，而是没有”被禁止”的约束。

taste-skill 解决的就是这个。

一个文件，干掉设计模板病

taste-skill 是 GitHub 上 85,900+ stars 的开源项目（作者是个 16 岁的开发者 @Leonxlnx），它本质上是一组 SKILL.md 文件，AI 编程工具在生成代码之前会主动读取这些文件。

核心机制靠三个可调节的旋钮（每个 1-10 分）：

• DESIGN_VARIANCE — 布局实验度。1分是规规矩矩的中心对称，10分是不对称网格+实验性排版
• MOTION_INTENSITY — 动画深度。1分只有hover效果，10分是 GSAP 物理引擎、3D视差、滚动触发
• VISUAL_DENSITY — 信息密度。1分是大留白简约风，10分是数据密集型仪表盘

负向指令是关键。它不是告诉 AI “要做什么”，而是明确禁止”No blue-purple gradients”、”No default rounded-xl”。LLM 对”禁止”的注意力权重远高于”应该”，所以反套路的实际效果出奇地好。

v2 更新：真的像设计师在思考了

2026 年的 v2 重写版模拟了人类设计师的工作流：

收到需求 → 推断设计语言 → 匹配设计系统（shadcn/ui、Material 还是 Tailwind 官方？） → 套硬规则 → 脚手架 GSAP 动画 → 对现有项目做审计 → 输出前预检

整个流程不需要任何额外配置，塞进 .claude/ 目录就能用。

13 个变体，按需取用

不是每次都需要全套，skill 仓库里有 13 个独立技能，按场景安装：

• design-taste-frontend — 通用 v2 默认，最常用
• minimalist-ui — Notion/Linear 风格，编辑类产品首选
• industrial-brutalist-ui — 瑞士国际主义风格，锐利对比度，适合创意工作室
• high-end-visual-design — 奢侈品牌质感，低对比度+柔滑渐变，适合高端 SaaS
• image-to-code — 先截图参考设计，AI 分析视觉语言，再生成匹配的代码
• stitch-design-taste — Google Stitch 专用，附带 DESIGN.md 导出

安装只要一行命令

npx skills add https://github.com/Leonxlnx/taste-skill
# 或只装一个变体
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

兼容工具清单：Claude Code、Cursor、Codex CLI、Gemini CLI、v0、Lovable、OpenCode——任何一个支持 SKILL.md 的 AI 编程工具都能用。

实测差距有多大

没装 taste-skill 的典型输出：蓝紫渐变hero，三个feature卡片，Inter字体，slate-50背景。

装了 taste-skill（VARIANCE=8, MOTION=7, DENSITY=4）的输出：溢出式不对称hero，自定义 display 字体+等宽字体配对，GSAP 滚动视差+SplitText 揭示动效，从需求推断的单色系配色，锐利2px圆角。

这个差距，5 分钟安装就能填补。

GitHub: Leonxlnx/taste-skill

GitHub: https://github.com/Leonxlnx/taste-skill