一行命令搞定！16.5k Star 的开源神器，让 AI 生成的前端终于有审美了

标签: taste-skill / AI 前端 / 设计规范 / Claude Code / Cursor / 反 slop / 前端开发
原文: 微信公众号「极客之家」https://mp.weixin.qq.com/s/AEabxaAfOblDL-fTtTkMGw

核心亮点

让 Claude Code 和 Cursor 生成的前端代码，终于能看了。

• 16.5K GitHub Stars，解决 AI 前端代码"紫蓝渐变 + Hero 标题"的老大难问题
• 一行命令安装：npx skills add https://github.com/Leonxlnx/taste-skill
• 9 个代码类 Skill + 多个图片类 Skill：覆盖从排版、动效、间距到完整输出全流程
• 反 slop 利器：明确禁止"AI Purple"、Inter 字体滥用、圆角卡片堆砌等视觉惯性
• 框架不挑：React / Vue / Svelte / 原生 HTML/CSS 全部支持
• 多 Agent 支持：Cursor / Claude Code / Codex / Windsurf / Gemini CLI / v0 / Lovable / Copilot

一、问题：AI 生成的前端，为什么总是一个模子？

你有没有遇到过这种情况：让 Claude Code 或者 Cursor 帮你做一个落地页，生成完打开浏览器一看——

紫蓝渐变背景，中间一个大大的 Hero 标题，旁边一堆圆角卡片，配色清一色"科技感"，就差在上面写"本页由 AI 生成"了。

这种 UI 在圈子里有个专门的词：slop。

AI 写代码的问题不在于它写得烂，而在于它太"安全"了。模型训练的时候见过太多长得差不多的界面，所以生成出来的东西就很符合"统计期望"——那个期望就是一个让所有人都觉得不难看、但也没人觉得惊艳的模板。

具体到前端，几乎就是那几个固定动作：

• Hero 区域居中加副标题
• 功能区三列卡片并排
• CTA 按钮用主色填充
• 字体选 Inter 或者 Geist
• 背景搞个渐变

AI 特别爱往紫色和蓝色上靠，圈子里管这个叫 "AI Purple"。

二、taste-skill 是什么？

taste-skill 做的事情就是打断这个惯性。

它的核心是一批 .md 格式的指令文件（官方叫 SKILL.md），挂进你的编程 Agent 之后，相当于给模型追加了一套设计工程规范，明确告诉它哪些视觉习惯是禁止的，什么样的排版和动效才是合格的。

GitHub：https://github.com/Leonxlnx/taste-skill
Stars：16.5K+
协议：开源

三、一行命令搞定安装

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

如果只想要某一个 skill，加 --skill 参数指定安装名就行，比如只装默认款：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

不想用 CLI 也没关系，直接把对应的 .md 文件复制进项目目录，或者粘贴到 ChatGPT、Codex 的对话框里，同样有效。

支持的 Agent：Cursor、Claude Code、Codex、Windsurf、Gemini CLI、v0、Lovable、GitHub Copilot 都在列。

框架也不挑：React、Vue、Svelte、原生 HTML/CSS 全兼容，规则面向的是设计意图本身，不是某个框架的 API。

四、每个 Skill 干什么用

目前项目里有两类 skill：一类生成代码，一类生成图片。

4.1 代码类 Skill

平时直接用 design-taste-frontend 就够了。 如果你在用 GPT 或者 Codex 并且觉得输出还不够好，可以换成 gpt-taste，规则更严格一些。

output-skill 经常叠加使用，因为 Claude Code 偶尔会在长文件里突然来一句 // ... rest of the code remains the same，这个 skill 可以有效抑制这个坏毛病。

4.2 图片类 Skill

五、实战效果对比

使用前（典型 slop）：

<!-- 紫蓝渐变背景 Hero 区域 -->
<div class="hero-section">
  <h1 class="gradient-text">欢迎使用我们的产品</h1>
  <p class="subtitle">最先进的解决方案</p>
  <div class="btn primary-btn">立即开始</div>
</div>

<!-- 三列卡片堆砌 -->
<div class="features">
  <div class="card">功能一</div>
  <div class="card">功能二</div>
  <div class="card">功能三</div>
</div>

使用 taste-skill 后（反 slop 方向）：

<!-- 克制背景 + 清晰层级 -->
<section class="intro">
  <h1>欢迎使用我们的产品</h1>
  <p class="lead">专为现代团队设计的协作工具</p>
  <button class="cta-primary">立即开始</button>
</section>

<!-- 留白 + 差异化卡片 -->
<section class="capabilities">
  <article class="feature-card feature-card--primary">
    <h2>协作</h2>
    <p>实时多人编辑</p>
  </article>
  <article class="feature-card">
    <h2>安全</h2>
    <p>端到端加密</p>
  </article>
</section>

六、为什么有效？

taste-skill 的本质是给 AI 一个设计决策边界。

AI 生成的问题不是能力不够，而是没有约束。它需要在"做决定"之前被告知：

• 什么颜色组合是允许的
• 什么样的间距是舒适的
• 什么字体选择是专业的
• 什么样的动效是加分项

SKILL.md 文件里就包含了这些设计决策规则，Agent 在生成代码之前会先读取这些规则，然后按照规则来生成。

这就像给 AI 雇了一个设计导师——不是告诉它怎么写代码，而是告诉它什么样的代码是好看代码。

七、适用场景

• 产品落地页：让 AI 生成的 Landing Page 不再是模板风
• 管理后台：生成有层级感、克制优雅的 Dashboard
• 存量项目改造：用 redesign-skill 审计并优化现有 UI
• 图片生成：先生成设计稿，再从稿子生成代码（image-to-code-skill）

八、项目生态

• GitHub：https://github.com/Leonxlnx/taste-skill
• 安装工具：npx skills
• 设计资源：内置 Figma/Webflow 风格参考
• 社区：支持 GitHub Issues 和 Pull Request

写在最后

taste-skill 解决的是一个非常具体但又普遍存在的问题：AI 生成的东西太"平均"了。

它不是要取代设计师，而是给 AI 一个设计直觉——让它知道什么是好看，什么是丑，什么是"AI Purple"应该避免的。

对于那些不想在审美上花时间、但又不想 UI 太丑的开发者来说，这个工具简直是救星。

毕竟，16.5K Stars、零依赖、随便用——何不试试？

本文整理自微信公众号「极客之家」，原文链接：https://mp.weixin.qq.com/s/AEabxaAfOblDL-fTtTkMGw