大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



1.1 什么是 Document-Skills

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

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

1.2 插件安装状态

安装路径: C:UsersAdministrator.claudepluginscacheanthropic-agent-skillsdocument-skills 安装时间: 2025-12-12 插件来源: anthropic-agent-skills marketplace 

1.3 包含的 Skills 列表

---

2.1 Skills 触发机制

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

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

2.2 触发条件

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

2.3 调用流程图

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

---

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

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

# 语法格式 /document-skills: 
    
    
      
        ​ 
       # 实际示例 /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 创建一个流体粒子动画 

---

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: #
• 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/installedplugins.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. 
             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. 获取最终视觉作品 

---

---

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