Module 24: Claude Code Skills 完整教程
深入解析 Anthropic 官方 Skills 系统，从使用到创建全面掌握
章节目录
| 序号 | 文件 | 标题 | 内容概要 |
|---|---|---|---|
| 1 | introduction.md | 项目简介 | Skills 概念、问题背景、核心价值、技术栈 |
| 2 | architecture.md | 架构设计 | 目录结构、SKILL.md 规范、渐进式加载、自由度控制 |
| 3 | skills-creative.md | 创意设计类 | algorithmic-art, canvas-design, frontend-design, slack-gif-creator, theme-factory |
| 4 | skills-documents.md | 文档处理类 | docx, pdf, pptx, xlsx |
| 5 | skills-development.md | 开发工具类 | mcp-builder, web-artifacts-builder, webapp-testing |
| 6 | skills-workflow.md | 工作流类 | doc-coauthoring, internal-comms, brand-guidelines, skill-creator |
| 7 | usage.md | 使用指南 | 安装配置、创建自定义 Skills、企业最佳实践 |
| 8 | conclusion.md | 总结与展望 | 核心收获、对比分析、未来趋势、学习资源 |
快速开始
在 Claude Code 中使用
bash
# 1. 添加官方 Skills 市场
/plugin marketplace add anthropics/skills
# 2. 安装 Skills 包
/plugin install document-skills@anthropic-agent-skills
/plugin install example-skills@anthropic-agent-skills
# 3. 使用（自然语言即可）
"使用 PDF skill 提取 contract.pdf 中的表单字段"创建自定义 Skill
markdown
<!-- my-skill/SKILL.md -->
---
name: my-skill
description: A clear description of what this skill does and when to use it
---
# My Skill
[Your instructions here...]官方 Skills 速查
创意设计 (5)
| Skill | 用途 | 输出 |
|---|---|---|
algorithmic-art | 生成式艺术 | HTML (p5.js) |
canvas-design | 静态视觉设计 | PNG/PDF |
frontend-design | 高质量前端 | HTML/React |
slack-gif-creator | Slack 动图 | GIF |
theme-factory | 主题配色 | 配色方案 |
文档处理 (4)
| Skill | 用途 | 技术 |
|---|---|---|
docx | Word 文档 | docx-js, OOXML |
pdf | PDF 处理 | pypdf, pdfplumber |
pptx | PowerPoint | html2pptx, OOXML |
xlsx | Excel 表格 | openpyxl, pandas |
开发工具 (3)
| Skill | 用途 | 技术 |
|---|---|---|
mcp-builder | MCP 服务器 | TypeScript/Python SDK |
web-artifacts-builder | Web Artifacts | React + shadcn/ui |
webapp-testing | 自动化测试 | Playwright |
工作流程 (4)
| Skill | 用途 |
|---|---|
doc-coauthoring | 文档协作写作 |
internal-comms | 企业内部沟通 |
brand-guidelines | Anthropic 品牌规范 |
skill-creator | 创建 Skills 指南 |
单个 Skill 详解
每个 Skill 都有独立的详细解读文档
创意设计类
| 文件 | Skill | 描述 |
|---|---|---|
| skill-algorithmic-art.md | algorithmic-art | p5.js 生成式艺术，种子可重现 |
| skill-canvas-design.md | canvas-design | 静态视觉艺术，博物馆级品质 |
| skill-frontend-design.md | frontend-design | 避免"AI 风格"的高质量前端 |
| skill-slack-gif-creator.md | slack-gif-creator | Slack 优化的动画 GIF |
| skill-theme-factory.md | theme-factory | 10 预设 + 自定义主题方案 |
文档处理类
| 文件 | Skill | 描述 |
|---|---|---|
| skill-docx.md | docx | Word 文档创建、编辑、红线标记 |
| skill-pdf.md | pdf | PDF 提取、创建、合并、表单 |
| skill-pptx.md | pptx | PPT 创建、模板复用、OOXML 编辑 |
| skill-xlsx.md | xlsx | Excel 公式、格式、金融模型规范 |
开发工具类
| 文件 | Skill | 描述 |
|---|---|---|
| skill-mcp-builder.md | mcp-builder | MCP 服务器四阶段开发指南 |
| skill-web-artifacts-builder.md | web-artifacts-builder | React+shadcn/ui 单文件 Artifact |
| skill-webapp-testing.md | webapp-testing | Playwright 自动化测试 |
工作流程类
| 文件 | Skill | 描述 |
|---|---|---|
| skill-doc-coauthoring.md | doc-coauthoring | 三阶段文档协作写作流程 |
| skill-internal-comms.md | internal-comms | 企业内部沟通标准模板 |
| skill-brand-guidelines.md | brand-guidelines | Anthropic 品牌规范 |
| skill-skill-creator.md | skill-creator | 创建高质量 Skills 的元指南 |
核心概念
渐进式加载
Level 1: 元数据 (name + description) ─── 始终在上下文 (~100词)
│
Level 2: SKILL.md 主体 ─────────────── 触发后加载 (<5k词)
│
Level 3: 捆绑资源 ──────────────────── 按需加载 (无限)
├── scripts/
├── references/
└── assets/Skill 目录结构
my-skill/
├── SKILL.md # [必需] 核心指令
├── scripts/ # [可选] 可执行脚本
├── references/ # [可选] 参考文档
└── assets/ # [可选] 模板素材学习路径
入门 → 使用官方 Skills
↓
初级 → 理解架构设计
↓
中级 → 创建简单 Skill
↓
高级 → 设计复杂工作流
↓
专家 → 企业级 Skills 库参考资源
官方文档
技术规范
合作伙伴
关于本教程
本教程基于 anthropics/skills 仓库深度解析，涵盖：
- 16 个官方 Skills 的详细解读
- 架构设计 的核心原则
- 创建指南 的完整流程
- 最佳实践 的企业应用
适合 Claude Code 用户、AI 应用开发者、企业 AI 解决方案架构师阅读。
本教程由 LearnGraph.online 制作 | 基于 Anthropic Skills 仓库