第02章 Taste Skill 的架构解剖

第02章 Taste Skill 的架构解剖

“一个 Skill 文件不是 prompt。它是嵌入 AI 决策层的约束系统，每次生成代码时都在静默运行。”

2.1 SKILL.md：不只是一段文本

打开任何一个 Taste Skill 文件，你看到的是一个 Markdown 文件。但它和你写给 AI 的普通 prompt 有本质区别：

维度 普通 Prompt SKILL.md
生效范围 当前对话 整个项目 / 所有对话
加载方式 手动输入 AI 工具自动加载
衰减 上下文变长后规则遗忘 每次对话开头重新注入
结构 自然语言描述 YAML 前言 + 分层规则体系
可组合 不支持 多个 Skill 可叠加

一个 Skill 文件的生命周期是这样的：

.agents/skills/soft-taste-frontend/SKILL.md
        │
        ▼
   AI 工具启动 / 新对话开始
        │
        ▼
   扫描 .agents/skills/ 目录
        │
        ▼
   读取 YAML frontmatter → 判断是否匹配当前任务
        │
        ▼
   将 SKILL.md 内容注入系统上下文
        │
        ▼
   生成代码时，规则自动参与决策

2.2 YAML Frontmatter：Skill 的身份证

每个 SKILL.md 文件以 YAML frontmatter 开头，这是 AI 工具识别和选择 Skill 的关键：

---
name: soft-taste-frontend
description: Use when building polished, premium UI with calm 
  aesthetics, soft contrast, generous whitespace, and spring 
  motion for high-end brand experiences
---

name 是 Skill 的唯一标识符。AI 工具用它来去重和引用。命名规则是 [风格]-taste-frontend，连字符分隔，全小写。

description 是 AI 工具判断是否加载这个 Skill 的依据。当你在对话中说"做一个高端柔和的 SaaS 首页"时，AI 工具会扫描所有可用 Skill 的 description，找到语义最匹配的那个。所以 description 不是给人读的——它是写给 AI 的语义匹配关键词。

description 的写法技巧

好的 description 要包含三类信息：

  1. 触发场景（When）：“Use when building…”
  2. 关键特征（What）：“calm aesthetics, soft contrast, generous whitespace”
  3. 适用领域（Where）：“high-end brand experiences”
# ❌ 太笼统，语义匹配度低
description: A skill for making nice frontend UIs

# ❌ 太技术化，用户不会这样描述需求
description: Sets DESIGN_VARIANCE to 5 and uses spring physics

# ✅ 触发场景 + 关键特征 + 适用领域
description: Use when building polished, premium UI with calm 
  aesthetics, soft contrast, generous whitespace, and spring 
  motion for high-end brand experiences

2.3 文件放置：三个层级

Skill 文件可以放在三个位置，优先级从高到低：

项目级（最高优先级）

my-project/
├── .agents/
│   └── skills/
│       └── my-brand-skill/
│           └── SKILL.md
├── .cursor/
│   └── rules/
│       └── taste.md
├── .github/
│   └── copilot-instructions.md
└── src/

项目级 Skill 只在当前项目中生效。适合：项目专属的品牌设计规范、特定客户的审美要求、团队统一的代码风格。

用户级（中等优先级）

~/.agents/skills/
├── design-taste-frontend/
│   └── SKILL.md
├── soft-taste-frontend/
│   └── SKILL.md
└── brutalist-taste-frontend/
    └── SKILL.md

用户级 Skill 在所有项目中生效。适合：个人的审美偏好系统、通用的前端设计规则、跨项目复用的约束集。

在 macOS/Linux 上路径是 ~/.agents/skills/，在 Windows 上是 C:\Users\<username>\.agents\skills\。

工具级（最低优先级）

部分 AI 工具自带内置 Skill。例如 Cursor 的内置规则、Copilot 的默认行为指令。这些你通常不需要修改。

优先级冲突

当三个层级的 Skill 存在冲突规则时（比如项目级说"用 Inter"，用户级说"禁止 Inter"），项目级胜出。规则是：

项目级 > 用户级 > 工具级

这在实际中很有用：你可以在用户级设置一套"通用高品质"Skill，然后在特定项目中用项目级 Skill 覆盖部分规则。

2.4 Skill 的内部结构：四个核心区块

以 design-taste-frontend（基座 Skill）为例，一个完整的 Skill 文件包含四个区块：

区块一：基准配置（Baseline Configuration）

## 1. ACTIVE BASELINE CONFIGURATION
* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic)
* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit)

这三个旋钮是量化的。AI 不是凭感觉调整"高端程度"——它读取具体数值并据此做决策。数值越高，偏离"默认/通用"越远。

每个 Skill 变体有不同的基准值：

Skill VARIANCE MOTION DENSITY
design-taste (基座) 8 6 4
soft-taste 5 4 3
minimalist-taste 3 2 7
brutalist-taste 9 3 8
gpt-taste 9 7 同基座

区块二：架构约束（Architecture Conventions）

这个区块定义技术栈和不可违反的工程规则：

## 2. DEFAULT ARCHITECTURE & CONVENTIONS
* Framework: React or Next.js, default Server Components
* Styling: Tailwind CSS (v3/v4), check version first
* Icons: @phosphor-icons/react or @radix-ui/react-icons
* ANTI-EMOJI POLICY: NEVER use emojis in code or text
* Viewport: NEVER use h-screen, ALWAYS use min-h-[100dvh]
* Grid: NEVER use flex percentage math, ALWAYS use CSS Grid

注意这里的措辞：NEVER、ALWAYS、MUST、BANNED。这不是建议——这是绝对约束。LLM 对大写加粗的绝对约束词的遵从度远高于柔性描述。

关键细节：DEPENDENCY VERIFICATION [MANDATORY] 要求 AI 在导入任何第三方库之前检查 package.json。这解决了一个常见问题——AI 生成代码时随意 import 不存在的库，导致编译失败。

区块三：设计工程指令（Design Directives）

这是 Skill 文件最长也最重要的部分。它包含了一系列编号规则，每条规则针对 AI 的一个具体统计偏差：

## 3. DESIGN ENGINEERING DIRECTIVES

Rule 1: Deterministic Typography
* ANTI-SLOP: Discourage Inter for "Premium" vibes. 
  Force Geist, Outfit, Cabinet Grotesk, or Satoshi.
* Serif fonts BANNED for Dashboard/Software UIs.

Rule 2: Color Calibration
* Max 1 Accent Color. Saturation < 80%.
* THE LILA BAN: "AI Purple/Blue" aesthetic BANNED.

Rule 3: Layout Diversification
* ANTI-CENTER BIAS: Centered Hero sections BANNED 
  when LAYOUT_VARIANCE > 4.

Rule 4: Materiality and Anti-Card Overuse
* For VISUAL_DENSITY > 7, generic card containers BANNED.
  Use border-t, divide-y, or negative space.

Rule 5: Interactive UI States
* MUST implement: Loading, Empty, Error, Tactile Feedback

Rule 6: Data & Form Patterns
* Label MUST sit above input. Error below.

注意规则的编号和命名。这不是随意写的——编号让 AI 在生成代码时可以精确引用和执行某条规则，命名让人类开发者可以快速定位和修改。

区块四：创意主动性（Anti-Slop Implementation）

这是最高级的区块——它不只是约束 AI"不要做什么"，还主动告诉 AI"要做这些高级技法"：

## 4. CREATIVE PROACTIVITY

* "Liquid Glass" Refraction: Beyond backdrop-blur. 
  Add 1px inner border (border-white/10) and 
  inner shadow for physical edge refraction.

* Magnetic Micro-physics (MOTION > 5): Buttons pull 
  toward cursor. CRITICAL: NEVER use useState for 
  continuous animations. Use useMotionValue only.

* Staggered Orchestration: Use staggerChildren for 
  sequential waterfall reveals. Parent and Children 
  MUST reside in identical Client Component tree.

这些是设计事务所级别的实现细节——不是"加个动画"，而是精确到 border-white/10 和 stiffness: 100, damping: 20 的专业规范。

2.5 从基座到变体：继承关系

所有 Taste Skill 都参考 design-taste-frontend 作为基座。变体 Skill（soft、minimalist、brutalist）的写法通常是：

  1. 覆盖基准配置的三个旋钮值
  2. 收窄规则范围——不是定义新规则，而是从基座中选择性强化部分规则
  3. 添加风格专属规则——基座没有的、只在该风格下有意义的规则
  4. 尾部引用：“Reference design-taste-frontend for comprehensive rules”
design-taste-frontend (基座 Skill)
    ├── soft-taste-frontend   覆盖旋钮 + 添加弹簧参数
    ├── minimalist-taste-frontend  覆盖旋钮 + 禁卡片规则
    ├── brutalist-taste-frontend   覆盖旋钮 + 无圆角规则
    └── gpt-taste-frontend   加强旋钮 + GSAP 要求

这种继承结构的好处是DRY（Don’t Repeat Yourself）。基座 Skill 包含所有通用规则（Emoji 禁令、Viewport 规范、依赖检查），变体 Skill 只需要写差异部分。

提示词模板：查看 Skill 的继承关系

在当前项目中，列出所有已加载的 Taste Skill 文件。
对每个 Skill，显示：
1. 三个旋钮的值
2. 相对于基座 Skill 的差异规则
3. 风格专属的独有规则

2.6 加载机制：AI 工具如何找到 Skill

不同的 AI 工具加载 Skill 的方式不同：

VS Code Agent Mode (Copilot)

项目根目录/.github/copilot-instructions.md   → 全局指令
项目根目录/.agents/skills/*/SKILL.md          → Skill 文件
用户目录/.agents/skills/*/SKILL.md            → 用户级 Skill

VS Code Agent Mode 会在对话开始时扫描这些位置，读取所有 SKILL.md 文件的 description，并根据用户的请求语义匹配决定加载哪些。

Cursor

项目根目录/.cursor/rules/*.md                 → 项目级规则
用户目录/.cursor/rules/*.md                   → 用户级规则

Cursor 的 Rules 系统和 SKILL.md 的概念相似，但格式稍有不同。你可以直接把 SKILL.md 的内容复制到 .cursor/rules/taste.md 中使用。

Claude (Anthropic)

项目根目录/.claude/                           → Claude 专属指令

Claude 的 Project Instructions 功能允许你在 claude.ai 的项目设置中直接粘贴 Skill 内容。

通用兼容方案

如果你的 AI 工具不支持自动加载 Skill 文件，可以用手动注入法：

在对话开始时发送：

"在这个项目中，我使用以下设计约束系统。
请在所有代码生成中遵守这些规则。"

[粘贴 SKILL.md 完整内容]

这比普通 prompt 的效果好——因为 Skill 文件本身就是为 LLM 优化的结构化约束，即使手动注入也比自然语言描述更有效。

2.7 实战：创建你的第一个 Skill 目录

在你的用户目录下创建 Skill 文件结构：

# macOS / Linux
mkdir -p ~/.agents/skills/design-taste-frontend
mkdir -p ~/.agents/skills/soft-taste-frontend

# Windows (PowerShell)
New-Item -ItemType Directory -Force `
  "$env:USERPROFILE\.agents\skills\design-taste-frontend"
New-Item -ItemType Directory -Force `
  "$env:USERPROFILE\.agents\skills\soft-taste-frontend"

将本书配套的 Skill 文件复制到对应目录。确认加载成功的方法：

在 AI 工具中输入：

"列出当前可用的所有 Skill 文件，
显示每个 Skill 的名称和描述。"

如果 AI 工具能正确列出你放置的 Skill 文件，说明加载成功。

本章小结

  1. SKILL.md 不是 prompt，而是持久约束系统——通过 YAML frontmatter 标识身份，通过分层规则结构控制 AI 的代码生成行为，自动加载、不会衰减
  2. 四个核心区块构成完整 Skill——基准配置（三个旋钮）→ 架构约束（技术栈和工程规则）→ 设计指令（编号规则体系）→ 创意主动性（高级技法注入）
  3. 继承体系减少重复——基座 Skill 定义通用规则，变体 Skill 只写差异，尾部引用基座作为 fallback

核心行动建议：在 ~/.agents/skills/ 目录下创建 design-taste-frontend 文件夹并放入基座 Skill 文件，然后在你的 AI 工具中验证是否能被识别。