📋 目录

  1. 什么是 Claude Skills
  2. 快速安装 Skills
  3. 已安装的 Skills 清单
  4. Skills 使用方式详解
  5. 实战案例：使用 Frontend Design Skill 创建网站
  6. Skill 管理最佳实践
  7. 高级技巧
  8. 常见问题排查

在这里插入图片描述

什么是 Claude Skills

Claude Skills 是模块化的能力包，包含指令、元数据和可选资源（脚本、模板），让 Claude 在需要时自动加载和使用。

核心特点

  • 自动触发 - 无需手动调用，Claude 会根据你的需求自动识别并使用合适的 Skill
  • 渐进式加载 - 按需加载内容，节省 Token 消耗
  • 跨平台复用 - 一次创建，到处使用
  • 团队协作 - 可共享给团队成员

Skills vs 其他方案

特性 Skills MCP Prompts
Token 效率 ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐
易用性 ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐
复用性 ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐
实时数据 ❌ ✅ ❌
适用场景 工作流程 外部集成 一次性任务

快速安装 Skills

方法 1：从官方仓库安装（推荐）

# 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/

方法 2：手动创建自定义 Skill

# 创建 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 仓库安装

cd ~/.claude/skills
git clone https://github.com/username/awesome-skill.git

安装位置说明

Skills 可以安装在两个位置：

  1. 用户级（全局）：~/.claude/skills/

    • 所有项目都可用
    • 适合通用 skills

  2. 项目级（本地）：<项目目录>/.claude/skills/

    • 仅当前项目可用
    • 优先级高于用户级
    • 适合项目特定的 skills

已安装的 Skills 清单

安装完成后，你将拥有以下 16 个官方 Skills：

在这里插入图片描述

📄 文档处理类

Skill 功能 触发关键词
pdf 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 使用方式详解

🔑 核心原则：自动触发

重要：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 会：

  1. 扫描所有 Skills 的 description
  2. 发现 pdf skill 匹配度最高
  3. 自动加载 ~/.claude/skills/pdf/SKILL.md
  4. 按照 Skill 中的指导完成任务

常见使用场景

📄 文档处理
# 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 自动触发
用户："测试这个网页"
用户："编写测试用例"

实战案例：使用 Frontend Design Skill 创建网站

让我们通过一个真实案例来展示 Skills 的强大能力。

案例背景

创建一个名为 daitou 的代码编辑器软件的官网下载页面，要求：

  • 独特的视觉设计，避免常见的 AI 风格
  • 响应式布局
  • 交互式动画
  • 支持多平台下载

实施步骤

第 1 步：触发 Frontend Design Skill

我的请求：

"帮我根据 Frontend Design Skill 生成一个独特的关于一个名字叫做 daitou 的软件
（类似 code IDE）的官网下载页面，然后本地测试打开一下"

关键词匹配：

  • “Frontend Design Skill” - 明确提及
  • “网站”、“页面” - 匹配 description 中的 “web components, pages”
  • “设计” - 匹配设计相关功能
第 2 步：Skill 自动加载

Claude 自动执行：

  1. 读取 ~/.claude/skills/frontend-design/SKILL.md
  2. 按照 Skill 中的设计原则工作
  3. 应用最佳实践
第 3 步：设计决策

根据 Frontend Design Skill 的指导，我选择了：

美学方向：极简未来主义 + 工业感

关键设计决策：

  • 字体：Syne (展示) + JetBrains Mono (等宽)

    • ❌ 避免：Inter, Roboto, Arial
    • ✅ 选择：独特、有个性的字体

  • 配色：深色主题 + 霓虹绿 (#00ff88)

    • ❌ 避免：紫色渐变、常见配色
    • ✅ 选择：工业感十足的配色

  • 动画：入场动画、悬停效果、打字效果

    • ✅ 高影响力的动画时机

  • 纹理：噪点叠加、光晕效果

    • ✅ 增加氛围和深度
第 4 步：实现代码

生成的文件结构：

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>

        <!-- 代码预览 -->
        <div class="hero-visual">
            <div class="code-preview">
                <!-- Rust 代码示例 -->
            </div>
        </div>
    </section>

    <!-- 功能展示 -->
    <section class="features">
        <!-- 6 个功能卡片 -->
    </section>

    <!-- 下载区域 -->
    <section class="download-section">
        <!-- Windows / macOS / Linux -->
    </section>
</body>
</html>

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) {
    // 模拟下载流程
}
第 5 步：页面特性

生成的页面包含以下特性：

视觉设计：

  • ✅ 独特的霓虹绿 + 深色配色方案
  • ✅ 噪点纹理叠加增加质感
  • ✅ 发光效果和脉冲动画
  • ✅ 3D 旋转的代码预览窗口
  • ✅ 渐变、阴影、透明度层次

交互体验：

  • ✅ 入场动画（淡入 + 上移）
  • ✅ 悬停效果（卡片提升、颜色变化）
  • ✅ 代码打字机效果（延迟 1.5 秒）
  • ✅ 按钮 ripple 波纹效果
  • ✅ 滚动触发动画
  • ✅ 鼠标跟随光晕

功能实现：

  • ✅ 自动检测用户操作系统
  • ✅ 高亮推荐的下载选项
  • ✅ 三大平台下载支持（Windows/macOS/Linux）
  • ✅ 下载按钮状态反馈
  • ✅ 快捷键支持（Ctrl/Cmd + D）
  • ✅ 完全响应式布局

性能优化：

  • ✅ CSS 优先的动画（GPU 加速）
  • ✅ Intersection Observer API（性能友好的滚动检测）
  • ✅ 延迟加载动画
  • ✅ 优化的字体加载

成果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最终生成的页面具有：

维度 评分 说明
视觉独特性 ⭐⭐⭐⭐⭐ 完全避免了常见的 AI 风格
交互体验 ⭐⭐⭐⭐⭐ 流畅的动画和微交互
代码质量 ⭐⭐⭐⭐⭐ 结构清晰、注释完整
响应式 ⭐⭐⭐⭐⭐ 完美适配各种设备
性能 ⭐⭐⭐⭐☆ 优化良好，轻量级

Skill 的价值体现

通过这个案例，我们看到 Frontend Design Skill 提供了：

  1. 设计指导原则

    • 明确的美学方向选择
    • 避免常见错误的规则
    • 最佳实践建议

  2. 实现标准

    • 字体选择指南
    • 配色系统建议
    • 动画设计原则

  3. 质量保证

    • 响应式设计要求
    • 性能优化建议
    • 可访问性考虑

没有 Skill 的情况：

  • 可能使用 Inter/Roboto 等常见字体
  • 可能使用紫色渐变等 AI 常见配色
  • 动画效果可能过于简单或过度
  • 缺少独特的设计个性

有 Skill 的情况：

  • 选择了独特的 Syne + JetBrains Mono 字体组合
  • 工业感的霓虹绿配色方案
  • 精心设计的动画时机和效果
  • 强烈的品牌个性和记忆点

Skill 管理最佳实践

查看 Skill 结构

# 查看某个 skill 的完整结构
ls -la ~/.claude/skills/pdf/

# 典型结构：
# pdf/
# ├── SKILL.md              # 核心文件（必需）
# ├── LICENSE.txt           # 许可证
# ├── forms.md             # 额外文档（表单处理指南）
# ├── reference.md         # 参考文档（API 详解）
# └── scripts/             # 脚本目录（可执行工具）
#     ├── extract.py
#     └── merge.py

验证 Skill 安装

# 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/

管理多个 Skill 位置

# 用户级 Skills（全局）
~/.claude/skills/
├── pdf/
├── docx/
└── pptx/

# 项目级 Skills（本地优先）
/path/to/project/.claude/skills/
├── project-specific-skill/
└── custom-workflow/

# 优先级：项目级 > 用户级

创建项目特定的 Skill

# 在项目目录创建
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

Skill 版本管理

# 使用 Git 管理 Skills
cd ~/.claude/skills
git init
git add .
git commit -m "Initial skills setup"

# 创建 .gitignore
cat > .gitignore << 'EOF'
# 忽略临时文件
*.tmp
*.log

# 忽略敏感配置
secrets/
EOF

高级技巧

组合多个 Skills

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 最佳实践

创建高质量的自定义 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
\`\`\`

## Review Checklist

### 🔴 Security (Critical)
- [ ] SQL injection vulnerabilities
- [ ] XSS attack vectors
- [ ] Authentication bypass
- [ ] Sensitive data exposure

**Details**: See [SECURITY.md](references/SECURITY.md)

### ⚡ Performance
- [ ] O(n²) or worse complexity
- [ ] Memory leaks
- [ ] Unnecessary database queries

**Tools**:
- Python: `python scripts/profile.py`
- JavaScript: `node scripts/analyze-perf.js`

### 🎨 Style
- [ ] Naming conventions
- [ ] Code duplication (DRY principle)
- [ ] Error handling

**Auto-fix**: `python scripts/format.py --fix`

## Advanced Features

For complex scenarios, see:
- [Advanced Security Scanning](references/ADVANCED_SECURITY.md)
- [Performance Optimization Guide](references/PERFORMANCE.md)

关键要素：

  1. 清晰的 description

    • 说明功能（“做什么”）
    • 说明场景（“什么时候用”）
    • 包含关键词（触发词）

  2. 渐进式内容

    • Quick Start（快速上手）
    • Common Cases（常见场景）
    • Advanced Features（高级功能，链接到外部文档）

  3. 可执行脚本

    • 提供现成的工具
    • 减少 Token 消耗
    • 确保一致性

  4. 外部参考

    • 详细文档单独存放
    • 按需加载
    • 保持主文件简洁

调试 Skills

如果 Skill 没有被触发：

# 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%

常见问题排查

Q1: Skill 没有被触发？

检查清单：

# 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/

解决方法：

  • 在请求中明确提及 Skill 名称
  • 优化 description，增加触发关键词
  • 确保 YAML frontmatter 格式正确

Q2: 如何知道哪个 Skill 被使用了？

Claude 会在响应中说明使用了哪个 Skill，例如：

"我将使用 frontend-design skill 来创建这个页面..."
"根据 pdf skill 的指导，我会..."

Q3: 可以同时使用多个 Skills 吗？

可以！Skills 会自动组合使用。例如：

  • “分析 PDF + 生成 PPT” → 使用 pdf + pptx
  • “提取数据 + 创建报告” → 使用 xlsx + docx

Q4: 项目级 Skill 和用户级 Skill 冲突怎么办？

优先级：项目级 > 用户级

如果同名 Skill 存在于两个位置：

项目/.claude/skills/my-skill/  ← 使用这个
~/.claude/skills/my-skill/      ← 忽略这个

Q5: 如何更新已安装的 Skills？

# 方法 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 和相关文件

Q6: Skills 占用多少存储空间？

官方 16 个 Skills 总计约 5-10 MB：

  • 每个 SKILL.md 约 5-50 KB
  • 脚本和参考文档约 100-500 KB
  • 总体非常轻量级

Q7: 可以删除不需要的 Skills 吗？

可以！直接删除目录即可：

# 删除不需要的 skill
rm -rf ~/.claude/skills/slack-gif-creator

# 或者移动到备份目录
mkdir -p ~/.claude/skills-backup
mv ~/.claude/skills/unused-skill ~/.claude/skills-backup/

总结

核心要点

  1. 自动化 - Skills 自动触发，无需手动调用
  2. 模块化 - 每个 Skill 专注于特定领域
  3. 可组合 - 多个 Skills 可以协同工作
  4. 高效率 - 渐进式加载，节省 Token
  5. 易扩展 - 可以创建自定义 Skills

最佳实践

✅ DO：

  • 使用官方 Skills 作为起点
  • 为项目创建特定的 Skills
  • 保持 SKILL.md 简洁，详细内容外部链接
  • 使用 Git 管理 Skills
  • 定期更新 Skills

❌ DON’T：

  • 不要在 SKILL.md 中包含过多内容
  • 不要使用不清晰的 description
  • 不要忽略 YAML frontmatter 格式
  • 不要硬编码敏感信息
  • 不要创建过于泛化的 Skills

参考资源

# 人工智能 # AI
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

从一次 Spring Boot + MySQL 报错，看 Web 攻击面与防御模型，用安全视角复盘攻击面、风险点与防御机制的记录。

avatar 2048 AI社区

法律AI智能体在婚姻家事法律咨询中的特殊处理

我是林深，一位专注于法律AI的软件工程师，曾在某头部法律科技公司负责婚姻家事AI产品的研发。我相信“法律不是冰冷的规则，而是保护人的工具”，希望通过技术让更多人能触达法律的温暖。如果你有婚姻家事法律问题，或者对法律AI感兴趣，欢迎在评论区留言，我会一一回复。行动号召：如果你或你身边的人正在经历婚姻家事纠纷，不妨试试我们的法律AI（附上链接）——它可能不是“完美的”，但一定是“懂你的”。也欢迎你在评

avatar 2048 AI社区

DataWhale Hello-Agents 初识智能体：大语言模型与工具调用的完美结合

知识截止:训练数据有时间边界,无法获取实时信息无法行动:只能生成文本,无法与外部世界交互幻觉问题:可能编造不存在的事实在国内，为了保证查询的有效性，可以选择国内的天气查询API来构建工具# 将函数包装为LangChain工具# StructedTool.from_function可将一个函数直接转化为一个Langchain的工具类description="根据天气和城市,查询数个推荐的景点"# 使

avatar 2048 AI社区