【自学AI】01 AI Agent Skills 深度解析（上）：从概念到架构

1.1 什么是 Skills？#

用一句话说：

Skill 是一个可复用的专家知识包，把判断逻辑、执行 SOP、必要工具打包成一个模块，让 AI 可以按预设方式执行任务。

换个更直观的比喻：Skill 就像给 Agent 准备的工作交接 SOP 大礼包。

想象你要把工作交给新同事，只能靠文档交接（而且希望一次性交接完，以后别再问），你会准备什么？

1. 任务的执行 SOP 与必要背景知识
2. 工具的使用说明
3. 要用到的模板、素材
4. 可能遇到的问题、规范、解决方案

Skill 的设计架构，几乎就是这个交接大礼包的数字版本。

看一个真实的 Skill 目录：

1
vue-skills/
2
├── SKILL.md          # 核心指令文档（必需）
3
├── scripts/          # 可执行脚本（可选）
4
│   ├── check-composition-api.ts
5
│   └── check-reactivity.ts
6
├── references/       # 参考文档（可选）
7
│   └── vue3-best-practices.md
8
└── assets/           # 资源文件（可选）
9
    └── eslintrc.json

• SKILL.md 告诉 AI “什么时候用”、“怎么一步步执行”
• scripts/ 提供可直接执行的脚本，AI 不需要临时写代码
• references/ 放技术规范，AI 遇到复杂问题时查阅
• assets/ 放配置文件、模板等资源

1.2 Skills vs Prompt vs MCP#

很多人会问：Skills 不就是保存 Prompt 的地方吗？和 MCP 有什么区别？

用一个场景说明：

场景：Vue 组件代码审查

用 Prompt：

1
你：帮我审查这个 Vue 组件
2
AI：好的，请提供代码
3
你：[粘贴代码]
4
AI：这个组件有以下问题...
5
你：我们团队规范是必须用 Composition API

每次都要从头解释，效率低。

用 MCP： MCP 提供工具：read_file()、run_eslint()、check_types() 但 AI 不知道什么时候该用哪个，还是需要你指挥。

用 Skills： 创建一个 vue-skills Skill，写清楚团队的 Vue 3 规范、常见问题、审查流程。

现在只需要说：“帮我审查这个 Vue 组件”，AI 就会自动按 Skill 里的流程执行。

三者的协同关系：

一句话总结：

• Prompt 告诉 AI “干什么”
• MCP 让 AI “能做什么”
• Skills 教 AI “怎么做”

1.3 Skills 的核心价值#

Skills 的核心价值：把隐性经验变成显性文档，让 AI 可以反复执行。

场景 1：团队协作规范

我们公司每天早上要在群里同步 Todo List。我的要求是要具体，不是写”今天处理用户反馈”，而是”上午 10 点前回复 3 个工单，优先付费用户”。

每次来新人，我都要教一次。

现在创建一个 daily-todo Skill，新人只需要说”帮我写今天的 todo”，AI 就会自动按规范生成。

场景 2：个性化 AI 伴侣

有开发者创建了 AI-Partner Skill，能：

1. 引导用户上传个人记忆文档
2. 智能切分笔记，构建向量数据库
3. 解析用户记忆，提炼个性化画像
4. 在对话中智能检索记忆，提供懂你的回应

这个 Skill 的智能效果，完全媲美一个完整的 AI 产品。

而开发者只需要：写一个 SKILL.md、提供一些脚本、准备一些模板。

零代码，就创造了一个具有通用 AI 智能上限的垂直 Agent 应用。

1.4 Skills 的分类#

根据 Anthropic 官方建议，Skills 可分为 4 种类型：

1. Workflow-based（流程型）

• 适用：有固定顺序的任务
• 结构：Overview → Workflow → Step 1 → Step 2

2. Task-based（任务菜单型）

• 适用：同一领域多种操作
• 结构：Overview → Quick start → Task 1 → Task 2

3. Reference / Guidelines（规范型）

• 适用：品牌规范、代码风格
• 结构：Overview → Guidelines → Specifications

4. Capabilities-based（能力清单型）

• 适用：综合性系统能力
• 结构：Overview → Core capabilities → 详细说明

2.1 元工具模式（Meta-Tool Pattern）#

问题： 假设你有 100 个 Skills，难道要给 LLM 喂 100 个工具定义吗？

显然不行。工具列表太长，LLM 会选择困难，Token 消耗也巨大。

解决方案：元工具模式

100 个 Skills = 1 个 Skill 工具（元工具）

这个”元工具”像一个 Skills 的总开关。LLM 只需要知道怎么调用这个总开关，然后告诉它想用哪个具体的 Skill。

优势：

• ✅ 避免工具列表爆炸
• ✅ 统一管理所有 Skills
• ✅ 实现动态加载
• ✅ Token 消耗大幅降低

2.2 渐进式披露（Progressive Disclosure）#

问题： 一个 Skill 可能包含几 KB 的文档、几十 KB 的脚本、几百 KB 的参考资料。全塞进上下文，Token 消耗太大。

解决方案：渐进式披露

按需、分级加载。只在必要时，才加载必要的内容。

三级加载机制：

Level 1：元数据

1
---
2
name: vue-skills
3
description: |
4
  Vue 3 开发最佳实践。当需要编写或审查 Vue 组件时使用。
5
---

Level 2：完整指令

1
# Vue 3 开发最佳实践
2

3
## 核心规则
4
1. 必须使用 Composition API
5
2. 优先使用 VueUse 组合式函数
6
3. 避免解构 reactive 对象
7

8
## 常见问题
9
### 问题 1：解构 reactive 对象
10
❌ 错误：const { count } = reactive({ count: 0 })
11
✅ 正确：const { count } = toRefs(reactive({ count: 0 }))

Level 3：资源文件

scripts/、references/、assets/ 目录下的文件，按需动态加载。

关键点：脚本代码不进 Context Window

脚本只在 Sandbox 中执行，不进 LLM 上下文。LLM 只需要知道”如何调用”，不需要知道”如何实现”。

效果对比：

假设 50 个 Skills：

Token 消耗降低了 98%！

2.3 Redis 存储与实时更新#

Skills 的元数据和文件内容推荐用 Redis 存储。

为什么选 Redis？

• 极快的读写速度（内存存储）
• 天然的分布式支持
• 内置 Pub/Sub（完美支持实时更新）

数据结构：

1
skills:vue-skills:v4
2
  ├─ SKILL.md: "..."
3
  ├─ scripts/check-composition-api.ts: "..."
4

5
skills:vue-skills:current_version → "4"

TypeScript 示例：

1
import Redis from 'ioredis'
2

3
const redis = new Redis()
4

5
// 存储 Skill
6
async function storeSkill(name: string, version: string, files: Record<string, string>) {
7
  const key = `skills:${name}:${version}`
8
  for (const [filename, content] of Object.entries(files)) {
9
    await redis.hset(key, filename, content)
10
  }
11
  await redis.set(`skills:${name}:current_version`, version)
12
}
13

14
// 读取 Skill
15
async function loadSkill(name: string): Promise<string> {
16
  const version = await redis.get(`skills:${name}:current_version`)
17
  const skillMd = await redis.hget(`skills:${name}:${version}`, 'SKILL.md')
18
  return skillMd || ''
19
}

Redis Pub/Sub 实时更新：

1
class SkillSubscriber {
2
  private redis = new Redis()
3
  private cache = new Map()
4

5
  constructor() {
6
    this.redis.subscribe('skills:updates')
7
    this.redis.on('message', (channel, skillName) => {
8
      console.log(`Skill ${skillName} 已更新，清除缓存`)
9
      this.cache.delete(skillName)
10
    })
11
  }
12
}

延迟 < 10ms，基本实现实时更新。

2.4 版本锁定与对话一致性#

核心原则：一个对话使用一致的 Skills 版本。

1
对话开始 → 锁定版本（v4）→ Run Loop（始终用 v4）→ 对话结束

即使中途 Skills 更新到 v5，当前对话仍使用 v4，保证行为可预测。新对话则会使用最新的 v5。

TypeScript 实现：

1
class Conversation {
2
  private skillVersions: Record<string, string> = {}
3

4
  async loadSkill(skillName: string): Promise<string> {
5
    let version: string
6

7
    if (this.skillVersions[skillName]) {
8
      version = this.skillVersions[skillName]
9
      console.log(`使用锁定版本: ${skillName} v${version}`)
10
    } else {
11
      version = await redis.get(`skills:${skillName}:current_version`)
12
      this.skillVersions[skillName] = version
13
      console.log(`锁定版本: ${skillName} v${version}`)
14
    }
15

16
    return await redis.hget(`skills:${skillName}:${version}`, 'SKILL.md')
17
  }
18
}

3.1 三大核心优势#

1. 零代码、自然语言编写

Anthropic 的 brand-guidelines Skill，只有一个 SKILL.md，纯自然语言：

1
---
2
name: brand-guidelines
3
description: Anthropic 品牌设计规范。当设计网站、海报、PPT 时使用。
4
---
5

6
# Anthropic 品牌设计规范
7

8
## 色彩
9
- 主色：#D97757（珊瑚橙）
10
- 辅助色：#1E1E1E（深灰）
11

12
## 字体
13
- 标题：Tiempos Headline
14
- 正文：ABC Favorit

但足以引导 Agent 变成符合 Anthropic 品牌设计的垂直 Agent。

2. 突破预设限制

Workflow 或传统程序假设所有情况都能预设。但现实是：

• 用户上传的文件格式不符合预期
• 数据字段缺失
• 出现预设之外的边缘情况

这时 Workflow 就卡住了，只能报错。

而通用 Agent + Skill 的运作方式完全不同：

• ✅ 能在统一对话框接收各类数据（文本、文件、图片）
• ✅ 能自主调用其他 Skill，或即时编写脚本转换格式
• ✅ 能基于 LLM 推理智能，弥合边缘问题

3. 多 Skills 自由联用

• 联用 brand-guidelines + pptx，自动制作符合品牌规范的 PPT
• 联用 vue-skills + frontend-design，写出高质量的 Vue 组件

每多一个 Skill，就多一种能力。N 个 Skill 可以应对远超 N 的应用场景。

3.2 真实案例展示#

1
# 克隆到本地
2
git clone https://github.com/vuejs-ai/skills.git ~/.qoder/skills/vue-skills

1
> 帮我写一个用户列表组件，要符合 Vue 3 最佳实践

1
<script setup lang="ts">
2
import { ref, computed } from 'vue'
3
import { useFetch } from '@vueuse/core'
4

5
interface User {
6
  id: number
7
  name: string
8
  email: string
9
}
10

11
// 使用 VueUse 的 useFetch
12
const { data: users, isFetching } = useFetch<User[]>('/api/users').json()
13

14
// 搜索功能
15
const searchQuery = ref('')
16
const filteredUsers = computed(() => {
17
  if (!users.value) return []
18
  return users.value.filter(user =>
19
    user.name.toLowerCase().includes(searchQuery.value.toLowerCase())
20
  )
21
})
22
</script>
23

24
<template>
25
  <div class="user-list">
26
    <input v-model="searchQuery" placeholder="搜索用户..." />
27

28
    <div v-if="isFetching">加载中...</div>
29

30
    <ul v-else>
31
      <li v-for="user in filteredUsers" :key="user.id">
32
        {{ user.name }} - {{ user.email }}
33
      </li>
34
    </ul>
35
  </div>
36
</template>

1
> 帮我优化这个 React 组件的性能

1
'use client'
2
import { useEffect, useState } from 'react'
3

4
export default function Dashboard() {
5
  const [user, setUser] = useState(null)
6
  const [posts, setPosts] = useState([])
7

8
  useEffect(() => {
9
    // 请求瀑布：先获取 user，再获取 posts
10
    fetch('/api/user').then(res => res.json()).then(data => {
11
      setUser(data)
12
      fetch(`/api/posts?userId=${data.id}`)
13
        .then(res => res.json())
14
        .then(setPosts)
15
    })
16
  }, [])
17

18
  return <div>...</div>
19
}

1
// Server Component（无需 'use client'）
2
export default async function Dashboard() {
3
  // 并行获取数据，消除请求瀑布
4
  const [user, posts] = await Promise.all([
5
    fetch('/api/user').then(res => res.json()),
6
    fetch('/api/posts').then(res => res.json())
7
  ])
8

9
  return <div>...</div>
10
}

3.3 对 AI 产品设计的影响#

Skills 不仅是技术实现，更会深刻影响 AI 产品的设计理念。

未来趋势：AI Native 产品

拿笔记类 APP 举例，传统逻辑是：

1
新笔记 -> 代码 -> 直接入库

但 AI Native 式的笔记 APP 可能会内置一些 Skill：笔记入库、智能纠错、冗余笔记合并等。

当用户写新笔记时，AI 快速判断：

• 能不能直接入库？
• 要不要智能纠错？
• 有没有冗余的历史笔记需要合并？

每种情况，都由 Agent 拿着 Skills 自动匹配处理。

这样 Skills-based 的 Agent 产品，就能：

• ✅ 用同一个输入框，处理各种不同的输入
• ✅ 灵活应对未被规划的边缘问题
• ✅ 为用户提供绝对个性化的生成需求

核心要点#

1. Skills 是什么？

   • 可复用的专家知识包
   • 把判断逻辑、执行 SOP、工具打包成模块

2. Skills vs Prompt vs MCP

   • Prompt：告诉 AI “干什么”
   • MCP：让 AI “能做什么”
   • Skills：教 AI “怎么做”

3. 工程架构

   • 元工具模式：100 个 Skills = 1 个工具
   • 渐进式披露：Token 消耗降低 98%
   • Redis 存储：实时更新，版本锁定

4. 真实价值

   • 零代码、自然语言编写
   • 突破预设限制
   • 多 Skills 自由联用

为什么 Skills 的价值被低估？#

很多人把 Skills 看作”Prompt 的保存工具”，但实际上：

Skills 是一种全新的 AI 应用开发范式。

它让我们可以：

• 巧借通用 Agent 内核，无需从零开发
• 只关注 Skills 设计，用自然语言描述知识和流程
• 低成本创造具有通用 AI 智能上限的垂直 Agent 应用

这对 Agent 创业者和领域专家来说，意味着很多新机会。

下篇预告#

下篇文章将深入探讨：

• 如何使用 Skills？（Claude Code、Qoder IDE 完整教程）
• 如何编写高质量的 Skills？（从 skill-creator 到最佳实践）
• 前端开发类 Skills 实战（vue-skills、react-skills）