Claude Skills 实战：构建自动化工作流与自定义技能 | 极客日志

编程语言AI大前端

Claude Skills 实战：构建自动化工作流与自定义技能

综述由AI生成Claude Skills 是模块化能力包，通过自动触发机制让 AI 在需要时加载指令、脚本等资源。 Skills 的核心特点、安装方法（官方仓库、手动创建、Git 仓库）、已安装的 16 个官方技能清单及分类。重点讲解了自动触发原理、常见使用场景，并通过 Frontend Design Skill 实战案例展示了如何生成具有独特视觉设计和交互体验的网站页面。此外，还涵盖了 Skill 管理最佳实践、高级技巧如组合使用、自定义规范、调试方法及常见问题排查，帮助开发者构建高效的自动化工作流。

kaikai发布于 2026/4/9更新于 2026/4/273 浏览

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

相关免费在线工具

RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。在线工具，RSA密钥对生成器在线工具，online
Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。在线工具，Mermaid 预览与可视化编辑在线工具，online
随机西班牙地址生成器
随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。在线工具，随机西班牙地址生成器在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online
Markdown转HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。在线工具，Markdown转HTML在线工具，online

# 创建 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

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

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

---
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 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 生成一个独特的关于一个名字叫做 daitou 的软件（类似 code IDE）的官网下载页面，然后本地测试打开一下"

daitou-website/
├── index.html (10.5 KB) - 主页面结构
├── style.css (13 KB) - 视觉样式
└── script.js (7.8 KB) - 交互逻辑

<!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>

: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;
}

// 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 风格
交互体验	⭐⭐⭐⭐⭐	流畅的动画和微交互
代码质量	⭐⭐⭐⭐⭐	结构清晰、注释完整
响应式	⭐⭐⭐⭐⭐	完美适配各种设备
性能	⭐⭐⭐⭐☆	优化良好，轻量级

# 查看某个 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 -A2 "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

用户："分析这个 PDF 报告，然后生成一个 PPT 总结"
Claude 执行：
1. 触发 pdf skill - 提取 PDF 文本 - 分析关键信息 - 提取数据和图表
2. 触发 pptx skill - 按照专业模板创建 PPT - 将分析结果可视化 - 生成执行摘要
3. 输出最终的 .pptx 文件

用户："分析这个 Excel 销售数据，生成 Word 报告"
Claude 执行：
1. 触发 xlsx skill - 读取 Excel 数据 - 计算统计指标 - 生成图表
2. 触发 docx skill - 创建专业报告模板 - 嵌入数据和图表 - 添加分析结论
3. 输出 Word 文档

---
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. 确认 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 创建页面"

# ❌ 低效设计（所有内容都在 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/

"我将使用 frontend-design skill 来创建这个页面..."
"根据 pdf 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 和相关文件

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

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

Claude Skills 实战：构建自动化工作流与自定义技能

目录

什么是 Claude Skills

核心特点

Skills vs 其他方案

快速安装 Skills

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

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

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

方法 3：从 Git 仓库安装

安装位置说明

已安装的 Skills 清单

📄 文档处理类

🎨 设计与创意类

🔧 开发工具类

💬 协作与沟通类

Skills 使用方式详解

🔑 核心原则：自动触发

触发机制

常见使用场景

📄 文档处理

🎨 设计与创意

🔧 开发工具

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

案例背景

实施步骤

第 1 步：触发 Frontend Design Skill

第 2 步：Skill 自动加载

第 3 步：设计决策

第 4 步：实现代码

第 5 步：页面特性

Skill 的价值体现

Skill 管理最佳实践

查看 Skill 结构

验证 Skill 安装

管理多个 Skill 位置

创建项目特定的 Skill

Skill 版本管理

高级技巧

组合多个 Skills

自定义 Skill 最佳实践

调试 Skills

性能优化技巧

常见问题排查

Q1: Skill 没有被触发？

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

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

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

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

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

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

总结

核心要点

最佳实践

参考资源

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具