leonxlnx/taste-skill · 上手攻略
- 仓库：leonxlnx/taste-skill
- 链接：https://github.com/Leonxlnx/taste-skill
- 分类：agent
- 作者：Jay
- 更新：2026-07-07
这是什么
taste-skill 是 Leonxlnx 开发的AI Agent 前端设计增强技能库（Anti-Slop Frontend Framework for AI Agents），目标是阻止 AI 生成那种"千篇一律、毫无灵魂"的界面——官方称之为 slop（AI 垃圾内容）。
它不是一个前端框架，而是一套可移植的 Skill 指令集，安装后让 AI Coding Agent（ChatGPT、Codex、Claude Code 等）在生成前端界面时自动遵循更高设计水准的规则。技能以 SKILL.md 便携文件形式交付，通过 Vercel 的 agent-skills CLI 安装，也可以直接复制粘贴到对话中。
当前默认安装的是 v2 experimental（2026 年重写），相较 v1 有本质性升级。如果你依赖 v1 的精确行为，也有 --skill design-taste-frontend-v1 可 pin。
解决什么问题
当你让 AI（ChatGPT、Claude Code、Codex）生成一个网页或 UI 时，常见结果：
- 布局永远是居中 + 卡片 + 蓝色按钮，毫无个性
- 配色保守无趣，像模板打印出来的
- 动画只停留在
:hover级别，没有层次感 - 排版密度要么太空旷，要么挤成一团
taste-skill 通过预设的设计系统映射、三个可调节参数刻度盘（dials）、强制预检清单，让 AI 生成真正有设计感的界面——不只是"能用"，而是看起来像专业设计师出品。
快速安装
通过 Vercel Skills CLI（推荐）
前提：Node.js ≥ 18
# 全量安装所有技能
npx skills add https://github.com/Leonxlnx/taste-skill
# 安装单个指定技能（用 install name，不是文件夹名）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
# 如果需要 pin 到 v1 稳定版
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"
手动复制
不想用 CLI？直接复制 SKILL.md 文件内容粘贴到 ChatGPT / Claude Code / Codex 对话中即可。Skill 以 Markdown 格式存储，模型可直接读取。
核心技能一览
代码生成类技能
| Skill（安装名） | 文件夹 | 说明 |
|---|---|---|
design-taste-frontend ⭐ |
taste-skill（默认 v2） |
默认前端设计技能，v2 重写后更严格 |
design-taste-frontend-v1 |
taste-skill-v1 |
v1 稳定版，行为固定 |
gpt-taste |
gpt-tasteskill |
GPT/Codex 专用更严格版，更强的布局变化和 GSAP 动画指令 |
image-to-code |
image-to-code-skill |
图片 → 参考生成 → 分析 → 代码实现的完整工作流 |
redesign-existing-projects |
redesign-skill |
对已有项目做 UI 审计和改进 |
high-end-visual-design |
soft-skill |
柔和对比、高级感、留白丰富的 UI |
minimalist-ui |
minimalist-skill |
Notion/Linear 风格的编辑式极简 UI |
industrial-brutalist-ui |
brutalist-skill |
瑞士字体 + 锐利对比 + 实验性布局 |
stitch-design-taste |
stitch-skill |
Google Stitch 兼容规则，支持导出 DESIGN.md |
full-output-enforcement |
output-skill |
防止 AI 偷懒只输出一半——强制完整交付 |
图片生成类技能（配合 ChatGPT Images / Codex image mode 使用）
| Skill（安装名） | 文件夹 | 说明 |
|---|---|---|
imagegen-frontend-web |
imagegen-frontend-web |
高质量网站设计参考图：Hero、落地页、多分区 |
imagegen-frontend-mobile |
imagegen-frontend-mobile |
iOS/Android 移动端屏幕和流程 |
brandkit |
brandkit |
品牌识别体系：Logo 方向、配色、字体、VI 应用 |
核心参数刻度盘（v2 特色）
taste-skill v2 引入了三个核心"刻度盘"，在 Skill 文件顶部以 1-10 数字标注：
DESIGN_VARIANCE（布局变化度） - 低（1-3）：居中、干净、传统 - 高（7-10）：不对称、现代感、动态构图
MOTION_INTENSITY（动画深度） - 低（1-3）：悬停交互 - 高（7-10）：滚动视差、磁吸效果
VISUAL_DENSITY（信息密度） - 低（1-3）：大量留白、通透气场 - 高（7-10）：密集仪表盘、数据密集型
这三个维度让同一个 Skill 可以适应完全不同风格的项目，AI 根据你的简短描述自动推断合适的参数组合。
典型使用场景
场景 1：从零用 AI 生成一个有设计感的落地页
安装 taste-skill，然后：
"参考 taste-skill 的规则，为我的 AI 工具生成一个落地页，
风格：科技感 + 深色主题 + 高动画强度"
AI 会自动应用设计系统映射（Radix / shadcn / Tailwind official 等），输出带完整 GSAP 动画骨架的页面，而不是 Bootstrap 默认样式。
场景 2：图片生成 → AI 实现工作流（image-to-code）
用 imagegen-frontend-web 生成高质量设计参考图 → 将图片发给 image-to-code-skill → 分析风格 → 输出一致的前端代码。适合甲方给参考图让你实现的设计交接场景。
场景 3：现有项目 UI 改造（redesign-skill）
项目 UI 已经很旧，直接用 redesign-skill：它会先做审计（audit-first），列出当前问题，然后逐一修复布局、间距、层级。
场景 4：让 AI 输出完整代码而不是半成品（output-skill）
经常遇到 AI 说"这里代码较长就省略了..."？安装 output-skill，它强制要求完整输出，不允许占位注释。
坑与注意
-
v2 是默认但仍是 experimental：当前
design-taste-frontend默认装 v2（experimental），规则集更严格但仍在迭代，rule 措辞在 2.0.0 stable 之前可能变化。如遇意外行为，pin 到 v1：--skill design-taste-frontend-v1。 -
Framework Agnostic 但需要人工判断：Skill 规则面向设计意图而非特定框架 API，最终实现质量依赖 AI 对规则的理解深度。遇到 AI 误解设计意图时，手动在对话中补充风格参考图效果更好。
-
图片生成技能不输出代码：imagegen 系列只生成图片，不生成代码。拿到参考图后再用
image-to-code技能才能出代码。 -
GSAP 依赖：动画相关规则默认输出 GSAP 代码，如果你的项目不用 GSAP，需要在对话中明确指定动画库（如 Framer Motion、CSS animations）。
-
无后端能力：taste-skill 是纯前端 UI 增强，不涉及 API 设计、数据建模等后端内容。
-
版权声明：作者明确声明：无任何官方 token / coin / crypto 项目，任何使用其姓名的 Token 均与项目无关。
与同类对比
| 资源 | 类型 | 核心差异 |
|---|---|---|
| taste-skill | Agent Skill 库 | 专为 AI Coding Agent 设计，框架无关，可选多种风格变体 |
| Vercel agent-skills | 技能安装平台 | 基础设施，taste-skill 运行在其上 |
| shadcn/ui | UI 组件库 | 人类开发者手写组件，非 AI 自动生成 |
| Midjourney + 参考图 | 图片生成 | 不直接生成代码，需人工转化 |
| Cursor Rules | AI 配置规则 | 聚焦项目级行为约束，不做设计增强 |
taste-skill 的核心差异化在于它是第一个专门对抗 AI 界面同质化问题的系统性解决方案，而不仅仅是组件库或提示词收藏。
一句话推荐结论
如果你用 AI 生成前端界面但受不了那些"模板味"，taste-skill 是目前最完整的解决方案——npx skills add 两秒装完，AI 立刻知道什么叫好设计，而不是只会生成 Bootstrap 默认样式。
数据来源：GitHub README（Leonxlnx/taste-skill）、tasteskill.dev；版本/命令以 README 为准（v2 为 experimental，生产环境建议 pin v1）。