docs: 完善 Agent Skills 教程，新增站长经验文章
- 大幅优化工具实战中的《Agent Skills 教程》，补充概念、原理和更多实战 - 产品变现板块新增《个人站长实战经验》文章
This commit is contained in:
liyupi
@@ -407,6 +407,8 @@ Agent Skills 是 Anthropic 推出的 AI 技能系统，可以把复杂的任务
|
||||
|
||||
关于 Agent Skills 更详细的用法，可以见本 Vibe Coding 教程的《工具实战》部分。
|
||||
|
||||
⭐️ 推荐观看视频动画版，更通俗易懂：[https://bilibili.com/video/BV1T7zzBQEaA](https://www.bilibili.com/video/BV1T7zzBQEaA/)
|
||||
|
||||
|
||||
|
||||
### Superpowers
|
||||
|
||||
@@ -944,6 +944,8 @@ openspec archive add-user-search --yes
|
||||
|
||||
让我们来实战一下，利用 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 这个 Agent Skills 来优化生成网站的界面。
|
||||
|
||||
⭐️ 推荐观看视频动画版，更通俗易懂：[https://bilibili.com/video/BV1T7zzBQEaA](https://www.bilibili.com/video/BV1T7zzBQEaA/)
|
||||
|
||||
1）安装 Agent Skills
|
||||
|
||||
首先打开 Claude Code，输入一行命令，把官方提供的 Skills 注册为插件市场：
|
||||
|
||||
@@ -6,52 +6,123 @@
|
||||
|
||||
你好，我是程序员鱼皮。
|
||||
|
||||
在前面的文章中，我们学习了如何用 AI 生成代码。但你可能会发现，AI 生成的界面总是千篇一律的蓝紫渐变色，或者在某些特定任务上表现不够专业。
|
||||
在前面的文章中，我们学习了如何用 AI 生成代码。但你可能会发现一些问题：
|
||||
|
||||
- AI 生成的界面总是千篇一律的蓝紫渐变色
|
||||
- 每次都要输入一大段相同的提示词，太麻烦了
|
||||
- AI 在某些特定任务上表现不够专业
|
||||
|
||||
有没有办法让 AI 快速学会新技能，变得更专业呢？
|
||||
|
||||
这篇文章，我会介绍 **Agent Skills**，Anthropic 推出的 AI 技能系统，可以让 AI 快速掌握各种专业技能。
|
||||
|
||||
⭐️ 推荐观看视频动画版，更通俗易懂：[https://bilibili.com/video/BV1T7zzBQEaA](https://www.bilibili.com/video/BV1T7zzBQEaA/)
|
||||
|
||||
|
||||
## 一、什么是 Agent Skills？
|
||||
|
||||
[Agent Skills](https://claude.com/blog/skills) 是 Anthropic 新推出的 AI 技能系统。
|
||||
## 一、没有 Agent Skills 之前
|
||||
|
||||
在了解 Agent Skills 之前，让我们先看看以前是怎么解决这些问题的。
|
||||
|
||||
假设你正在用 AI 开发网站，为了让 AI 生成的效果更好，你告诉 AI：
|
||||
|
||||
- 界面不要使用蓝紫渐变色
|
||||
- 不要生成一大堆没用的文档
|
||||
- 你要遵循公司的代码规范
|
||||
|
||||
阿巴阿巴，洋洋洒洒几百字。
|
||||
|
||||
|
||||
|
||||
之后每次开发网站时，你都要写这么一段又臭又长的提示词，太麻烦了！
|
||||
|
||||
于是聪明的你开始想办法。
|
||||
|
||||
先把常用的提示词保存到单独的文件（比如 `prompts.md`），每次手动投喂给 AI。
|
||||
|
||||
|
||||
|
||||
然后创建了资源文件夹，把公司的代码规范、设计素材都塞进去，告诉 AI 参考这些写。
|
||||
|
||||
|
||||
|
||||
接着你还写了一些脚本，让 AI 生成代码后自动执行格式化、运行测试、提交代码到 Git。
|
||||
|
||||
|
||||
|
||||
最后再写个 `AGENTS.md` 文件，把所有规范和工作流程都写进去，让 AI 自动读取。
|
||||
|
||||
你沾沾自喜：嘿嘿，俺这套工作流，堪称完美！
|
||||
|
||||
|
||||
|
||||
但很快，你发现了问题，随着规范越写越多，文档越来越臃肿，每次对话都要占用很多 AI 上下文空间，浪费 tokens。
|
||||
|
||||
|
||||
|
||||
这时候，Agent Skills 就该登场了！
|
||||
|
||||
|
||||
|
||||
## 二、什么是 Agent Skills？
|
||||
|
||||
[Agent Skills](https://claude.com/blog/skills) 是 Anthropic 推出的 [一套开放标准](https://platform.claude.com/docs/zh-CN/agents-and-tools/agent-skills/overview)，目的是让 AI 能够学习使用各种专业技能，而不用每次都重复输入提示词。
|
||||
|
||||
|
||||
|
||||
它定义了一种 **封装 AI 工作流** 的标准：开发者可以把复杂的任务指令、脚本和资源打包成一个 **技能（Skill）**；作为用户，你只需要安装这些技能，AI 就能立刻学会这项本事，不用重复造轮子。
|
||||
|
||||
|
||||
简单来说，它就是给 AI 装备的 **技能包**。技能包里有精心设计的提示词、代码脚本、还有各种资源文件。
|
||||
|
||||
|
||||
|
||||
把 AI 想象成一个职场小白，给他装上 `文档处理技能`，它就立刻知道怎么生成 PPT、处理 Excel 表格；装上 `代码规范技能`，它就知道怎么按照公司标准写代码。
|
||||
|
||||
|
||||
|
||||
你可能会想：等等，这不就是把教 AI 做事的文档和 AI 要用到的文件打包成文件夹吗？
|
||||
|
||||
|
||||
|
||||
没错，差不多就是这个意思。但 Anthropic 把它做成了一个通用标准，而且在实现原理上有一些新花样。下面我们先来实战使用一下 Agent Skills，再揭秘其中的奥秘。
|
||||
|
||||
|
||||
|
||||
## 二、快速上手 Agent Skills
|
||||
## 三、Agent Skills 入门实战
|
||||
|
||||
让我们来实战一下，利用 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 这个 Agent Skills 来优化生成网站的界面。
|
||||
目前对 Agent Skills 支持最完善的工具是 Anthropic 官方的 [Claude Code](https://claude.com/product/claude-code)，我们就以此为例，安装并使用 Skills。
|
||||
|
||||
### 1、安装 Agent Skills
|
||||
|
||||
|
||||
首先打开 Claude Code，输入一行命令，把官方提供的 Skills 注册为插件市场：
|
||||
|
||||
```markdown
|
||||
|
||||
### 1、安装 Skills 技能
|
||||
|
||||
先打开 Claude Code 并输入命令，添加官方技能市场：
|
||||
|
||||
```plain
|
||||
/plugin marketplace add anthropics/skills
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
然后输入 `/plugin`，通过 Tab 键切换到 Marketplaces 界面，批量安装官方提供的 Skills。包括：
|
||||
这就像是在你的 AI 助手里开通了一个技能商店，接下来你就可以从商店中获取技能了。
|
||||
|
||||
- document-skills：文档技能包，可以处理 Excel、Word、PPT、PDF 等文档。
|
||||
- example-skills：示例技能包 ，可以处理技能创建、构建 MCP、视觉设计、算法艺术、网页测试、动图制作、主题样式等。
|
||||
|
||||
|
||||
|
||||
在 Claude Code 中输入命令，安装官方提供的技能包：
|
||||
|
||||
安装好之后，输入 `/skills` 命令，就能看到所有已经安装完成的技能了，我们要的 `frontend-design` 也在其中。
|
||||
```plain
|
||||
/plugin install example-skills@anthropic-agent-skills
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
可以在本地找到 Skills 的安装位置，你会发现，SKills 的本质就是一组封装好的提示词文档 + 脚本文件等：
|
||||
这个 example-skills 包含了一堆官方示例技能，包括前端设计、网页测试、动图制作等等。
|
||||
|
||||
|
||||
|
||||
|
||||
装完之后，你就可以直接让 AI 使用这些技能了。
|
||||
|
||||
还有另外一种安装方式，也可以在 Claude Code 中输入一行命令来安装 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 技能。
|
||||
|
||||
@@ -61,57 +132,413 @@ skill install anthropic-agent-skills:frontend-design
|
||||
|
||||
|
||||
|
||||
### 2、使用 Agent Skills
|
||||
### 2、前端设计技能
|
||||
|
||||
安装完 SKills 后，你只需要和之前一样跟 AI 对话，程序会自动根据你的任务选择使用什么 Skills。
|
||||
比如你要做一个网站，以前没装技能的时候，AI 生成的代码又是那个熟悉的蓝紫渐变色，千篇一律的 AI 审美。
|
||||
|
||||
比如我让 AI 开发一个精美的狼人杀网页游戏，它会询问我是否要使用 `frontend-design` 技能。
|
||||
|
||||
|
||||
|
||||
现在安装了 frontend-design 这个 **教 AI 生成专业设计感网站** 的技能后，你输入：“帮我开发个人作品集网站”。
|
||||
|
||||
使用这个技能后，AI 会选择独特的设计风格，生成的界面既有个性又专业，告别千篇一律的蓝紫渐变色。而且不需要你每次都重复输入一堆设计要求，非常方便！
|
||||
AI 会主动问你：我发现你安装了前端设计技能，需要用它来生成更具设计感的页面吗？
|
||||
|
||||
|
||||
|
||||
|
||||
不用技能是这样的，对比一下：
|
||||
确认之后，AI 会利用技能生成代码，告别蓝紫渐变，生成独特风格的精美页面。
|
||||
|
||||
|
||||
|
||||
|
||||
我们不用每次都给 AI 输入一大堆相同的提示词，装一次技能就行了。
|
||||
|
||||
|
||||
|
||||
## 三、更多 Agent Skills
|
||||
### 3、文档处理技能
|
||||
|
||||
目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合，涵盖编程相关的数据库优化、API 安全、测试策略、代码审查、文档生成，还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。
|
||||
除了代码相关的技能，官方还提供了文档处理技能包。
|
||||
|
||||
如果官方提供的技能不够用，你还可以上传自定义技能，或者访问 [Claude Skills Hub](https://www.claudeskill.site/) 下载社区贡献的技能。
|
||||
|
||||
|
||||
同样在 Claude Code 中输入一行命令安装：
|
||||
|
||||
```plain
|
||||
/plugin install document-skills@anthropic-agent-skills
|
||||
```
|
||||
|
||||
|
||||
|
||||
这个技能包里有 PPT 制作、Word 文档生成、Excel 数据分析、PDF 解析等技能。
|
||||
|
||||
|
||||
|
||||
接下来如果你让 AI 做个 PPT，它会自动调用 PPT 制作技能，直接生成排版好的 PPT 文件，帮你节省几个小时。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 四、揭秘 Agent Skills 内部原理
|
||||
|
||||
你可能会好奇：为什么 Skills 能做到安装即用？技能包里面到底有啥？AI 又是怎么知道该用哪个技能的？
|
||||
|
||||
[技能](https://agentskills.io/what-are-skills) 其实就是一个包含 `SKILL.md` 技能说明文件的文件夹，还可以包含可执行脚本、资源和参考文档。
|
||||
|
||||
|
||||
|
||||
```markdown
|
||||
my-skill/
|
||||
├── SKILL.md # 必需：指令和元数据
|
||||
├── scripts/ # 可选：可执行脚本
|
||||
├── references/ # 可选：参考文档
|
||||
└── assets/ # 可选：模板和资源
|
||||
```
|
||||
|
||||
由于每个技能的复杂度不同，结构也会存在区别。我们可以在本地目录中找到已安装的技能文件夹。
|
||||
|
||||
|
||||
|
||||
以官方的 PPT 制作技能为例，它的结构是这样的：
|
||||
|
||||
```plain
|
||||
skills/pptx/
|
||||
├── SKILL.md # 技能说明书（必需）
|
||||
├── ooxml/ # OOXML 相关资源
|
||||
├── scripts/ # 处理脚本
|
||||
├── html2pptx.md # HTML 转 PPT 说明
|
||||
├── ooxml.md # OOXML 格式说明
|
||||
└── LICENSE.txt # 许可证
|
||||
```
|
||||
|
||||
包含一个核心的技能说明文档 `SKILL.md`，还有脚本、参考文档和各种资源文件。
|
||||
|
||||
|
||||
|
||||
而 frontend-design 前端设计技能只有一个 `SKILL.md` 文件。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### SKILL.md 文件结构
|
||||
|
||||
`SKILL.md` 文件是每个技能的核心，它包含两个关键部分。
|
||||
|
||||
第一部分是 **元数据**，用 YAML 格式写在文件开头：
|
||||
|
||||
```yaml
|
||||
---
|
||||
name: frontend-design
|
||||
description: 生成具有专业设计感的前端代码，避免千篇一律的 AI 审美
|
||||
---
|
||||
```
|
||||
|
||||
其中 `name` 是技能的名字。`description` 是技能的描述，告诉 AI 什么时候应该使用这个技能。描述写得越清晰，AI 就越容易在合适的时机调用它。
|
||||
|
||||
|
||||
|
||||
第二部分是 **指令内容**，就是一套经过精心设计的提示词，指导 AI 具体怎么做。
|
||||
|
||||
以 [frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) 技能为例，它的指令内容包括：
|
||||
|
||||
- 设计思考：在写代码前，先分析产品目的、用户群体、技术约束，然后选择一个大胆的美学方向（极简、复古未来、工业风、有机自然、奢华精致等）
|
||||
- 前端美学指南：包括字体选择（避免 Arial、Inter 等烂大街字体，选择有个性的组合）、配色主题（主色调配鲜明点缀色）、动效设计、空间构成、背景和视觉细节
|
||||
- 避坑指南：明确禁止紫色渐变、系统字体、千篇一律的布局等 AI 审美陷阱
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 渐进式披露机制
|
||||
|
||||
如果有多个 Skills，AI 怎么知道该用哪个技能呢？如果把每个技能说明文档都塞给 AI，不是很占用上下文么？
|
||||
|
||||
这就要说到 **渐进式披露（Progressive Disclosure）** 这个核心机制了。
|
||||
|
||||
当你让 AI 执行任务时，它会先扫描技能目录，但不会把所有内容都加载到上下文中。而是只读取每个技能的元数据（名字和描述），发现描述和任务相关，就知道该用这个技能了。
|
||||
|
||||
|
||||
|
||||
然后才把完整的技能说明文档读进来，按照里面的指令执行：
|
||||
|
||||
|
||||
|
||||
并根据需要加载技能包中的其他资源：
|
||||
|
||||
|
||||
|
||||
**用到哪个查哪个**，既精准匹配又节省上下文，这就是渐进式披露的精髓。
|
||||
|
||||
所以 Agent Skills 的本质就是 **把专业知识打包成一个文件夹，让 AI 按需读取并使用**。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 五、跨工具使用 Agent Skills
|
||||
|
||||
除了 Claude Code 之外，其他 AI 工具支持 Agent Skills 吗？
|
||||
|
||||
当然！[Agent Skills](https://agentskills.io/) 已经成为通用标准，Cursor、VS Code、Codex 等工具都支持。
|
||||
|
||||
|
||||
|
||||
Skills 的社区也非常活跃，你可以在 [Claude Skills Hub 市场](https://www.claudeskill.site/zh/skills)、开源的 [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills) 等地方找到很多现成的技能。
|
||||
|
||||
|
||||
|
||||
比如有个叫 [UI UX Pro MAX](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) 的技能特别火，专门用于提升 AI 的设计能力。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 在 Cursor 中使用 Agent Skills
|
||||
|
||||
用法很简单，首先按照 [开源仓库文档](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 的指引，安装官方提供的命令行工具：
|
||||
|
||||
```bash
|
||||
npm install -g uipro-cli
|
||||
```
|
||||
|
||||
|
||||
|
||||
然后进入到你的项目目录下，根据使用的 AI 工具执行对应的命令。比如我这里用 Cursor：
|
||||
|
||||
```bash
|
||||
uipro init --ai cursor
|
||||
```
|
||||
|
||||
|
||||
|
||||
它会自动把技能安装到 Cursor 的配置目录里。
|
||||
|
||||
|
||||
|
||||
安装完成后，可以看到它的文件结构：
|
||||
|
||||
|
||||
|
||||
接下来，当你让 AI 开发一个网站时，可以使用斜杠命令手动触发技能，或者让 AI 自动识别技能。
|
||||
|
||||
|
||||
|
||||
AI 会根据你的需求识别出产品类型和需要的页面类型：
|
||||
|
||||
|
||||
|
||||
然后调用 `search.py` 搜索脚本，在 data 目录里进行多维度搜索，找到适合的配色、字体、布局风格：
|
||||
|
||||
|
||||
|
||||
综合搜索结果，生成完整的设计方案（主色调、字体组合、间距规范等）：
|
||||
|
||||
|
||||
|
||||
最后，再按照设计方案生成代码：
|
||||
|
||||
|
||||
|
||||
这样一来，生成的界面既专业又有设计感。
|
||||
|
||||
|
||||
|
||||
AI 不需要把所有规则都背下来，而是用到哪个查哪个，这就是 Agent Skills 的精髓。
|
||||
|
||||
|
||||
|
||||
## 六、技能仓库
|
||||
|
||||
目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合，涵盖编程相关的前端设计、网页测试，还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。
|
||||
|
||||
Skills 的社区也非常活跃，你可以在 [Claude Skills Hub 市场](https://www.claudeskill.site/zh/skills)、开源的 [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills) 等地方找到很多现成的技能。
|
||||
|
||||
|
||||
|
||||
值得一提的是，Agent Skills 现已成为 [通用标准](https://agentskills.io)。除了 Claude，[Cursor](https://cursor.com/docs/context/skills) 等主流 AI 编程工具也会陆续提供支持。也就是说，你在一个工具里用的技能，在另一个工具里也能复用。
|
||||
|
||||
|
||||
## 七、创建自己的 Agent Skills
|
||||
|
||||
用了很多别人的技能后，你可能会想：能不能把公司的周报格式封装成一个技能？以后推荐给新来的同事，还能卖个几块钱，嘿嘿嘿~
|
||||
|
||||
当然可以！创建自己的 Agent Skills 其实很简单。
|
||||
|
||||
|
||||
|
||||
## 四、Agent Skills 的优势
|
||||
### 方法 1、手动创建
|
||||
|
||||
Agent Skills 最大的优势是 **可复用性**。
|
||||
你可以发挥程序员最擅长的事情 —— 复制粘贴！
|
||||
|
||||
以前，如果你想让 AI 生成特定风格的界面，需要每次都写一大段提示词。现在有了 Agent Skills，只需要安装一次技能，以后就能直接使用，不用重复输入。
|
||||
|
||||
|
||||
而且 Agent Skills 是 **跨工具通用** 的。你在 Claude Code 中安装的技能，以后在 Cursor 等其他工具中也能用，不用重复配置。
|
||||
先复制一个官方的技能包，修改目录名称为自己的。
|
||||
|
||||
此外，Agent Skills 是 **社区驱动** 的。任何人都可以创建和分享技能，整个社区的智慧都能为你所用。
|
||||
然后修改技能说明文档 `SKILL.md` 的元数据、指令内容这些关键部分。
|
||||
|
||||
|
||||
|
||||
示例 `SKILL.md` 文件：
|
||||
|
||||
```markdown
|
||||
---
|
||||
name: company-weekly-report
|
||||
description: 生成符合公司规范的项目周报，包含进度汇总、问题跟踪和下周计划
|
||||
---
|
||||
|
||||
# 公司周报生成技能
|
||||
|
||||
当用户要求生成周报时，请按以下步骤执行：
|
||||
|
||||
## 1. 收集信息
|
||||
- 询问本周完成的主要工作
|
||||
- 询问遇到的问题和解决方案
|
||||
- 询问下周计划
|
||||
|
||||
## 2. 格式规范
|
||||
- 使用公司蓝色主题
|
||||
- 标题使用微软雅黑加粗
|
||||
- 每个模块不超过 5 个要点
|
||||
|
||||
## 3. 输出格式
|
||||
- 默认输出 Markdown
|
||||
- 如需 PPT，调用 pptx 技能
|
||||
```
|
||||
|
||||
最后，把公司的 Logo、PPT 模板、报告样例放在子文件夹里就行了。妈妈再也不用担心我的周报了~
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法 2、使用 Skill Creator
|
||||
|
||||
其实有更简单规范的方法。
|
||||
|
||||
在前面安装的 example-skills 官方示例技能包里，有一个叫 `Skill Creator` 的技能，专门用来帮你创建新技能。
|
||||
|
||||
|
||||
|
||||
你只需要跟 AI 说：“帮我创建一个专门生成公司周报的技能”
|
||||
|
||||
接下来 AI 会问你几个问题，一步一步回答就好：
|
||||
|
||||
- 你希望周报包含哪些主要部分？
|
||||
- 你希望周报以什么格式输出？
|
||||
- 你通常会如何使用这个周报技能？
|
||||
- 希望周报的语言风格是什么？
|
||||
|
||||
|
||||
|
||||
很快，一个完整的技能包就生成了，你会看到一个 `.skill` 为后缀的文件，本质上是一个 zip 压缩包。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 技能的安装位置
|
||||
|
||||
创建好技能后，你可以：
|
||||
|
||||
1）个人全局使用：解压到个人技能目录（`~/.claude/skills/`）下，你的所有项目都能用
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2）项目内使用：放到项目的 `.claude/skills/` 目录下，并且利用 Git 同步给项目组其他成员
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3）分享给社区：把它开源到 GitHub，或者上传到 [Claude Skills Hub](https://www.claudeskill.site/zh/skills) 这样的社区平台，让所有用户都能用
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 八、Skills / MCP / 斜杠命令的区别
|
||||
|
||||
你可能会好奇：Agent Skills 和 MCP、斜杠命令有什么区别？
|
||||
|
||||
**MCP 就像给 AI 装上了 “手和眼睛”**，让 AI 能够连接外部工具和数据源，比如搜索网页、读取代码仓库、查询数据库。适合需要获取数据或操作外部系统的场景。
|
||||
|
||||
|
||||
|
||||
**而 Agent Skills 更像是给 AI 发了一本 “工作手册”**，把专业知识和工作流程打包起来，教 AI 在特定领域该怎么做。
|
||||
|
||||
|
||||
|
||||
至于斜杠命令，它就像是快捷键，是需要你手动输入 `/command` 命令来触发的固定操作；而 Skills 的特点是 AI 可以自动识别该用什么技能，不需要你显式调用。
|
||||
|
||||
|
||||
|
||||
其实 MCP 和 Skills 是可以结合起来的。举个例子，如果你想让 AI 帮你发周报：
|
||||
|
||||
- MCP 负责获取数据：从任务管理数据库拉取这周的任务列表
|
||||
- Skills 负责加工数据：把获取到的原始数据整理成老板爱看的格式
|
||||
|
||||
一个提供食材，一个提供配方。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 九、Agent Skills 凭什么大火？
|
||||
|
||||
你可能会想：等等，这不就是我们程序员玩烂的 “封装、复用、模块化、懒加载” 那一套吗？
|
||||
|
||||
|
||||
|
||||
写几个代码文件、打个包、发到网上，让其他程序员下载下来用，不是一回事儿么？
|
||||
|
||||
|
||||
|
||||
为什么 Agent Skills 能突然让整个 AI 圈为之疯狂？？？
|
||||
|
||||
从技术的角度来看，它并没有发明什么惊天动地的算法。在我看来，它能火主要是 2 个原因。
|
||||
|
||||
第一，它是 **开放标准**，封装一次技能包后就能在各种 AI 工具里复用，还能通过社区共享。
|
||||
|
||||
|
||||
|
||||
更重要的是，Skills 能立刻让 AI 的工作更专业可靠，让普通人 “无感” 地享受技术带来的价值。以前想让 AI 变聪明，你得学提示词工程、配置各种工具链。现在只需要像装 APP 一样安装技能包，AI 就立刻变专业了。一项技术的成功，不在于它有多复杂，而在于它能让普通用户不关注技术细节的情况下，感受到技术的价值。
|
||||
|
||||
|
||||
|
||||
**降低门槛，才是技术走向大众的钥匙。**
|
||||
|
||||
总结一下，Agent Skills 最大的优势是：
|
||||
|
||||
1. 可复用性：安装一次技能，以后就能直接使用，不用重复输入提示词
|
||||
2. 跨工具通用：你在 Claude Code 中安装的技能，以后在 Cursor 等其他工具中也能用
|
||||
3. 社区驱动：任何人都可以创建和分享技能，整个社区的智慧都能为你所用
|
||||
4. 降低门槛：像装 APP 一样简单，让普通用户也能让 AI 变得更专业
|
||||
|
||||
|
||||
|
||||
## 写在最后
|
||||
|
||||
看到这里，相信你已经对 Agent Skills 有了基本的了解。
|
||||
看到这里，相信你已经对 Agent Skills 有了全面的了解。
|
||||
|
||||
**Agent Skills 让 AI 能够快速学会新技能，不用每次都重复输入提示词。**
|
||||
**Agent Skills 让 AI 能够快速学会新技能，不用每次都重复输入提示词。** 它的本质是把专业知识和工作流程封装成可复用的技能包，通过渐进式披露机制让 AI 按需加载，既提升了 AI 的专业性，又节省了上下文空间。
|
||||
|
||||
如果你经常需要 AI 完成某些特定的任务，比如生成特定风格的界面、处理特定格式的文档，那么 Agent Skills 会是你的好帮手。
|
||||
Agent Skills 不仅仅是个技术概念，更是一种新的工作方式。你可以把它融入到自己的日常工作中，比如把重复的任务封装成技能、把团队的最佳实践固化成技能，让 AI 真正成为你的得力助手。
|
||||
|
||||
建议你亲自尝试安装几个技能，体验一下 Agent Skills 的便利性。
|
||||
建议你：
|
||||
|
||||
1. 先安装几个官方技能，体验一下 Agent Skills 的便利性
|
||||
2. 尝试在 Cursor 等其他工具中使用社区技能
|
||||
3. 把工作中重复的任务封装成自己的技能
|
||||
4. 分享你的技能到社区，帮助更多人
|
||||
|
||||
在 Vibe Coding 时代，技术的门槛正在崩塌，而想象力的边界正在无限扩张。
|
||||
|
||||
让我们一起探索 Agent Skills 的更多可能性吧！
|
||||
|
||||
|
||||
|
||||
@@ -119,10 +546,12 @@ Agent Skills 最大的优势是 **可复用性**。
|
||||
|
||||
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||
|
||||
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||
2）鱼皮的 Vibe Coding 教程：[免费开源的 AI 编程零基础入门教程](https://github.com/liyupi/ai-guide)
|
||||
|
||||
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||
3）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||
|
||||
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||
4）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||
|
||||
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||
5）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||
|
||||
6）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
# 我的个人站长实战经验
|
||||
|
||||
> 从开发到运营网站的完整流程
|
||||
|
||||
你好，我是程序员鱼皮。
|
||||
|
||||
从大学期间上线个人博客网站开始，我做个人站长已经有 8 年多了。在这个过程中，我收获了很多，除了技术成长带来的快乐外，个人站长最开心的莫过于有用户使用、并且留下好评，真的很有成就感。
|
||||
|
||||
当然，这期间也经历过很多痛苦，比如网站被攻击、数据库被黑、用户反馈的 Bug 无穷无尽等等。不过现在回过头来看，经历这些痛苦反而是一种 “幸福”。一方面我会因为这些事获得成长，丰富自己的经验；另一方面有人攻击你、反馈 Bug，证明了你的网站获得了一定的关注。
|
||||
|
||||
而做个人站长，最痛的事情莫过于：**用心做的网站没人用。** 我相信很多有自己网站的朋友，应该会感同身受吧。
|
||||
|
||||
|
||||
|
||||
这段时间我也花费了大量的精力带团队开发优化编程导航网站，又增加了不少经验值。
|
||||
|
||||
> 编程导航 - 学习交流社区：https://codefather.cn
|
||||
|
||||
|
||||
|
||||
这篇文章，我会以编程导航网站为例，分享成为个人站长需要做的工作，以及我做个人站长的一些实战经验。希望对想成为独立开发者的朋友们有些帮助。
|
||||
|
||||
|
||||
|
||||
## 如何成为个人站长？
|
||||
|
||||
想成为个人站长？想做好个人网站？以下的事情都是必须要做的。
|
||||
|
||||
> 大家也可以把这段分享当做是 “网站开发流程” 的学习。
|
||||
|
||||
|
||||
|
||||
### 1、先有 IDEA
|
||||
|
||||
你要做什么？
|
||||
|
||||
明确网站目标和核心价值，是创建网站的第一步。想法是最值钱的，一个好的 IDEA 是网站成功的关键。
|
||||
|
||||
注意，好的想法可不是找别人要来的。之前我遇到过比较搞笑的问题是 “鱼皮鱼皮，我想做个创业项目，能做什么呢？”
|
||||
|
||||
别人要是有好的 IDEA，为什么自己不做，而是要无偿分享给你？
|
||||
|
||||
怎么获取 IDEA 呢？我有 2 种方法是：
|
||||
|
||||
1. 从自身的需求出发，思考你需要什么。比如学校抢课，这就是一个需求。
|
||||
2. 多看别人的网站，从中找到灵感和改进的空间。多问自己：现有的网站有哪些地方做得不够好？举个例子，经常有朋友吐槽微信占用空间过大，能不能自己开发一个比它更好的呢？搞不好你就是下一个 pony 🐴。
|
||||
|
||||
比如我的编程导航，IDEA 就源于我做编程知识分享多年来读者们遇到的问题 —— 学编程效率低、资源分散、缺少交流、没有动力。所以我们的目标是：提供一站式编程学习交流社区，做您编程学习路上的导航员。
|
||||
|
||||
|
||||
|
||||
### 2、产品原型
|
||||
|
||||
有了 IDEA 之后，就要开始构想：网站要做成什么样子？要有哪些核心功能？一般要编写详细的产品设计方案和产品原型图。
|
||||
|
||||
在公司里，这一般是产品经理做的事，但对于个人站长，你就是产品经理，整个网站做成什么样，由你来决定！
|
||||
|
||||
首先要梳理网站的功能模块，可以用思维导图或者列表来展示，比如我们编程导航的功能模块设计：
|
||||
|
||||
- 用户模块：包括用户注册、登录、个人资料管理等。
|
||||
- 文章模块：允许用户发布、编辑和阅读文章。
|
||||
- 消息模块：通知用户有新评论、动态等。
|
||||
- 搜索模块：聚合搜索所有的文章、资讯。
|
||||
- 教程模块：提供免费和付费的学习教程、支持专栏阅读和视频播放。
|
||||
|
||||
确认好功能模块后，要针对每个功能设计产品原型图。没有专业的产品知识和产品思维也没关系，这是可以锻炼出来的，可以通过看、模仿、甚至抄一些成功网站的功能和设计来帮助你快速完成产品原型。
|
||||
|
||||
我们编程导航的首页原型图，就是我自己画的，画图工具用语雀自带的画板或者 draw.io 就可以：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、需求分析
|
||||
|
||||
完成产品原型后，你会发现有一大堆的功能要开发。
|
||||
|
||||
别慌，这种时候我们要进行需求分析和排期：明确哪些需求要做？哪些需求先做？
|
||||
|
||||
如果是团队开发，一般产品会拉开发、测试、设计等不同岗位的同学一起开需求评审会来讨论。个人建站的话，就没必要开会了，也没必要使用专业的需求管理工具，反而麻烦。建议整理出一个需求排期表，将所有需要实现的功能按优先级排序。确定哪些是必须先完成的，哪些可以放在后续迭代中完成。对于大的功能模块，可以拆分为多个小需求，敏捷开发，有序推进。
|
||||
|
||||
需求排期表示例，这是我 6 月刚带大家做完的新项目：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 4、前期设计
|
||||
|
||||
明确需求后，就要开始 **多线开工** 了，设计师要出设计稿，测试人员要设计测试用例，开发同学要进行技术选型和方案设计。
|
||||
|
||||
对于个人站长来说，以上所有的事情都要自己做。如果你是一名程序员，个人的建议是在网站开发初期，参考其他网站而不是自己做设计，先完成功能、有人用产品，再去抠那些细节。也没必要走标准的研发流程一样设计测试用例，完成功能后自己通过点击验证功能可用即可。但是，技术选型和方案设计是一定要认真做的，最好出一个详细的文档，明确实现的方案和细节，防止开发过程中才发现有问题或者无法实现。
|
||||
|
||||
技术方案设计包括核心实现方案和细节确认、库表设计、接口设计等，比如我们编程导航交流板块的库表设计，就是通过方案文档进行确认后，才写代码开发的。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 5、开发实现
|
||||
|
||||
这段是程序员朋友们再熟悉不过的流程，也是技术通道的同学 “吃饭的本领”。对于网站开发，通常分为后端和前端。
|
||||
|
||||
|
||||
|
||||
#### 5.1 后端
|
||||
|
||||
后端提供数据的操作和管理能力，通常后端开发同学需要提供接口文档，供前端同学查看。
|
||||
|
||||
有很多主流的后端开发语言比如 Java、Go、C++、PHP、C# 等，需要使用一个提高效率的开发框架比如 Java 的 Spring Boot（Quarkus）、Go 语言的 Gin 等。
|
||||
|
||||
像我们编程导航的后端，就是用 Spring Boot 开发的，绝大多数功能用 MySQL 数据库就能搞定，有些功能还用到了 Redis、WebSocket 等技术。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 5.2 前端
|
||||
|
||||
前端提供给用户使用和交互的页面。通常使用 HTML、JavaScript、CSS 三件套，配合框架如 Vue 或 React 提高开发效率。除了开发页面外，前端还需要考虑浏览器兼容性、页面打开性能、搜索引擎优化（SEO）等等。
|
||||
|
||||
前端开发中，挑选一个好用的组件库可以大大提高开发效率，像我们用的是 Ant Design，优点是组件全面，基本每个页面都可以直接使用组件、像拼图一样完成开发。缺点就是这个库相对有点重，估计我们后面也会优化吧。
|
||||
|
||||
|
||||
|
||||
对于个人站长，前后端都要自己开发。我的建议是先做后端，明确了接口、数据和逻辑的定义后，再开发前端，会轻松很多。而且最好把复杂的计算逻辑放到后端，避免前后端维护 2 套逻辑，出现混淆和冲突。
|
||||
|
||||
|
||||
|
||||
### 6、测试验证
|
||||
|
||||
开发完成后，需要进行多轮测试：
|
||||
|
||||
1. 开发自测：开发人员自己进行初步测试，确保代码基本功能正常。比如 Java 开发者可以用 JUnit 编写单元测试。
|
||||
2. 测试（QA）测试：质量保证团队进行详细测试，包括功能测试、性能测试、安全测试等。
|
||||
3. 产品验收：由产品经理或需求方进行最终验收，确保产品符合需求。
|
||||
|
||||
对于个人站长来说，除了自己测试外，可以邀请一些自己的朋友体验，帮忙找找 Bug。
|
||||
|
||||
在网站正式上线或收费前，一般是要经过充分内测的。像我以前开发的一些网站就是没有做好测试，结果上线就被人钻了漏洞。不过我觉得在流量没那么大的时候，如果上线出 Bug 并没有实际的损失，那么测试环节投入的时间比重可以小一些，只需要留给用户一个可以反馈 Bug 的渠道就好。
|
||||
|
||||
|
||||
|
||||
### 7、部署上线
|
||||
|
||||
部署上线是指将网站文件放到服务器上，让用户可以通过域名访问。
|
||||
|
||||
之前给大家分享过很多种不同方式的上线教程了，其实并不难：
|
||||
|
||||
- 传统服务器上线教程：https://www.bilibili.com/video/BV1eT421i7si
|
||||
- 容器托管平台上线教程：https://www.bilibili.com/video/BV1Xm421N7Xj
|
||||
- 微服务项目上线教程：https://www.bilibili.com/video/BV1Cp4y1F7eA
|
||||
|
||||
最开始我还是建议使用传统的服务器上线，因为成本相对较低。而且服务器的配置建议从低买起，比如 1 核 2 G 就足够流畅运行大多数个人网站了，不要一上来就买配置太高的机器，不一定会有明显的性能提升，反而是浪费资源。等用户量上来了，可以再考虑切换部署方式或者升级服务器配置。
|
||||
|
||||
平时可以多关注服务器的负载状态和资源利用率，像我自己很多网站占用的 CPU 和内存资源都非常低，所以我把部分网站放到了同一台服务器上，提高资源利用率。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 8、运营分析
|
||||
|
||||
上线只是一个新的开始，站长需要持续运营网站（比如发布内容、搞活动），并且监控和分析网站的流量和运营情况。可以使用 Google Analytics、51.La、百度统计等专业的工具进行数据统计和分析，一行代码即可接入。这些数据可以帮助你了解网站的 UV、PV、用户来源、各功能使用情况、广告的投放效果等，对于后续的产品改进和优化非常重要。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 9、网站优化
|
||||
|
||||
网站优化是一个持续的过程，也是最能提升技术水平的事情，涉及多个方面，比如：
|
||||
|
||||
- 产品本身优化：收集用户反馈，改进产品功能和用户体验。
|
||||
- 页面设计优化：确保网站设计更美观、更易用。
|
||||
- 网站性能优化：比如通过优化代码、使用 CDN 等手段提高网站加载速度。
|
||||
- 网站可用性优化：确保网站 24 小时可用，避免宕机。
|
||||
- 网站成本优化：通过监控服务器资源利用率，优化成本，避免浪费。
|
||||
|
||||
注意，网站优化不是凭空猜测，而是要在 **符合产品本身定位** 的前提下，通过 **分析实际数据和用户反馈** 来决定优化策略。
|
||||
|
||||
怎么理解这句话呢？
|
||||
|
||||
举个例子，曾经我以为网站优化就是不断地增加新功能，别人家网站有什么，我就添加什么，结果到最后很多功能也没有人用，反而分散了精力，没有把一个功能优化到极致。还有就是用户有的时候也不知道自己想要什么、用户的建议不是都要听取的，比如有用户希望给编程导航网站增加一个多人实时聊天室，如果是以前，我可能就做了（技术人内心：反正又不是做不了）。但放到现在，我就会思考一下，然后拒绝，因为我们平台本身就有交流社区的能力，而且做多人实时聊天室的风险太大了，会增加管理和运营成本，谁知道大家在群里发什么对吧？
|
||||
|
||||
微信产品的老大张小龙曾经说过：每天有 1 亿人想教我怎么样做产品。如果不考虑做产品的初衷和定位，盲目听取用户的建议，微信恐怕会比现在更臃肿吧。
|
||||
|
||||
如果不确定是否要做某个优化，可以对用户进行调研；或者通过灰度，让一部分人先体验优化后的网站，再通过收集反馈来验证优化的效果。
|
||||
|
||||
|
||||
|
||||
### 10、网站推广
|
||||
|
||||
我之前在直播中问了大家一个问题：你认为一个网站成功的关键是什么？
|
||||
|
||||
有同学说：产品体验好。
|
||||
|
||||
有同学说：用户多。
|
||||
|
||||
我觉得不完全对，个人认为网站成功的关键是：**有人用 => 有的赚** 。
|
||||
|
||||
我见过很多产品，做的很好，甚至不输大厂，但最后还是死球了。为啥？你做的再好，没人用，也是白做。这就是我认为，对于个人站长来说最痛苦的事。
|
||||
|
||||
所以网站的推广至关重要，可以通过以下几种方式进行：
|
||||
|
||||
1. 内容创作：写文章、做视频，通过优质内容吸引用户。
|
||||
2. SEO 优化：通过搜索引擎优化，提高网站在搜索引擎中的排名，吸引更多自然流量。
|
||||
3. 广告投放：砸钱，找 KOL 合作或者直接在广告投放平台买量。前期一定要先自己优化广告文案，确保广告效果最大化，再去投放。投放的过程中要关注 ROI（投资回报率），当你投放 1 元，能稳定收入 1.01 元时，你就已经成功了！
|
||||
|
||||
做网站一定是要考虑盈利的。我认识不少个人站长，其中有些人是纯为爱发电，完全不盈利的。刚开始可能很积极，但过不了多久，基本就因为时间忙、嫌麻烦等理由放弃维护网站了。说白了，就是没动力了、“饿死了”。我之前做的绝大多数网站都是完全免费的，比如免费 SQL 自学网、免费网络安全自学网、框框大学、SQL 生成器、极客范儿浏览器主页等等，也认为做免费网站是值得骄傲的事。但是，这些网站都做不大，因为没有收入，也就没有人力和精力去维护更新。稍微换一个思路，如果网站有一些付费内容能够盈利，从而让你有资源和动力把网站做的更大，让更多人知道并使用到你的产品，岂不是更好么？
|
||||
|
||||
当然，一个网站想要盈利，就必须要有良好的用户体验。通过不断优化、运营和推广，网站才能逐渐进化，越做越大。
|
||||
|
||||
|
||||
|
||||
## 写在最后
|
||||
|
||||
看到这里，相信你已经对个人站长的工作有了全面的了解。
|
||||
|
||||
经常有朋友问我：对于程序员来说，技术重要还是业务重要？
|
||||
|
||||
通过这篇文章，我想说：**技术是基础能力、是吃饭的本领，而随着你的工作年限越高，非技术的能力就越重要。**
|
||||
|
||||
比如产品思维、运营能力、推广能力、销售能力、沟通能力、写作能力等。这些能力，在你做个人站长的过程中，都能得到锻炼和提升。
|
||||
|
||||
程序员朋友们天然具备站长属性，不妨试着去成为个人站长，做自己的作品是一件很幸福的事。
|
||||
|
||||
而在 Vibe Coding 时代，做个人站长的门槛已经大大降低了。你可以用 AI 快速开发网站，用 AI 生成内容，用 AI 优化运营。只要你有想法、愿意尝试，就一定能做出有价值的产品。
|
||||
|
||||
加油，未来的个人站长！
|
||||
|
||||
|
||||
|
||||
## 推荐资源
|
||||
|
||||
1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
|
||||
|
||||
2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
|
||||
|
||||
3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
|
||||
|
||||
4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
|
||||
|
||||
5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
|
||||
|
||||
Reference in New Issue
Block a user