Taste Skill 新手教程

1这是什么

一句话：taste-skill 是一套便携式 Agent Skills，把「设计品味」写成 AI 能读懂并执行的指令文件。

官方的副标题叫 The Anti-Slop Frontend Framework for AI Agents（反平庸前端框架）。它解决的不是「会不会写代码」，而是「写出来的 UI 一股 AI 味」：居中大标题、紫色渐变、三张一模一样的功能卡、假到出戏的 99.99% 数据。装上它之后，agent 在动手写界面前会先推断设计方向、设定风格参数，交付前还会跑一遍自查清单。

它不做什么

2为什么需要

先想想：你平时是怎么跟 agent 描述「页面要好看」的？大概率是下面三种之一，而它们都不太管用。

taste-skill 的核心洞察是：品味不该写在 prompt 里，该写成技能文件。它的规则不是拍脑袋定的，仓库的 research/ 目录里沉淀了系统性研究（如 100 AI Design Tells），把「AI 味」逐条拆成可检查的禁令；再配上三个可调拨盘和交付前的 pre-flight 自检，把「好看」从玄学变成流程。

3核心流程

五步：装技能 → agent 加载 → 推断方向 → 按设计系统出码 → 自检交付。

关键在第 3 步：agent 不会上来就写代码，而是先读你的 brief，输出一行 Design Read（「我把这个需求理解为：面向 XX 受众的 XX 页面，走 XX 风格」），模糊时最多只问你一个澄清问题，然后才开工。这个「先读题再动笔」的协议是 v2 新增的。

4安装

统一入口是一条 npx 命令，CLI 会把技能装到你机器上各个 agent 的技能目录。

# 全量安装（13 个技能全装，推荐先跑这条看看清单）
npx skills add https://github.com/Leonxlnx/taste-skill

# 只装主技能（v2，install name 是 design-taste-frontend）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# 依赖旧版行为的项目，锁定 v1
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

# 安装前先看仓库里有哪些技能可选
npx skills add https://github.com/Leonxlnx/taste-skill --list

几点说明：

• CLI 会自动检测你机器上装了哪些 agent（Cursor、Claude Code、Codex 等），一个都没检测到时会让你手动勾选装给谁。
• 默认装到项目级目录，随仓库提交、团队共享；加 -g 装到用户级，所有项目通用。
• 重跑同一条命令即可升级到最新版（install name 不变，v2 已是默认）。
• 也可以完全手动：把任意 SKILL.md 复制进项目，或者直接粘进对话框。

513 个技能怎么选

每个技能只做一件事。实现类输出代码，图像类只出参考图。

实现类（输出代码）

图像类（只出图）

6Cursor CLI 实战

本章是全文重点：从安装到三个完整例子，全部围绕 Cursor CLI 展开。

6.1 把技能装进 Cursor

skills CLI 给 Cursor 的安装路径是固定的：项目级装到 .agents/skills/（随仓库提交，团队共享），全局级装到 ~/.cursor/skills/（本机所有项目可用）。

# 方式一：装进当前项目（默认，项目级）
cd ~/projects/my-app
npx skills add https://github.com/Leonxlnx/taste-skill -a cursor

# 方式二：装到全局，所有项目都能用（个人开发机推荐）
npx skills add https://github.com/Leonxlnx/taste-skill -a cursor -g -y

# 只装主技能 + 全局（最常用的组合）
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" -a cursor -g -y

• -a cursor：明确指定装给 Cursor（不加的话 CLI 按自动检测结果走，可能会问你要装给谁）。
• -g：全局；-y：跳过确认直接装。
• 默认用 symlink 复用文件，想装成独立副本加 --copy。

装完验证一下文件确实落位：

# 项目级装在这
ls .agents/skills/

# 全局装在这
ls ~/.cursor/skills/
# 应该能看到 design-taste-frontend/SKILL.md 等目录

6.2 Cursor CLI 里怎么触发

Cursor 的 agent 会扫描技能目录里的 SKILL.md，根据 frontmatter 的 description 判断当前任务是否命中。命中前端 / UI 场景时自动生效，平时不占上下文。两种触发姿势：

• 自动触发：直接描述前端任务即可，比如「给我的产品做个落地页」，命中 description 就会带上技能。
• 显式点名（推荐）：在 prompt 里写明 follow the design-taste-frontend skill，确保技能被加载，避免该触发时没触发。

6.3 实战一：从零生成落地页

场景：给精品咖啡品牌做一个新落地页。在 Cursor CLI 会话里输入：

follow the design-taste-frontend skill.

给我的精品咖啡品牌 Bloom Roastery 做一个落地页。
受众是城市白领，走温暖、有质感、克制的方向：
布局常规一点（DESIGN_VARIANCE 6），动效克制（MOTION_INTENSITY 3），
信息密度放低，多留白（VISUAL_DENSITY 3）。

预期发生的事：agent 先输出一行 Design Read 复述理解，声明三个拨盘取值，然后按 React / Tailwind 的默认架构出码，最后跑 pre-flight 清单。不会发生的事：它不会问你「要用什么配色」这类能从 brief 推断的问题；也不会产出居中 hero 加紫色渐变的模板脸。

6.4 实战二：改造现有项目的 UI

场景：项目已经能跑，但界面是「AI 味重灾区」。装上重设计技能：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects" -a cursor -g -y

然后在项目里让 agent 先审计、后动手：

follow the redesign-existing-projects skill.

audit the UI of this project first: list what to preserve vs overhaul,
then fix layout / spacing / hierarchy. Don't touch business logic.

这个技能的协议是 audit-first：先给出「保留 vs 重做」清单，你确认后它才改代码，避免一上来把你的品牌色全冲掉。

6.5 实战三：先出图、再写码

场景：想先看到效果再实现。装两个技能配合使用：

npx skills add https://github.com/Leonxlnx/taste-skill --skill "imagegen-frontend-web" -a cursor -g -y
npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code" -a cursor -g -y

prompt 里按 README 建议把流水线声明出来：

follow the skill: generate images, then analyze, then code.

给 Bloom Roastery 落地页生成 3 张不同方向的桌面端参考帧，
我选定后分析构图与配色，再实现成代码。

参考帧也可以用 ChatGPT Images 这类外部生成器出：先用图像技能的提示词拿到帧图，再把图喂给 Cursor CLI 里的编码 agent 实现。图像技能与实现技能是解耦的，随便搭配。

6.6 日常管理

npx skills list        # 列出项目级 + 全局已装技能
npx skills list -g     # 只看全局
npx skills find taste  # 在技能生态里按关键词搜索
npx skills ls -a cursor -g   # 只看 Cursor 全局装了什么

升级就是重跑安装命令（install name 不变，原地覆盖为最新）。想卸载直接删对应技能目录即可。

7三个拨盘

v2 的核心配置就三个 1-10 的旋钮，装在技能文件顶部，brief 里也能临时覆盖。

不在 brief 里写拨盘时，技能会按内置规则从你的描述词推断：

8反 slop 禁令

技能的「品味」来自一条条可检查的禁令。挑最有代表性的几类感受一下严格程度。

为什么连一个破折号都要赶尽杀绝？因为它是 LLM 生成文本里最典型、最容易被一眼识破的「指纹」。taste-skill 的思路是：slop 不是抽象概念，而是一张可以逐条排查的清单。

9交付前自检（Pre-flight）

v2 把自检写成硬性协议（原文标注 THIS IS NOT OPTIONAL），任一项不过就不许交付。

• 过程项：Design Read 已声明？三个拨盘取值已写明？改版场景先做了审计？
• 一致性锁：全页一个主题不中途反色；一个强调色贯穿始终；一个圆角体系。
• 首屏纪律：Hero 必须完整装进首屏：大标题不超过两行，副文案不超过 20 词，CTA 首屏可见。
• 可访问性：按钮对比度过 WCAG AA；动画只动 transform / opacity；尊重系统「减弱动态效果」设置。
• 工程项：深浅双模式都要能看；移动端折叠行为明确；空态 / 加载 / 错误态都处理；用真实图片而非 div 假截图。
• 文案自查：引用不超过三行；声称了的动效必须真的做出来；禁令清单逐条过一遍。

10FAQ / 踩坑

11参考链接

以下是一手资料入口，本教程的数字与命令均出自这些原文。

仓库结构

taste-skill/
├── skills/      # 13 个技能，每个一个 SKILL.md
├── research/    # 反 slop 研究（根因 / 修复 / 发现）
├── examples/    # 用 taste-skill 做出的效果截图
├── assets/      # 赞助商标等静态资源
├── scripts/     # 辅助脚本
├── skill.sh     # 安装 / 注册脚本
└── CHANGELOG.md