前言

这，是我没用Agent Skills时AI生成的页面效果

而这，是我用了Agent Skills后AI生成的效果

这两张图对比非常明显：上图是清一色的蓝色渐变，堆砌着各种emoji，让人看着想吐。而下图的页面，是不是让人眼前一亮？不仅没有了俗套的蓝底渐变，也没有了过度的emoji装饰。

本文，我将讲解如何在Claude Code中使用Agent Skills，制作出这种设计精良的页面。

---

一、什么是Agent Skill？

用最通俗的话来讲，Agent Skill就是一个大模型可以随时翻阅的说明文档。以官方提供的前端设计Skill为例，它的文档结构是这样的：

Agent Skill的文档结构

文档的最上方是元数据层（Metadata），包含Skill的名称和描述。大模型运行时，只会将所有Skill的名称和描述作为上下文，而不会把整个文档都发送给大模型。只有当大模型判断需要使用某个Skill时，才会读取该Skill的完整文档。

这就是Agent Skill的按需加载机制——Skill的名字和描述始终对模型可见，但具体的指令内容只有在Skill被选中后才会被加载，这样可以最大程度降低Token消耗。

---

二、如何安装Agent Skill

在Claude Code中，Skill是以文件夹的形式存放的。有两种存放方式：

1. 全局Skill：C:\Users\用户名\.claude\skills\skill-name
2. 项目Skill：项目路径\.claude\skills\skill-name

以安装官方的frontend-design skill为例：

步骤一：从GitHub官方仓库获取Skill

Claude官方GitHub仓库

访问官方仓库，下载frontend-design skill的SKILL.md文件。

**步骤二：创建Skill文件夹并把SKILL文档放在文件夹中

在skills目录中新建文件夹，命名为 frontend-design。

创建frontend-design文件夹

将下载的SKILL.md文件移动到该文件夹中。

步骤三：验证安装

打开Claude Code，可以通过以下方式查看已安装的skills：

• 输入 /skills 命令
• 直接询问：“你有哪些Agent Skill？”

在Claude Code中查看已安装的Skills

---

三、如何使用Agent Skill

安装好之后，应该如何进行使用呢？

第一步：说明需求

给Claude Code描述你的需求，比如视频开头的示例。为了能让AI更准确的使用skill，可以在后面强调一下“要使用Skill进行开发”：“使用html、css、js，做一个个人中心网站，需要包含：个人简介、个人首页跳转链接（抖音，B站，SCDN、GitHub等，先只实现跳转到官网）、个人项目展示，你需要使用skill进行开发”。

向Claude Code说明需求

第二步：确认使用Skill

Claude Code意识到需要使用前端设计skill后，会请求确认。回车同意后，它才会将文档的完整内容加载进去。

确认使用前端设计Skill

第三步：生成结果

Claude Code根据Skill中的指令进行规划和代码编写，最终生成符合要求的页面。

生成的最终页面效果

---

四、进阶用法简介

Agent Skill还有一些高级用法，可以为Skill添加辅助类型的文件，其完整的结构是这样的：

skill-name/
├── SKILL.md (必需)
│   ├── YAML 前置元数据 (必需)
│   │   ├── name: (必需)
│   │   └── description: (必需)
│   └── Markdown 说明 (必需)
└── 捆绑资源 (可选)
    ├── scripts/          - 可执行代码 (Python/Bash/等)
    ├── references/       - 根据需要加载到上下文中的文档
    └── assets/           - 输出中使用的文件 (模板、图标、字体等)

• Scripts（脚本）：可执行的代码文件
• References（参考文档）：按需读取的参考资料
• Assets（资源文件）：图片、样式表等静态资源

这些高级功能可以实现更复杂的自动化任务。

---

结语

GitHub上有很多开源的优质Skill可供探索，比如这个 UI UX Pro Max 或者 Claude Code 官方的 Skills

UI UX Pro Max Skill

Claude 官方 Skills

Obisdian Skill

你也可以根据自己的需求编写定制化的Skill。