夜雨聆风👆 关注「科技第一时」，每天 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