前言：为什么 Skills 突然火了？
2026 年开年，AI 圈被一个概念刷屏了：Skills。
Claude、Cursor、Codex、Qoder、Kimi……几乎所有主流 AI 编程工具都在抢着支持 Skills。GitHub 上相关仓库三个月就拿到近 50K star。
这不是炒作，而是真的有用。
我自己的体验是：用 AI 生成了一个网站，整体还行，但有股浓浓的"AI 味"。然后从 Anthropic 的 GitHub 克隆了一个 frontend-design Skill，装到 Qoder 里。
一分钟后，网站设计质量直接上了一个台阶。
这就是 Skills 的魔力：把 Anthropic 团队内部的设计经验，直接复用到了我的项目里。
这篇文章会讲清楚三件事：
- Skills 到底是什么？和 Prompt、MCP 有什么区别？
- Skills 的工程架构是怎么设计的？
- Skills 的真实价值在哪里？
第一部分：理解 Skills 的本质
1.1 什么是 Skills？
用一句话说：
Skill 是一个可复用的专家知识包，把判断逻辑、执行 SOP、必要工具打包成一个模块，让 AI 可以按预设方式执行任务。
换个更直观的比喻：Skill 就像给 Agent 准备的工作交接 SOP 大礼包。
想象你要把工作交给新同事，只能靠文档交接（而且希望一次性交接完，以后别再问），你会准备什么？
- 任务的执行 SOP 与必要背景知识
- 工具的使用说明
- 要用到的模板、素材
- 可能遇到的问题、规范、解决方案
Skill 的设计架构，几乎就是这个交接大礼包的数字版本。
看一个真实的 Skill 目录：
vue-skills/
├── SKILL.md # 核心指令文档（必需）
├── scripts/ # 可执行脚本（可选）
│ ├── check-composition-api.ts
│ └── check-reactivity.ts
├── references/ # 参考文档（可选）
│ └── vue3-best-practices.md
└── assets/ # 资源文件（可选）
└── eslintrc.json- SKILL.md 告诉 AI "什么时候用"、"怎么一步步执行"
- scripts/ 提供可直接执行的脚本，AI 不需要临时写代码
- references/ 放技术规范，AI 遇到复杂问题时查阅
- assets/ 放配置文件、模板等资源
1.2 Skills vs Prompt vs MCP
很多人会问：Skills 不就是保存 Prompt 的地方吗？和 MCP 有什么区别？
| 维度 | Prompt | MCP | Skills |
|---|---|---|---|
| 本质 | 一次性指令 | 工具协议 | 能力模块 |
| 告诉 AI | 干什么 | 能做什么 | 怎么做 |
| 可复用性 | ❌ 低 | ✅ 高 | ✅✅ 极高 |
| 包含内容 | 文本指令 | API 接口 | 指令+工具+知识+资源 |
用一个场景说明：
场景：Vue 组件代码审查
用 Prompt：
你：帮我审查这个 Vue 组件
AI：好的，请提供代码
你：[粘贴代码]
AI：这个组件有以下问题...
你：我们团队规范是必须用 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，能：
- 引导用户上传个人记忆文档
- 智能切分笔记，构建向量数据库
- 解析用户记忆，提炼个性化画像
- 在对话中智能检索记忆，提供懂你的回应
这个 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 → 详细说明
第二部分：Skills 的工程架构
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 | 元数据 | ~100B | 系统启动时 |
| Level 2 | SKILL.md | ~2-5KB | LLM 调用 Skill 时 |
| Level 3 | Scripts/References | ~10-100KB | 执行脚本时 |
Level 1：元数据
---
name: vue-skills
description: |
Vue 3 开发最佳实践。当需要编写或审查 Vue 组件时使用。
---Level 2：完整指令
# Vue 3 开发最佳实践
## 核心规则
1. 必须使用 Composition API
2. 优先使用 VueUse 组合式函数
3. 避免解构 reactive 对象
## 常见问题
### 问题 1：解构 reactive 对象
❌ 错误：const { count } = reactive({ count: 0 })
✅ 正确：const { count } = toRefs(reactive({ count: 0 }))Level 3：资源文件
scripts/、references/、assets/ 目录下的文件，按需动态加载。
关键点：脚本代码不进 Context Window
脚本只在 Sandbox 中执行，不进 LLM 上下文。LLM 只需要知道"如何调用"，不需要知道"如何实现"。
效果对比：
假设 50 个 Skills：
| 方式 | Token 消耗 |
|---|---|
| 全量加载 | 5255KB |
| 渐进式披露 | 60KB |
Token 消耗降低了 98%！
2.3 Redis 存储与实时更新
Skills 的元数据和文件内容推荐用 Redis 存储。
为什么选 Redis？
- 极快的读写速度（内存存储）
- 天然的分布式支持
- 内置 Pub/Sub（完美支持实时更新）
数据结构：
skills:vue-skills:v4
├─ SKILL.md: "..."
├─ scripts/check-composition-api.ts: "..."
skills:vue-skills:current_version → "4"TypeScript 示例：
import Redis from 'ioredis'
const redis = new Redis()
// 存储 Skill
async function storeSkill(name: string, version: string, files: Record<string, string>) {
const key = `skills:${name}:${version}`
for (const [filename, content] of Object.entries(files)) {
await redis.hset(key, filename, content)
}
await redis.set(`skills:${name}:current_version`, version)
}
// 读取 Skill
async function loadSkill(name: string): Promise<string> {
const version = await redis.get(`skills:${name}:current_version`)
const skillMd = await redis.hget(`skills:${name}:${version}`, 'SKILL.md')
return skillMd || ''
}Redis Pub/Sub 实时更新：
class SkillSubscriber {
private redis = new Redis()
private cache = new Map()
constructor() {
this.redis.subscribe('skills:updates')
this.redis.on('message', (channel, skillName) => {
console.log(`Skill ${skillName} 已更新，清除缓存`)
this.cache.delete(skillName)
})
}
}延迟 < 10ms，基本实现实时更新。
2.4 版本锁定与对话一致性
核心原则：一个对话使用一致的 Skills 版本。
对话开始 → 锁定版本（v4）→ Run Loop（始终用 v4）→ 对话结束即使中途 Skills 更新到 v5，当前对话仍使用 v4，保证行为可预测。新对话则会使用最新的 v5。
TypeScript 实现：
class Conversation {
private skillVersions: Record<string, string> = {}
async loadSkill(skillName: string): Promise<string> {
let version: string
if (this.skillVersions[skillName]) {
version = this.skillVersions[skillName]
console.log(`使用锁定版本: ${skillName} v${version}`)
} else {
version = await redis.get(`skills:${skillName}:current_version`)
this.skillVersions[skillName] = version
console.log(`锁定版本: ${skillName} v${version}`)
}
return await redis.hget(`skills:${skillName}:${version}`, 'SKILL.md')
}
}第三部分：Skills 的真实价值
3.1 三大核心优势
1. 零代码、自然语言编写
Anthropic 的 brand-guidelines Skill，只有一个 SKILL.md，纯自然语言：
---
name: brand-guidelines
description: Anthropic 品牌设计规范。当设计网站、海报、PPT 时使用。
---
# Anthropic 品牌设计规范
## 色彩
- 主色：#D97757（珊瑚橙）
- 辅助色：#1E1E1E（深灰）
## 字体
- 标题：Tiempos Headline
- 正文：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：vue-skills 实战 - 规范化 Vue 3 开发
GitHub： https://github.com/vuejs-ai/skills
这是 Vue.js 官方团队维护的 Skills 仓库，包含 Vue 3 开发的最佳实践。
使用场景：
你在写一个 Vue 3 组件，希望 AI 能按照 Vue 3 最佳实践来开发。
安装：
# 克隆到本地
git clone https://github.com/vuejs-ai/skills.git ~/.qoder/skills/vue-skills使用：
> 帮我写一个用户列表组件，要符合 Vue 3 最佳实践AI 会自动：
- 使用
<script setup>语法 - 使用 TypeScript 定义类型
- 优先使用 VueUse 组合式函数
- 避免常见的响应式陷阱
生成的代码：
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useFetch } from '@vueuse/core'
interface User {
id: number
name: string
email: string
}
// 使用 VueUse 的 useFetch
const { data: users, isFetching } = useFetch<User[]>('/api/users').json()
// 搜索功能
const searchQuery = ref('')
const filteredUsers = computed(() => {
if (!users.value) return []
return users.value.filter(user =>
user.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})
</script>
<template>
<div class="user-list">
<input v-model="searchQuery" placeholder="搜索用户..." />
<div v-if="isFetching">加载中...</div>
<ul v-else>
<li v-for="user in filteredUsers" :key="user.id">
{{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
</template>Skill 的价值：
- 自动使用 Composition API
- 自动使用 VueUse（避免重复造轮子）
- 自动处理响应式数据
- 代码符合 Vue 3 最佳实践
案例 2：react-best-practices 实战 - 性能优化
GitHub： https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices
这是 Vercel 工程团队的 React/Next.js 性能优化指南，包含 40+ 分级规则。
使用场景：
你的 React 应用加载很慢，希望 AI 帮你优化性能。
使用：
> 帮我优化这个 React 组件的性能AI 会自动检查：
- 是否有请求瀑布
- 包体积是否过大
- 是否可以用 Server Components
优化前：
'use client'
import { useEffect, useState } from 'react'
export default function Dashboard() {
const [user, setUser] = useState(null)
const [posts, setPosts] = useState([])
useEffect(() => {
// 请求瀑布：先获取 user，再获取 posts
fetch('/api/user').then(res => res.json()).then(data => {
setUser(data)
fetch(`/api/posts?userId=${data.id}`)
.then(res => res.json())
.then(setPosts)
})
}, [])
return <div>...</div>
}优化后：
// Server Component（无需 'use client'）
export default async function Dashboard() {
// 并行获取数据，消除请求瀑布
const [user, posts] = await Promise.all([
fetch('/api/user').then(res => res.json()),
fetch('/api/posts').then(res => res.json())
])
return <div>...</div>
}优化效果：
| 指标 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 加载时间 | 2.5s | 0.8s | ⬆️ 3.1x |
| 包体积 | 180KB | 95KB | ⬇️ 47% |
Skill 的价值：
- 自动识别性能问题
- 提供完整的优化代码
- 遵循 React 最佳实践
3.3 对 AI 产品设计的影响
Skills 不仅是技术实现，更会深刻影响 AI 产品的设计理念。
未来趋势：AI Native 产品
拿笔记类 APP 举例，传统逻辑是：
新笔记 -> 代码 -> 直接入库但 AI Native 式的笔记 APP 可能会内置一些 Skill：笔记入库、智能纠错、冗余笔记合并等。
当用户写新笔记时，AI 快速判断：
- 能不能直接入库？
- 要不要智能纠错？
- 有没有冗余的历史笔记需要合并？
每种情况，都由 Agent 拿着 Skills 自动匹配处理。
这样 Skills-based 的 Agent 产品，就能：
- ✅ 用同一个输入框，处理各种不同的输入
- ✅ 灵活应对未被规划的边缘问题
- ✅ 为用户提供绝对个性化的生成需求
总结：Skills 是垂直 Agent 的未来态
核心要点
Skills 是什么？
- 可复用的专家知识包
- 把判断逻辑、执行 SOP、工具打包成模块
Skills vs Prompt vs MCP
- Prompt：告诉 AI "干什么"
- MCP：让 AI "能做什么"
- Skills：教 AI "怎么做"
工程架构
- 元工具模式：100 个 Skills = 1 个工具
- 渐进式披露：Token 消耗降低 98%
- Redis 存储：实时更新，版本锁定
真实价值
- 零代码、自然语言编写
- 突破预设限制
- 多 Skills 自由联用
为什么 Skills 的价值被低估？
很多人把 Skills 看作"Prompt 的保存工具"，但实际上：
Skills 是一种全新的 AI 应用开发范式。
它让我们可以：
- 巧借通用 Agent 内核，无需从零开发
- 只关注 Skills 设计，用自然语言描述知识和流程
- 低成本创造具有通用 AI 智能上限的垂直 Agent 应用
这对 Agent 创业者和领域专家来说，意味着很多新机会。
下篇预告
下篇文章将深入探讨：
- 如何使用 Skills？（Claude Code、Qoder IDE 完整教程）
- 如何编写高质量的 Skills？（从 skill-creator 到最佳实践）
- 前端开发类 Skills 实战（vue-skills、react-skills）
参考资料
- 本文链接：https://fridolph.top/posts/2026-01-28__ai-skills-1
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
