使用 Claude Code 创建一个自己的前端知识库
前言
从头开始学习 Vibe Coding，从选择 Coding Plan 和适用于 AI 编程的插件开始逐步摸索。当前选择 Claude Code 结合 MiniMax 的 Coding Plan，如果后续能抢到 GLM 或有更好用的模型，再进行更换。
当前主要使用 Opcode 和 VSCode 中的插件 Claude Code for VSCode。
同时，简单编写了一个总结前端知识文件的 Skill，负责总结近期看到的前端知识。该知识库的大部分文件均由 AI 自动总结生成。
创建文件
我写了一个简单的 SKILL，这个 SKILL 主要负责做这个总结生成文件的工作。在一个空文件夹中创建一个专门放 AI 生成的文件的一个文件夹，我这里起名叫 knowledgeBase，后续 AI 生成的文件都会放在这里。
你的项目文件夹/
├── .claude/
│ └── skills/
│ └── frontend-secretary/
│ └── SKILL.md <-- 你的“前端小秘书”大脑
├── knowledgeBase/
│ └── README.md <-- 知识库首页
└── (其他文件...)SKILL.md
以下内容是负责生成前端知识文件的 SKILL.md
---
name: 前端小秘书
description: 前端知识沉淀助手。请全程用中文回答用户。当用户要求总结对话中的前端知识、生成技术笔记或整理代码片段时使用。
---
### 角色定义 你是一个专业的“前端小秘书”，专注于协助开发者沉淀技术知识。你的目标是将非结构化的对话转化为结构清晰、易于检索的 Markdown 技术文档。
### 触发条件 当用户输入包含以下意图时，请激活此技能： - "总结刚才的对话" - "把这段代码的知识点记下来" - "生成前端笔记" - "沉淀一下这个技术"
### 核心任务
1. **提取核心**：识别对话中的前端技术点（如 React, Vue, CSS, TypeScript, 性能优化等）。
2. **去伪存真**：去除闲聊、试错过程和冗余信息，只保留最终的正确结论和最佳实践。
3. **格式化**：文件内容严格按照下方的【输出模板】生成 Markdown 内容。
4.**生成文件**：生成的文件名称没有要求的情况下默认使用：【日期xxxx_xx_xx】[十字左右的总结].md。自动放到/knowledgeBase文件夹下面。
### 输出模板 请严格遵循以下格式输出（不要输出模板之外的废话）：
---
title: [根据内容生成一个简练的标题]
date: [当前日期 YYYY-MM-DD]
tags: [标签1, 标签2, 标签3]
---
### 📝 核心摘要 > [用一句话概括本次沉淀的核心价值，例如：解决了 React useEffect 闭包陷阱的问题]
### 📚 知识点详情
#### [知识点分类，例如：React Hooks 机制]
- **原理/概念**：[简要解释技术原理]
- **关键代码**：
```javascript // 必须包含关键代码片段，并添加简短注释
const [count, setCount] = useState(0);
```
- **注意事项**：
- [易错点或最佳实践 1]
- [易错点或最佳实践 2]
#### [知识点分类，例如：CSS 布局技巧]
- **解决方案**：[描述解决方案]
### 🔗 参考资料 - [如果对话中提到了官方文档或链接，请在此列出]
---
### 执行约束
- **代码规范**：所有代码块
试阅读（以下内容由 AI 总结并生成）
title: AI Skill与Prompt技术指南 date: 2026-04-02 tags: [AI, Skill, Prompt, Agent, 前端工具, Claude]
📝 核心摘要
全面解析 AI Skill 的核心原理、与 Prompt/Agent 的区别、使用方法，以及如何为自己的项目创建自定义 Skill。
一、Skill 的核心概念
1.1 什么是 Skill？
Skill（技能） 是一种将特定任务所需的指令、脚本和参考资源封装成可复用能力包的开放标准，旨在扩展 AI Agent（智能体）的功能。
简单来说，Skill 就像是为 AI 准备的一本"工作手册"或"操作说明书"。它让 AI 从一个只能进行通用对话的聊天机器人，升级为能够理解并执行特定、复杂任务的"协作者"。
1.2 Skill 的核心原理：被"理解"而非被"执行"
Skill 与传统编程中的函数调用有本质区别：
| 对比维度 | 传统函数 | AI Skill |
|---|---|---|
| 调用方式 | 代码在固定位置调用，编译器知道何时执行 | 由大语言模型（LLM）在推理过程中"读懂"后，自主判断是否需要使用 |
| 触发机制 | 显式调用 | 隐式理解 |
这意味着你不再是命令 AI 执行某个函数，而是告诉它："当你遇到这类问题时，可以参考这本手册来解决。" AI 会根据上下文理解意图，然后自己决定是否需要激活某个 Skill 以及如何运用其中的指令。
二、Skill 的基本结构
一个 Skill 通常是一个文件夹，其核心是一个名为 SKILL.md 的文件：
my-skill/ ├── SKILL.md # 核心定义文件（必需） ├── scripts/ # (可选) 存放 Python 或 Bash 脚本 │ └── calculator.py ├── references/ # (可选) 存放参考资料或规则 │ └── api-docs.md └── assets/ # (可选) 资源文件 └── template.png
2.1 SKILL.md 文件结构
--- name: my-skill description: 这是最关键的部分！描述决定了AI在什么情况下会使用这个Skill。 --- # 我的 Skill 标题 ## 功能 - 清晰列出这个 Skill 能做什么 ## 触发方式 - 给出具体的用户指令示例 ## 执行步骤 1. 分步告诉 AI 如何完成任务 ## 示例输出
期望的输出结果示例
2.2 元数据说明
-
name：Skill 的唯一标识符，使用英文小写和连字符 -
description：最关键的部分，描述必须清晰、具体，包含明确的触发词和场景。模糊的描述会导致 AI 无法正确识别
三、Skill vs Workflow vs Agent：区别与适用场景
| 概念 | 比喻 | 核心特点 | 适用场景 |
|---|---|---|---|
| 工作流 | 流水线 | 流程固定，结果可预期 | 处理重复性高、步骤明确的任务，如每日数据归档 |
| Skill | 方法论/手册 | 封装了可复用的方法，需要一定的判断 | 流程大体固定但内容多变，需要按特定方法处理的任务，如撰写特定风格的报告 |
| Agent | 员工 | 只给目标，自主规划路径 | 目标明确但路径未知，需要探索和思考的复杂任务，如进行一项市场调研 |
四、Skill 的价值：从"执行者"到"项目经理"
-
没有 Skill：AI 可能只是一个"执行者"，需要你一步步下达指令
-
拥有 Skill：AI 则升级为"项目经理 + 执行者"，能够：
-
理解意图：分析你的模糊需求
-
规划工作流：自主拆解任务步骤
-
自主决策：在不同执行路径中做出选择
-
数据传递：管理步骤之间的数据依赖
-
五、如何使用 Skill
5.1 方式一：使用 Skills CLI 工具
前置准备：
-
Node.js 版本 16 及以上
-
npx（Node.js 自带）
核心命令：
# 安装 Skill（从 GitHub 仓库） npx skills add <仓库源> [可选参数] # 关键参数： # -a <agent> 指定要安装到哪个 AI 的专属目录（如 claude-code） # -g 全局安装，让 Skill 在所有项目中都可用 # -y 自动确认所有提示 # 示例：为 Claude Code 全局安装一个 Skill npx skills add anthropics/skills -a claude-code -g -y
5.2 方式二：在特定 AI 应用中使用
以 OpenClaw 为例，使用 ClawHub 管理工具：
# 1. 安装 ClawHub npm install -g clawhub # 2. 初始化 clawhub init # 3. 搜索和安装 Skill clawhub search 关键词 clawhub list
5.3 Skill 需要关闭吗？
通常不需要手动关闭。原因：
-
按需调用机制：Skill 只有在 AI 根据上下文判断需要时才会被激活
-
无后台进程：Skill 本质上是一组文本指令，不像软件那样占用内存
需要管理的场景：
-
技能冲突：多个功能相似的 Skill 互相干扰时，禁用其中一个
-
保持简洁：做纯前端页面时，可不安装 PDF Skill 等无关技能
-
Bug 或过时：某个 Skill 报错时，暂时禁用
六、如何写一个自己的 Skill
6.1 创建步骤
第一步：创建 Skill 文件夹
# 在你的 Skills 工作目录下创建一个新文件夹 mkdir my-hello-skill
提示：Skills 工作目录通常在
~/.openclaw/workspace/skills/或.claude/skills/
第二步：编写 SKILL.md 文件
--- name: my-hello-skill description: 这是一个用于测试的 Skill。当用户输入 "hello world" 或 "测试 skill" 时触发。 --- # 我的第一个 Skill 这是一个最基础的 Skill 示例，用于验证自定义技能是否被成功创建和调用。 ## 功能 - 当被触发时，返回一个固定的字符串 ## 触发方式 当用户输入以下类似内容时，请触发此 Skill： - "hello world" - "测试 skill" - "运行我的技能" ## 执行步骤 1. 直接返回预设的欢迎信息，无需进行任何复杂计算 ## 示例输出 Hello World! 你的自定义 Skill 已成功运行！
第三步：保存并测试
-
大多数 AI 框架会自动监听 Skills 目录变化，文件保存后通常会自动热重载
-
输入定义的触发词测试
6.2 进阶：复杂 Skill 结构
my-advanced-skill/ ├── SKILL.md # 核心定义文件 ├── scripts/ # 存放执行脚本 │ └── calculator.py # 用于执行精确计算 └── references/ # 存放参考资料 └── api-docs.md # 相关 API 文档
SKILL.md 中的"执行步骤"会指示 AI 去调用脚本，将确定性、易出错的操作交给代码处理，而 AI 则专注于理解意图和规划流程。
七、如何为当前项目添加 Prompt 和 Skill
7.1 方式一：手动创建文件（推荐）
目录结构示例：
你的项目/ ├── .trae/ │ └── skills/ │ └── frontend-secretary/ │ └── SKILL.md └── src/
Skill 示例（frontend-secretary）：
--- name: frontend-secretary description: 前端知识沉淀助手。当用户要求总结对话中的前端知识或生成笔记时触发。 --- ### 角色 你是一个专注于前端开发领域的知识管理专家。 ### 任务 1. 分析对话内容，提取 React, CSS, JS 等技术点 2. 去除闲聊，保留核心技术干货 3. 按照 Markdown 格式输出笔记 ### 输出格式 请严格按照以下格式输出...
项目规则文件：
| 工具 | 文件名 | 存放位置 |
|---|---|---|
| Trae | project_rules.md |
.trae/ |
| Cursor | .cursorrules |
项目根目录 |
| GitHub Copilot | copilot-instructions.md |
.github/ |
7.2 方式二：通过 IDE 设置界面
-
打开设置：
Cmd + ,(Mac) 或Ctrl + ,(Windows) -
找到 "规则技能" (Rules & Skills) 选项
-
点击 "创建" 或 "添加" 按钮
-
填写名称、描述、指令内容
-
选择 "当前项目" 而非"全局"
八、Prompt 的核心概念
8.1 什么是 Prompt？
Prompt（提示词） 就是你给 AI 的指令，可以理解为人与 AI 沟通的"编程语言"。
8.2 优质 Prompt 的万能公式
| 要素 | 说明 | 示例 |
|---|---|---|
| 角色 | 告诉 AI 它是谁 | "你是一位资深的 Python 后端工程师..." |
| 任务 | 清晰地描述要做什么 | "...请帮我审查这段代码，找出潜在的 Bug..." |
| 背景 | 提供必要的上下文 | "...这段代码用于高并发的支付系统..." |
| 约束 | 限制回答的范围、长度或风格 | "...回答要简练，不要使用复杂的术语..." |
| 格式 | 指定输出的形式 | "...最后请用表格形式列出修改建议。" |
8.3 Prompt vs Skill
| 对比 | Prompt | Skill |
|---|---|---|
| 本质 | 一次性的指令 | 可复用的能力包 |
| 触发 | 每次对话都需要输入 | 设定一次，按需调用 |
| 复杂度 | 适合简单任务 | 适合复杂、可复用的任务流程 |
九、关键注意事项
-
路径至关重要：不同的 AI 应用会从不同的目录读取 Skill。例如 Claude Code 只会识别
.claude/skills目录 -
环境依赖：很多 Skill 依赖 Node.js 版本，如遇报错检查是否需要升级
-
权限问题：在某些系统上可能需要使用
sudo或调整权限设置 -
描述要具体：Skill 的
description是最关键的，模糊的描述会导致 AI 无法识别
🔗 参考资料
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)