Waihub Docs

Skill ​

建议

配置或编写 Skill 时，建议先让 AI 帮你整理 SKILL.md、目录结构和触发描述，再由你人工确认流程、脚本和模板是否符合团队规范。

Skill 是给 AI 工具准备的“专业工作流说明书”。它把某类任务的步骤、规范、脚本、模板和参考资料沉淀下来，让模型在处理固定场景时不必每次从零摸索。

常见用途：

  • 生成或编辑 PPT、Word、Excel 等办公文件
  • 固化团队前端设计规范、代码规范、发布流程
  • 提供特定领域的 API 文档、业务规则、数据库说明
  • 搭配脚本和模板完成重复、易错的任务

Skill 和 MCP 的区别 ​

类型解决什么问题典型内容
Skill告诉模型“怎么做”工作流、规范、脚本、模板、参考资料
MCP给模型“能调用什么”数据库、浏览器、GitHub、文档服务、内部 API

简单说：MCP 是工具接入，Skill 是做事方法。复杂任务通常两者配合使用，例如用 Context7 MCP 查最新文档，再用 frontend-design Skill 做高质量前端实现。

存放位置 ​

推荐设置为用户级：

工具用户级 Skill项目级 Skill说明
Codex~/.codex/skills/-直接把 Skill 放在这个目录下，或通过 skill installer 安装到这里
Claude Code~/.claude/skills/.claude/skills/个人 Skill 放用户目录，团队共享 Skill 放项目目录
Cursor兼容以上工具.cursor/skills/Cursor 会从用户目录和项目目录读取 Skill

每个 Skill 都是一个独立文件夹，里面至少要有一个 SKILL.md：

text
skills/
└── frontend-design/
    ├── SKILL.md
    ├── references/
    ├── scripts/
    └── assets/

如果你改了 Skill 的内容，通常需要重新打开客户端或新开会话，才能读到最新版本。

基本结构 ​

SKILL.md 必须包含 frontmatter：

markdown
---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality.
---

# Frontend Design

Use this skill when the user asks to build web components, pages, or applications.

关键点：

  • name：短、稳定、便于识别
  • description：写清楚什么时候应该触发
  • 正文：只放核心流程，不要塞太多背景材料
  • references/：放详细文档、规范、API 说明
  • scripts/：放可复用脚本
  • assets/：放模板、图片、字体、示例文件

建议

description 比标题更重要。模型通常先根据描述判断是否使用这个 Skill。

推荐 Skill ​

选择 Skill 时，优先看三点：

  1. 这个任务是否有固定流程
  2. 是否需要特定文件格式或工具链
  3. 是否需要反复复用同一套规范

Presentations / PPT ​

适合创建、编辑、渲染和导出 PowerPoint 演示文稿。

典型场景：

  • 从主题生成完整 .pptx
  • 优化已有演示文稿
  • 生成产品介绍、汇报、课程、路演材料
  • 将内容整理成更适合展示的叙事结构

建议提示：

text
使用 presentations skill 创建一份 8 页产品介绍 PPT，风格简洁，重点突出用户价值和功能流程。

使用要点：

  • PPT 不是把文字塞进页面，而是把信息改造成可展示结构
  • 需要导出后渲染检查，避免文字重叠、裁切、图表异常
  • 如果有品牌色、Logo、参考页面，先一起提供

Documents / Word ​

适合创建、编辑、批注、修订和检查 .docx 文件。

典型场景：

  • 生成合同、方案书、SOP、报告、说明书
  • 编辑已有 Word 文档
  • 添加批注、红线、目录、表格、页眉页脚
  • 渲染成页面图片检查排版

建议提示：

text
使用 documents skill 把这份 Markdown 改成正式 Word 报告，保留层级，加入封面、目录和表格样式。

使用要点：

  • Word 文档必须渲染检查，单看文本无法发现分页和排版问题
  • 表格、页眉页脚、批注、修订痕迹都适合交给专门 Skill 处理
  • 最终交付通常只需要 .docx，中间 PNG/PDF 只用于检查

frontend-design ​

适合创建高质量前端页面、组件和交互工具。

典型场景：

  • 新建 Web 页面或应用
  • 优化已有页面视觉质量
  • 为运营、SaaS、工具、游戏等不同场景定制界面
  • 避免通用模板感和“AI 味儿”

建议提示：

text
使用 frontend-design skill 设计一个数据看板页面，面向运营团队，信息密度高、风格克制、适合长期使用。

使用要点：

  • 先明确用户、场景和信息优先级
  • 不要把所有界面都做成营销落地页
  • 前端完成后应通过浏览器截图检查布局、文字溢出和响应式效果

Spreadsheets / Excel ​

适合创建、分析、格式化和导出 Excel 工作簿。

典型场景：

  • 财务模型、预算表、运营看板
  • 数据清洗、统计分析、图表展示
  • 模板表、项目跟踪表、库存表
  • 多 Sheet 工作簿与公式校验

建议提示：

text
使用 spreadsheets skill 创建一份月度运营看板，包含数据录入页、汇总页、趋势图和关键指标。

使用要点：

  • 关键计算应使用公式，不要只写死数值
  • 图表和仪表盘需要渲染检查
  • 多表联动时要检查公式错误和引用范围

imagegen / gpt-image-skill ​

适合生成或编辑图片资产。

典型场景：

  • 生成产品海报、插画、纹理、封面图
  • 根据参考图做风格化编辑
  • 为页面、PPT、文章生成视觉素材
  • 输出透明背景图或多版本视觉方案

建议提示：

text
使用 imagegen skill 生成一张产品发布会封面图，科技感但不要过度霓虹，留出标题区域。

使用要点：

  • 如果用于网页或 PPT，先说明尺寸、留白和用途
  • 如果需要保留参考图构图，应明确写出来
  • 生成后保存为本地图片，再放入最终产物

browser-use ​

适合在本地浏览器中打开页面、点击、截图和检查前端效果。

典型场景：

  • 打开 localhost 页面验证改动
  • 检查移动端和桌面端响应式布局
  • 验证按钮、弹窗、表单、导航
  • 对比页面截图确认视觉问题

建议提示：

text
使用 browser-use skill 打开本地页面，检查桌面和移动端截图，确认没有文字重叠和布局溢出。

使用要点：

  • 前端页面改完后，截图检查比只跑构建更可靠
  • 适合本地页面和可访问网站，不适合处理服务器内部状态

什么时候自己写 Skill ​

适合写成 Skill：

  • 每周都会重复的流程
  • 靠口头交代容易漏步骤的任务
  • 需要固定脚本、模板或素材
  • 团队成员对输出质量有共同标准
  • 某个项目有长期有效的架构和业务规则

编写建议 ​

一个好的 Skill 应该短、准、可执行。

建议结构：

text
skill-name/
├── SKILL.md
├── references/
│   ├── api.md
│   └── style-guide.md
├── scripts/
│   └── validate.js
└── assets/
    └── template.docx

SKILL.md 里只写：

  • 什么时候使用
  • 基本流程
  • 必须遵守的规则
  • 需要读取哪些引用文件
  • 需要运行哪些脚本
  • 完成标准

详细规范放到 references/，确定性操作放到 scripts/，模板和素材放到 assets/。

资源网站 ​

下面这些更适合用来找 Skill，而不是查单篇教程：

建议

不要把 Skill 写成一篇长文档。Skill 的目标是让模型更快进入正确工作流，而不是把所有资料一次性塞进上下文。

Waihub Documentation

Copyright © 2026 Waihub