你有没有发现，让 AI Agent 写前端页面，出来的结果总是长一个样？紫色渐变背景、居中 hero 区域、三张等宽功能卡片、到处都是毛玻璃效果——这就是所谓的”slop”（模板化烂设计）。每次都要手动调半天，才能勉强看得过去。

Taste Skill 就是来解决这个问题的。它不是又一个 UI 框架，而是一套Anti-Slop 前端技能文件，安装到你的 AI Agent 之后，Agent 在写前端时会自动遵循专业的设计规则——布局有变化、动效有层次、排版有章法，而不是千篇一律的模板输出。

Taste Skill 是什么？ 由 Leonxlnx 开发的开源前端技能框架（MIT 许可证），通过可调旋钮（布局变化度、动效强度、视觉密度）和 Anti-Slop 规则体系，让 AI Agent 生成高品质、非模板化的前端界面。兼容 Codex、Cursor、Claude Code 等主流 AI 编码工具，支持 React、Vue、Svelte 等所有前端框架。

关键数据：

• 🌟 GitHub Stars: 快速增长中（仓库链接）
• 📦 当前版本：v2（experimental）
• ⚖️ 许可证：MIT License
• 🧠 核心特性：三旋钮调参系统（布局变化度 / 动效强度 / 视觉密度）
• 📦 核心特性：内置 13 个专项技能（前端实现 + 图像生成），框架无关
• 🤝 Vercel 开源计划赞助项目

前提条件

开始本 Taste Skill 安装教程前，你需要准备：

• Node.js：已安装（用于运行 npx skills add）
• 一个 AI 编码工具：Claude Code、Codex、Cursor、Windsurf 等任意一个即可
• 基本的前端知识：了解 HTML/CSS/JS，知道什么是组件

概述

本教程是 Taste Skill 的完整使用指南，涵盖以下内容：

1. 一键安装到你的 AI 工具
2. 理解核心的三旋钮调参系统
3. 选择适合你场景的技能变体
4. 在实际项目中使用和调优

详细步骤

第一步：一键安装

Taste Skill 的安装非常简单，一条命令搞定：

1

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

这会安装默认的 design-taste-frontend 技能（当前为 v2 experimental）。如果你只需要安装某个特定技能，可以用 --skill 参数指定：

1

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

💡 提示：你也可以直接把 SKILL.md 文件复制到项目目录，或者粘贴到 ChatGPT / Codex 的对话中使用。

第二步：在 AI 工具中安装

Taste Skill 兼容所有主流 AI 编码工具。以下是在各平台中的接入方式：

通用方式（推荐）：复制这条命令让 Agent 执行：

1

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

Claude Code：
在项目根目录的 CLAUDE.md 中添加 Taste Skill 的引用，或直接在对话中让 Claude 执行上面的安装命令。Claude Code 会自动加载 SKILL.md 并在后续生成前端代码时遵循设计规则。

**Codex (OpenAI)**：
在项目的 AGENTS.md 中添加 Taste Skill 引用，或在 Codex 对话中粘贴 SKILL.md 的内容。Codex 会在生成前端代码时自动应用 Anti-Slop 规则。

Cursor：
将 SKILL.md 复制到项目根目录，或通过 Settings → Rules 添加设计规则。Cursor 会在生成代码时参考这些规则。

Windsurf：
在项目根目录创建 .windsurfrules 文件，将 SKILL.md 的核心规则粘贴进去。

💡 提示：最简单的方式就是用 npx skills add，它会自动检测你的 AI 工具并完成配置。

第三步：理解三旋钮调参系统

Taste Skill 的核心是三个可调旋钮，控制着输出的设计风格：

默认值为 8 / 6 / 4，适合大多数场景。你不需要手动编辑配置文件——在对话中告诉 Agent 你想要的风格，它会自动调整旋钮值。

常见场景的推荐旋钮值：

第四步：选择适合你的技能变体

Taste Skill 提供了多个专项技能，不需要全部安装，按需选择即可：

代码实现类技能（输出可运行的代码）：

图像生成类技能（输出设计参考图，不输出代码）：

安装特定技能的命令：

1

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

第五步：实际使用

安装完成后，直接在对话中告诉 Agent 你的需求即可。Taste Skill 会引导 Agent 先”读懂需求”（Brief Inference），再选择设计语言，最后输出高品质代码。

使用示例：

• “帮我做一个 SaaS 落地页，风格参考 Linear” → Agent 会自动设置偏极简的旋钮值
• “做一个设计师作品集网站，要 Awwwards 级别的” → Agent 会调高布局变化度和动效强度
• “重新设计这个页面，保留现有结构” → Agent 会进入 Redesign Protocol，先审计再优化

💡 图像生成工作流：先用 imagegen-frontend-web 生成设计参考图，然后把图片交给 Codex 或 Claude Code 用 image-to-code 技能实现。这种”先出图再写码”的流程效果最好。

第六步：更新到最新版本

Taste Skill 持续迭代中。更新到最新版只需重新执行安装命令：

1

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

安装名没有改变，所以不会产生重复。如果需要锁定到 v1 版本：

1

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

v2 的核心改进

Taste Skill v2（experimental）相比 v1 做了大量改进，是当前的默认版本：

• Brief Inference：Agent 在写代码前先”读懂房间”——页面类型、风格关键词、目标受众、参考信号
• Design System Map：自动匹配官方设计系统（Material、Fluent、Carbon、shadcn 等），而不是从零造轮子
• Anti-Slop 硬规则：禁止破折号滥用、禁止编号眉题、禁止装饰性文字条、禁止滚动提示等 15+ 条反模板化规则
• Dark Mode 协议：默认双模式，Token 策略逐项目声明
• Redesign Protocol：先审计再动手，保留 URL 结构、导航标签、品牌标识等不应改变的元素
• GSAP 动效规范：标准化的 Sticky-Stack 和 Horizontal-Pan 代码骨架

常见问题（FAQ）

Q: Taste Skill 和其他 AI 设计工具有什么区别？
A: Taste Skill 不是 UI 框架，而是一套设计规则。它通过 Anti-Slop 规则体系和可调旋钮，让 AI Agent 的前端输出从”能用”提升到”好看”。多个专项变体覆盖不同视觉方向，框架无关。

Q: 支持 React、Vue、Svelte 吗？
A: 全部支持。Taste Skill 的规则针对设计意图而非特定框架 API，所以任何前端框架都能用。

Q: 安装教程在哪里？怎么在 Claude Code 中使用 Taste Skill？
A: 运行 npx skills add https://github.com/Leonxlnx/taste-skill 即可完成安装。Claude Code 会自动加载 SKILL.md，在后续生成前端代码时遵循设计规则。详细步骤见上方”在 AI 工具中安装”章节。

Q: v1 和 v2 有什么区别？我应该用哪个？
A: v2 是 v1 的大幅重写版，增加了 Brief Inference、Design System Map、Anti-Slop 硬规则、Dark Mode 协议等新功能。推荐使用 v2，除非你的项目依赖 v1 的特定行为。

Q: 图像生成技能和代码实现技能有什么区别？
A: 代码实现技能输出可运行的前端代码，图像生成技能只输出设计参考图。推荐工作流：先用图像生成技能出设计稿，再用代码实现技能生成代码。

Q: 如何更新 Taste Skill？
A: 重新运行安装命令即可，安装名不变所以不会重复。详细更新步骤见上方”更新到最新版本”章节。

Q: 完全免费吗？
A: 是的。MIT 许可证，完全开源免费。由 Vercel 开源计划赞助。

进阶技巧

• “先出图再写码”工作流：用 imagegen-frontend-web 生成设计参考图 → 交给 Codex/Claude Code 用 image-to-code 实现 → 效果远好于直接让 Agent 写页面
• 旋钮微调：在对话中告诉 Agent “更紧凑一些”或”动效再克制一点”，它会自动调整旋钮值
• 改造已有项目：用 redesign-skill，它会先审计现有 UI 再做改进，而不是推倒重来
• 解决 Agent 输出截断：安装 output-skill，强制 Agent 输出完整代码而不是半成品

总结

以上就是 Taste Skill 的完整使用教程和安装指南。从一键安装到三旋钮调参，从选择技能变体到实际项目使用，你现在可以让 AI Agent 生成真正有设计品质的前端界面，而不是千篇一律的模板化输出。这套 Taste Skill 使用指南覆盖了从入门到进阶的全部流程，希望能帮你提升 AI 生成前端的质量。

如何引用本文：本文基于 Taste Skill 官方 GitHub 仓库（2026-06-23 验证）编写。所有安装命令和技能信息均与 v2 experimental 版本对照验证。