Claude Code Skills

给 AI Agent
一份岗位手册

Skills 入门与实战

案例展示

我们已经在用的三个 Skills

01
安装设计师所需环境
一句话让 Agent 帮设计师配好 Node.js、Git、编辑器等全套开发环境,不用写任何技术文档。
SKILL
02
Figma 转代码
从 Figma 设计稿直接生成符合团队规范的前端代码,自动使用正确的组件库和 Design Token。
SKILL
03
TAPD 需求分析
自动读取 TAPD 需求单,拆解任务、评估工作量、生成技术方案,接入团队已有工作流。
SKILL

什么是 Skills

Agent 不了解你们团队的上下文——设计规范、走查流程、提交习惯。
每次都要从头说一遍。

Skills 是打包了指令、脚本和资源的文件夹,让 Agent 在遇到特定任务时自动调用专业知识和工具。

就像给新入职的设计师一份走查 checklist——
Skill 就是给 Agent 的那份 checklist。
只不过这份手册还能附带脚本、模板、参考数据。

没有 Skills 的日常

一个能力很强但没有记忆的实习生。
每天早上都要重新培训一遍。

你 · 周一
我们用的是 TDesign 组件库,间距用 4px 的倍数……
Agent
好的,我了解了。
你 · 周二
我们用的是 TDesign 组件库,间距用 4px 的倍数……
Agent
好的,我了解了。
你 · 周三
我们用的是 TDesign……

有了 Skills 之后

点击卡片查看详情

一次编写,反复调用
流程写一次,自动遵循
你只需要把流程写一次,之后 Agent 每次遇到相关任务都会自动遵循。不再需要每次重复交代背景。
团队共享,标准统一
同一套流程,同一个标准
把 Skill 放进项目仓库或内部市场,团队每个人用的都是同一套流程,不会因为个人习惯差异导致结果参差。
持续进化
踩坑即改进
每次 Agent 踩坑,把坑记进 Skill 的 Gotchas 里,下次就不会再犯。Skill 会随着使用越来越好。

最简形态

每个 Skill 至少包含一个 SKILL.md 文件。

除此之外没有任何限制——代码、字体、图片、模板、脚本,任何 Agent 执行任务时需要的资源都可以放进来。

EXPLORER
design-review/
📄 SKILL.md
点击文件查看说明

SKILL.md 结构

两部分组成:

YAML 头信息 → 告诉 Agent 什么时候用

Markdown 正文 → 被触发后遵循的指令

SKILL.md
↓ YAML Front Matter
1---
2name: design-review
3description: 对比设计稿与前端实现,
4 生成走查报告。当用户提到
5 「设计走查」「UI 对比」时触发。
6---
↓ Markdown Instructions
7# 设计走查流程
8
91. 通过 Figma MCP 获取设计稿数据
102. 打开本地页面,逐屏对比
113. 记录差异:间距、颜色、字号…
124. 生成走查报告
13
14## 常见陷阱
15- 颜色可能带透明度,容易丢失 alpha
16- 注意检查 hover / active 等状态

完整形态

当 Skill 涉及更多内容时,用文件夹组织。

Agent 不会一次性加载所有文件,而是在执行过程中按需读取。

渐进式披露——先给核心信息,细节按需展开。

EXPLORER
design-review/
📄 SKILL.md
references/
📄 design-tokens.md
assets/
📄 report-template.md
scripts/
compare.sh
点击文件查看说明
01

直接写 SKILL.md

适合流程已经很清晰、你能直接描述出来的场景。

打开编辑器,新建一个 SKILL.md,写入 YAML 头信息和正文。

描述字段写给 AI 看,不是写给人看
只写 Agent 不知道的
给信息,不给死路

描述字段是写给 AI 看的

Agent 启动时扫描所有 Skill 的描述来决定调用哪个。描述不是摘要,而是触发条件。

✗ BAD
帮助处理文档
✓ GOOD
分析 Figma 设计文件并生成走查报告。当用户提到「设计走查」「UI 对比」或粘贴 Figma 链接时触发。

写好 Skills 的原则

01

只写 Agent 不知道的

Agent 本身很懂编程。聚焦在团队特有的规范、内部工具用法、以及 Agent 默认做不好的地方。

02

给信息,不给死路

数据库迁移 = 窄桥加悬崖(步步规定死);设计走查 = 开阔原野(Agent 需自行判断)。

03

描述是触发条件

写给 AI 看的,包含具体触发词和使用场景,不是给人看的摘要。

02

先走一遍,再封装

适合流程还不清晰、想让 Agent 帮你提炼的场景。点击步骤查看详情。

01 手动走一遍
02 让 Agent 修复验证
03 封装成 Skill

安装 Agent Browser,然后让 Agent 自主完成走查:

使用 agent browser,打开本地链接网页进行设计走查, 整理一个走查表,figma 链接:XXX

不断迭代,让 Skill 持续进化

「任何 Skill 中信息密度最高的部分就是 Gotchas 部分。」

每次踩坑,把坑补进去。
试试在下方添加一条新的 Gotcha →

## 常见陷阱
Figma 导出的颜色可能带透明度,实现时容易丢失 alpha 通道
中文字体的行高计算方式与英文不同,line-height 需要单独检查

写好了,怎么装怎么用?

两个层级

项目级放在项目仓库里,只有这个项目的 Agent 能用;全局级放在根目录,电脑内所有项目都能使用。

拖进目录即可

放到 .agent/skills 目录下——.codebuddy.claude.cursor 皆可。Skill 就是一堆文件。

自动触发或手动调用

提到相关触发词,Agent 自动调用对应 Skill。也可以用 / 命令强制调用。

从哪里找到和分享 Skills

$ npx skills add https://github.com/anthropics/skills --skill skill-creator
内部市场
****
****
外部目录
Skills.sh
https://skills.sh
本次分享
所有 Skill 仓库
****