Claude Skills 的核心概念、安装方法及实战应用。Skills 是模块化能力包，支持自动触发、渐进式加载和跨平台复用。文章详细讲解了从官方仓库安装、手动创建及 Git 仓库安装三种方式，并列举了文档处理、设计创意、开发工具等分类的技能清单。通过 Frontend Design Skill 创建网站的案例，展示了如何利用 AI 自动生成高质量的前端代码与设计。此外，还提供了技能管理最佳实践、组合使用技巧、调试方法及常见问题排查指南，帮助用户高效利用 AI 提升开发效率。
Claude Skills 是模块化的能力包，包含指令、元数据和可选资源（脚本、模板），让 Claude 在需要时自动加载和使用。
| 特性 | Skills | MCP | Prompts |
|---|---|---|---|
| Token 效率 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 易用性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 复用性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
| 实时数据 | ❌ | ✅ | ❌ |
| 适用场景 | 工作流程 | 外部集成 | 一次性任务 |
# 1. 创建 skills 目录
mkdir -p ~/.claude/skills
# 2. 克隆官方仓库
cd ~/.claude/skills
git clone --depth 1 https://github.com/anthropics/skills.git temp_skills
# 3. 复制 skills 到目录
cp -r temp_skills/skills/* .
rm -rf temp_skills
# 4. 验证安装
ls ~/.claude/skills/
# 创建 skill 目录
mkdir -p ~/.claude/skills/my-custom-skill
cd ~/.claude/skills/my-custom-skill
# 创建 SKILL.md 文件
cat > SKILL.md << 'EOF'
---
name: my-custom-skill
description: 简短描述这个 skill 的功能和使用场景
---
# My Custom Skill
## 功能说明
详细的使用指南...
## 使用示例
```bash
示例代码
EOF
#### 方法 3：从 Git 仓库安装
```bash
cd ~/.claude/skills
git clone https://github.com/username/awesome-skill.git
Skills 可以安装在两个位置：
~/.claude/skills/
<项目目录>/.claude/skills/
安装完成后，你将拥有以下 16 个官方 Skills：
| Skill | 功能 | 触发关键词 |
|---|---|---|
| PDF 提取、合并、表单填写 | PDF、文档提取、表单 | |
| docx | Word 文档创建、编辑、批注 | Word、文档、docx |
| pptx | PowerPoint 演示文稿生成 | PPT、演示文稿、幻灯片 |
| xlsx | Excel 数据分析、报表 | Excel、表格、数据分析 |
| Skill | 功能 | 触发关键词 |
|---|---|---|
| frontend-design | 前端界面设计 | 网页设计、前端、UI |
| canvas-design | Canvas 图形绘制 | Canvas、图形、动画 |
| algorithmic-art | 算法艺术生成 | 算法艺术、生成式艺术 |
| theme-factory | 主题创建 | 主题、配色方案 |
| brand-guidelines | 品牌指南 | 品牌、设计规范 |
| Skill | 功能 | 触发关键词 |
|---|---|---|
| skill-creator | 创建新 Skills | 创建 skill、编写 skill |
| mcp-builder | MCP 服务器构建 | MCP、服务器集成 |
| webapp-testing | Web 应用测试 | 测试、自动化测试 |
| web-artifacts-builder | Web 组件构建 | Web 组件、交互应用 |
| Skill | 功能 | 触发关键词 |
|---|---|---|
| doc-coauthoring | 文档协作 | 协作、多人编辑 |
| internal-comms | 内部沟通文档 | 公告、团队沟通 |
| slack-gif-creator | Slack GIF 创建 | GIF、Slack |
重要：Skills 是自动触发的，你不需要手动调用任何命令。只需正常描述你的需求，Claude 会自动识别并使用合适的 Skill。
Claude 通过匹配你的请求和 Skill 的 description 字段来决定是否使用某个 Skill：
---
name: pdf
description: Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
---
当你说"提取 PDF 文本"时，Claude 会：
pdf skill 匹配度最高~/.claude/skills/pdf/SKILL.md# PDF Skill 自动触发
用户："提取这个 PDF 的文本内容"
用户："合并这两个 PDF 文件"
用户："填写这个 PDF 表单"
用户："从 PDF 中提取表格数据"
# DOCX Skill 自动触发
用户："创建一个 Word 文档"
用户："编辑这个 docx 文件，添加批注"
用户："提取 Word 文档的内容"
# PPTX Skill 自动触发
用户："生成一个关于 AI 的 PPT"
用户："创建 10 页的演示文稿"
用户："修改这个 PowerPoint"
# XLSX Skill 自动触发
用户："分析这个 Excel 数据"
用户："创建数据透视表"
用户："生成销售报表"
# Frontend Design Skill 自动触发
用户："设计一个登录页面"
用户："创建响应式布局"
用户："生成 CSS 样式"
# Canvas Design Skill 自动触发
用户："创建 Canvas 动画"
用户："绘制交互式图形"
# Algorithmic Art Skill 自动触发
用户："生成算法艺术"
用户："创建生成式图案"
# Skill Creator Skill 自动触发
用户："帮我创建一个新的 skill"
用户："我想制作一个自定义 skill"
用户："如何编写 skill"
# MCP Builder Skill 自动触发
用户："创建一个 MCP 服务器"
用户："构建 MCP 集成"
# Webapp Testing Skill 自动触发
用户："测试这个网页"
用户："编写测试用例"
让我们通过一个真实案例来展示 Skills 的强大能力。
创建一个名为 daitou 的代码编辑器软件的官网下载页面，要求：
我的请求：
"帮我根据 Frontend Design Skill 生成一个独特的关于一个名字叫做 daitou 的软件（类似 code IDE）的官网下载页面，然后本地测试打开一下"
关键词匹配：
Claude 自动执行：
~/.claude/skills/frontend-design/SKILL.md根据 Frontend Design Skill 的指导，我选择了：
美学方向：极简未来主义 + 工业感
关键设计决策：
生成的文件结构：
daitou-website/
├── index.html (10.5 KB) - 主页面结构
├── style.css (13 KB) - 视觉样式
└── script.js (7.8 KB) - 交互逻辑
index.html 核心结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 独特字体加载 -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="grain-overlay"></div>
<!-- Hero 区域 -->
<section class="hero">
<div class="hero-content">
<div class="logo-container">
<div class="logo-glow"></div>
<h1 class="logo">daitou</h1>
</div>
<p class="tagline">代码之刀 / 灵感之源</p>
<!-- ... -->
</div>
<!-- 代码预览 -->
style.css 设计系统：
:root {
/* 色彩系统 - 工业未来主义 */
--color-bg: #0a0a0a;
--color-primary: #00ff88;
--color-accent: #ff3366;
/* 字体系统 */
--font-display: 'Syne', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* 动画曲线 */
--transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 噪点纹理 */
.grain-overlay {
background-image: url("data:image/svg+xml,...");
opacity: 0.03;
}
/* 发光效果 */
.logo-glow {
background: radial-gradient(circle, var(--color-primary), transparent);
filter: blur(40px);
animation: glow 3s ease-in-out infinite;
}
script.js 交互功能：
// 1. 自动检测用户操作系统
function detectPlatform() {
const userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('win') !== -1) return 'windows';
if(userAgent.indexOf('mac') !== -1) return 'macos';
if(userAgent.indexOf('linux') !== -1) return 'linux';
}
// 2. 代码预览打字效果
function animateCodePreview() {
// 逐字符打字动画
}
// 3. 滚动触发动画
function setupScrollAnimations() {
const observer = new IntersectionObserver(entries => {
// 元素进入视口时淡入
});
}
// 4. 下载按钮交互
function handleDownload(platform, button) {
// 模拟下载流程
}
生成的页面包含以下特性：
视觉设计：
交互体验：
功能实现：
性能优化：
最终生成的页面具有：
| 维度 | 评分 | 说明 |
|---|---|---|
| 视觉独特性 | ⭐⭐⭐⭐⭐ | 完全避免了常见的 AI 风格 |
| 交互体验 | ⭐⭐⭐⭐⭐ | 流畅的动画和微交互 |
| 代码质量 | ⭐⭐⭐⭐⭐ | 结构清晰、注释完整 |
| 响应式 | ⭐⭐⭐⭐⭐ | 完美适配各种设备 |
| 性能 | ⭐⭐⭐⭐☆ | 优化良好，轻量级 |
通过这个案例，我们看到 Frontend Design Skill 提供了：
没有 Skill 的情况：
有 Skill 的情况：
# 查看某个 skill 的完整结构
ls -la ~/.claude/skills/pdf/
# 典型结构：
# pdf/# ├── SKILL.md # 核心文件（必需）
# ├── LICENSE.txt # 许可证
# ├── forms.md # 额外文档（表单处理指南）
# ├── reference.md # 参考文档（API 详解）
# └── scripts/ # 脚本目录（可执行工具）
# ├── extract.py
# └── merge.py
# 1. 检查 SKILL.md 是否存在
ls ~/.claude/skills/*/SKILL.md
# 2. 查看 Skill 的 YAML 配置
head -10 ~/.claude/skills/pdf/SKILL.md
# 应该看到：
# ---
# name: pdf
# description: Comprehensive PDF manipulation toolkit...
# ---
# 3. 验证 description 是否清晰
grep -A 2 "description:" ~/.claude/skills/*/SKILL.md
# 4. 检查文件权限
ls -la ~/.claude/skills/
# 用户级 Skills（全局）
~/.claude/skills/
├── pdf/
├── docx/
└── pptx/
# 项目级 Skills（本地优先）
/path/to/project/.claude/skills/
├── project-specific-skill/
└── custom-workflow/
# 优先级：项目级 > 用户级
# 在项目目录创建
cd /path/to/project
mkdir -p .claude/skills/deployment-workflow
cat > .claude/skills/deployment-workflow/SKILL.md << 'EOF'
---
name: deployment-workflow
description: Custom deployment workflow for this project. Use when deploying or releasing this application.
---
# Deployment Workflow
## Pre-deployment Checklist
- [ ] Run tests
- [ ] Update version
- [ ] Build production bundle
## Deployment Steps
1. Build: `npm run build`
2. Test: `npm test`
3. Deploy: `./deploy.sh`
EOF
# 使用 Git 管理 Skills
cd ~/.claude/skills
git init
git add .
git commit -m "Initial skills setup"
# 创建 .gitignore
cat > .gitignore << 'EOF'
# 忽略临时文件
*.tmp *.log
# 忽略敏感配置
secrets/
EOF
Skills 可以自动组合使用，完成复杂任务：
示例 1：PDF 分析 + PPT 生成
用户："分析这个 PDF 报告，然后生成一个 PPT 总结"
Claude 执行：
1. 触发 pdf skill - 提取 PDF 文本 - 分析关键信息 - 提取数据和图表
2. 触发 pptx skill - 按照专业模板创建 PPT - 将分析结果可视化 - 生成执行摘要
3. 输出最终的 .pptx 文件
示例 2：数据分析 + 文档报告
用户："分析这个 Excel 销售数据，生成 Word 报告"
Claude 执行：
1. 触发 xlsx skill - 读取 Excel 数据 - 计算统计指标 - 生成图表
2. 触发 docx skill - 创建专业报告模板 - 嵌入数据和图表 - 添加分析结论
3. 输出 Word 文档
创建高质量的自定义 Skill：
---
name: code-review-workflow
description: |
Comprehensive code review workflow with security scanning, performance analysis, and style checking. Use when reviewing code, conducting security audits, or checking code quality. Supports Python, JavaScript, TypeScript, Go, and Rust.
---
# Code Review Workflow
## Quick Start
For a basic code review:
```bash
python scripts/review.py --file path/to/code.py
python scripts/profile.pynode scripts/analyze-perf.jspython scripts/format.py --fixFor complex scenarios, see:
**关键要素**：
1. **清晰的 description**
- 说明功能（"做什么"）
- 说明场景（"什么时候用"）
- 包含关键词（触发词）
2. **渐进式内容**
- Quick Start（快速上手）
- Common Cases（常见场景）
- Advanced Features（高级功能，链接到外部文档）
3. **可执行脚本**
- 提供现成的工具
- 减少 Token 消耗
- 确保一致性
4. **外部参考**
- 详细文档单独存放
- 按需加载
- 保持主文件简洁
#### 调试 Skills
如果 Skill 没有被触发：
```bash
# 1. 确认 SKILL.md 存在
find ~/.claude/skills -name "SKILL.md" -type f
# 2. 检查 YAML frontmatter 格式
head -15 ~/.claude/skills/your-skill/SKILL.md
# 正确格式：
# ---
# name: skill-name
# description: Clear description here
# ---
# 3. 验证 description 是否匹配你的请求
# description 应该包含：
# - 核心功能关键词
# - 使用场景描述
# - 触发条件说明
# 4. 测试触发
# 在请求中明确提及 Skill 名称：
# "使用 pdf skill 提取文本"
# "根据 frontend-design skill 创建页面"
优化 Token 消耗：
# ❌ 低效设计（所有内容都在 SKILL.md）
---
name: mega-skill
description: Does everything
---
# Mega Skill (50,000 tokens)
## Feature 1 [10,000 tokens of detailed explanation...]
## Feature 2 [10,000 tokens of detailed explanation...]
## Feature 3 [10,000 tokens of detailed explanation...]
# ✅ 高效设计（模块化 + 渐进披露）
---
name: modular-skill
description: Core functionality with modular features
---
# Modular Skill (3,000 tokens)
## Core Features
Basic usage guide (3,000 tokens)
## Advanced Features
- Feature 1: See [FEATURE1.md](references/FEATURE1.md)
- Feature 2: See [FEATURE2.md](references/FEATURE2.md)
- Feature 3: See [FEATURE3.md](references/FEATURE3.md)
效果对比：
| 设计方式 | 基础任务 | 高级任务 | 完整加载 |
|---|---|---|---|
| 低效设计 | 50,000 tokens | 50,000 tokens | 50,000 tokens |
| 高效设计 | 3,000 tokens | 3,000 + 5,000 | 3,000 + 15,000 |
| 节省 | 94% | 84% | 64% |
检查清单：
# 1. SKILL.md 是否存在？
ls ~/.claude/skills/your-skill/SKILL.md
# 2. YAML 格式是否正确？
head -10 ~/.claude/skills/your-skill/SKILL.md
# 3. description 是否包含相关关键词？
grep "description:" ~/.claude/skills/your-skill/SKILL.md
# 4. 文件权限是否正确？
ls -la ~/.claude/skills/your-skill/
解决方法：
Claude 会在响应中说明使用了哪个 Skill，例如：
"我将使用 frontend-design skill 来创建这个页面..."
"根据 pdf skill 的指导，我会..."
可以！Skills 会自动组合使用。例如：
pdf + pptxxlsx + docx优先级：项目级 > 用户级
如果同名 Skill 存在于两个位置：
项目/.claude/skills/my-skill/ ← 使用这个
~/.claude/skills/my-skill/ ← 忽略这个
# 方法 1: 重新克隆官方仓库
cd ~/.claude/skills
rm -rf pdf docx pptx
# 删除旧版本
git clone --depth 1 https://github.com/anthropics/skills.git temp
cp -r temp/skills/* .
rm -rf temp
# 方法 2: 如果使用 Git 管理
cd ~/.claude/skills/your-skill
git pull origin main
# 方法 3: 手动替换
# 下载新版本，替换 SKILL.md 和相关文件
官方 16 个 Skills 总计约 5-10 MB：
可以！直接删除目录即可：
# 删除不需要的 skill
rm -rf ~/.claude/skills/slack-gif-creator
# 或者移动到备份目录
mkdir -p ~/.claude/skills-backup
mv ~/.claude/skills/unused-skill ~/.claude/skills-backup/
✅ DO：
❌ DON'T：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online