docs: 完善 AI 编程工具教程,新增工具实战文章

- 修改《AI 编程扩展大全》标题、开头和结尾,使其符合教程特性
- 在《AI 辅助工具集》中补充 MCP 服务推荐和规范化开发工具介绍
- 在《AI IDE 插件》中新增 Claude Code 扩展和 IDE 扩展插件详细说明
- 新增《Spec-kit:规范驱动开发框架》工具实战文章
- 新增《OpenSpec:轻量规范开发框架》工具实战文章
- 新增《Agent Skills:通用 AI 技能库》工具实战文章
- 新增《Superpowers:核心技能库》工具实战文章
- 优化《AI 编程工具大全》目录结构,细化辅助工具集和工具实战板块说明
This commit is contained in:
liyupi
2026-01-18 14:03:39 +08:00
parent a4c8b63ba7
commit 528f9e17a9
11 changed files with 2380 additions and 22 deletions
@@ -107,9 +107,16 @@
4)辅助工具集
分享版本管理、部署托管、MCP 服务等实用辅助工具,以及我的工具组合推荐和实战经验。
分享版本管理、部署托管、MCP 服务、Agent Skills、规范化开发工具等实用辅助工具,以及我的工具组合推荐和实战经验。
此外,还会有一些补充文章,深入讲解特定工具的使用方法和测评,供感兴趣的读者参考。
5)工具实战
深入讲解特定工具的使用方法和实战案例,包括:
- 规范驱动开发工具的详细使用(Spec-kit、OpenSpec
- AI 技能库的安装和使用(Agent Skills、Superpowers
- 各种命令行工具的实测和对比(OpenCode、Gemini CLI 等)
- 其他实用工具的深度教程
@@ -86,6 +86,8 @@ Claude 主要有 3 种使用方式:
![](https://pic.yupi.icu/1/image-20260106202855849.png)
另外推荐一个学习资源 [Claude Cookbooks](https://github.com/anthropics/claude-cookbooks),这是 Anthropic 官方提供的 Claude 使用技巧和代码示例集合,包含工具调用、RAG、分类、摘要、多模态等各种实用场景的教程,非常值得学习。
## 四、ChatGPT 智能和速度兼具
@@ -86,9 +86,27 @@ Cline 最大的优势是 **跨平台支持**,不仅支持 VS Code,还支持
## 三、其他值得关注的 AI 插件
## 三、AI 编程助手 IDE 插件
除了 Cline,还有一些其他的 AI 插件也值得了解。
除了 Cline,还有一些其他的 AI 编程助手 IDE 插件也值得了解。
### Claude Code 官方扩展
Claude Code 是 Anthropic 推出的 AI 编程助手,原本是独立的命令行工具。而 [Claude Code VS Code 扩展](https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously) 能让你在代码编辑器中直接使用 Claude Code,不用额外打开终端。
这个扩展的优点是提供了图形界面,你可以通过侧边栏面板和 Claude 对话,能够灵活输入文字。
![](https://pic.yupi.icu/1/image-20260116124614180.png)
当 AI 修改代码时,你能在编辑器里实时看到变化,并且自动显示 diff 对比,让你清楚地知道 AI 改了哪些地方。
![](https://pic.yupi.icu/1/image-20260116124700221-20260118135011240.png)
我经常用它来重构代码、修复 Bug、添加新功能。它还支持多会话并行,也就是说你可以同时让多个 Claude 代理处理不同的任务,比如一个负责前端,一个负责后端,大大提高开发效率。
![](https://pic.yupi.icu/1/image-20260116124928547.png)
@@ -126,14 +144,6 @@ Cline 最大的优势是 **跨平台支持**,不仅支持 VS Code,还支持
### Supermaven
[Supermaven](https://supermaven.com/) 是一个专注于代码补全的插件,最大的特点是 100 万 Token 的上下文窗口,补全速度极快,准确度也很高。
![](https://pic.yupi.icu/1/image-20260108230146505.png)
### Amazon Q Developer
[Amazon Q Developer](https://aws.amazon.com/q/developer/)(原名 CodeWhisperer)是亚马逊推出的 AI 编程助手。
@@ -142,7 +152,65 @@ Cline 最大的优势是 **跨平台支持**,不仅支持 VS Code,还支持
## 四、怎么选择 AI IDE 插件
## 四、IDE 扩展插件
除了 AI 编程助手插件,还有一些实用的 IDE 扩展插件。
这些插件虽然不是 AI 工具,但配合 AI 编程使用,能让你的开发效率更上一层楼。
### GitLens
GitLens 能让你更直观地查看 Git 代码的修改历史,把鼠标放到任意代码行上就能看到这行代码的作者、提交时间等信息。
![](https://pic.yupi.icu/1/image-20260116125445257.png)
### Office Viewer
Office Viewer 能在编辑器里直接预览和编辑各种文档,包括 Markdown、Excel、Word、PDF 等,不用来回切换窗口。
![](https://pic.yupi.icu/1/image-20260116130527681.png)
### ESLint 和 Prettier
ESLint 是代码质量检查工具,Prettier 是代码格式化工具。这两个插件能帮你保持代码规范,避免 AI 生成的代码出现格式问题。
![](https://pic.yupi.icu/1/image-20260116131356553.png)
### Error Lens
Error Lens 能让错误信息直接高亮显示在代码行尾,一眼就能看到哪里有问题。
![](https://pic.yupi.icu/1/image-20260116140619858.png)
### Console Ninja
Console Ninja 能让你在编辑器里直接看到代码的运行结果,不用频繁切换到浏览器控制台。
![](https://pic.yupi.icu/1/image-20260116141109420.png)
### Supermaven
[Supermaven](https://supermaven.com/) 是一个专注于代码补全的插件,最大的特点是 100 万 Token 的上下文窗口,补全速度极快,准确度也很高。
![](https://pic.yupi.icu/1/image-20260108230146505.png)
## 五、怎么选择 AI IDE 插件?
- 如果想要最强大的功能(智能体、多文件编辑),选 Cline。它支持 VS Code 和 JetBrains,完全免费,功能接近 Cursor。
- 如果主要需要代码补全,选 GitHub Copilot。它最成熟稳定,代码补全质量最高,而且跨平台支持。
@@ -1,7 +1,5 @@
# AI 辅助工具集
你好,我是鱼皮。
在前面的文章中,我们学习了各种 AI 编程工具,包括 AI 零代码平台、AI 智能体平台、AI 代码编辑器、命令行工具、IDE 插件。但要真正高效地开发项目,光有 AI 工具还不够,还需要一些辅助工具来完善整个工作流程。
@@ -339,14 +337,29 @@ AI 就能通过调用 MCP,给你最准确的时间。
还有更多常用 MCP 服务器,比如:
### 常用 MCP 服务推荐
- @modelcontextprotocol/server-filesystem:文件系统访问
- @modelcontextprotocol/server-githubGitHub 操作
- @modelcontextprotocol/server-postgres:数据库查询
- @modelcontextprotocol/server-puppeteer:浏览器自动化
除了前面演示的时间 MCP,还有很多实用的提升 AI 编程效率的 MCP 服务。
**网页相关**
- Firecrawl MCP:让 AI 能够自动抓取和理解网页内容
- Brave Search MCP:注重隐私保护的网络搜索
- Context7:获取最新的技术文档
- Web to MCP:复刻网页组件
- Chrome DevTools MCP:浏览器调试
**代码托管**
- GitHub MCP:操作 GitHub 代码仓库
**部署相关**
- EdgeOne Pages MCP:一键部署项目到腾讯云
**文件存储**
- COS MCP:操作腾讯云对象存储
这些 MCP 服务能让 AI 的能力边界大大扩展,从单纯的代码生成变成能够联网搜索、操作文件、部署项目的全能助手。
![](https://pic.yupi.icu/1/image-20260116122211103.png)
如果你想了解更多 MCP 服务,可以访问:
@@ -358,9 +371,61 @@ AI 就能通过调用 MCP,给你最准确的时间。
## 四、其他实用工具
## 四、规范化开发工具
除了版本管理、部署平台和 MCP,还有一些其他实用工具值得了解
除了版本管理、部署平台和 MCP,还有一些规范化开发工具能帮你提升项目质量
### Spec-kit 和 OpenSpec
如果你想让 AI 按照规范化的流程来开发项目,可以了解一下 **规范驱动开发**SDD)工具。
这些工具的核心理念是:先把需求写成规范文档,然后让 AI 严格遵守规范来生成代码,确保代码质量和需求对齐。
![](https://pic.yupi.icu/1/image-20260116161926017.png)
1Spec-kitGitHub 推出的规范驱动开发框架,适合从 0 开始做大型新项目
![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE4%E5%A4%A7.jpeg)
2)OpenSpec:轻量的规范驱动开发框架,适合在现有项目上迭代功能
![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE6%E5%A4%A7.jpeg)
关于这些工具更详细的用法,可以见本 Vibe Coding 教程的《工具实战》部分。
### Agent Skills
Agent Skills 是 Anthropic 推出的 AI 技能系统,可以把复杂的任务指令、脚本和资源打包成一个技能,让 AI 快速学会新本事。
![](https://pic.yupi.icu/1/%25E6%25BC%25AB%25E7%2594%25BB%25E5%259B%25BE7%25E5%25A4%25A7.jpeg)
比如 frontend-design 技能能让 AI 生成更有个性的界面设计,告别千篇一律的蓝紫渐变色。
![](https://pic.yupi.icu/1/image-20260116152325220.png)
关于 Agent Skills 更详细的用法,可以见本 Vibe Coding 教程的《工具实战》部分。
### Superpowers
Superpowers 是一套让 AI 编程助手变得更专业的软件开发流程,提供了一套可组合的编程技能包,确保 AI 能够按照专业程序员的开发习惯来工作。
![](https://pic.yupi.icu/1/%25E6%25BC%25AB%25E7%2594%25BB%25E5%259B%25BE8%25E5%25A4%25A7.jpeg)
这些工具比较适合团队协作和大型项目开发,如果你只是做简单的个人项目,可能用不上。但了解这些工具的理念,对提升代码质量很有帮助。
![](https://pic.yupi.icu/1/image-20260116180907360-20260116180953363-20260116181058928-20260116181118631-20260118134539731.png)
关于 Superpowers 更详细的用法,可以见本 Vibe Coding 教程的《工具实战》部分。
## 五、其他实用工具
除了上面这些工具,还有一些其他实用工具值得了解。
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,128 @@
# Agent Skills:通用 AI 技能库
> 让 AI 快速学会新技能
你好,我是程序员鱼皮。
在前面的文章中,我们学习了如何用 AI 生成代码。但你可能会发现,AI 生成的界面总是千篇一律的蓝紫渐变色,或者在某些特定任务上表现不够专业。
有没有办法让 AI 快速学会新技能,变得更专业呢?
这篇文章,我会介绍 **Agent Skills**Anthropic 推出的 AI 技能系统,可以让 AI 快速掌握各种专业技能。
## 一、什么是 Agent Skills
[Agent Skills](https://claude.com/blog/skills) 是 Anthropic 新推出的 AI 技能系统。
它定义了一种 **封装 AI 工作流** 的标准:开发者可以把复杂的任务指令、脚本和资源打包成一个 **技能(Skill**;作为用户,你只需要安装这些技能,AI 就能立刻学会这项本事,不用重复造轮子。
![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE7%E5%A4%A7.jpeg)
## 二、快速上手 Agent Skills
让我们来实战一下,利用 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 这个 Agent Skills 来优化生成网站的界面。
### 1、安装 Agent Skills
首先打开 Claude Code,输入一行命令,把官方提供的 Skills 注册为插件市场:
```markdown
/plugin marketplace add anthropics/skills
```
![](https://pic.yupi.icu/1/image-20260116145357194.png)
然后输入 `/plugin`,通过 Tab 键切换到 Marketplaces 界面,批量安装官方提供的 Skills。包括:
- document-skills:文档技能包,可以处理 Excel、Word、PPT、PDF 等文档。
- example-skills:示例技能包 ,可以处理技能创建、构建 MCP、视觉设计、算法艺术、网页测试、动图制作、主题样式等。
![](https://pic.yupi.icu/1/claudecode%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85.png)
安装好之后,输入 `/skills` 命令,就能看到所有已经安装完成的技能了,我们要的 `frontend-design` 也在其中。
![](https://pic.yupi.icu/1/image-20260116145938235.png)
可以在本地找到 Skills 的安装位置,你会发现,SKills 的本质就是一组封装好的提示词文档 + 脚本文件等:
![](https://pic.yupi.icu/1/image-20260116151949110.png)
还有另外一种安装方式,也可以在 Claude Code 中输入一行命令来安装 [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) 技能。
```markdown
skill install anthropic-agent-skills:frontend-design
```
### 2、使用 Agent Skills
安装完 SKills 后,你只需要和之前一样跟 AI 对话,程序会自动根据你的任务选择使用什么 Skills。
比如我让 AI 开发一个精美的狼人杀网页游戏,它会询问我是否要使用 `frontend-design` 技能。
![](https://pic.yupi.icu/1/image-20260116152325220.png)
使用这个技能后,AI 会选择独特的设计风格,生成的界面既有个性又专业,告别千篇一律的蓝紫渐变色。而且不需要你每次都重复输入一堆设计要求,非常方便!
![](https://pic.yupi.icu/1/image-20260116153402176.png)
不用技能是这样的,对比一下:
![](https://pic.yupi.icu/1/image-20260116155623890.png)
## 三、更多 Agent Skills
目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合,涵盖编程相关的数据库优化、API 安全、测试策略、代码审查、文档生成,还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。
如果官方提供的技能不够用,你还可以上传自定义技能,或者访问 [Claude Skills Hub](https://www.claudeskill.site/) 下载社区贡献的技能。
![](https://pic.yupi.icu/1/image-20260116152552700.png)
值得一提的是,Agent Skills 现已成为 [通用标准](https://agentskills.io)。除了 Claude[Cursor](https://cursor.com/docs/context/skills) 等主流 AI 编程工具也会陆续提供支持。也就是说,你在一个工具里用的技能,在另一个工具里也能复用。
## 四、Agent Skills 的优势
Agent Skills 最大的优势是 **可复用性**
以前,如果你想让 AI 生成特定风格的界面,需要每次都写一大段提示词。现在有了 Agent Skills,只需要安装一次技能,以后就能直接使用,不用重复输入。
而且 Agent Skills 是 **跨工具通用** 的。你在 Claude Code 中安装的技能,以后在 Cursor 等其他工具中也能用,不用重复配置。
此外,Agent Skills 是 **社区驱动** 的。任何人都可以创建和分享技能,整个社区的智慧都能为你所用。
## 写在最后
看到这里,相信你已经对 Agent Skills 有了基本的了解。
**Agent Skills 让 AI 能够快速学会新技能,不用每次都重复输入提示词。**
如果你经常需要 AI 完成某些特定的任务,比如生成特定风格的界面、处理特定格式的文档,那么 Agent Skills 会是你的好帮手。
建议你亲自尝试安装几个技能,体验一下 Agent Skills 的便利性。
## 推荐资源
1)鱼皮 AI 导航网站:[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
2)编程导航学习圈:[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
3)程序员面试八股文:[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
4)程序员写简历神器:[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
51 对 1 模拟面试:[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
@@ -0,0 +1,215 @@
# OpenSpec:轻量规范开发框架
> 让文档和代码始终保持同步
你好,我是程序员鱼皮。
在前面的文章中,我们学习了 Spec-kit 规范驱动开发框架。但你可能会觉得 Spec-kit 的流程太复杂了,有没有更轻量的选择呢?
这篇文章,我会介绍 **OpenSpec**,一个轻量的规范驱动开发框架,比 Spec-kit 更简单易用,适合在现有项目上迭代功能。
## 一、什么是 OpenSpec
[OpenSpec](https://openspec.dev/) 是一个轻量的规范驱动开发框架,比 Spec-kit 更简单易用。
它的核心理念是把规范文档作为代码库的一部分,每次改功能都 **先写变更提案** => 确认后再实现 => 实现完再把变更归档到规范文档中,让文档和代码始终保持同步。
![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE6%E5%A4%A7.jpeg)
## 二、快速上手 OpenSpec
让我通过一个实际例子,带你快速上手 OpenSpec。
### 1、安装 OpenSpec
访问 [OpenSpec 官方仓库](https://github.com/Fission-AI/OpenSpec/) 查看文档。
首先确保你的电脑安装了符合要求的 Node.js 版本(比如我这里要求 Node.js >= 20.19.0),然后全局安装 OpenSpec CLI
```bash
npm install -g @fission-ai/openspec@latest
```
进入你的项目目录,运行初始化命令:
```bash
openspec init
```
初始化过程中会让你选择要集成的 AI 工具(比如 Claude Code、Cursor 等),我这里选择 Cursor。
![](https://pic.yupi.icu/1/image-20260116163202471.png)
运行命令后,OpenSpec 会自动在你的项目中生成一个 `openspec/` 目录,里面包含:
- `openspec/specs/`:存放主规范文档,记录了项目的完整现状
- `openspec/changes/`:存放变更提案,记录了每次修改的计划
- ⭐️ `openspec/AGENTS.md`:让 AI 编程助手使用 OpenSpec 进行规范驱动开发的操作指南,包含了如何创建变更提案、编写需求规范、验证和归档变更的完整工作流程。
- `openspec/project.md`:当前项目的上下文说明(用来记录项目的信息)
![](https://pic.yupi.icu/1/image-20260116164308965.png)
此外,还会根据你选择的 AI 编程工具,生成对应的命令文件,比如 Cursor 的:
![](https://pic.yupi.icu/1/image-20260116173814973.png)
有了这些文件,我们就可以开始规范化的开发流程了。
### 2、标准化开发流程
参考 [官方文档](https://github.com/Fission-AI/OpenSpec/),主要分为 5 个步骤:
#### 1Draft 起草变更提案
直接在 AI 编程工具中跟 AI 说,让它创建变更提案。比如我想添加用户搜索功能:
```markdown
创建一个 OpenSpec 的 change,添加功能:根据名称和邮箱搜索用户
```
也可以用 AI 编程工具(比如 Claude Code、Cursor)的斜杠命令:
```markdown
/openspec:proposal 添加功能:根据名称和邮箱搜索用户
```
![](https://pic.yupi.icu/1/image-20260116171714070.png)
AI 会给这个功能创建一个独立的目录 `openspec/changes/add-user-search/`,目录下创建一系列文档:
- `proposal.md`:描述要改什么、为什么改
- `tasks.md`:实施步骤的任务分解
- `specs/…/spec.md`:需求变更的具体内容
![](https://pic.yupi.icu/1/image-20260116171953809.png)
#### 2Verify & Review 验证和审查
可以运行下列命令,查看 AI 创建的变更提案是否正确:
```bash
openspec list # 查看所有变更
openspec validate add-user-search # 验证格式是否正确
openspec show add-user-search # 查看详细内容
```
![](https://pic.yupi.icu/1/image-20260116172259055.png)
#### 3)和团队一起审查提案
如果需要完善,可以继续跟 AI 对话,比如:
```markdown
你能帮我添加更多搜索条件和限制么?
```
AI 会更新规范和任务列表,直到大家达成一致。
#### 4Implement 实现变更
规范确认后,让 AI 开始实现:
```markdown
规范已经很完美了,开始生成代码吧
```
也可以用斜杠命令:
```markdown
/openspec:apply add-user-search
```
AI 会按照 `tasks.md` 中的任务列表逐一实现,并标记完成状态。
![](https://pic.yupi.icu/1/image-20260116172654371.png)
很快生成完成,AI 的输出非常整齐,所有改动一目了然:
![](https://pic.yupi.icu/1/image-20260116172905921.png)
#### 5Archive 归档变更
所有任务完成后,让 AI 归档这次变更:
```markdown
请归档这次变更
```
也可以用斜杠命令:
```markdown
/openspec:archive add-user-search
```
或者在终端运行:
```bash
openspec archive add-user-search --yes
```
![](https://pic.yupi.icu/1/image-20260116172957759.png)
这个命令会:
- 将变更文件夹移动到 `openspec/changes/archive/` 归档区
- 将需求变更自动合并到 `openspec/specs/` 主规范中
- 保持文档和代码的同步
![](https://pic.yupi.icu/1/image-20260116174247313.png)
这样一来,通过 `openspec/changes/` 的历史记录,你可以随时追溯每次变更的来龙去脉。
此外,整个开发过程中,建议大家定期运行 `openspec validate` 验证命令, 确保规范的完整性。
## 三、OpenSpec 和 Spec-kit 的区别
到这里,相信大家也能感受到 OpenSpec 和 Spec-kit 的区别了。
- Spec-kit 需要完整的 7 步流程:制定准则 → 写需求 → 澄清疑问 → 定方案 → 拆任务 → 检查 → 写代码),适合从 0 开始做大型新项目
- OpenSpec 的流程更简化:起草提案 → 审查 → 实现 → 归档 → 验证,上手更快,适合在现有项目上迭代功能。
如果你是在现有项目上迭代功能,OpenSpec 会是更好的选择。如果你是从 0 开始做大型新项目,Spec-kit 的完整流程能帮你打好基础。
## 写在最后
看到这里,相信你已经对 OpenSpec 有了基本的了解。
**OpenSpec 比 Spec-kit 更轻量,更适合日常开发中的功能迭代。**
如果你觉得 Spec-kit 太重,可以试试 OpenSpec。它的流程更简单,但同样能保证文档和代码的同步,让团队协作更顺畅。
建议你亲自尝试在项目中使用 OpenSpec,体验一下规范驱动开发的好处。
## 推荐资源
1)鱼皮 AI 导航网站:[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
2)编程导航学习圈:[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
3)程序员面试八股文:[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
4)程序员写简历神器:[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
51 对 1 模拟面试:[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
@@ -0,0 +1,237 @@
# Spec-kit:规范驱动开发框架
> 让 AI 按照专业流程开发项目
你好,我是程序员鱼皮。
在前面的文章中,我们学习了如何用 AI 快速生成代码。但你可能会发现,AI 有时候会 “想到哪写到哪”,生成的代码可能不符合预期,或者项目做到一半就乱套了。
有没有办法让 AI 按照专业的流程来开发项目呢?
这篇文章,我会介绍 **Spec-kit**,一个由 GitHub 推出的规范驱动开发框架,让 AI 像专业程序员一样工作。
让我们开始吧!
## 一、什么是 Spec-kit
[Spec-kit](https://github.com/github/spec-kit) 是 GitHub 推出的规范驱动开发(SDD)框架。
什么是规范驱动开发呢?
传统开发流程是:想到什么写什么,边写边改,最后再补文档。这样容易导致需求不清晰、代码和文档对不上。
而规范驱动开发的思路正好相反:**先把需求写成规范文档,并且把规范文档当作代码的唯一真相来源**。你可以把规范文档理解为 "法律条文",它包含了详细的需求描述、系统设计和接口定义。AI 必须严格遵守这些条文来生成代码,确保产出完全符合预期。
![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE4%E5%A4%A7.jpeg)
## 二、快速上手 Spec-kit
让我通过一个实际例子,带你快速上手 Spec-kit。
### 1、安装 Spec-kit
首先打开终端,利用 uvx 命令直接安装运行 Specify 工具,并初始化一个项目:
```bash
uvx --from git+https://github.com/github/spec-kit.git specify init my-project
```
![](https://pic.yupi.icu/1/image-20260116141308958.png)
选择你使用的 AI 编程工具,Spec-kit 支持 Claude Code、GitHub Copilot 等几乎所有主流编程工具。这里我选 Claude Code
![](https://pic.yupi.icu/1/image-20260116141507190.png)
根据操作系统选择脚本类型,Windows 选下面的,其他选上面的:
![](https://pic.yupi.icu/1/image-20260116141537030.png)
执行完这个命令后,会在当前目录下创建一个 `my-project` 文件夹:
![](https://pic.yupi.icu/1/image-20260116141613246.png)
文件夹里面包含了这些核心文件:
- `.specify/memory/constitution.md`:项目的基本准则和约定
- `.specify/scripts/`:一些可执行脚本
- `.specify/templates/`:模板文件
- `.claude/commands/`:定义了一套内置的斜杠命令,让你在 AI 编程工具中可以直接调用
![](https://pic.yupi.icu/1/image-20260116142528820.png)
初始化程序还给了我们一些指引,告诉我们接下来如何运用这些命令来开发项目。
![](https://pic.yupi.icu/1/image-20260116141715310.png)
用 Claude Code 打开这个项目文件夹,就可以在对话中使用定义好的命令了。
![](https://pic.yupi.icu/1/image-20260116142740271.png)
### 2、标准化开发流程
接下来就是标准化的开发流程,参考 [官方文档](https://github.com/github/spec-kit),主要分为 7 个步骤:
#### 1Constitution 制定项目准则
运行 `/speckit.constitution` 命令,定义项目的基本原则、代码规范、性能标准等。这是项目的 "宪法",后续所有开发都要遵守。
比如:
```markdown
/speckit.constitution 禁止使用蓝紫渐变色风格的 UI
```
💡 如果你要做中文项目,最好在制定项目准则时就明确告诉 AI “整个网站使用中文”。
![](https://pic.yupi.icu/1/image-20260116160508054.png)
AI 更新了项目准则文档:
![](https://pic.yupi.icu/1/image-20260116160610169.png)
建议每一步我们都用 Git 提交一个版本,这样出了问题后能及时回滚,也便于我们看到每一步改动的文件。
![](https://pic.yupi.icu/1/image-20260116160745548.png)
#### 2Specify 编写功能规范
运行 `/speckit.specify` 命令,描述要做什么功能、为什么做、用户需求是什么。比如:
```markdown
/speckit.specify 我想做个【自动提醒我喝水的网站】
```
![](https://pic.yupi.icu/1/image-20260116161231223.png)
AI 为这次的需求创建了一个新的 Git 分支,防止污染现有项目。在这个分支下创建了一个需求规格文档(spec.md) + 一个需求检查文档(requirements.md)。
![](https://pic.yupi.icu/1/image-20260116161307642.png)
需求规格文档非常详细,还包含了边缘测试用例,针对用户各种可能的操作进行处理。
![](https://pic.yupi.icu/1/image-20260116161926017.png)
需求检查文档中记录了 AI 对于需求的理解,打钩表示 AI 理解并确认了:
![](https://pic.yupi.icu/1/image-20260116161500358.png)
#### 3)Clarify 澄清不明确的地方(可选)
如果你发现需求检查文档中有的条目没有打钩,那你需要通过 Clarify 命令来让 AI 引导你进一步明确需求,直到所有的条目都打上勾。
运行 `/speckit.clarify` 命令,AI 会提出结构化的问题,让你来回答。从而帮你填补需求中的空白,比如边界情况、错误处理等。
![](https://pic.yupi.icu/1/image-20260116162702812.png)
#### 4Plan 制定技术方案
运行 `/speckit.plan` 命令,让 AI 决定用什么技术栈、系统架构、数据模型、API 接口等。
![](https://pic.yupi.icu/1/image-20260116163506902.png)
制定技术方案完成,这次生成了一大堆文档,简单了解一下:
- CLAUDE.md 项目开发指南,记录技术栈和项目结构,用于指导 Claude Code 接下来如何开发
- quickstart.md 快速入门指南,包含 6 个实施阶段和部署方案
- plan.md 实施方案,定义了纯客户端架构、存储策略、宪法合规性检查等
- data-model.md 数据模型设计,定义了 4 个核心实体(提醒设置、水量日志、每日进度、历史记录)和存储结构
- research.md 技术研究文档,记录了 8 项关键技术决策
- contracts/api-contract.md API 接口文档
![](https://pic.yupi.icu/1/image-20260116164021646.png)
接下来,我们就可以准备开发实现了。
![](https://pic.yupi.icu/1/image-20260116163553725.png)
#### 5Tasks 拆解任务
运行 `/speckit.tasks` 命令,把计划拆解成可执行的任务列表,并标注依赖关系和优先级。
![](https://pic.yupi.icu/1/image-20260116164537006.png)
生成了一个任务列表文档,每一步要做什么都非常清晰:
![](https://pic.yupi.icu/1/image-20260116164612533.png)
#### 6Analyze 分析检查(可选)
运行 `/speckit.analyze` 命令,检查规范、计划、任务是否完整一致,提前发现设计缺陷。
![](https://pic.yupi.icu/1/image-20260116164936733.png)
可以看到,AI 没有检查出问题,还让我自信地进行下一步,真爽死了!
#### 7Implement 执行实现
最后,运行 `/speckit.implement` 命令,让 AI 按照任务列表生成代码。
![](https://pic.yupi.icu/1/image-20260116170006815.png)
大功告成,看一下效果~
![](https://pic.yupi.icu/1/image-20260116170146827.png)
因为我这里始终没有提到使用中文输出,所以网站内容都是英文的,不过我感觉效果还可以。
## 三、Spec-kit 的优缺点
到这里,我们已经学会了如何用 Spec-kit 开发完整项目,再复习一下完整流程:
![](https://pic.yupi.icu/1/%25E6%25BC%25AB%25E7%2594%25BB%25E5%259B%25BE5%25E5%25A4%25A7.jpeg)
即使不用 Spec-kit,我们开发完整项目时也可以人工遵循这些步骤。
这种模式最大的好处是 **对齐**。所有人都基于同一份清晰的规范文档工作,大家对需求的理解高度一致,既减少了沟通中的误解,又能确保代码质量。
不过缺点也很明显,对于小项目,本来直接写代码几分钟就能搞定了,上面这套流程走下来差不多要半个小时!
所以这套流程比较适合团队从 0 开始做完整的新项目,虽然流程比直接写代码慢一些,但能大大降低返工的风险,长远来看反而更高效。
## 写在最后
看到这里,相信你已经对 Spec-kit 有了基本的了解。
**Spec-kit 不是万能的,但在合适的场景下,它能帮你大幅提升项目质量。**
如果你正在做大型项目、需要团队协作、对代码质量要求高,那么可以试试 Spec-kit。但如果你只是想写个简单的脚本或者快速验证一个想法,直接让 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)
51 对 1 模拟面试:[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
@@ -0,0 +1,213 @@
# Superpowers:核心技能库
> 让 AI 像专业程序员一样工作
你好,我是程序员鱼皮。
在前面的文章中,我们学习了各种 AI 编程工具和规范化开发框架。但你可能会想:有没有一套完整的开发流程,能让 AI 像专业程序员一样工作呢?
这篇文章,我会介绍 **Superpowers**,一套让 AI 编程助手变得更专业的软件开发流程。
## 一、什么是 Superpowers
[Superpowers](https://github.com/obra/superpowers) 是一套让 AI 编程助手变得更专业的 **软件开发流程**。它不仅为 Claude Code 提供了一套可组合的 **编程技能包**,还提供了规范和指令,确保 AI 能够正确使用这些技能。
传统的 AI 编程,你一说需求它就开始噼里啪啦地写,结果可能并不是你想要的。而装了 Superpowers 之后,AI 会先问清楚你到底想做什么,然后出设计方案让你确认,接着制定详细的执行计划,最后才分步骤去实现,每一步还会自我检查。
就像给一个刚进公司啥都不懂的 AI 加上了超能力,瞬间让它有了专业程序员的开发习惯。
![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE8%E5%A4%A7.jpeg)
## 二、快速上手 Superpowers
让我通过一个实际例子,带你快速上手 Superpowers。
### 1、安装 Superpowers
参考 [Superpowers 官方文档](https://github.com/obra/superpowers),在 Claude Code 中运行以下命令安装。
先注册市场:
```bash
/plugin marketplace add obra/superpowers-marketplace
```
![](https://pic.yupi.icu/1/image-20260116171109190.png)
再从市场安装插件:
```bash
/plugin install superpowers@superpowers-marketplace
```
![](https://pic.yupi.icu/1/image-20260116171125164.png)
安装后运行 `/help` 查看可用命令,你会看到这 3 个命令
- `/superpowers:brainstorm` 通过和用户交互来不断改进设计
- `/superpowers:write-plan` 创建实现方案
- `/superpowers:execute-plan` 批量执行方案
![](https://pic.yupi.icu/1/image-20260116171300633.png)
### 2、标准工作流程
下面以开发一个 "用户注册模块" 为例,演示 Superpowers 官方的标准工作流程。
首先,在终端中运行 `claude` 命令来启动 Claude Code,然后按照下面的 7 个步骤操作:
#### 1Brainstorming 头脑风暴 => 对齐需求
选择 `/superpowers:brainstorm` 命令并输入需求:
![](https://pic.yupi.icu/1/image-20260116175524611.png)
Superpowers 不会急着写代码,而是先通过多轮问答和你对齐需求,比如:
- 用户注册模块的主要场景是什么?
- 希望支持哪些注册方式?
![](https://pic.yupi.icu/1/image-20260116175456666.png)
通过交互问答,AI 会探索不同方案、不断改进设计。
![](https://pic.yupi.icu/1/image-20260116175907783.png)
当需求和方案确认无误后,它会自动将详细的设计文档保存到 `docs/plans/` 目录。
![](https://pic.yupi.icu/1/image-20260116180740987.png)
#### 2Using Git Worktrees 创建独立工作空间(可选)
设计方案通过后,Superpowers 会帮你创建一个 Git 工作树(worktree),在新分支上建立隔离的工作空间,运行项目初始化,并验证测试基线是否干净。这样可以避免污染主分支。
这一步是可选的,我这里直接让 AI 继续执行,看看会发生什么:
![](https://pic.yupi.icu/1/image-20260116181020601.png)
#### 3Writing Plans 制定实施计划
运行 `/superpowers:write-plan` 命令,让 Superpowers 生成一份详细的实施计划,把开发任务拆解成多个原子级步骤(每个任务控制在 2 ~ 5 分钟)。
我这里 AI 直接自动执行了,省了一步命令~
![](https://pic.yupi.icu/1/image-20260116180907360-20260116180953363-20260116181058928-20260116181118631.png)
查看 AI 生成的实施计划文档,每个任务都包含:
- 精确的文件路径
- 完整的代码内容
- 验证步骤
![](https://pic.yupi.icu/1/image-20260116181910011.png)
好家伙,这哪里是实施计划文档啊,感觉大多数代码都写出来了!
![](https://pic.yupi.icu/1/image-20260116181959589.png)
#### 4)执行任务
运行 `/superpowers:execute-plan` 命令,Superpowers 会采用以下方式之一执行:
- 子代理驱动开发(Subagent-Driven Development):为每个任务分配一个全新的子代理,经过两阶段审查(规范合规性检查 + 代码质量检查)
- 批量执行(Executing Plans):分批执行任务,在关键节点暂停让人工检查
我这里 AI 直接问我想要哪种方式:
![](https://pic.yupi.icu/1/image-20260116182128737.png)
我盲选一手 Subagent-Driven 方式,AI 自动选择了对应的开发技能:
![](https://pic.yupi.icu/1/image-20260116182244311.png)
然后 AI 就开始干活了:
![](https://pic.yupi.icu/1/image-20260116182445078.png)
#### 5Test-Driven Development 测试驱动开发
在实现过程中,Superpowers 会强制执行 `红-绿-重构` 流程:
- 先写失败的测试
- 运行测试,确认失败
- 写最小化的代码让测试通过
- 运行测试,确认通过
- 提交代码
![](https://pic.yupi.icu/1/image-20260116183728764.png)
如果发现有代码是在测试之前写的,Superpowers 会删除它,强制你先写测试。
#### 6Code Review 代码审查
每完成一批任务后,Superpowers 会自动触发代码审查,对照计划检查代码,按严重程度报告问题。如果发现严重问题(Critical),会阻止继续进行。
![](https://pic.yupi.icu/1/image-20260116182947482.png)
#### 7)完成开发
所有任务完成后,Superpowers 会验证所有测试是否通过:
![](https://pic.yupi.icu/1/image-20260116194339313.png)
然后 AI 可能会提供几个选项,比如合并到主分支 / 创建 PR / 保留分支 / 丢弃更改。
如果你确定功能没有问题,可以利用 Superpowers 内置的技能来完成开发分支的清理工作。
![](https://pic.yupi.icu/1/image-20260116194520921.png)
## 三、Superpowers 的优缺点
这套 “先设计后编码” 的规范流程走下来,代码质量会更有保障,不过代价就是速度确实比让 AI 直接生成代码会慢很多。真的是慢很多!就这么个需求我搞了半个多小时!!!
![](https://pic.yupi.icu/1/image-20260116183405162.png)
如果你正在开发大型项目,需要团队协作,那么可以试试 Superpowers,前期多花的时间会在后期省回来。但是如果你只是想写个简单的脚本或者快速验证一个想法,用它就有点儿牛刀杀鸡了,真没必要。
## 写在最后
看到这里,相信你已经对 Superpowers 有了基本的了解。
**Superpowers 能让 AI 像专业程序员一样工作,但代价是开发速度会变慢。**
如果你正在做大型项目、需要高质量的代码、团队协作,那么 Superpowers 会是不错的选择。但如果你只是做简单的个人项目,直接让 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)
51 对 1 模拟面试:[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
@@ -0,0 +1,152 @@
# AI 时代程序员必须做的 20 件事
你好,我是程序员鱼皮。
2026 年了,AI 已经能写 85% 的代码,让一个人能顶一个团队。程序员的角色正在被重新定义:从代码编写者变成 AI 指挥官,从手动实现变成意图驱动。
你可能会好奇:
- 在 AI 时代,程序员最危险的是什么?
- 哪些能力会让我在职场中更有竞争力?
- 我应该如何调整自己的学习和工作方式?
别担心,这篇文章我会带你了解 AI 时代程序员必须要做的 20 件事。做到一半以上,你就能稳稳立于不败之地。
## 一、思维转变
在 AI 时代,程序员的核心能力不再是写代码的速度和质量,而是把想法清晰表达出来的能力。
1、把事情想明白、说清楚,能准确表达你的需求。
明确需求始终是程序员工作的第一环,AI 再强也替代不了人与人的沟通。更重要的是,你要学会跟 AI 说清楚你想要什么,用清晰的语言描述需求。
2、AI 生成的代码可能有漏洞,要多注意边界条件和编码规范,多做测试。
你必须建立严格的代码质量检查流程,像自动化测试、静态分析、安全扫描、人工审核,一个都不能少。
3、工作中做好计划和进度跟踪,及时沟通和汇报,不把问题遗留到变成事故。
让 AI 帮你干活的时候,你要随时检查它的产出,确保每一个自动生成的功能都能追溯。控制风险的速度必须超过写代码的速度。
4、思考和分析如何优化目前的工作流程,引入工具和方法,提升生产效率。
AI 时代最值钱的能力是 **知道什么时候用什么工具**。要把 AI 融入到你的日常工作中,让效率翻倍增长。
## 二、技术深耕
AI 能帮你写代码,但不能帮你做决策。你懂不懂技术,决定了你能不能判断 AI 写的代码对不对、好不好。
5、把自己工作中用到的技术用熟,搞清楚原理、优缺点、适用场景。
如果你不懂技术原理,就只能盲目相信 AI,无论它说什么你都 “对对对”。只有真正理解技术,才能在 AI 给你的一堆方案里挑出最好的那个。
6、主动拓宽能力边界,前端学点儿后端,后端学点儿前端。
现在很多公司都在推全栈,AI 让跨界学习变得更简单了。别给自己设限,能独当一面的人,才是公司真正需要的。
7、深入学习至少一个常用开源项目,从源码层面吃透这项技术。
AI 很难理解大型项目的整体设计思路。因此你学习如何读懂源码时,其实也是在学习 “怎么写出让 AI 更容易理解的代码”。
8、自己一个人从 0 到 1 开发一个完整的项目。
从需求、设计、开发、测试到上线,每个环节都亲自走一遍。只有做过完整项目的人,才能真正理解 AI 在哪些环节有用、哪些环节不靠谱。
## 三、AI 实战
会用 AI 工具只是入门,真正的高手是能指挥 AI、管理 AI 的人。
9、熟练掌握至少一款 AI 编程工具,比如 Cursor、Claude Code、GitHub Copilot 等。
不会用 AI 工具的程序员,就像不会用搜索引擎一样,干活效率会差一大截。
10、掌握 Vibe Coding 氛围编程的技巧。
简单说就是 **用自然语言告诉 AI 你要什么**,让 AI 帮你写代码。你要少纠结语法细节,多关注产品整体的感觉和方向。
11、学会写高质量的 Prompt,让 AI 输出更精准的代码。
怎么跟 AI 说话,是 AI 时代的必修课。比如把复杂的任务拆成小块,一步一步让 AI 完成,效果会好很多。
12、学会给 AI 提供足够的背景信息。
AI 写代码的质量,很大程度取决于你给它的信息够不够。要学会整理项目文档和代码注释,让 AI 更了解你的项目。
13、学习 AI 应用开发,比如 LangChain、Spring AI、Agent 开发。
未来的软件几乎都会带有 AI 功能,会做 AI 应用开发的人,相当于拿到了未来的入场券。
14、学会让多个 AI 协作完成复杂任务。
以后程序员的工作会越来越像项目经理,把大任务拆成小任务,分配给不同的 AI 去完成,然后把结果整合起来。
## 四、学习成长
技术更新换代越来越快,只有持续学习和积累才能不被淘汰。
15、每天读 2 ~ 3 篇技术文章,一年就是近 1000 篇,相当于几十套教程。
很多同学总是以工作忙为理由让自己习惯躺平,但其实每天抽十几分钟进行碎片化学习就够了。要重点关注 AI 大模型、AI Agent、RAG 这些新技术。
16、不断接触新技术和新工具,完善自己的知识体系。
技术圈变化太快了,今年火的东西明年可能就过时了。要持续关注 AI 资讯,保持好奇心,别让自己掉队。
💡 可以通过 [鱼皮的 AI 导航网站](https://ai.codefather.cn/) 获取最新 AI 资讯和 AI 学习资源。
![](https://pic.yupi.icu/1/image-20260109121412266.png)
17、坚持复盘总结,每天记录工作、每月整理收获、每半年做一次大复盘。
没有总结的经验不是经验,只是经历。把踩过的坑、学过的知识整理成笔记,下次就能直接用。
18、整理属于自己的素材库,比如 Bug 库、经验库、知识笔记库、工具库。
工作 1 年和 3 年的差距,就在于你有没有持续积累。这些积累是你判断 AI 写的代码对不对、处理疑难杂症的底气。可以用语雀、Notion 等有知识库能力的软件来整理。
19、持续坚持技术内容输出,每周产出 1 ~ 2 篇原创技术文章或笔记。
输出不是简单地搬运知识,而是要分享 AI 学不到的实战经验,比如怎么跟不同的人沟通、怎么在老项目里用上 AI、怎么平衡开发的成本和收益。输出的同时,也是在倒逼你不断输入知识。
20、保持开放心态,拥抱变化,把 AI 当成队友而不是对手。
与其担心被 AI 取代,不如成为最会用 AI 的那批人。未来属于那些能和 AI 默契配合的高手。
## 写在最后
这 20 件事,其实可以总结为两个核心:
1. **会用 AI**:让 AI 成为你的效率倍增器,而不是你的替代者
2. **有真本事**:技术深度和实战经验,是你判断 AI 对不对的底气
那些只会 CRUD、不愿学习、拒绝改变的程序员,注定会被淘汰。但那些拥抱 AI、持续进化、有核心竞争力的人,反而会迎来职业生涯的黄金期。
**你不需要比 AI 强,你只需要比不会用 AI 的人强。**
种一棵树最好的时间是十年前,其次是现在。从今天开始,选 3 件事坚持做,一个月后你就会看到变化。
共勉!
## 推荐资源
1)鱼皮 AI 导航网站:[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)
2)编程导航学习圈:[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)
3)程序员面试八股文:[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)
4)程序员写简历神器:[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)
51 对 1 模拟面试:[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)
+16
View File
@@ -126,3 +126,19 @@
💬 交流反馈:欢迎在 [AI 导航社区](https://ai.codefather.cn) 提问
## 欢迎参与贡献
这套教程是开源的,也欢迎大家一起来完善它~
如果你在学习过程中:
- 发现了错别字或者不通顺的地方
- 有更好的图片示例或者项目案例
- 想补充新的 AI 工具介绍
- 发现了新的 Vibe Coding 技巧
- 有实用的提示词模板想分享
- 或者任何能让教程变得更好的想法
都可以直接在 GitHub 上提交 PRPull Request),让我们一起把这套教程打磨得更完善,帮助更多人学会 Vibe Coding