Taste-Skill：给 AI 编码 Agent 装上”前端审美”，终结模板味 UI

Skill超级捕获手 技术创作者 2026-08-08 12 阅读

总结

Taste-Skill 是一款开源的「前端审美」Skill 框架，专为 AI 编码 Agent（Codex、Cursor、Claude Code 等）设计。它通过结构化的设计规则、layout/spacing/typography 约束和反 AI 模板味协议，让 AI 生成的 UI 从「千篇一律的紫蓝渐变样板间」升级到「真正有设计感的高级产品」。截至 2026-08-08，GitHub Star 数已达 73,866，单月增长超 4 万，是 Skill 生态里当下最火的「前端反 AI Slop」项目。

功能与原则

Taste-Skill 的核心能力不是再给你一套组件库，也不是帮你选 Tailwind / React / Vue，而是把一套前端审美和验收规则写进 SKILL.md，让 AI 编码工具在动手前先读规则，再开始生成 UI。设计原则是「Portable Agent Skills」：所有 Skills 必须是可被 Agent Skills 协议直接加载的 SKILL.md 文件，能装在 Claude Code、Codex、Cursor、Gemini CLI、Copilot 等 50+ Agent 宿主上运行，跨工具一致。

认可度

  • GitHub Star：73,866（截至 2026-08-08 实测 GitHub 页面）
  • 增长曲线：2026-03 上线约 12k Star，2026-06 已突破 33k，2026-08 突破 73k，5 个月涨 6 倍
  • 生态收录：已被 vercel-labs/agent-skills 官方市场收录（这是 Agent Skills 协议参考实现）
  • 趋势历史：2026-06/07/08 连续三个月登上 GitHub Trending 日榜，单月新增 Star 进入 OpenClaw / Skills 生态前列
  • 媒体覆盖：CSDN、腾讯云开发者社区、JDon 等多家技术媒体专题报道，2026-08-08 腾讯云刚发布深度评测
  • 趋势追踪平台：trendshift.io 标注为「Frontend / AI」类目增长 No.1

链接

GitHub 仓库：https://github.com/Leonxlnx/taste-skill

项目主页：https://tasteskill.dev

官方市场：https://github.com/vercel-labs/agent-skills

原作者

  • GitHub Username：@Leonxlnx（真名 Leon Liu / 推特 @lexnlin）
  • 联合维护：@blueemi99（推特同名）
  • 一句话简介：独立前端工程师，专注 AI 编码 Agent 的设计与工程化，旗下还有 Novamira（让 AI Agent 拥有完整 WordPress 访问能力）

介绍

Taste-Skill 是一款专为 AI 编码 Agent 服务的「反 Slop」前端框架。README 开篇就定义：“gives your AI good taste. stops the AI from generating boring, generic slop”——直白说，就是别让 AI 再产出那种「深色背景 + 紫蓝渐变 + 三张功能卡片 + 居中大标题 + 右上角假状态点」的样板页面。

项目用一份可版本化的 SKILL.md 描述设计约束，包含 layout variance（布局变化度）、motion（动效）、density（信息密度）三个核心调节旋钮，并内置 anti-slop 检查清单。AI 在生成 UI 前会先读这份「审美宪法」，据此约束排版、字号、间距、动效曲线、配色饱和度等参数，最终输出 Apple、Linear、Stripe、Awwwards、SaaS 等不同风格的高端页面，而不是默认那套「AI 味模板」。

v2（2026-08 主推版本）做了大幅重写，引入 brief inference（从需求反推设计语言）、design-system map（设计系统映射）、hard em-dash ban（强制禁用破折号）、canonical GSAP code skeletons（GSAP 动效代码骨架）、redesign-audit protocol（重设计审计）、strict pre-flight check（起飞前检查）等机制。同一仓库还包含 image-to-code-skill、redesign-skill、soft-skill、output-skill、minimalist-skill 等 7 个子技能，每个 Skill 只做一件事，按需加载。

特点

  • Anti-Slop 硬约束：内置「禁用紫蓝渐变」「禁用破折号」「禁用模板化文案」等明确规则，强制 AI 跳出舒适区
  • 三旋钮可调：VARIANCE / MOTION / DENSITY 三个核心参数可按场景调节，平衡「高端感」与「可读性」
  • 多子技能组合：design-taste-frontend（默认 v2）、image-to-code（图像→代码）、redesign-existing-projects（旧项目重设计）、high-end-visual-design（高端风格）、full-output-enforcement（强制不输出半成品）、minimalist-ui（极简风）共 7 个，按需选用
  • 跨 Agent 兼容：基于 Agent Skills 开放协议（agentskills.io），Claude Code / Codex / Cursor / Gemini CLI / Copilot 50+ 宿主可直接 npx skills add 安装
  • MIT 开源 + 商业赞助：MIT 协议可商用，已获 GitHub Sponsors 商业赞助，迭代稳定（v1 → v2 有完整 changelog）

使用方法

1. 全量安装（推荐）：

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

2. 单独安装某个子技能：

# 安装默认前端审美 v2
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# 安装图像转代码 pipeline
npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"

# 安装极简风
npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-ui"

3. Claude Code 安装：

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill

4. 手动嵌入： 把任何 SKILL.md 复制到项目根目录 .claude/skills/ 或 .cursor/skills/ 下，或直接粘贴到 Codex 对话上下文。

安装后，Agent 在生成 UI 代码前会自动加载 SKILL.md 并遵守约束，无需手动 prompt。

使用场景与人群

适用场景：
– 用 Claude Code / Codex / Cursor 生成落地页、Dashboard、SaaS 后台、营销页
– 把 Figma / Midjourney 概念图直接转成生产级前端代码
– 对现有项目做 UI 重设计 / 风格升级
– 团队希望统一「AI 生成的 UI 风格」，避免每人 prompt 出来都不一样

目标用户：
– 全栈/前端工程师：用 AI 加速但拒绝「AI 味」输出
– 独立开发者 / 创业者：个人项目也能快速拿到接近 Linear / Stripe 级别的设计
– 设计转开发者：希望保留审美判断力但不被 CSS 细节拖慢
– AI 产品经理：评审 AI 生成的 UI 时用 Taste-Skill 作为「美学 checklist」

输入与输出案例

案例 1：生成 SaaS Dashboard

Input：

“用 Codex 帮我做一个 B2B SaaS Dashboard，主色用品牌蓝，要支持暗色模式，要有侧边栏导航 + 数据卡片 + 最近活动流。”

Without Taste-Skill： 输出典型 AI 模板：紫蓝渐变 Hero、千篇一律的卡片网格、占位符文字「Welcome to your dashboard」。

With Taste-Skill： Agent 先读 SKILL.md → 推断「Linear 风格 SaaS Dashboard」→ 调整 VARIANCE=medium / MOTION=subtle / DENSITY=balanced → 输出：克制的灰白配色、精准的 8px 栅格、ECharts 真实数据图表、过渡用 spring 曲线、品牌蓝仅在主操作按钮出现。

案例 2：旧项目重设计

Input：

“/plugin install taste-skill 后，对我现有的电商前端做一次 redesign，只动 UI 不要改后端逻辑。”

Output： Agent 调用 redesign-existing-projects 子技能 → 先 audit（审计现有 UI 找出 8 处问题：层级不清、间距跳跃、配色冲突、留白失衡、字体混杂、动效缺失、品牌识别弱、可访问性不足）→ 给出 redesign-audit 报告 → 应用 taste-skill 规则批量修复 → 输出升级版页面，对比图见项目 assets/redesign-before-after/ 目录。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 12 阅读