开源专栏给AI装上审美引擎 taste-skill反SLOP框架24K星登顶GitHub热榜

👆 关注「科技第一时」，每天 10:00 推荐一个真正值得关注的开源项目。

项目速览

维度	详情
项目名	taste-skill
作者	Leonxlnx
Star	24,400+ ⭐
今日增幅	+2,715 ⭐（GitHub Trending 热榜项目）
语言	Shell / Markdown（Skill 指令集）
许可证	MIT
一句话	给 AI Agent 装上审美引擎的反 SLOP 前端框架

一、SLOP 是什么，为什么每个 AI 开发者都在骂它

如果你用过 AI 写前端代码，你一定见过这样的画面：灰色的卡片、圆角按钮、毫无辨识度的 Hero Section、千篇一律的渐变色。网上给这种东西起了个名字——SLOP。

SLOP 不是 bug，是 LLM 训练数据的自然产物。大模型在训练时吃掉了互联网上所有"能跑但不好看"的前端代码，于是它输出的 UI 也是这些代码的"最大公约数"——能跑，但没法看。

taste-skill 做的事情很朴素：在 AI 生成代码之前，先给它一套审美指令。就像一个设计师坐在 AI 旁边，在它每次动笔之前说一句："别用灰色，别用默认字体，加点动效。"

SLOP 是 AI 的默认出厂设置。taste-skill 是它的自定义皮肤。

二、taste-skill 的核心设计：Vibe 三要素

taste-skill v2（实验版，5 月 26 日刚更新）的核心是一个叫 "Vibe" 的概念，用三个维度量化 UI 审美：

维度	含义	默认值	效果
DENSITY	信息密度	0.7	留白比例，别太挤也别太空
MOTION	动效强度	0.5	微交互，不用 MUI 默认 transition
VARIANCE	视觉多样性	0.7	每页不同排版，禁止"复制粘贴"

这三个参数不是死板的数字，而是一段完整的 instruction stacking——taste-skill 会在 AI 的 system prompt 里注入多层指令，从布局到配色、从动效到字体，逐层覆盖。本质上是把设计师的品味「编译」成了 LLM 能理解的指令集。

一个真正的设计师不会告诉你"用蓝色"，他会说"用那种让人感到信任但不冰冷的蓝色"。taste-skill 做的是同一件事，只不过它的「形容」是 DENSITY=0.7。

三、13 个 Skill，覆盖从编码到生成的全链路

taste-skill 不是单体的，它是一个 13 个 Skill 组成的工具包。10 个代码类 skill 负责前端生成，3 个图片类负责视觉资产：

代码类 Skill（7 个）

Skill	用途	适用场景
taste-skill	主 Skill，Vibe 三要素完整版	通用前端开发
gpt-tasteskill	GPT/Codex 专用，更严格的约束	ChatGPT、GitHub Copilot
image-to-code-skill	图片→代码流水线，先理解设计再输出	Figma / 截图 → 代码
redesign-skill	审核已有 UI，修复 SLOP 问题	重构老项目
soft-skill	高级质感 UI，贵感	SaaS Landing Page
output-skill	强制完整输出，禁止占位符	需要完整代码交付
stitch-skill	兼容 Google Stitch	Google 生态

视觉类 Skill（3 个）

Skill（GitHub 目录名）	用途
imagegen-frontend-web	生成网页组件截图
imagegen-frontend-mobile	生成移动端屏幕效果图
brandkit	生成品牌配色和视觉系统

还有两种风格变体

minimalist-skill：Notion/Linear 风格，极简克制的审美
brutalist-skill：瑞士风格排版，锐利对比，反精致主义

13 个 skill 的排列组合，理论上能覆盖从 VC 路演 Landing Page 到开发者工具 Dashboard 的所有视觉需求。

四、30 秒上手，一行命令装完 13 个技能

taste-skill 通过 npm 的 skills CLI 分发：

# 安装
npx skills add https://github.com/Leonxlnx/taste-skill

# 看看装了哪些
npx skills list

# 以 Claude Code 为例，在对话中启用
# 只需告诉 AI：「用 taste-skill 生成一个 SaaS landing page」

安装后，所有 skill 文件被复制到本地 ~/.skills/ 目录。接下来，在 Claude Code、Cursor、Codex 等 AI 编程工具中直接引用即可。不需要 API key，不需要配置。

代码结构也异常清晰：

taste-skill/
├── skills/
│   ├── taste/              # 主 Skill（v2 实验版）
│   ├── taste-skill-v1/     # v1 稳定版
│   ├── gpt-taste/          # GPT 专用版
│   ├── image-to-code/      # 图转码
│   ├── redesign/           # UI 改造
│   ├── soft/               # 高级质感
│   ├── output/             # 强制完整输出
│   ├── minimalist/         # 极简风格
│   ├── brutalist/          # 粗野风格
│   ├── stitch/             # Google Stitch
│   ├── imagegen-frontend-web/   # 网页组件图
│   ├── imagegen-frontend-mobile/ # 手机效果图
│   └── brandkit/           # 品牌视觉系统
├── examples/               # 效果对比（Floria 项目）
├── assets/                 # README 配图
└── SKILL.md               # 总入口

每个 skill 都是一个独立的 .md 文件，包含完整的 prompt 指令。你可以直接打开看它跟 AI 说了什么——完全白盒，没有黑箱。

开源最美的不是代码能跑，是你能看见它跟 AI 说了什么悄悄话。taste-skill 把「审美」这个最玄的东西，变成了一篇篇你能直接读的 Markdown。

五、实际效果：Floria 项目的前后对比

taste-skill 官方仓库里有一个真实的示例项目 Floria（花店电商）。README 展示了用和不用的对比：

before（AI 默认输出）：
- 灰色背景 + 标准 MUI 卡片
- 没有任何品牌辨识度
- 文字和图片像是"随便放的"

after（taste-skill 加持）：
- 精心设计的 Hero section，有层次感的排版
- 产品卡片带有微妙阴影和 hover 动画
- 配色克制但有温度，字体选择精准
- 整体感：一个真正"设计过"的网站

这不是"AI 画得更好了"，而是AI 第一次知道自己应该「设计」，而不是「堆砌」。

六、为什么 24K 星不是泡沫

taste-skill 的 24K 星和单日 +2,715 星的增长，放在开源圈是现象级的。我的判断是三个原因：

第一，SLOP 是真实痛点。 每天有数百万开发者用 AI 写代码，但写出来的 UI 像"批量生产的灰色纸箱"。这不是一个小众审美问题——商业项目因为 UI 太丑被否掉的案例每天都在发生。

第二，Skill 分发是趋势。 taste-skill 不要求你装 npm 包、改 webpack 配置、引入新的 CSS 框架。它只是一套 prompt 指令。这种零依赖的"Skill 即产品"模式，正在成为 AI 时代的 npm。

第三，审美的可编程化。 设计师这个职业的核心能力——品味——第一次可以被量化、存储、分发、复用。taste-skill 证明了"好看"不是玄学，是可以用 VARIANCE=0.7, DENSITY=0.7 来描述的。

24K 星的背后不是追逐新奇，是 AI 开发者终于意识到：能跑 ≠ 能用，能用 ≠ 好看。而好看，正在变成一门工程学。

写在最后

taste-skill 让我想起一个段子：有人说"AI 不会取代设计师，但会用 AI 的设计师会取代不会用 AI 的设计师"。这个项目的悖论在于——它让不会用 AI 的设计师也能产出好设计，但同时，它也让不会设计的 AI 工程师拥有了设计师的品味。

如果你每天用 AI 写代码，花 30 秒装一下。你会发现，AI 写出来的东西终于不是灰扑扑一片了。

项目地址： github.com/Leonxlnx/taste-skill
官网： tasteskill.dev
安装： npx skills add https://github.com/Leonxlnx/taste-skill