Anthropic Claude Skills：40分钟实战构建企业级智能客服系统

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

加载流程：

1. Claude首先读取SKILL.md了解框架概况
2. 根据任务需求，查询references/中的相关文档
3. 参考examples/中的代码示例
4. 遵循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会执行以下步骤：

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

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

2.4 技能包结构解析

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

SKILL.md（主文件）：

# Google ADK Skill``## Overview``Google Agent Development Kit (ADK) is a framework for building``multi-agent AI systems with orchestration capabilities.``## Quick Start``### Python``python``from google.adk import Agent, Tool``# Create a basic agent``agent = Agent(``name="support_agent",``model="gemini-2.5-flash",``tools=[search_tool, order_tool]``)`### Java``java``Agent 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的执行过程：

1. 读取技能文档

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

1. 规划实现

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

1. 生成代码

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

3.2 核心代码实现解析

数据模型定义：

# customer_data.pycustomers = [    {        "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.pyfrom 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.pyfrom google.adk import Agentfrom 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.pyfrom 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_xxxCLERK_SECRET_KEY=sk_test_xxx

步骤4：配置环境变量
在项目根目录创建.env.local文件：

# Clerk AuthenticationNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_keyCLERK_SECRET_KEY=your_secret_key# ADK ConfigurationGOOGLE_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 SDK2. 配置环境变量（已在.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.tsimport { 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.tsximport { 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.tsximport { 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.tsximport { 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.tsimport { 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 完整系统演示

登录流程：

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

客服操作流程：

场景1：产品查询

客服输入："查询我们有哪些耳机产品？"系统处理：1. 前端发送请求到 /api/adk/chat2. 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: C0013. 调用 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（维护成本高）

通过本教程的实战案例，文章展示了Claude Skills不仅是技术特性，更是一种全新的人机协作方式。掌握这项技术，将助力开发者在AI辅助开发时代获得显著的生产力优势。