Claude Code Document-Skills 插件完整指南

Claude Code Document-Skills 插件完整指南

一、插件概述

1.1 什么是 Document-Skills

Document-Skills 是 Anthropic 官方提供的 Claude Code 插件，包含一系列专业技能（Skills），用于扩展 Claude 的能力。这些技能覆盖：

• UI/前端设计: 创建生产级界面
• 文档处理: Word、PDF、PPT、Excel 操作
• 创意设计: 算法艺术、视觉设计
• 开发工具: MCP 服务器构建、Web 测试
• 企业沟通: 内部通讯、文档协作

1.2 插件安装状态

安装路径: C:\Users\Administrator.claude\plugins\cache\anthropic-agent-skills\document-skills\
安装时间: 2025-12-12
插件来源: anthropic-agent-skills marketplace

1.3 包含的 Skills 列表

序号	Skill 名称	类别	用途简述
1	frontend-design	UI设计	创建生产级前端界面
2	web-artifacts-builder	UI设计	复杂多组件 React 应用
3	theme-factory	UI设计	主题样式应用
4	canvas-design	创意设计	海报/视觉艺术设计
5	brand-guidelines	品牌设计	Anthropic 品牌规范
6	algorithmic-art	创意设计	p5.js 算法艺术
7	docx	文档处理	Word 文档操作
8	pdf	文档处理	PDF 处理和表单
9	pptx	文档处理	PowerPoint 操作
10	xlsx	文档处理	Excel 电子表格
11	mcp-builder	开发工具	MCP 服务器开发
12	webapp-testing	开发工具	Playwright Web 测试
13	skill-creator	开发工具	创建自定义 Skill
14	internal-comms	企业通讯	内部沟通文档
15	doc-coauthoring	文档协作	结构化文档协作
16	slack-gif-creator	创意设计	Slack GIF 动画

---

二、调用逻辑详解

2.1 Skills 触发机制

Claude Code 的 Skills 系统采用三层加载机制：

┌─────────────────────────────────────────────────────────┐
│ 第一层: 元数据 (name + description)                      │
│ - 始终存在于上下文中                                      │
│ - 用于判断是否需要触发 skill                              │
│ - 约 100 词                                              │
└─────────────────────────────────────────────────────────┘
                          ↓ 匹配触发条件
┌─────────────────────────────────────────────────────────┐
│ 第二层: SKILL.md 主体                                    │
│ - Skill 被触发后加载                                      │
│ - 包含详细指令和工作流程                                  │
│ - 通常 < 5000 词                                         │
└─────────────────────────────────────────────────────────┘
                          ↓ 按需加载
┌─────────────────────────────────────────────────────────┐
│ 第三层: 捆绑资源 (scripts/, references/, assets/)        │
│ - 仅在需要时由 Claude 加载                                │
│ - 脚本可直接执行无需读入上下文                            │
│ - 无大小限制                                             │
└─────────────────────────────────────────────────────────┘

2.2 触发条件

Skills 通过 description 字段中的关键词触发。例如：

Skill	触发关键词示例
frontend-design	"创建网页"、"设计界面"、"React组件"、"HTML/CSS"
pdf	"PDF表单"、"提取PDF"、"合并PDF"
pptx	"创建PPT"、"编辑演示文稿"、"PowerPoint"
webapp-testing	"测试Web应用"、"Playwright"、"截图验证"

2.3 调用流程图

用户输入请求
     ↓
Claude 分析请求内容
     ↓
匹配 Skill 的 description
     ↓
┌─────────────────┐
│ 方式 A: 自动触发 │ ← 当请求明确匹配 skill 描述时
└─────────────────┘
     或
┌─────────────────┐
│ 方式 B: 显式调用 │ ← 用户输入 /skill-name 或告诉 Claude 使用某 skill
└─────────────────┘
     ↓
加载 SKILL.md 指令
     ↓
执行 Skill 工作流程
     ↓
按需加载脚本/资源
     ↓
输出结果

---

三、手动调用方法

3.1 方法一：斜杠命令（推荐）

直接在 Claude Code 中输入完整的 skill 名称：

# 语法格式
/document-skills:<skill-name>
​
# 实际示例
/document-skills:frontend-design
/document-skills:web-artifacts-builder
/document-skills:theme-factory
/document-skills:pdf
/document-skills:pptx
/document-skills:xlsx

注意：CLI 的自动补全可能不显示所有插件 skills，直接输入完整名称即可。

3.2 方法二：自然语言请求

直接描述需求，Claude 会自动匹配并调用相应 skill：

# 触发 frontend-design
"帮我设计一个现代化的登录页面"
​
# 触发 pdf
"提取这个 PDF 中的表格数据"
​
# 触发 pptx
"创建一个产品介绍的 PPT"
​
# 触发 xlsx
"创建一个财务报表电子表格"

3.3 方法三：显式指定 Skill

明确告诉 Claude 使用某个 skill：

"使用 frontend-design skill 帮我创建一个仪表板界面"
​
"用 PDF skill 将这些文档合并"
​
"调用 theme-factory 给我的页面应用一个专业主题"

3.4 方法四：带参数调用

在斜杠命令后直接附加需求描述：

/document-skills:frontend-design 创建一个电商网站的商品列表页面
​
/document-skills:canvas-design 设计一张新年祝福海报
​
/document-skills:algorithmic-art 创建一个流体粒子动画

---

四、各 Skill 详细说明

4.1 UI/前端设计类

4.1.1 frontend-design

功能: 创建独特的、生产级的前端界面，避免通用 AI 美学。

适用场景:

• 网站、登陆页、仪表板
• React/Vue 组件
• HTML/CSS 布局
• UI 美化和优化

设计原则:

• 字体: 避免 Inter、Arial 等通用字体，选择独特字体
• 颜色: 使用大胆、有目的性的调色板
• 动效: CSS 动画、微交互
• 布局: 非对称、网格破坏、创意空间

调用示例:

/document-skills:frontend-design
需求：创建一个现代化的用户个人中心页面，包含头像、统计数据、最近活动

4.1.2 web-artifacts-builder

功能: 使用 React + TypeScript + Tailwind CSS + shadcn/ui 构建复杂的多组件应用。

技术栈:

• React 18 + TypeScript
• Vite + Parcel (打包)
• Tailwind CSS 3.4.1
• 40+ shadcn/ui 组件预装

工作流程:

0. 运行初始化脚本创建项目
1. 开发组件和页面
2. 打包为单个 HTML 文件
3. 可选测试验证

调用示例:

/document-skills:web-artifacts-builder
需求：构建一个数据分析仪表板，包含图表、数据表格、筛选器和状态管理

4.1.3 theme-factory

功能: 为任何工件应用主题样式。

预设主题 (10个):

0. Ocean Depths - 海洋深蓝
1. Sunset Boulevard - 日落暖橙
2. Forest Canopy - 森林绿
3. Modern Minimalist - 现代极简灰
4. Golden Hour - 金色时光
5. Arctic Frost - 北极冰蓝
6. Desert Rose - 沙漠玫瑰
7. Tech Innovation - 科技创新蓝
8. Botanical Garden - 植物园绿
9. Midnight Galaxy - 午夜星空

使用流程:

0. 展示主题预览
1. 选择主题
2. 应用到工件

调用示例:

/document-skills:theme-factory
需求：给我的登录页面应用 Tech Innovation 主题

---

4.2 创意设计类

4.2.1 canvas-design

功能: 创建美观的 PNG/PDF 视觉设计作品。

工作流程:

0. 设计哲学创建 (.md): 定义美学运动和视觉原则
1. 画布创建 (.pdf/.png): 根据哲学实现视觉作品

设计哲学示例:

• "Brutalist Joy" - 粗野主义快乐
• "Chromatic Silence" - 色彩静默
• "Metabolist Dreams" - 新陈代谢梦境

调用示例:

/document-skills:canvas-design
需求：创建一张科技公司年会的邀请函海报

4.2.2 algorithmic-art

功能: 使用 p5.js 创建算法艺术，支持种子随机性和交互参数。

输出格式:

• .md 文件 (算法哲学)
• .html + .js 文件 (交互式查看器)

技术特性:

• 种子随机性 (Art Blocks 模式)
• 参数化控制
• 实时交互
• 导出功能

算法类型:

• 流场 (Flow Fields)
• 粒子系统 (Particle Systems)
• 递归结构 (Recursive Structures)
• 噪声场 (Noise Fields)

调用示例:

/document-skills:algorithmic-art
需求：创建一个有机流体粒子动画，展现水流的感觉

4.2.3 brand-guidelines

功能: 应用 Anthropic 官方品牌色彩和排版。

品牌颜色:

• Dark: #141413
• Light: #faf9f5
• Orange: #d97757
• Blue: #6a9bcc
• Green: #788c5d

字体:

• 标题: Poppins (备选 Arial)
• 正文: Lora (备选 Georgia)

4.2.4 slack-gif-creator

功能: 创建针对 Slack 优化的 GIF 动画。

Slack 要求:

• Emoji GIF: 128x128
• Message GIF: 480x480
• FPS: 10-30
• 颜色: 48-128

调用示例:

/document-skills:slack-gif-creator
需求：创建一个庆祝动画 GIF，用于团队 Slack

---

4.3 文档处理类

4.3.1 docx

功能: Word 文档创建、编辑和分析。

支持操作:

• 创建新文档 (docx-js)
• 编辑现有文档 (Document library)
• 跟踪修改 (Redlining)
• 文本提取 (pandoc)
• 添加批注

工作流程:

创建新文档:

0. 读取 docx-js.md 参考文档
1. 使用 JavaScript/TypeScript 创建
2. 导出为 .docx

编辑现有文档:

0. 读取 ooxml.md 参考文档
1. 解压文档: python ooxml/scripts/unpack.py
2. 编辑 XML 内容
3. 打包: python ooxml/scripts/pack.py

调用示例:

/document-skills:docx
需求：创建一份项目需求文档，包含标题、目录和格式化内容

4.3.2 pdf

功能: PDF 处理工具包。

支持操作:

• 文本和表格提取 (pdfplumber)
• 创建新 PDF (reportlab)
• 合并/分割 (pypdf)
• 表单填写
• OCR 识别

Python 库:

# 读取 PDF
from pypdf import PdfReader
reader = PdfReader("document.pdf")
​
# 提取表格
import pdfplumber
with pdfplumber.open("doc.pdf") as pdf:
    tables = pdf.pages[0].extract_tables()
​
# 创建 PDF
from reportlab.pdfgen import canvas
c = canvas.Canvas("output.pdf")

调用示例:

/document-skills:pdf
需求：从这个 PDF 报表中提取所有表格数据到 Excel

4.3.3 pptx

功能: PowerPoint 演示文稿创建和编辑。

工作流程:

无模板创建:

0. 读取 html2pptx.md
1. 为每张幻灯片创建 HTML
2. 使用 html2pptx.js 转换
3. 验证缩略图

使用模板创建:

0. 提取模板内容和缩略图
1. 分析模板库存
2. 创建大纲和模板映射
3. 重排幻灯片
4. 替换文本内容

调用示例:

/document-skills:pptx
需求：创建一个 10 页的产品发布 PPT，使用现代设计风格

4.3.4 xlsx

功能: Excel 电子表格创建、编辑和分析。

支持操作:

• 数据分析 (pandas)
• 公式和格式 (openpyxl)
• 图表创建
• 公式重算 (LibreOffice)

金融模型规范:

• 蓝色文字: 硬编码输入
• 黑色文字: 公式计算
• 绿色文字: 工作表内链接
• 红色文字: 外部文件链接
• 黄色背景: 需要关注的假设

调用示例:

/document-skills:xlsx
需求：创建一个年度预算电子表格，包含公式计算和图表

---

4.4 开发工具类

4.4.1 mcp-builder

功能: 创建 MCP (Model Context Protocol) 服务器。

推荐技术栈:

• 语言: TypeScript
• 传输: Streamable HTTP (远程) / stdio (本地)

开发阶段:

0. 深度调研和规划
1. 实现
2. 审查和测试
3. 创建评估

调用示例:

/document-skills:mcp-builder
需求：创建一个 GitHub API 的 MCP 服务器

4.4.2 webapp-testing

功能: 使用 Playwright 测试 Web 应用。

辅助脚本:

• scripts/with_server.py - 管理服务器生命周期

测试模式:

from playwright.sync_api import sync_playwright
​
with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto('http://localhost:5173')
    page.wait_for_load_state('networkidle')
    page.screenshot(path='/tmp/screenshot.png')
    browser.close()

调用示例:

/document-skills:webapp-testing
需求：测试我的 React 应用的登录功能

4.4.3 skill-creator

功能: 创建自定义 Claude Code Skill。

Skill 结构:

skill-name/
├── SKILL.md (必需)
│   ├── YAML frontmatter (name, description)
│   └── Markdown 指令
└── 捆绑资源 (可选)
    ├── scripts/    - 可执行脚本
    ├── references/ - 参考文档
    └── assets/     - 输出资源

创建流程:

0. 理解 skill 的具体用例
1. 规划可重用内容
2. 初始化 skill (init_skill.py)
3. 编辑 skill
4. 打包 (package_skill.py)
5. 迭代优化

调用示例:

/document-skills:skill-creator
需求：创建一个用于代码审查的自定义 skill

---

4.5 企业沟通类

4.5.1 internal-comms

功能: 编写各类内部沟通文档。

支持类型:

• 3P 更新 (Progress/Plans/Problems)
• 公司通讯
• FAQ 回复
• 状态报告
• 项目更新
• 事故报告

使用方式:

0. 识别沟通类型
1. 加载相应指南文件
2. 按照模板格式撰写

调用示例:

/document-skills:internal-comms
需求：撰写本周的 3P 团队更新

4.5.2 doc-coauthoring

功能: 结构化文档协作工作流。

三个阶段:

0. 上下文收集: 用户提供所有相关背景
1. 细化与结构: 逐节构建，迭代优化
2. 读者测试: 用新 Claude 测试文档效果

适用场景:

• 技术规范
• 决策文档
• RFC
• PRD
• 提案

调用示例:

/document-skills:doc-coauthoring
需求：帮我撰写一份技术架构设计文档

---

五、常见问题

Q1: 为什么自动补全不显示 document-skills?

原因: CLI 的自动补全可能只显示内置命令和部分插件。

解决: 直接输入完整命令 /document-skills:skill-name，无需依赖自动补全。

Q2: 如何确认插件已正确安装?

# 查看已安装插件
cat ~/.claude/plugins/installed_plugins.json

Q3: 如何更新 document-skills 插件?

# 在 Claude Code 中执行
/plugin update document-skills@anthropic-agent-skills

Q4: Skill 没有被触发怎么办?

0. 检查是否使用了正确的触发关键词
1. 尝试显式指定 skill 名称
2. 使用斜杠命令直接调用

Q5: 如何查看某个 skill 的详细文档?

# 查看 skill 配置文件
cat ~/.claude/plugins/cache/anthropic-agent-skills/document-skills/unknown/skills/<skill-name>/SKILL.md

---

六、最佳实践

6.1 UI 设计工作流

1. /document-skills:frontend-design  → 设计界面
2. /document-skills:theme-factory    → 应用主题
3. /document-skills:webapp-testing   → 测试验证

6.2 文档处理工作流

1. 明确文档类型 (Word/PDF/PPT/Excel)
2. 调用对应 skill
3. 提供具体需求和数据
4. 迭代优化输出

6.3 创意设计工作流

1. /document-skills:canvas-design 或 /document-skills:algorithmic-art
2. 描述设计理念和风格
3. 审查生成的设计哲学
4. 获取最终视觉作品

---

七、更新日志

日期	版本	更新内容
2025-12-26	v1.0	初始版本，包含 16 个 skills 的完整说明

---

八、参考链接

• Claude Code 官方文档
• Skills 概念说明
• 创建自定义 Skills
• Anthropic Agent Skills 仓库