# 优质 AI 编程扩展推荐

大家好，我是程序员鱼皮。给大家分享一些我自己在用的 AI 编程扩展，帮你大幅提高 AI 编程效率和代码质量。

**万字长文 + 100 多张图**，绝对干货！点个收藏，让我们开始吧~


## 一、MCP 服务器类

MCP 的全称是 Model Context Protocol 模型上下文协议。简单来说，就是让 AI 大模型能够连接外部工具和数据源的一个开放标准。

打个比方，MCP 就像是 AI 的 USB-C 接口，原本 AI 只能根据训练数据来回答问题、生成代码，但有了这个统一接口，它就能连接各种外部工具，比如打开浏览器看网站、搜索并抓取网页内容、部署项目到云端、访问数据库等等，能力一下子就丰富起来了。

![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE1%E5%A4%A7.jpeg)



### ⭐️ Firecrawl MCP 网页内容抓取

首先要介绍的是 [Firecrawl MCP](https://www.firecrawl.dev/)，让 AI 能够自动抓取和理解网页内容。

我在开发项目时经常需要从网上获取参考资料、阅读官方文档和技术博客，或者分析竞品的功能实现。如果人工来做这件事，需要先打开网站、再手动复制粘贴内容，或者自己写个爬虫脚本，麻烦得一批。

有了 Firecrawl MCP，这事儿就简单多了。我直接在 AI 编程工具中跟 AI 说：

- 帮我获取这个网站的内容
- 帮我读一下这个文档
- 帮我从网上搜索 XX 相关的信息

它就能自动把网页的内容、结构、甚至是动态加载的数据都给我抓下来。

![](https://pic.yupi.icu/1/image-20260116105912027.png)



**如何使用？**

首先你需要在 [Firecrawl 官网](https://www.firecrawl.dev/app/api-keys) 注册账号，并创建一个调用服务的 API Key。

![](https://pic.yupi.icu/1/image-20260116105955795.png)

然后进入到 AI 编程工具中配置一下 MCP 服务器。这里我以 Cursor 为例，其他 AI 编程工具对接 MCP 的方法可以看各自的官方文档，比如 [Claude Code 接入 MCP 文档](https://docs.anthropic.com/en/docs/claude-code/mcp)。

打开 Cursor 设置，找到 Tools & MCP，点击 `+ New MCP Server`。

![](https://pic.yupi.icu/1/image-20260116110425690.png)

本质上就是修改 MCP 配置文件，添加这样的配置：

```json
{
  "mcpServers": {
    "firecrawl-mcp": {
      "command": "npx",
      "args": ["-y", "firecrawl-mcp"],
      "env": {
        "FIRECRAWL_API_KEY": "你的API密钥"
      }
    }
  }
}
```

![](https://pic.yupi.icu/1/image-20260116110454499.png)

这段配置的意思是：通过 npx 命令来运行 firecrawl-mcp 这个工具，并且把你的 API 密钥传给它。如果你电脑上还没有安装 npx，需要先 [到官网安装 Node.js](https://nodejs.org/zh-cn)，npx 会随着 Node.js 一起安装。

配置好之后，看到绿色的成功点点，表示能够正常使用了。

![](https://pic.yupi.icu/1/image-20260116110558199.png)

除了基础的网页抓取，Firecrawl MCP 还支持批量抓取整站内容、递归抓取网站的多层链接、失败自动重试等高级功能。



### Brave Search MCP 隐私搜索

接下来是 [Brave Search MCP](https://github.com/brave/brave-search-mcp-server)，让 AI 能够进行注重隐私保护的网络搜索。

在开发过程中，我经常需要让 AI 帮我搜索最新的技术资料、查找某个库的使用示例、或者了解某个技术问题的解决方案。传统的做法是自己去搜索引擎查，然后把结果复制给 AI，比较麻烦。

有了 Brave Search MCP，我直接跟 AI 说：

- 帮我搜索一下 React 19 的新特性
- 查一下这个错误怎么解决

它就能通过 Brave 搜索引擎去找答案。而且 Brave 搜索不会追踪你的搜索记录，隐私保护做得很好。

![](https://pic.yupi.icu/1/image-20260116111803869.png)



**如何使用？**

首先去 [Brave Search API](https://brave.com/search/api/) 注册账号，然后进入 API Key 管理页面，首先要选择一个订阅计划。必须选择免费版啊！每月有 2000 次查询额度，对于个人开发来说够用了。

![](https://pic.yupi.icu/1/image-20260116110947801.png)

但这里比较坑的一点是，即使订阅免费版，也要填写付款方式，没有海外银行卡的朋友可以撤了。

订阅成功后，创建 API Key：

![](https://pic.yupi.icu/1/image-20260116111311536.png)

拿到 API Key 后，在 Cursor 的 MCP 配置中添加：

```json
{
  "mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "brave-search-mcp"],
      "env": {
        "BRAVE_API_KEY": "你的API密钥"
      }
    }
  }
}
```

配置好后，AI 就能随时帮你搜索最新信息了。

支持网页、图片、视频、新闻等多种类型的内容搜索，甚至能搜索本地商家信息（比如附近的咖啡店）。

![](https://pic.yupi.icu/1/image-20260116111954334.png)

它还带有 AI 摘要功能，能把搜索结果自动总结成简洁的答案。



### ⭐️ Context7 获取最新文档

[Context7](https://context7.com/) 能帮 AI 获取到最新的技术文档。

我们都知道，AI 的训练数据是有截止时间的，比如 GPT-4 的知识可能只更新到 2023 年。这就导致一个问题，当你问 AI 关于某个框架最新版本的用法时，它给出的答案可能是过时的。

Context7 就是来解决这个问题的。它会自动从官方文档网站抓取最新的、特定版本的文档内容，然后提供给 AI。

![](https://pic.yupi.icu/1/image-20260116112229490.png)

这样一来，AI 给出的代码示例和建议就是基于最新文档的，不会去用已经废弃的写法，大大提高了项目能正常运行的概率。



**如何使用？**

访问 [Context7 Dashboard](https://context7.com/dashboard) 注册账号并获取 API Key，个人使用是免费的。

![](https://pic.yupi.icu/1/image-20260116112322940.png)

然后在 MCP 配置中添加：

```json
{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "你的API密钥"
      }
    }
  }
}
```

之后你在 AI 编程工具中跟 AI 对话时，只要跟技术文档相关，或者主动提一嘴 "use context7"，它就会自动去获取最新文档来回复你。

![](https://pic.yupi.icu/1/image-20260116112656483.png)



### Web to MCP 复刻网页组件

[Web to MCP](https://web-to-mcp.com/) 是一个 Chrome 扩展，搭配 MCP 使用，能把网页上的任何 UI 组件直接发送给 AI，让 AI 生成对应的代码，用最快的速度抄作业！

![](https://pic.yupi.icu/1/image-20260116113052973.png)

很多时候，我在浏览网站时看到一个不错的 UI 组件，想让 AI 帮我实现类似的效果。以前的做法是截图，然后跟 AI 描述：“帮我做一个类似这样的按钮，圆角、渐变色、带阴影……” 既费时又不准确。

有了 Web to MCP，我只需要在网页上点击某个想复刻的元素：

![](https://pic.yupi.icu/1/image-20260116113725321.png)

它就会自动捕获组件的 DOM 结构、CSS 样式、甚至是交互效果，并且给你一个让 AI 复刻组件的提示词。

你只需要把提示词发送给 AI，AI 会调用 MCP 拿到完整的组件信息，并生成代码来复刻组件。

![](https://pic.yupi.icu/1/image-20260116114142631.png)

相比于直接给 AI 模糊的截图，生成的代码更准确了。

![](https://pic.yupi.icu/1/image-20260116114426822.png)



**如何使用？**

1）通过官网或者在 Chrome 应用商店搜索 Web to MCP 来安装扩展

![](https://pic.yupi.icu/1/image-20260116113138693.png)

2）用 Google 账号登录，获取你的 MCP 配置：

![](https://pic.yupi.icu/1/image-20260116113241575.png)

3）在 AI 编程工具的 MCP 配置中添加：

```json
{
  "mcpServers": {
    "web-to-mcp": {
      "url": "https://web-to-mcp.com/mcp/你的唯一ID"
    }
  }
}
```

之后浏览网页时，点击扩展图标，选中你想要的组件，就能直接在 AI 编程工具里引用它，并且快速生成风格一致的代码了。



### Chrome DevTools MCP 浏览器调试

[Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) 是 Chrome 官方团队开发的 MCP 服务器，让 AI 能够直接控制 Chrome 浏览器进行操作和调试。

在做前端开发时，我经常需要调试页面、查看网络请求、分析性能问题。以前这些都得手动在浏览器的开发者工具里操作，现在有了这个工具，我可以直接让 AI 帮我做这些事。

比如我跟 AI 说：“帮我分析当前这个网站加载慢的原因”，它就能打开 Chrome DevTools，分析网络请求、查看资源加载时间，然后告诉我哪里有问题。

![](https://pic.yupi.icu/1/image-20260116115138719.png)

或者我说：“帮我测试一下这个表单提交功能”，它就能自动填写表单、点击提交按钮、查看请求响应。

**如何使用？**

在 MCP 配置中添加：

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

配置好后，AI 就能帮你自动化测试、调试页面了。工具会自动连接到你正在运行的 Chrome 浏览器，无需额外设置。

这个工具还支持元素定位、网络请求监控、性能分析、页面截图等功能，非常适合前端开发和测试。



### EdgeOne Pages MCP 一键部署

[EdgeOne Pages MCP](https://github.com/TencentEdgeOne/edgeone-pages-mcp) 是腾讯云团队开发的部署工具，能把你的项目一键部署到腾讯云的加速网络，让别人能访问你的网站，并且给你的网站提速。

开发完项目后，你一定会想让别人访问你的网站。传统的部署流程很繁琐，需要人工打包代码、上传代码到服务器、配置域名、设置 HTTPS 安全证书，一套流程下来得花不少时间。

![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE2%E5%A4%A7.jpeg)

有了 EdgeOne Pages MCP，我直接在 AI 编程工具里跟 AI 说：“帮我部署这个项目”，它就能自动完成打包、上传、部署的全过程，最后给我一个可以直接访问的 URL。而且部署到全球加速网络，各地访问速度都很快。

![](https://pic.yupi.icu/1/1752212029384-16cfba8f-babb-49c0-9d41-3b76ee78eecf.png)



**如何使用？**

首先到 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone/pages) 开通 Pages 服务：

![](https://pic.yupi.icu/1/1752209404627-3a3193d9-4c94-4f80-ad02-435ff22f16ed.png)

然后获取 API Token，作为调用服务的凭证：

![](https://pic.yupi.icu/1/1752209504079-6741bbd0-438e-48a4-86be-6eddfc3efa83.png)

在 MCP 配置中添加：

```json
{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"],
      "env": {
        "EDGEONE_PAGES_API_TOKEN": "你的API Token"
      }
    }
  }
}
```

配置好后，就能让 AI 帮你一键部署项目了。部署是免费的，支持静态网站、全栈项目、自动配置 HTTPS 和 CDN 加速等功能，非常适合个人项目和小型应用。

![](https://pic.yupi.icu/1/1752211869664-b74dc4d9-57b1-4bb7-9f02-703112b613eb.png)



### COS MCP 对象存储

[COS MCP](https://github.com/Tencent/cos-mcp) 能让 AI 直接操作腾讯云对象存储。

对象存储就是云端的文件存储服务，可以理解为云盘。

![](https://pic.yupi.icu/1/image-20260116120009365.png)

在团队协作开发中，我们经常需要让 AI 参考一些项目规范文档、或者引用一些图片。以前的做法是把这些文件放在本地，然后手动上传给 AI，既不方便，也不利于团队维护、修改和共享。

有了 COS MCP，我可以说一句话把这些需要共享的文件存到云端，然后让 AI 直接去读取。

![](https://pic.yupi.icu/1/image-20260116122211103.png)

比如我跟 AI 说：“按照我们团队 COS 共享的项目规范文档来写这个功能”，它就能自动从 COS 里读取规范文档，然后按照规范来写代码。

![](https://pic.yupi.icu/1/image-20260116122453843.png)



**如何使用？**

1）首先需要开通腾讯云 COS 对象存储服务。访问 [腾讯云 COS 控制台](https://console.cloud.tencent.com/cos)，创建一个存储桶（Bucket）：

![](https://pic.yupi.icu/1/image-20260116120711822.png)

2）然后在 "访问管理" > "API 密钥管理" 中获取 SecretId 和 SecretKey，注意一定不要泄露这些信息！

![](https://pic.yupi.icu/1/image-20260116121022222.png)

3）在 MCP 配置中添加：

```json
{
  "mcpServers": {
    "cos-mcp": {
      "command": "npx",
      "args": [
        "cos-mcp",
        "--Region=你的地域",
        "--Bucket=你的存储桶",
        "--SecretId=你的SecretId",
        "--SecretKey=你的SecretKey"
      ]
    }
  }
}
```

![](https://pic.yupi.icu/1/image-20260116121243549.png)

配置好后，AI 就能读取和管理你云端的文件了，相当于给了 AI 一个网盘。

此外，这个工具还支持图片搜索、图片处理、文档转换、视频封面生成等功能。

![](https://pic.yupi.icu/1/image-20260116121658701.png)




### GitHub MCP 代码仓库管理

[GitHub MCP](https://github.com/github/github-mcp-server) 是 GitHub 官方开发的 MCP 服务器，让 AI 能够直接操作 GitHub 代码仓库。

程序员朋友们对 GitHub 肯定不陌生，这是全球最大的代码托管平台，可以用它来存储代码、团队协作开发。

![](https://pic.yupi.icu/1/image-20260116122621938.png)

在日常开发中，我可能需要搜索 GitHub 代码仓库、创建 Issue 问题反馈、提交 PR 代码合并请求、查看代码变更、分析提交历史等等。以前这些操作都得在 GitHub 网站上手动完成，现在我可以直接让 AI 帮我做。

比如我跟 AI 说：“我最近在 GitHub 上开源了哪些项目？star 数如何？”

![](https://pic.yupi.icu/1/image-20260116123701822.png)

它就能快速给我在 GitHub 上的项目生成一份数据报告：

![](https://pic.yupi.icu/1/image-20260116123734660.png)

或者我说：“帮我看看最近一周的代码变更”，它就能分析 Git 提交记录，告诉我都改了什么。

![](https://pic.yupi.icu/1/image-20260116124022290.png)



**如何使用？**

首先需要在 GitHub 获取到你的 [Access Token](https://github.com/settings/tokens)，作为访问你 GitHub 资源的凭证：

![](https://pic.yupi.icu/1/image-20260116122846165.png)

然后在 MCP 配置中添加：

```json
{
  "mcpServers": {
    "github": {
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer 你的GitHub凭证"
      }
    }
  }
}
```

这个工具还支持代码分析、CI/CD 监控、安全扫描等功能，基本上你在 GitHub 中能做的事，AI 都能帮你做。

![](https://pic.yupi.icu/1/image-20260116123148068.png)



## 二、IDE 扩展插件类

MCP 服务器讲完了，接下来聊聊 IDE 扩展插件。

IDE 就是集成开发环境，简单理解就是写代码的软件，比如 VS Code、JetBrains IDEA 这些，可以通过安装插件来增强编辑器的能力，让你的开发体验更上一层楼。

值得一提的是，现在很多有图形界面的 AI 编程工具（比如 Cursor）都是基于 VS Code 开发的，自然也支持 VS Code 的插件，所以下面我也主要分享 VS Code 插件，装上就能用。

![](https://pic.yupi.icu/1/image-20260116124127539.png)



### Claude Code 官方扩展

Claude Code 是 Anthropic 推出的 AI 编程助手，原本是独立的命令行工具。而 [Claude Code VS Code 扩展](https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously) 能让你在代码编辑器中直接使用 Claude Code，不用额外打开终端。

在 VS Code 或 Cursor 的扩展商店搜索 "Claude Code" 即可安装：

![](https://pic.yupi.icu/1/image-20260116124255886.png)

这个扩展的优点是提供了图形界面，你可以通过侧边栏面板和 Claude 对话，能够灵活输入文字。

![](https://pic.yupi.icu/1/image-20260116124614180.png)

当 AI 修改代码时，你能在编辑器里实时看到变化，并且自动显示 diff 对比，让你清楚地知道 AI 改了哪些地方。

![](https://pic.yupi.icu/1/image-20260116124700221.png)

我经常用它来重构代码、修复 Bug、添加新功能。它还支持多会话并行，也就是说你可以同时让多个 Claude 代理处理不同的任务，比如一个负责前端，一个负责后端，大大提高开发效率。

![](https://pic.yupi.icu/1/image-20260116124928547.png)

顺带一提，类似的插件还有 Cline、GitHub Copilot 等，功能都差不多，大家可以根据自己的喜好选择。



### GitLens Git 可视化

[GitLens](https://www.gitkraken.com/gitlens) 能让你更直观地查看 Git 代码的修改历史。

![](https://pic.yupi.icu/1/image-20260116125249627.png)

Git 是程序员用来管理代码版本的工具，简单理解就是能记录代码的每一次修改，包括谁改的、什么时候改的、为什么改。

有了这些记录，出了 Bug 时我就能快速找到 “凶手” 追责。

![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE3%E5%A4%A7.jpeg)

但 Git 只是个命令行工具，想查看历史记录还需要手敲命令，看起来也不太舒服。

![](https://pic.yupi.icu/1/image-20260116125146713.png)

当我通过编辑器的扩展商店安装了 GitLens 后，把鼠标放到任意代码行上，GitLens 就会自动显示这行代码的作者、相关的 PR 合并请求等等。

![](https://pic.yupi.icu/1/image-20260116125445257.png)

进入 Git 管理面板，整个项目的提交记录一目了然。

![](https://pic.yupi.icu/1/image-20260116125736701.png)

此外，它还支持 AI 功能，能自动生成提交信息、解释代码变更、生成变更日志、用 AI 解释某次改动的目的。

![](https://pic.yupi.icu/1/image-20260116130129466.png)




### ⭐️ Office Viewer 文档预览

[Office Viewer](https://github.com/cweijan/vscode-office) 能帮你在编辑器里直接预览和编辑各种文档。

![](https://pic.yupi.icu/1/image-20260116130347383.png)

我们知道，AI 输出的文档内容以 Markdown 格式为主，默认的编辑器中打开 Markdown 文件只能看到原始的标记语法，不够直观。

![](https://pic.yupi.icu/1/image-20260116130450441.png)

看长文的时候，我还要用 Typora 等专业的 Markdown 编辑器打开文档，比较麻烦。

在扩展商店搜索 "Office Viewer" 并安装后，可以直接在编辑器中使用所见即所得的 Markdown 编辑器，看文档、写文档都很方便，不用来回切换窗口。

![](https://pic.yupi.icu/1/image-20260116130527681.png)

此外，这个插件支持 Excel 表格、Word 文档、PDF 文档、SVG、字体文件、压缩包等多种格式，堪称编辑器里的万能文档查看器。




### ⭐️ ESLint 代码质量检查

[ESLint](https://eslint.org/) 是前端 JavaScript / TypeScript 项目必备的代码检查工具。

![](https://pic.yupi.icu/1/image-20260116130608877.png)

虽然编辑器本身也能检查一些基本的语法错误，但对于代码规范、潜在的逻辑漏洞等问题，就需要专业的代码检查工具来把关了。

现在很多 AI 生成的项目代码都会自带 ESLint 配置文件（比如 `.eslintrc.js` 或者 `eslint.config.js`），定义好团队统一的代码检查规则。

![](https://pic.yupi.icu/1/image-20260116131035221.png)

在扩展商店搜索 "ESLint" 并安装后，插件会自动检测项目中的规则配置文件，然后实时检查代码中的问题，并给出修复建议。

![](https://pic.yupi.icu/1/image-20260116131356553.png)

这样一来，AI 写的代码如果有不规范的地方，你立刻就能发现并让 AI 修正，避免埋下隐患。




### ⭐️ Prettier 代码格式化

[Prettier](https://prettier.io/) 是一个代码格式化工具，能自动统一代码风格。

![](https://pic.yupi.icu/1/image-20260116130633473.png)

团队协作时，每个人的编码习惯不同，有的代码缩进 4 格、有的缩进 2 格；有的用单引号、有的用双引号。大家的代码风格五花八门，看着就很乱，代码审查时也容易出现 Beef。

这时就需要统一的格式化规范了。现在很多 AI 生成的项目代码都会自带 Prettier 配置文件（比如 `.prettierrc`），定义好统一的格式化规则。

![](https://pic.yupi.icu/1/image-20260116131553797.png)

在扩展商店搜索 "Prettier" 并安装后，就可以用快捷键一键格式化代码。

![](https://pic.yupi.icu/1/image-20260116131725960.png)

还可以在 VS Code 的设置里搜索 "Format On Save" 并开启，这样每次保存代码时就会自动格式化，保证整个项目的代码风格一致。

![](https://pic.yupi.icu/1/image-20260116132036643.png)




### Error Lens 错误实时显示

[Error Lens](https://github.com/usernamehw/vscode-error-lens) 能让你一眼看到代码中的错误。

![](https://pic.yupi.icu/1/image-20260116130706384.png)

一般情况下，如果代码中有错误，你得把鼠标移到红色波浪线上才能看到错误提示，不够直观。

![](https://pic.yupi.icu/1/image-20260116140447236.png)

在扩展商店搜索 "Error Lens" 并安装后，错误信息会直接高亮显示在代码行尾，你一眼就能看到哪里有问题。

![](https://pic.yupi.icu/1/image-20260116140619858.png)




### Console Ninja 控制台日志显示

[Console Ninja](https://github.com/wallabyjs/console-ninja) 能让你在编辑器里直接看到代码的运行结果。

![](https://pic.yupi.icu/1/image-20260116130745078.png)

在调试前端代码时，我经常需要看 `console.log` 打印出来的日志输出。要先切换到浏览器，再按 F12 打开开发者工具来查看控制台，比较麻烦。

![](https://pic.yupi.icu/1/image-20260116140819516.png)

在扩展商店搜索 "Console Ninja" 并安装后，直接在编辑器里就能看到输出结果，看到每个日志是从哪个文件哪一行输出的，还能显示网络请求和错误堆栈。

![](https://pic.yupi.icu/1/image-20260116141109420.png)

有了它，不用频繁切换窗口了，调试效率大大提升。




## 三、跨编辑器通用工具

前面介绍的工具都是对编辑器能力的增强，接下来聊聊跨编辑器通用的工具。这些工具不依赖特定的编辑器，适用于 Cursor、VS Code、Claude Code、GitHub Copilot 等几乎所有主流的 AI 编程工具。



### Spec-kit 规范驱动开发

[Spec-kit](https://speckit.org/) 是 GitHub 推出的规范驱动开发（SDD）框架。

什么是 SDD 呢？

传统开发流程是：想到什么写什么，边写边改，最后再补文档。这样容易导致需求不清晰、代码和文档对不上。

而规范驱动开发的思路正好相反：先把需求写成规范文档，并且把规范文档当作代码的 **唯一真相来源**。你可以把规范文档理解为 **法律条文**，它包含了详细的需求描述、系统设计和接口定义。AI 必须严格遵守这些条文来生成代码，确保产出完全符合预期。

![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE4%E5%A4%A7.jpeg)

听起来有些抽象，我们可以跟着 [Spec-kit GitHub 仓库](https://github.com/github/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)

接下来就是标准化的开发流程，参考 [官方文档](https://github.com/github/spec-kit)，主要分为 7 个步骤：

1）Constitution 制定项目准则

运行 `/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)



2）Specify 编写功能规范

运行 `/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)

我运气不错，不需要这一步 AI 就已经理解了所有条目，接下来可以进入制定技术方案阶段。

![](https://pic.yupi.icu/1/image-20260116162201772.png)



4）Plan 制定技术方案

运行 `/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)



5）Tasks 拆解任务

运行 `/speckit.tasks` 命令，把计划拆解成可执行的任务列表，并标注依赖关系和优先级。

![](https://pic.yupi.icu/1/image-20260116164537006.png)

生成了一个任务列表文档，每一步要做什么都非常清晰：

![](https://pic.yupi.icu/1/image-20260116164612533.png)



6）Analyze 分析检查（可选）

运行 `/speckit.analyze` 命令，检查规范、计划、任务是否完整一致，提前发现设计缺陷。

![](https://pic.yupi.icu/1/image-20260116164936733.png)

可以看到，AI 没有检查出问题，还让我自信地进行下一步，真爽死了！



7）Implement 执行实现

最后，运行 `/speckit.implement` 命令，让 AI 按照任务列表生成代码。

![](https://pic.yupi.icu/1/image-20260116170006815.png)

大功告成，看一下效果~

![](https://pic.yupi.icu/1/image-20260116170146827.png)

因为我这里始终没有提到使用中文输出，所以网站内容都是英文的，不过我感觉效果还可以。

到这里，我们已经学会了如何用 Spec-kit 开发完整项目，再复习一下完整流程：

![](https://pic.yupi.icu/1/%25E6%25BC%25AB%25E7%2594%25BB%25E5%259B%25BE5%25E5%25A4%25A7.jpeg)

即使不用 Spec-kit，我们开发完整项目时也可以人工遵循这些步骤。

这种模式最大的好处是 **对齐**。所有人都基于同一份清晰的规范文档工作，大家对需求的理解高度一致，既减少了沟通中的误解，又能确保代码质量。

不过缺点也很明显，对于小项目，本来直接写代码几分钟就能搞定了，上面这套流程走下来差不多要半个小时！

所以这套流程比较适合团队从 0 开始做完整的新项目，虽然流程比直接写代码慢一些，但能大大降低返工的风险，长远来看反而更高效。



### 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 官方仓库](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)

有了这些文件，我们就可以开始规范化的开发流程了。参考 [官方文档](https://github.com/Fission-AI/OpenSpec/)，主要分为 5 个步骤：

1）Draft 起草变更提案

直接在 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)



2）Verify & 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 会更新规范和任务列表，直到大家达成一致。



4）Implement 实现变更

规范确认后，让 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)



5）Archive 归档变更

所有任务完成后，让 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 的区别了。

- Spec-kit 需要完整的 7 步流程：制定准则 → 写需求 → 澄清疑问 → 定方案 → 拆任务 → 检查 → 写代码），适合从 0 开始做大型新项目
- OpenSpec 的流程更简化：起草提案 → 审查 → 实现 → 归档 → 验证，上手更快，适合在现有项目上迭代功能。




### ⭐️ Agent Skills 通用 AI 技能库

[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)

让我们来实战一下，利用 [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 注册为插件市场：

```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）安装完 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)

目前 [Anthropic 官方技能仓库](https://github.com/anthropics/skills) 已经提供了丰富的技能集合，涵盖编程相关的数据库优化、API 安全、测试策略、代码审查、文档生成，还有办公相关的 PPT 制作、Excel 处理、Word 文档、PDF 生成等各个方面。

如果官方提供的技能不够用，你还可以上传自定义技能，或者访问以下平台下载社区贡献的技能：

- ⭐️ [鱼皮 AI 导航 - Skills 大全](https://ai.codefather.cn/skills)：持续更新优质技能，释放 AI 执行潜力
- [Claude Skills Hub](https://www.claudeskill.site/)：社区技能市场

![](https://pic.yupi.icu/1/image-20260201150711260.png)

值得一提的是，Agent Skills 现已成为 [通用标准](https://agentskills.io)。除了 Claude，[Cursor](https://cursor.com/docs/context/skills) 等主流 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 官方文档](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)

下面以开发一个 “用户注册模块” 为例，演示 Superpowers 官方的标准工作流程。

首先，在终端中运行 `claude` 命令来启动 Claude Code，然后按照下面的 7 个步骤操作：

1）Brainstorming 头脑风暴 => 对齐需求

选择 `/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)



2）Using Git Worktrees 创建独立工作空间（可选）

设计方案通过后，Superpowers 会帮你创建一个 Git 工作树（worktree），在新分支上建立隔离的工作空间，运行项目初始化，并验证测试基线是否干净。这样可以避免污染主分支。

这一步是可选的，我这里直接让 AI 继续执行，看看会发生什么：

![](https://pic.yupi.icu/1/image-20260116181020601.png)



3）Writing 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)



5）Test-Driven Development 测试驱动开发

在实现过程中，Superpowers 会强制执行 `红-绿-重构` 流程：
- 先写失败的测试
- 运行测试，确认失败
- 写最小化的代码让测试通过
- 运行测试，确认通过
- 提交代码

![](https://pic.yupi.icu/1/image-20260116183728764.png)

如果发现有代码是在测试之前写的，Superpowers 会删除它，强制你先写测试。



6）Code 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)



---



这套 “先设计后编码” 的规范流程走下来，代码质量会更有保障，不过代价就是速度确实比让 AI 直接生成代码会慢很多。真的是慢很多！就这么个需求我搞了半个多小时！！！

![](https://pic.yupi.icu/1/image-20260116183405162.png)

如果你正在开发大型项目，需要团队协作，那么可以试试 Superpowers，前期多花的时间会在后期省回来。但是如果你只是想写个简单的脚本或者快速验证一个想法，用它就有点儿牛刀杀鸡了，真没必要。




### AIChat 命令行增强工具

[AIChat](https://github.com/sigoden/aichat) 是一个功能完善的 AI 命令行助手，集成了 20+ 主流大模型。

现在主流的 AI 编程工具（Cursor、VS Code 等）都内置了终端，有时我们需要敲命令来执行任务，但是命令记不住怎么办？

用了 AIChat 后，你只需要在终端中说人话，它的 **Shell 助手** 能力就会把你的自然语言自动转换成准确可执行的命令。

使用方法非常简单。打开终端，通过包管理器一行命令就能安装：

```bash
# macOS/Linux
brew install aichat

# Windows
scoop install aichat
```

安装完成后，运行 `aichat` 命令，首次执行会引导你创建配置，选择你要用的大模型并填写 API Key：

![](https://pic.yupi.icu/1/image-20260116143602756.png)

然后就可以愉快地跟 AI 对话了：

![](https://pic.yupi.icu/1/image-20260116143719965.png)

但是我个人主要用它的 Shell 助手能力（给命令添加 `-e` 选项），而不是 AI 对话能力。

![](https://pic.yupi.icu/1/ai-chat-e.gif)

比如我想批量重命名文件，但不记得命令怎么写，在终端里执行下列命令：

```markdown
aichat -e 帮我把当前目录下所有 .txt 文件改成 .md
```

它就会生成对应的 shell 命令，我确认后它就自动执行了。

![](https://pic.yupi.icu/1/image-20260116144218847.png)

还可以通过快捷键来智能补全命令：

![](https://pic.yupi.icu/1/ai-chat-completion.gif)

除了 Shell 助手，AIChat 还有一些进阶功能。比如支持 RAG 检索增强生成，可以让 AI 基于你的本地文档回答问题；支持创建 AI 代理，把指令、工具和文档组合成自动化工作流。

![](https://pic.yupi.icu/1/ai-chat-agents.png)

此外，如果你想对比不同模型的效果，运行 `aichat --serve` 可以启动本地网页界面，同时对比多个模型的回答。

![](https://pic.yupi.icu/1/ai-chat-compare-model.png)



## 写在最后

看到这里，相信你已经了解了各种实用的 AI 编程扩展。

其中标星 ⭐️ 的是我强烈建议安装的：

- Firecrawl MCP：让 AI 能抓取网页内容
- Context7：获取最新技术文档
- EdgeOne Pages MCP：一键部署项目
- Office Viewer：在编辑器中预览文档
- ESLint + Prettier：保证代码质量
- Agent Skills：通用 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)
