Anthropic在几天前发布了Claude Skills（智能体技能）功能，这项新特性在某种程度上比Model Context Protocol（MCP）更具实用价值。Claude Skills允许开发者为Claude Code提供定制化的技能包，使其能够理解和使用未曾接触过的开发框架和工具包。

本教程将通过一个完整的实战案例——构建企业级智能客服系统——来演示Claude Skills的核心使用方法。这个系统包含Next.js前端、Clerk用户认证以及基于Google Agent Development Kit（ADK）的多智能体框架。

通过本教程，读者将掌握如何创建自定义技能、将新技术框架文档转化为Claude可用的知识库，以及构建完整的生产级应用。希望对你有所启发。

PART 01 Claude Skills核心概念：超越MCP的渐进式知识加载

1.1 什么是Agent Skills

Agent Skills是Claude Code的一项新功能，它允许开发者将特定技术框架或工具的文档打包成"技能包"，供Claude在开发过程中动态加载和使用。与传统的将所有文档一次性塞入上下文窗口的方式不同，Agent Skills采用渐进式加载机制。

核心特点：

按需加载

：只在需要时加载相关文档片段
层次化结构

：通过目录结构组织知识
智能检索

：Claude能够根据任务需求自主查找相关文档
持久化知识

：技能包可复用，无需重复提供相同文档

1.2 Agent Skills vs MCP vs Sub-agents

三种技术的核心区别：

维度	Agent Skills	MCP	Sub-agents
知识加载方式	渐进式、按需加载	一次性工具注册	独立上下文窗口
上下文占用	极小（动态加载）	中等（工具定义）	大（完整上下文）
使用场景	学习新框架文档	调用外部工具/API	并行执行任务
学习能力	高（类似人类阅读文档）	低（固定工具调用）	中（预设指令）

为什么Agent Skills更重要：

传统的MCP如Context7虽然能查询最新文档，但只是"检索"功能——Claude可以看到文档内容，但不一定能深度理解如何使用。而Agent Skills通过结构化的知识组织和渐进式学习，让Claude真正"理解"一个框架的使用方法，类似人类开发者阅读技术文档的过程。

1.3 渐进式知识加载的工作原理

Agent Skills采用层次化的文档结构：

skill-name/
├── SKILL.md              # 技能概述和快速入门
├── references/           # 详细API参考文档
│   ├── core-concepts.md
│   ├── api-reference.md
│   └── advanced-topics.md
├── examples/             # 实战代码示例
│   ├── basic-usage.py
│   └── advanced-features.py
└── development/          # 开发指南
    ├── setup.md
    └── best-practices.md

加载流程：

Claude首先读取SKILL.md了解框架概况
根据任务需求，查询references/中的相关文档
参考examples/中的代码示例
遵循development/中的最佳实践

这种方式避免了一次性加载所有文档导致的上下文污染，同时保证了知识获取的精准性。

PART 02 创建自定义Agent Skill：以Google ADK为例

2.1 项目需求与技术选型

项目目标：

构建一个电商客服系统，支持：

产品信息查询（价格、库存）
订单管理（查询、退货）
客户信息检索
多客服代表独立登录

技术栈：

前端

：Next.js
认证

：Clerk（支持Gmail OAuth）
多智能体框架

：Google Agent Development Kit (ADK)
AI模型

：Gemini 2.5 Flash

为什么选择ADK：

ADK是Google推出的多智能体开发框架，支持并行和顺序智能体编排。但Claude Code默认不了解ADK的使用方法，因此需要创建自定义技能。

2.2 准备ADK文档

步骤1：下载官方文档

访问ADK官方文档网站，下载所有HTML格式的文档文件。通常包括：

概述和架构说明
Python SDK文档
Java SDK文档
API参考
示例代码

步骤2：组织文档结构

将下载的文档按照以下结构整理：

adk-docs/
├── overview.html
├── quickstart/
│   ├── python-quickstart.html
│   └── java-quickstart.html
├── core-concepts/
│   ├── agents.html
│   ├── tools.html
│   └── orchestration.html
├── api-reference/
│   ├── agent-api.html
│   └── tool-api.html
└── examples/
    ├── basic-agent.html
    └── multi-agent-system.html

步骤3：打包为ZIP文件

将整理好的文档打包成adk-documentation.zip，准备提供给Claude。

2.3 使用Skill Creator创建技能

Claude Code内置了一个特殊的"Skill Creator"技能，专门用于从文档创建新技能。

操作步骤： 1. 上传文档包

在Claude Code中，找到Skill Creator功能，上传准备好的adk-documentation.zip文件。

2. 提供上下文描述

这是Google Agent Development Kit (ADK)的完整文档。
ADK是一个多智能体开发框架，支持：
- 创建单个和多个智能体
- 并行和顺序智能体编排
- 工具定义和调用
- 与Google AI模型集成

请基于这些文档创建一个技能包，使Claude能够使用ADK构建多智能体系统。

3. 技能生成过程

Skill Creator会执行以下步骤：

解压ZIP文件
分析文档结构（识别HTML层级）
提取核心概念和API定义
生成SKILL.md（快速入门指南）
创建references/目录（详细文档）
生成examples/目录（代码示例）
打包成新的技能ZIP文件

生成时间：通常需要2-5分钟，取决于文档规模。

2.4 技能包结构解析

生成的技能包包含以下内容：

SKILL.md（主文件）：

# Google ADK Skill## OverviewGoogle Agent Development Kit (ADK) is a framework for building multi-agent AI systems with orchestration capabilities.## Quick Start### Python```pythonfrom google.adk import Agent, Tool# Create a basic agentagent = Agent(    name="support_agent",    model="gemini-2.5-flash",    tools=[search_tool, order_tool])```### Java```javaAgent agent = Agent.builder()    .name("support_agent")    .model("gemini-2.5-flash")    .tools(searchTool, orderTool)    .build();```## Core Concepts- Agents: AI entities that can use tools- Tools: Functions agents can call- Orchestration: Sequential and parallel execution

references/（参考文档）：

agent-creation.md

：智能体创建详解
tool-definition.md

：工具定义规范
orchestration-patterns.md

：编排模式
error-handling.md

：错误处理

examples/（代码示例）：

basic-agent.py

：基础智能体示例
multi-agent-parallel.py

：并行智能体
multi-agent-sequential.py

：顺序智能体
custom-tools.py

：自定义工具

2.5 安装技能到项目

步骤1：创建技能目录结构

在项目根目录创建：

mkdir -p .claude/skills

步骤2：下载并解压技能包

将Skill Creator生成的ZIP文件下载，解压到：

.claude/skills/google-adk/
├── SKILL.md
├── references/
├── examples/
└── development/

步骤3：验证技能可用

在Claude Code中，技能会自动被识别。可以通过以下方式验证：

查看.claude/skills/目录
Claude Code会在启动时加载所有技能
可以在对话中要求Claude"查看可用的技能"

PART 03 使用ADK技能构建多智能体客服系统

3.1 项目初始化与需求说明

创建项目提示词：

帮我创建一个多智能体系统用于电商客服支持。
系统要求：

1. 使用Google ADK框架（参考我提供的ADK技能）
2. 创建模拟数据集，包括：
   - 产品信息（名称、价格、库存）
   - 客户数据
   - 订单记录

3. 客服功能：
   - 产品查询：查询产品价格和可用性
   - 订单管理：查询订单状态、处理退货
   - 客户信息：根据客户名称检索信息

4. 智能体编排：
   - 使用并行智能体处理独立查询
   - 使用顺序智能体处理复杂流程

5. 使用ADK UI界面进行测试

请先查看我提供的Google ADK技能文档，然后基于最佳实践实现。

Claude的执行过程：

读取技能文档

   [Claude] 正在查看Google ADK技能...
   [Claude] 已理解ADK框架的核心概念

规划实现

   [Claude] 计划创建以下组件：
   - 产品搜索工具
   - 订单查询工具
   - 客户查询工具
   - 退货处理工具
   - 主客服智能体（协调所有工具）

生成代码

Claude会创建项目结构并实现所有组件

3.2 核心代码实现解析

数据模型定义：

# customer_data.py
customers = [
    {
        "id": "C001",
        "name": "Michael Johnson",
        "email": "michael@example.com",
        "phone": "+1-555-0123"
    },
    {
        "id": "C002",
        "name": "Sarah Williams",
        "email": "sarah@example.com",
        "phone": "+1-555-0456"
    }
]

products = [
    {
        "id": "P001",
        "name": "Wireless Headphones",
        "price": 79.99,
        "stock": 150,
        "category": "Audio"
    },
    {
        "id": "P002",
        "name": "Samsung 1TB SSD",
        "price": 129.99,
        "stock": 85,
        "category": "Storage"
    }
]

orders = [
    {
        "id": "O001",
        "customer_id": "C001",
        "products": ["P001", "P002"],
        "total": 209.98,
        "status": "shipped",
        "date": "2025-10-20"
    }
]

工具定义：

# tools.py
from google.adk import Tool

# 产品搜索工具
product_search_tool = Tool(
    name="search_products",
    description="搜索产品信息，支持按名称、类别筛选",
    parameters={
        "query": {"type": "string", "description": "搜索关键词"},
        "category": {"type": "string", "description": "产品类别（可选）"}
    },
    function=search_products_handler
)

# 客户查询工具
customer_lookup_tool = Tool(
    name="find_customer",
    description="根据客户名称或ID查询客户信息",
    parameters={
        "customer_name": {"type": "string", "description": "客户姓名"},
        "customer_id": {"type": "string", "description": "客户ID（可选）"}
    },
    function=find_customer_handler
)

# 订单查询工具
order_lookup_tool = Tool(
    name="get_customer_orders",
    description="获取客户的所有订单",
    parameters={
        "customer_id": {"type": "string", "description": "客户ID"}
    },
    function=get_orders_handler
)

# 退货处理工具
return_tool = Tool(
    name="process_return",
    description="处理产品退货请求",
    parameters={
        "order_id": {"type": "string", "description": "订单ID"},
        "product_id": {"type": "string", "description": "产品ID"},
        "reason": {"type": "string", "description": "退货原因"}
    },
    function=process_return_handler
)

智能体创建：

# agent.py
from google.adk import Agent
from tools import *

customer_support_agent = Agent(
    name="Customer Support Agent",
    model="gemini-2.5-flash",
    system_instruction="""
    你是一个专业的电商客服智能体。
    你的职责包括：
    1. 帮助客户查询产品信息
    2. 查询订单状态
    3. 处理退货请求
    4. 提供专业、友好的服务

    使用可用的工具来获取准确信息。
    """,
    tools=[
        product_search_tool,
        customer_lookup_tool,
        order_lookup_tool,
        return_tool
    ]
)

ADK UI配置：

# app.py
from google.adk.ui import launch_ui

# 启动ADK UI界面
launch_ui(
    agents=[customer_support_agent],
    port=8080,
    title="电商客服系统"
)

3.3 系统测试与功能验证

测试场景1：产品查询

用户：你们有什么耳机产品？

智能体执行：
1. 调用 search_products(query="耳机")
2. 返回结果：
   - Wireless Headphones
   - 价格：$79.99
   - 库存：150台

智能体回复：
"我们目前有Wireless Headphones，价格为$79.99，
库存充足，有150台可售。"

测试场景2：客户订单查询

用户：查找名叫Michael的客户，他下过什么订单？

智能体执行：
1. 调用 find_customer(customer_name="Michael")
2. 找到客户 Michael Johnson (ID: C001)
3. 调用 get_customer_orders(customer_id="C001")
4. 获取订单信息

智能体回复：
"客户Michael Johnson（ID: C001）有1笔订单：
- 订单号：O001
- 购买产品：Wireless Headphones, Samsung 1TB SSD
- 总金额：$209.98
- 状态：已发货
- 日期：2025-10-20"

测试场景3：复杂查询（多工具协作）

用户：查询我们有哪些SSD？价格是多少？有客户买过吗？

智能体执行：
1. 调用 search_products(query="SSD")
   → 找到 Samsung 1TB SSD ($129.99)
2. 需要查询购买记录，但当前工具不支持按产品查订单
3. 智能体识别到工具限制，建议增强功能

智能体回复：
"我们有Samsung 1TB SSD，价格$129.99，库存85台。
关于购买记录，目前只能通过客户ID查询订单，
无法直接查询特定产品的购买历史。
建议开发团队添加'按产品ID查询订单'的工具。"

PART 04 添加用户认证：Clerk集成实战

4.1 为什么选择Clerk

Clerk是一个现代化的用户认证和管理平台，提供：

核心优势：

开箱即用

：无需从零编写认证逻辑
多种登录方式

：支持邮箱、Google、GitHub等
安全性

：内置安全最佳实践
用户管理

：完整的用户管理Dashboard
免费套餐

：慷慨的免费额度，适合初创项目

适用场景：

需要快速上线的MVP项目
多客服代表独立登录的SaaS应用
需要与Supabase等数据库集成的系统

4.2 Clerk账户设置

步骤1：创建Clerk账户

访问 https://clerk.com 注册账户。

步骤2：创建新应用

在Dashboard中点击"Create Application"：

应用名称

：agent-customer-support-v2
登录选项

：- ✅ Email（邮箱登录） – ✅ Google（Google OAuth） – 可选：GitHub、Microsoft等

步骤3：获取API密钥

创建成功后，复制以下密钥：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

步骤4：配置环境变量

在项目根目录创建.env.local文件：

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

# ADK Configuration
GOOGLE_API_KEY=your_google_api_key

4.3 Clerk官方集成提示词

Clerk提供了一个优化过的提示词，包含完整的集成指南。这个提示词的设计理念与Agent Skills类似——提供结构化的文档让AI理解。

获取集成提示词：

在Clerk Dashboard中，找到"Framework Integration"部分，选择"Next.js"，复制提供的提示词。

提示词内容结构（简化版）：

# Clerk + Next.js集成指南

## 安装依赖
npm install @clerk/nextjs

## 配置Middleware
创建 middleware.ts，配置保护路由

## 环境变量
在 .env.local 添加Clerk密钥

## 布局配置
使用 ClerkProvider 包裹应用

## 认证组件
- SignIn: 登录页面
- SignUp: 注册页面
- UserButton: 用户菜单
- SignOutButton: 登出按钮

## API路由保护
使用 auth() 获取当前用户

## 注意事项
- 不要将密钥提交到Git
- 在生产环境使用环境变量
- 配置重定向URL

提供给Claude的完整指令：

我需要为现有的Next.js应用添加Clerk认证。

集成要求：
1. 安装Clerk SDK
2. 配置环境变量（已在.env.local中）
3. 创建middleware保护路由
4. 添加登录/登出功能
5. 在主页面显示用户信息

具体实现：
- 登录页面：/sign-in
- 注册页面：/sign-up
- 主应用：/dashboard（需要登录）
- 用户按钮：显示在dashboard右上角

请遵循Clerk官方最佳实践：
[粘贴Clerk提供的完整集成提示词]

当前项目结构：
/app
  /api
  /dashboard
  /page.tsx

4.4 Next.js + Clerk集成实现

Middleware配置：

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/api/adk(.*)'
])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

布局组件：

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
      <html lang="zh">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

Dashboard页面：

// app/dashboard/page.tsx
import { UserButton, auth } from '@clerk/nextjs'
import { redirect } from 'next/navigation'
import CustomerSupportUI from '@/components/CustomerSupportUI'

export default async function DashboardPage() {
  const { userId } = await auth()

  if (!userId) {
    redirect('/sign-in')
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 顶部导航栏 */}
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold">客服工作台</h1>
          <UserButton afterSignOutUrl="/" />
        </div>
      </header>

      {/* 主内容区 */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        <CustomerSupportUI />
      </main>
    </div>
  )
}

登录页面：

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs'

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignIn 
        appearance={{
          elements: {
            rootBox: "mx-auto",
            card: "shadow-lg"
          }
        }}
      />
    </div>
  )
}

4.5 集成ADK与Clerk

API路由实现：

// app/api/adk/chat/route.ts
import { auth } from '@clerk/nextjs'
import { NextRequest, NextResponse } from 'next/server'
import { getAgentForUser, sendMessage } from '@/lib/adk-client'

export async function POST(req: NextRequest) {
  // 验证用户身份
  const { userId } = await auth()

  if (!userId) {
    return NextResponse.json(
      { error: 'Unauthorized' },
      { status: 401 }
    )
  }

  const { message } = await req.json()

  try {
    // 获取用户专属的智能体实例
    const agent = await getAgentForUser(userId)

    // 发送消息给智能体
    const response = await sendMessage(agent, message)

    return NextResponse.json({ response })
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    )
  }
}

前端聊天组件：

// components/CustomerSupportUI.tsx
'use client'

import { useState } from 'react'
import { useUser } from '@clerk/nextjs'

export default function CustomerSupportUI() {
  const { user } = useUser()
  const [messages, setMessages] = useState<Array<{role: string, content: string}>>([])
  const [input, setInput] = useState('')
  const [loading, setLoading] = useState(false)

  const sendMessage = async () => {
    if (!input.trim()) return

    setLoading(true)
    setMessages(prev => [...prev, { role: 'user', content: input }])

    try {
      const response = await fetch('/api/adk/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: input })
      })

      const data = await response.json()

      setMessages(prev => [...prev, { role: 'assistant', content: data.response }])
      setInput('')
    } catch (error) {
      console.error('发送消息失败:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="bg-white rounded-lg shadow-lg p-6">
      {/* 欢迎信息 */}
      <div className="mb-4">
        <h2 className="text-xl font-semibold">
          欢迎, {user?.firstName || user?.emailAddresses[0].emailAddress}!
        </h2>
        <p className="text-gray-600">AI客服助手已准备就绪</p>
      </div>

      {/* 聊天历史 */}
      <div className="h-96 overflow-y-auto mb-4 space-y-4">
        {messages.map((msg, idx) => (
          <div
            key={idx}
            className={p-3 rounded-lg ${ msg.role === 'user' ? 'bg-blue-100 ml-auto max-w-md' : 'bg-gray-100 mr-auto max-w-md' }}           >             {msg.content}           </div>         ))}       </div>        {/* 输入框 */}       <div className="flex gap-2">         <input           type="text"           value={input}           onChange={(e) => setInput(e.target.value)}           onKeyPress={(e) => e.key === 'Enter' && sendMessage()}           placeholder="输入客服查询..."           className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"           disabled={loading}         />         <button           onClick={sendMessage}           disabled={loading}           className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"         >           {loading ? '发送中...' : '发送'}         </button>       </div>     </div>   ) }

PART 05 系统测试与优化

5.1 完整系统演示

登录流程：

访问 http://localhost:3000
点击"登录"按钮，跳转到Clerk登录页面
选择Google OAuth登录
授权后自动跳转到/dashboard

客服操作流程： 场景1：产品查询

客服输入："查询我们有哪些耳机产品？"

系统处理：
1. 前端发送请求到 /api/adk/chat
2. API验证Clerk用户身份
3. 调用ADK智能体
4. 智能体使用 search_products 工具
5. 返回结果给前端

显示结果：
"我们目前有以下耳机产品：
1. Wireless Headphones
   - 价格：$79.99
   - 库存：150台
   - 类别：Audio"

场景2：客户订单查询

客服输入："查找客户Michael，告诉我他的订单详情"

系统处理：
1. 调用 find_customer(customer_name="Michael")
2. 获取客户ID: C001
3. 调用 get_customer_orders(customer_id="C001")
4. 整合信息返回

显示结果：
"客户信息：
- 姓名：Michael Johnson
- 邮箱：michael@example.com
- 电话：+1-555-0123

订单记录：
- 订单号：O001
- 产品：Wireless Headphones, Samsung 1TB SSD
- 总金额：$209.98
- 状态：已发货
- 日期：2025-10-20"

场景3：库存查询

客服输入："Samsung SSD还有多少库存？"

系统处理：
1. search_products(query="Samsung SSD")
2. 提取库存信息

显示结果：
"Samsung 1TB SSD 当前库存：85台"

PART 06 Claude Skills最佳实践与扩展

6.1 创建高质量技能包的原则

原则1：文档结构清晰

skill-name/
├── SKILL.md             # 必需：快速入门（500-1000字）
├── references/          # 必需：详细文档
│   ├── 01-concepts.md   # 核心概念
│   ├── 02-api.md        # API参考
│   └── 03-advanced.md   # 高级主题
├── examples/            # 必需：代码示例（至少3个）
│   ├── basic.py
│   ├── intermediate.py
│   └── advanced.py
└── development/         # 可选：开发指南
    ├── setup.md
    └── troubleshooting.md

原则2：快速入门完整性

SKILL.md应包含：

30秒概述（what it is）
2分钟快速开始（hello world）
核心概念列表
常用API速查

原则3：示例代码可运行

所有示例必须：

完整可执行（不能有省略的import）
包含注释说明
覆盖80%的常用场景

原则4：参考文档详细

每个API都应包括：

功能描述
参数说明（类型、默认值、约束）
返回值说明
使用示例
常见陷阱

6.2 适合创建Claude Skill的场景

场景类型1：内部工具和框架

如果公司有内部开发的框架或工具：

内部API网关
自定义ORM
公司特定的部署流程
代码审查标准

场景类型2：新兴技术框架

Claude尚未训练或理解不深的技术：

最新版本的框架（如ADK、LangGraph）
小众但强大的工具
Beta阶段的新技术

场景类型3：标准操作流程（SOP）

将公司流程文档化为技能：

代码审查清单
部署步骤
故障排查手册
安全合规要求

不适合的场景：

❌ 已广泛使用的成熟框架（如React、Django）
❌ 文档过于简单的工具
❌ 频繁变动的API（维护成本高）

{{userData.name}}已认证

Claude Skills 40分钟构建企业级智能客服系统的完整流程