<!-- title: 42万安装taste-skill v2逐段拆解 -->

# taste-skill v2 逐段拆解：把“设计品味”写成 62 项机械清单

## 概述

本期是 Skills 生态系列第 2 轮深度拆解，对象是设计类赛道目前最热的社区 Skill：**design-taste-frontend**（俗称 taste-skill，仓库 `Leonxlnx/taste-skill`）。据 skills.sh 总榜（2026-08-31 抓取），它以 42.45 万安装位列全站第 89 名，在“设计/前端审美”细分里与 anthropics 官方 frontend-design（83.7 万）、Vercel 的 web-design-guidelines（59.3 万）、uizze 的 anti-ui-slop（58.2 万）同台。本周最大的新闻是：**v2（experimental）刚刚替换 v1 成为默认版本**，作者称之为“大改写”——新增 Brief 推断、三旋钮体系、62 项起飞前检查清单，并对破折号下达零容忍令。本文逐段拆完这份 SKILL.md，提炼 5 个可以直接抄走的设计模式。

## 一、它在设计赛道的位置

skills.sh 目前追踪 1,335,553 个 Skill。设计类主要玩家在同一张总榜上的排布：

| 排名 | Skill | 来源 | 安装量 | 定位 |
|---|---|---|---|---|
| #4 | frontend-design | anthropics/skills（官方） | 837.3K | 官方通用前端审美 |
| #37 | web-design-guidelines | vercel-labs/agent-skills | 593.1K | Vercel 设计准则 |
| #39 | anti-ui-slop | uizze.com | 582.1K | 去 AI 味规则集 |
| **#89** | **design-taste-frontend** | **Leonxlnx/taste-skill** | **424.5K** | **三旋钮反模板化** |

taste-skill 是四者中唯一的“个人作者 + 商业赞助”形态：README 显示它拿到了 Kimi（Moonshot AI）的冠名赞助（README 称 Kimi K3 为 2.8T 参数、百万 token 上下文），赞助商名单还包括 interfaces.dev、React Bits、animations.dev、IMG.LY、Sent.dm，以及 Vercel 开源计划。MIT 协议，官网 tasteskill.dev。一个单人项目能挤进总榜前 100 并形成赞助盘，本身就是本期值得拆它的理由。

## 二、评测对比表：taste-skill 家族怎么选

仓库不是一个 Skill，而是 13 个：10 个产出代码的实现类 + 3 个只产参考图的生成类。按五大维度（权重：功能 25%、设计 25%、实战 20%、上手 15%、社区 15%）评分：

| Skill（安装名） | 功能完整度 | 设计质量 | 实战效果 | 上手难度 | 社区活跃度 | 加权总分 |
|---|---|---|---|---|---|---|
| taste-skill（design-taste-frontend）**v2 默认** | ★★★★★ | ★★★★★ | ★★★★ | ★★★★ | ★★★★ | **4.5** |
| taste-skill-v1（design-taste-frontend-v1） | ★★★ | ★★★ | ★★★★ | ★★★★ | ★★★ | 3.4 |
| gpt-tasteskill（gpt-taste） | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | 3.7 |
| image-to-code-skill（image-to-code） | ★★★★ | ★★★★ | ★★★ | ★★★★ | ★★★ | 3.7 |
| redesign-skill（redesign-existing-projects） | ★★★★ | ★★★★ | ★★★★ | ★★★★ | ★★★ | 3.9 |
| output-skill（full-output-enforcement） | ★★★ | ★★★★ | ★★★★ | ★★★★★ | ★★★ | 3.8 |
| 风格三件套（high-end-visual-design / minimalist-ui / industrial-brutalist-ui） | ★★★ | ★★★★ | ★★★ | ★★★★★ | ★★★ | 3.6 |
| imagegen 三件套（web / mobile / brandkit） | ★★★ | ★★★ | ★★★ | ★★★★ | ★★★ | 3.2 |

家族设计本身是个教科书案例：每个 Skill 只做一件事，README 用一张“该用哪个”决策表收口，且**安装名（frontmatter 的 `name:` 字段）与文件夹名解耦**——v2 替换 v1 时安装名不变，升级零迁移成本；依赖 v1 精确行为的人可以钉死在 `design-taste-frontend-v1`。

## 三、SKILL.md 逐段拆解（v2 experimental）

### 3.1 frontmatter：description 里的正负触发词

```yaml
name: design-taste-frontend
description: Anti-slop frontend skill for landing pages, portfolios, and
  redesigns. The agent reads the brief, infers the right design direction,
  and ships interfaces that do not look templated. Real design systems when
  applicable, audit-first on redesigns, strict pre-flight check.
```

前两句是正向触发词（landing pages / portfolios / redesigns），后三句是能力预告（读题、推断方向、不模板化）。真正的精髓在正文开头紧跟着的一句负边界：

> Landing pages, portfolios, and redesigns. **Not dashboards, not data tables, not multi-step product UI.** Every rule below is **contextual**. None of it fires automatically. First read the brief, then pull only what fits.

把“不适用场景”写进正文第一屏，是防止 Skill 被错误触发时污染仪表盘类任务的关键一笔。同时"None of it fires automatically"预先声明了全文规则的性质：上下文相关的工具箱，不是无条件执行的法律——这句话大幅降低了巨量规则带来的误触发风险。

### 3.2 第 0 节 Brief Inference：先读题，再动手

v2 新增的开篇节，直指 LLM 前端输出的病根：“大多数糟糕的 AI 设计产出，是因为模型直接跳到默认审美，而不是先读房间。”操作流程被固定为三步：

1. 读六类信号：页面类型、用户用的氛围词（"Linear-style"“Awwwards”“Apple-y”）、参考物、受众、既有品牌资产、隐性约束（无障碍/政府/儿童产品——**这些约束覆盖审美偏好**）；
2. 生成前先输出一行“Design Read”，模板固定为 *"Reading this as: X for Y, with a Z language, leaning toward W."*；
3. 简报含糊时**最多问一个问题**，且仅当推断真的会分叉时才问："Should this feel closer to Linear-clean or Awwwards-experimental?"

“单问题规则”是对抗 Agent 审讯式连环追问的精巧设计；而把 Design Read 做成固定句式，则让用户能在第一行就否掉错误理解，纠偏成本最低。

### 3.3 第 1 节 三旋钮：把“品味”变成参数

全文的核心机制是三个 1-10 的旋钮，基线 **8 / 6 / 4**：

- `DESIGN_VARIANCE: 8`（1 = 完美对称，10 = 艺术混沌）
- `MOTION_INTENSITY: 6`（1 = 静态，10 = 电影级物理动效）
- `VISUAL_DENSITY: 4`（1 = 美术馆留白，10 = 驾驶舱密度）

配套两张表：**信号→旋钮推断表**（“极简/Linear 风”落到 5-6/3-4/2-3；“政府/强监管”落到 3-4/2-3/4-5）和**用例预设表**（SaaS 落地页 7/6/4，创意机构 9/8/3，开发者作品集 6/5/4）。文件还明令禁止模型自创别名："never invent aliases like `LAYOUT_VARIANCE` or `ANIM_LEVEL`"——这是防规则漂移的细节：变量名一旦被模型改写，全文交叉引用就断了。

旋钮的传导是双向的：旋钮驱动布局决策（VARIANCE>4 时禁止居中 Hero），也驱动自查（MOTION_INTENSITY>4 的页面必须真的会动，否则降到 3 交付静态版——"Motion claimed, motion shown"）。

```mermaid
flowchart TD
    A[用户简报] --> B[§0 Brief Inference<br/>读六类信号]
    B --> C{简报是否含糊?}
    C -->|是| D[最多问 1 个问题]
    C -->|否| E[输出一行 Design Read]
    D --> E
    E --> F[§1 设定三旋钮<br/>VARIANCE / MOTION / DENSITY<br/>查推断表与预设表]
    F --> G{是否命中真实设计系统?<br/>Material/Fluent/Carbon/GOV.UK...}
    G -->|是| H[§2A 安装官方包<br/>诚实规则:不手搓仿制]
    G -->|否| I[§2B 原生 CSS + Tailwind<br/>注释标注灵感来源]
    H --> J[§3-§5 按旋钮生成<br/>RSC + Tailwind v4 + Motion]
    I --> J
    J --> K{改版还是新建?<br/>§11 模式检测}
    K -->|Preserve| L[先审计品牌 token<br/>SEO 基线,五级现代化杠杆]
    K -->|Greenfield/Overhaul| M[直接按旋钮基线]
    L --> N[§14 Pre-Flight Check<br/>62 项机械清单]
    M --> N
    N -->|任一项不过| J
    N -->|全部通过| O[交付]
```

### 3.4 第 2 节 设计系统地图：诚实规则

一张 12 行的映射表规定：简报读起来像微软企业应用就用 `@fluentui/react-components`，像 IBM 就用 `@carbon/react`，英国公共服务用 `govuk-frontend`……规则后面跟着两条“诚实条款”：

- **Honesty rule**：命中官方系统就装官方包，“不要手搓仿制它的 CSS，不要导入它的 token 然后覆盖 90%”；
- **One system per project**：不许在同一棵组件树里混 Fluent 和 Carbon。

另一张表处理“是审美而非系统”的方向（玻璃拟态、Bento、粗野主义、编辑风），明确 **Apple Liquid Glass 没有官方 Web 包**，Web 实现必须标注为 approximation。附录 C 甚至给了一段带 `prefers-reduced-transparency` 回退的完整近似 CSS。这种“防幻觉锚点”写法——把真实安装命令和官方文档链接直接 vendor 进文件——是 v2 对“模型凭训练数据编造包名”问题的正面回击。

### 3.5 第 4 节：把 AI 味写成禁用 hex 表

这是全文最“狠”的部分——作者不满足于说“别用 AI 紫”，而是把高频 AI 痕迹逐个写成可机检的禁令：

- **LILA RULE**：禁止默认“AI 紫渐变 + 霓虹发光”，基底用 Zinc/Slate/Stone 配单一高饱和点缀色；
- **Serif discipline**：衬线体默认禁用，**Fraunces 和 Instrument Serif 两个“LLM 最爱展示衬线”点名封禁**；理由写得很妙——“无衬线展示字体不‘无聊’，就像黑色是时尚的默认色”；还规定了斜体下降部字母（y g j p q）在 `leading-none` 下会被裁切的修复参数（`leading-[1.1]` + `pb-1`）；
- **高端消费品调色板禁令**：直接列出奶油底 `#f5f1ea`、黄铜/赤陶 `#b08947`、浓缩咖啡近黑 `#1a1714` 等具体 hex 家族——作者断言“你生成过的每一个高端消费品网站都在用这套配色，品牌因此隐形”——并给出 7 个可轮换的替代色系（Cold Luxury、Forest、Cobalt + Cream……），附带“上一单用了米色+黄铜，这一单必须换家族”的轮换规则；
- **Hero 纪律**：标题 ≤2 行、副文案 ≤20 词 ≤4 行、CTA 不滚动可见、Hero 文本元素最多 4 个、顶部 padding 上限 `pt-24`；"Used by"logo 墙必须放 Hero 之下，且必须用 Simple Icons 真实 SVG，不许纯文字 wordmark；
- **Eyebrow 配额**（作者称是生产测试中违反率第一的规则）：每 3 个 section 最多 1 个大写小标签，检查方式是机械的——“数一遍所有组件里的 `uppercase tracking` 实例，超过 ceil(章节数/3) 即不通过”；
- 禁三个等宽特性卡、之字形图文布局连续不超过 2 节、8 个 section 至少用 4 种布局族、Bento 格子数必须严格等于内容条数。

这批规则的方法论价值在于：**把“品味”翻译成可数、可比对、可判 Fail 的断言**。传统设计指南写“保持克制”，这份文件写“眉标数量 ≤ ceil(n/3)”。

### 3.6 第 5 节：动画纪律与标准代码骨架

禁令侧，`window.addEventListener("scroll", ...)`、把 scrollY 存进 React state、触碰 React state 的 rAF 循环全部硬禁，替代品是 Motion 的 `useScroll`、GSAP ScrollTrigger、IntersectionObserver、CSS scroll-driven animations。

骨架侧，v2 内嵌了三段完整可运行的组件代码：GSAP Sticky-Stack（卡片滚动钉叠）、GSAP Horizontal-Pan（竖滚横移）、Motion 的 whileInView 交错浮现。每段都点名最常见的翻车点：ScrollTrigger 的 `start` 必须写 `"top top"` 而不是 `"top center"`，否则“用户会看到滑了一半才触发”。给骨架而非描述，是因为作者发现“模型声明了动效却交付半成品”是高频故障——于是配套了那条"Motion claimed, motion shown"对账规则。

### 3.7 第 9.G 节：破折号零容忍令

单看 v2 的 CHANGELOG，破折号被单独列为一节并称为“违反率第一的 Tell”。原文的措辞值得全文引用，因为它同时是一条风格规则和一份提示词工程样本：

> **Em-dash (`—`) is COMPLETELY banned.** … There is no "limited use" allowance, no "natural language frequency" allowance… **The agent has historically ignored em-dash limits when phrased as "use sparingly." The phrasing here is binary: zero em-dashes.**

规则覆盖 headlines、眉标、按钮文案、图片 alt、引言署名，连 en-dash 作分隔符也一并禁掉，只留普通连字符和数学负号。这里藏着一个重要教训：**当“少量使用”级别的软约束反复失效时，正确做法不是加重语气，而是把约束改成二值判定**——输出里出现任何一个 `—` 即 Pre-Flight Fail。第 9 节其余部分同样是清单化的 AI 味黑名单：假 div 截图、`V0.6`/`BETA` 眉标、`001 · Capabilities` 式编号、装饰性状态圆点、`"Quietly in use at"`式社交证明标题、`LIS 14:23 · 18°C`天气条、"Scroll to explore"滚动提示、营销页版本号页脚。

### 3.8 第 11/13 节：改版协议与出场范围

**Redesign Protocol** 把改版拆成三种模式（Greenfield / Preserve / Overhaul），Preserve 模式要求先审计品牌 token、信息架构、SEO 基线（“SEO 迁移是改版第一风险”），并列出“永不静默修改”清单：URL 结构、主导航文案、表单字段名（会弄断埋点和自动填充）、logo、法律文案。现代化按风险从低到高排五个杠杆：字体 → 间距节奏 → 色彩校准 → 动效层 → Hero 重构，“满足简报即停”。

**Out of Scope** 一节明确五种不接的活：仪表盘、数据表、多步表单、代码编辑器、原生移动端，并要求模型在这种简报面前“明确说出来，指路正确的工具”。这个“主动劝退”条款保证了 Skill 在错误任务上的最坏行为是拒绝而非污染。

### 3.9 第 14 节：62 项 Pre-Flight Check

全文收尾是一份 62 项的核对清单，逐项对应前文章节。设计上有三个亮点：

1. **可机检性**：多数项有硬数字——CTA 桌面端不许折行、对比度 WCAG AA 4.5:1、导航 ≤80px 且单行、引言 ≤3 行、动效只碰 transform/opacity；
2. **审计句式**："If a single checkbox cannot be honestly ticked, the page is not done"——把“完成”的定义权从模型手里收走；
3. **对应关系**：每项后面标注来源章节号，清单不是凭空追加的，而是正文的投影，维护成本被锁在结构里。

需要指出的代价：这份 SKILL.md 体量极大，远超社区常引的“单文件控制在 500 行内”经验值，全量载入是一次性的大上下文开销。作者的解法是第 12 节的 **Block Library 契约**——模式命名留在正文，具体实现迭代式落到 `blocks/` 子目录的独立文件里，每个 block 自带 dial 兼容区间、移动端回退、反模式等 8 段固定结构的 frontmatter。这是用“渐进披露”对冲单文件膨胀的进行时方案。

## 四、可复用的 5 个 SKILL.md 设计模式

1. **正负触发词配对**：description 写正向场景，正文第一屏写负边界（Not dashboards…），双向夹住触发面。
2. **品味参数化**：把主观判断收敛为少量全局变量（三旋钮），配“信号→取值”推断表和用例预设表，并禁止模型改名漂移。
3. **软约束二值化**：反复失效的“少用 X”改写成“出现即 Fail”的存在性断言（破折号令是最极端样本）。
4. **禁令列 hex/包名，骨架给全代码**：反模式落到具体字符（禁用字体名、禁用色值），正模式落到可运行代码（GSAP 骨架），两头都不给模型自由发挥的灰区。
5. **完成判定权外置**：用带编号、带出处、带硬数字的 Pre-Flight 清单定义“做完”，并在开头声明“规则皆上下文相关”以换取清单密度不被滥用。

## 五、适用与不适用

**适用**：营销落地页、作品集、编辑风站点、老站改版（Preserve 模式尤其值回票价）、任何“生成物一眼像 AI 做的”的排查。**不适用**：仪表盘/管理后台（文件自己指路 Fluent/Carbon/Polaris）、数据密集表格、多步向导、原生 App。另外三点务实的坑：v2 是 experimental，规则仍在快速迭代，生产链路建议观察 CHANGELOG 再跟；规则面向 React/Next + Tailwind v4 + Motion 栈，其他栈只有审美规则可复用；62 项清单全跑一遍对生成时长有可感知的拖累，小任务可以只跑 Hero、对比度、破折号这几项高频 Fail 项。

## 六、安装与使用

```bash
# 安装默认版（当前为 v2 experimental，安装名不变，老用户重跑即升级）
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"

# GPT/Codex 用户装更严格的变体
npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"

# 老项目改造 / 输出补全 / 极简风
npx skills add https://github.com/Leonxlnx/taste-skill --skill "redesign-existing-projects"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "full-output-enforcement"
npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-ui"
```

装好后直接说需求即可触发；旋钮不用改文件，“overrides happen conversationally”——对话里说“这次要更克制”就行。

## 七、推荐排行榜

- **综合首选**：design-taste-frontend v2——规则密度和工程化程度目前无出其右；
- **稳定性优先**：design-taste-frontend-v1——行为冻结，适合已有工作流；
- **Codex/GPT 用户**：gpt-taste——布局方差和 GSAP 指令更激进；
- **老站改造**：redesign-existing-projects——先审计后动手，家族里实战分最高；
- **输出总被截断**：full-output-enforcement——单问题专用，上手零成本；
- **只要参考图**：imagegen-frontend-web / brandkit——配合 ChatGPT Images 出图再喂给编码 Agent。

## 参考来源

1. [skills.sh Skills Leaderboard](https://skills.sh) — 安装量排名与设计类竞品数据（2026-08-31 抓取）
2. [Leonxlnx/taste-skill 仓库 README](https://github.com/Leonxlnx/taste-skill) — 家族 13 个 Skill 清单、赞助信息、安装方式
3. [taste-skill v2 SKILL.md 原文](https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md) — 本文逐段拆解对象
4. [taste-skill CHANGELOG.md](https://github.com/Leonxlnx/taste-skill/blob/main/CHANGELOG.md) — v2（experimental）变更清单与“为何设为默认”说明
5. [SkillsMP](https://skillsmp.com) — 生态体量参照（280 万+ 收录的 SKILL.md 聚合目录）

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)