推荐语
40分钟掌握企业级智能客服开发！Claude Skills新功能实战解析，教你如何快速构建生产级应用。核心内容： 1. Claude Skills渐进式知识加载机制解析 2. Next.js+Clerk+Google ADK多智能体框架实战 3. 从文档转化到生产部署的完整开发流程
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
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采用渐进式加载机制。
1.2 Agent Skills vs MCP vs Sub-agents
三种技术的核心区别：
传统的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
- 根据任务需求，查询
references/中的相关文档
这种方式避免了一次性加载所有文档导致的上下文污染，同时保证了知识获取的精准性。
PART 02 创建自定义Agent Skill：以Google ADK为例
2.1 项目需求与技术选型
构建一个电商客服系统，支持：
-
前端
-
认证
-
多智能体框架：Google Agent Development Kit (ADK)
-
AI模型
ADK是Google推出的多智能体开发框架，支持并行和顺序智能体编排。但Claude Code默认不了解ADK的使用方法，因此需要创建自定义技能。
2.2 准备ADK文档
访问ADK官方文档网站，下载所有HTML格式的文档文件。通常包括：
将下载的文档按照以下结构整理：
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
将整理好的文档打包成adk-documentation.zip，准备提供给Claude。
2.3 使用Skill Creator创建技能
Claude Code内置了一个特殊的"Skill Creator"技能，专门用于从文档创建新技能。
在Claude Code中，找到Skill Creator功能，上传准备好的adk-documentation.zip文件。
这是Google Agent Development Kit (ADK)的完整文档。
ADK是一个多智能体开发框架，支持：
- 创建单个和多个智能体
- 并行和顺序智能体编排
- 工具定义和调用
- 与Google AI模型集成
请基于这些文档创建一个技能包，使Claude能够使用ADK构建多智能体系统。
Skill Creator会执行以下步骤：
2.4 技能包结构解析
生成的技能包包含以下内容：
Google Agent Development Kit (ADK) is a framework for building multi-agent AI systems with orchestration capabilities.```pythonfrom google.adk import Agent, Toolagent = Agent( name="support_agent", model="gemini-2.5-flash", tools=[search_tool, order_tool])``````javaAgent agent = Agent.builder() .name("support_agent") .model("gemini-2.5-flash") .tools(searchTool, orderTool) .build();```- Agents: AI entities that can use tools- Tools: Functions agents can call- Orchestration: Sequential and parallel execution
-
agent-creation.md
-
tool-definition.md
-
orchestration-patterns.md
-
error-handling.md
-
basic-agent.py
-
multi-agent-parallel.py
-
multi-agent-sequential.py
-
custom-tools.py
2.5 安装技能到项目
在项目根目录创建：
mkdir -p .claude/skills
将Skill Creator生成的ZIP文件下载，解压到：
.claude/skills/google-adk/
├── SKILL.md
├── references/
├── examples/
└── development/
在Claude Code中，技能会自动被识别。可以通过以下方式验证：
PART 03 使用ADK技能构建多智能体客服系统
3.1 项目初始化与需求说明
帮我创建一个多智能体系统用于电商客服支持。
系统要求：
1. 使用Google ADK框架（参考我提供的ADK技能）
2. 创建模拟数据集，包括：
- 产品信息（名称、价格、库存）
- 客户数据
- 订单记录
3. 客服功能：
- 产品查询：查询产品价格和可用性
- 订单管理：查询订单状态、处理退货
- 客户信息：根据客户名称检索信息
4. 智能体编排：
- 使用并行智能体处理独立查询
- 使用顺序智能体处理复杂流程
5. 使用ADK UI界面进行测试
请先查看我提供的Google ADK技能文档，然后基于最佳实践实现。
- 读取技能文档
[Claude] 正在查看Google ADK技能...
[Claude] 已理解ADK框架的核心概念
- 规划实现
[Claude] 计划创建以下组件：
- 产品搜索工具
- 订单查询工具
- 客户查询工具
- 退货处理工具
- 主客服智能体（协调所有工具）
- 生成代码
Claude会创建项目结构并实现所有组件
3.2 核心代码实现解析
# customer_data.py
customers = [
{
"id": "C001",
"name": "Michael Johnson",
"email": "[email protected]",
"phone": "+1-555-0123"
},
{
"id": "C002",
"name": "Sarah Williams",
"email": "[email protected]",
"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
]
)
# app.py
from google.adk.ui import launch_ui
# 启动ADK UI界面
launch_ui(
agents=[customer_support_agent],
port=8080,
title="电商客服系统"
)
3.3 系统测试与功能验证
用户：你们有什么耳机产品？
智能体执行：
1. 调用 search_products(query="耳机")
2. 返回结果：
- Wireless Headphones
- 价格：$79.99
- 库存：150台
智能体回复：
"我们目前有Wireless Headphones，价格为$79.99，
库存充足，有150台可售。"
用户：查找名叫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"
用户：查询我们有哪些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是一个现代化的用户认证和管理平台，提供：
-
开箱即用
-
多种登录方式
-
安全性
-
用户管理
-
免费套餐
4.2 Clerk账户设置
访问 https://clerk.com 注册账户。
在Dashboard中点击"Create Application"：
-
应用名称：agent-customer-support-v2
-
登录选项：- ✅ Email（邮箱登录） - ✅ Google（Google OAuth） - 可选：GitHub、Microsoft等
创建成功后，复制以下密钥：
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx
在项目根目录创建.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
我需要为现有的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.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>
)
}
// 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
// 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 完整系统演示
客服输入："查询我们有哪些耳机产品？"
系统处理：
1. 前端发送请求到 /api/adk/chat
2. API验证Clerk用户身份
3. 调用ADK智能体
4. 智能体使用 search_products 工具
5. 返回结果给前端
显示结果：
"我们目前有以下耳机产品：
1. Wireless Headphones
- 价格：$79.99
- 库存：150台
- 类别：Audio"
客服输入："查找客户Michael，告诉我他的订单详情"
系统处理：
1. 调用 find_customer(customer_name="Michael")
2. 获取客户ID: C001
3. 调用 get_customer_orders(customer_id="C001")
4. 整合信息返回
显示结果：
"客户信息：
- 姓名：Michael Johnson
- 邮箱：[email protected]
- 电话：+1-555-0123
订单记录：
- 订单号：O001
- 产品：Wireless Headphones, Samsung 1TB SSD
- 总金额：$209.98
- 状态：已发货
- 日期：2025-10-20"
客服输入："Samsung SSD还有多少库存？"
系统处理：
1. search_products(query="Samsung SSD")
2. 提取库存信息
显示结果：
"Samsung 1TB SSD 当前库存：85台"
PART 06 Claude Skills最佳实践与扩展
6.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
SKILL.md应包含：
所有示例必须：
每个API都应包括：
6.2 适合创建Claude Skill的场景
如果公司有内部开发的框架或工具：
Claude尚未训练或理解不深的技术：
将公司流程文档化为技能：
- ❌ 已广泛使用的成熟框架（如React、Django）
通过本教程的实战案例，我们看到Claude Skills不仅是一个技术特性，更是一种全新的人机协作方式。掌握这项技术，将让开发者在AI辅助开发时代获得显著的生产力优势。
项目信息
- Google ADK文档：https://google.github.io/adk-docs/
- Clerk文档：https://clerk.com/docs
- Claude Code文档：https://docs.anthropic.com/en/docs/claude-code
- Agent Skills指南：https://docs.anthropic.com/en/docs/claude-code/skills
- Next.js：https://nextjs.org
- Gemini API：https://ai.google.dev/
- Clerk认证：https://clerk.com
关于作者
MCP研究院专注于AI开发工具和实践方法的研究与传播。我们致力于帮助开发者掌握前沿的AI辅助开发技术，通过系统化的教程和实战案例，推动AI技术在真实开发场景中的落地应用。关注我们，获取更多Claude Code使用技巧、Agent Skills最佳实践和AI开发工具评测。
注：本文基于Claude Code最新版本和Google ADK框架编写（2025年10月）。技术和工具可能持续更新，请以官方最新文档为准。文中所有代码示例均经过实际测试验证。
粤ICP备14082021号
免费POC，
零成本试错
