liyupi
420d31617a
- 简历模板：融入 AI 时代简历指南（专业技能 4 层拆解、项目搭配策略） - 命令行工具：融入 CLI 科普（CLI 是 AI 的母语、CLI vs MCP）、开源生态、React Ink 开发 - 优质扩展推荐：新增 AI 效率工具箱（MarkItDown/whisper.cpp/FFmpeg/Composio/Mem0 等 10 个项目） - 概念大全：新增模型蒸馏、Agentic RAG、Hermes Agent、CLI、Git WorkTree 5 个条目，补充 Agent Loop/上下文压缩/上下文工程/Agent Teams 4 个已有条目 - 资源大全：更新 AI 导航介绍（月访问 40 万、新增知识库/绘图提示词/MCP+Skills 板块） - 新增蒸馏自己成 Skill 创意项目实战文章 - 效率提升技巧补充 Git WorkTree 引用，Agent Skills 提及蒸馏玩法 Made-with: Cursor
1523 lines
61 KiB
Markdown
1523 lines
61 KiB
Markdown
# 优质 AI 编程扩展推荐
|
||
|
||
大家好，我是程序员鱼皮。给大家分享一些我自己在用的 AI 编程扩展，帮你大幅提高 AI 编程效率和代码质量。
|
||
|
||
**万字长文 + 100 多张图**，绝对干货！点个收藏，让我们开始吧~
|
||
|
||
|
||
|
||
|
||
## 一、MCP 服务器类
|
||
|
||
MCP 的全称是 Model Context Protocol 模型上下文协议。简单来说，就是让 AI 大模型能够连接外部工具和数据源的一个开放标准。
|
||
|
||
打个比方，MCP 就像是 AI 的 USB-C 接口，原本 AI 只能根据训练数据来回答问题、生成代码，但有了这个统一接口，它就能连接各种外部工具，比如打开浏览器看网站、搜索并抓取网页内容、部署项目到云端、访问数据库等等，能力一下子就丰富起来了。
|
||
|
||
|
||
|
||
|
||
|
||
### ⭐️ Firecrawl MCP 网页内容抓取
|
||
|
||
首先要介绍的是 [Firecrawl MCP](https://www.firecrawl.dev/)，让 AI 能够自动抓取和理解网页内容。
|
||
|
||
我在开发项目时经常需要从网上获取参考资料、阅读官方文档和技术博客，或者分析竞品的功能实现。如果人工来做这件事，需要先打开网站、再手动复制粘贴内容，或者自己写个爬虫脚本，麻烦得一批。
|
||
|
||
有了 Firecrawl MCP，这事儿就简单多了。我直接在 AI 编程工具中跟 AI 说：
|
||
|
||
- 帮我获取这个网站的内容
|
||
- 帮我读一下这个文档
|
||
- 帮我从网上搜索 XX 相关的信息
|
||
|
||
它就能自动把网页的内容、结构、甚至是动态加载的数据都给我抓下来。
|
||
|
||
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
首先你需要在 [Firecrawl 官网](https://www.firecrawl.dev/app/api-keys) 注册账号，并创建一个调用服务的 API Key。
|
||
|
||
|
||
|
||
然后进入到 AI 编程工具中配置一下 MCP 服务器。这里我以 Cursor 为例，其他 AI 编程工具对接 MCP 的方法可以看各自的官方文档，比如 [Claude Code 接入 MCP 文档](https://docs.anthropic.com/en/docs/claude-code/mcp)。
|
||
|
||
打开 Cursor 设置，找到 Tools & MCP，点击 `+ New MCP Server`。
|
||
|
||
|
||
|
||
本质上就是修改 MCP 配置文件，添加这样的配置：
|
||
|
||
```json
|
||
{
|
||
"mcpServers": {
|
||
"firecrawl-mcp": {
|
||
"command": "npx",
|
||
"args": ["-y", "firecrawl-mcp"],
|
||
"env": {
|
||
"FIRECRAWL_API_KEY": "你的API密钥"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
这段配置的意思是：通过 npx 命令来运行 firecrawl-mcp 这个工具，并且把你的 API 密钥传给它。如果你电脑上还没有安装 npx，需要先 [到官网安装 Node.js](https://nodejs.org/zh-cn)，npx 会随着 Node.js 一起安装。
|
||
|
||
配置好之后，看到绿色的成功点点，表示能够正常使用了。
|
||
|
||
|
||
|
||
除了基础的网页抓取，Firecrawl MCP 还支持批量抓取整站内容、递归抓取网站的多层链接、失败自动重试等高级功能。
|
||
|
||
类似的开源项目还有 [Crawl4AI](https://github.com/unclecode/crawl4ai)，定位是对大模型友好的爬虫工具，同样内置了 MCP Server 和 Agent Skills 技能包，可以作为 Firecrawl 的替代方案。
|
||
|
||
|
||
|
||
### 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 搜索不会追踪你的搜索记录，隐私保护做得很好。
|
||
|
||
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
首先去 [Brave Search API](https://brave.com/search/api/) 注册账号，然后进入 API Key 管理页面，首先要选择一个订阅计划。必须选择免费版啊！每月有 2000 次查询额度，对于个人开发来说够用了。
|
||
|
||
|
||
|
||
但这里比较坑的一点是，即使订阅免费版，也要填写付款方式，没有海外银行卡的朋友可以撤了。
|
||
|
||
订阅成功后，创建 API Key：
|
||
|
||
|
||
|
||
拿到 API Key 后，在 Cursor 的 MCP 配置中添加：
|
||
|
||
```json
|
||
{
|
||
"mcpServers": {
|
||
"brave-search": {
|
||
"command": "npx",
|
||
"args": ["-y", "brave-search-mcp"],
|
||
"env": {
|
||
"BRAVE_API_KEY": "你的API密钥"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
配置好后，AI 就能随时帮你搜索最新信息了。
|
||
|
||
支持网页、图片、视频、新闻等多种类型的内容搜索，甚至能搜索本地商家信息（比如附近的咖啡店）。
|
||
|
||
|
||
|
||
它还带有 AI 摘要功能，能把搜索结果自动总结成简洁的答案。
|
||
|
||
|
||
|
||
### ⭐️ Context7 获取最新文档
|
||
|
||
[Context7](https://context7.com/) 能帮 AI 获取到最新的技术文档。
|
||
|
||
我们都知道，AI 的训练数据是有截止时间的，比如 GPT-4 的知识可能只更新到 2023 年。这就导致一个问题，当你问 AI 关于某个框架最新版本的用法时，它给出的答案可能是过时的。
|
||
|
||
Context7 就是来解决这个问题的。它会自动从官方文档网站抓取最新的、特定版本的文档内容，然后提供给 AI。
|
||
|
||
|
||
|
||
这样一来，AI 给出的代码示例和建议就是基于最新文档的，不会去用已经废弃的写法，大大提高了项目能正常运行的概率。
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
访问 [Context7 Dashboard](https://context7.com/dashboard) 注册账号并获取 API Key，个人使用是免费的。
|
||
|
||
|
||
|
||
然后在 MCP 配置中添加：
|
||
|
||
```json
|
||
{
|
||
"mcpServers": {
|
||
"context7": {
|
||
"url": "https://mcp.context7.com/mcp",
|
||
"headers": {
|
||
"CONTEXT7_API_KEY": "你的API密钥"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
之后你在 AI 编程工具中跟 AI 对话时，只要跟技术文档相关，或者主动提一嘴 "use context7"，它就会自动去获取最新文档来回复你。
|
||
|
||
|
||
|
||
|
||
|
||
### Web to MCP 复刻网页组件
|
||
|
||
[Web to MCP](https://web-to-mcp.com/) 是一个 Chrome 扩展，搭配 MCP 使用，能把网页上的任何 UI 组件直接发送给 AI，让 AI 生成对应的代码，用最快的速度抄作业！
|
||
|
||
|
||
|
||
很多时候，我在浏览网站时看到一个不错的 UI 组件，想让 AI 帮我实现类似的效果。以前的做法是截图，然后跟 AI 描述：“帮我做一个类似这样的按钮，圆角、渐变色、带阴影……” 既费时又不准确。
|
||
|
||
有了 Web to MCP，我只需要在网页上点击某个想复刻的元素：
|
||
|
||
|
||
|
||
它就会自动捕获组件的 DOM 结构、CSS 样式、甚至是交互效果，并且给你一个让 AI 复刻组件的提示词。
|
||
|
||
你只需要把提示词发送给 AI，AI 会调用 MCP 拿到完整的组件信息，并生成代码来复刻组件。
|
||
|
||
|
||
|
||
相比于直接给 AI 模糊的截图，生成的代码更准确了。
|
||
|
||
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
1）通过官网或者在 Chrome 应用商店搜索 Web to MCP 来安装扩展
|
||
|
||
|
||
|
||
2）用 Google 账号登录，获取你的 MCP 配置：
|
||
|
||
|
||
|
||
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，分析网络请求、查看资源加载时间，然后告诉我哪里有问题。
|
||
|
||
|
||
|
||
或者我说：“帮我测试一下这个表单提交功能”，它就能自动填写表单、点击提交按钮、查看请求响应。
|
||
|
||
**如何使用？**
|
||
|
||
在 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 安全证书，一套流程下来得花不少时间。
|
||
|
||
|
||
|
||
有了 EdgeOne Pages MCP，我直接在 AI 编程工具里跟 AI 说：“帮我部署这个项目”，它就能自动完成打包、上传、部署的全过程，最后给我一个可以直接访问的 URL。而且部署到全球加速网络，各地访问速度都很快。
|
||
|
||
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
首先到 [EdgeOne 控制台](https://console.cloud.tencent.com/edgeone/pages) 开通 Pages 服务：
|
||
|
||
|
||
|
||
然后获取 API Token，作为调用服务的凭证：
|
||
|
||
|
||
|
||
在 MCP 配置中添加：
|
||
|
||
```json
|
||
{
|
||
"mcpServers": {
|
||
"edgeone-pages-mcp-server": {
|
||
"command": "npx",
|
||
"args": ["edgeone-pages-mcp"],
|
||
"env": {
|
||
"EDGEONE_PAGES_API_TOKEN": "你的API Token"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
配置好后，就能让 AI 帮你一键部署项目了。部署是免费的，支持静态网站、全栈项目、自动配置 HTTPS 和 CDN 加速等功能，非常适合个人项目和小型应用。
|
||
|
||
|
||
|
||
|
||
|
||
### COS MCP 对象存储
|
||
|
||
[COS MCP](https://github.com/Tencent/cos-mcp) 能让 AI 直接操作腾讯云对象存储。
|
||
|
||
对象存储就是云端的文件存储服务，可以理解为云盘。
|
||
|
||
|
||
|
||
在团队协作开发中，我们经常需要让 AI 参考一些项目规范文档、或者引用一些图片。以前的做法是把这些文件放在本地，然后手动上传给 AI，既不方便，也不利于团队维护、修改和共享。
|
||
|
||
有了 COS MCP，我可以说一句话把这些需要共享的文件存到云端，然后让 AI 直接去读取。
|
||
|
||
|
||
|
||
比如我跟 AI 说：“按照我们团队 COS 共享的项目规范文档来写这个功能”，它就能自动从 COS 里读取规范文档，然后按照规范来写代码。
|
||
|
||
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
1）首先需要开通腾讯云 COS 对象存储服务。访问 [腾讯云 COS 控制台](https://console.cloud.tencent.com/cos)，创建一个存储桶（Bucket）：
|
||
|
||
|
||
|
||
2）然后在 "访问管理" > "API 密钥管理" 中获取 SecretId 和 SecretKey，注意一定不要泄露这些信息！
|
||
|
||
|
||
|
||
3）在 MCP 配置中添加：
|
||
|
||
```json
|
||
{
|
||
"mcpServers": {
|
||
"cos-mcp": {
|
||
"command": "npx",
|
||
"args": [
|
||
"cos-mcp",
|
||
"--Region=你的地域",
|
||
"--Bucket=你的存储桶",
|
||
"--SecretId=你的SecretId",
|
||
"--SecretKey=你的SecretKey"
|
||
]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
配置好后，AI 就能读取和管理你云端的文件了，相当于给了 AI 一个网盘。
|
||
|
||
此外，这个工具还支持图片搜索、图片处理、文档转换、视频封面生成等功能。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### GitHub MCP 代码仓库管理
|
||
|
||
[GitHub MCP](https://github.com/github/github-mcp-server) 是 GitHub 官方开发的 MCP 服务器，让 AI 能够直接操作 GitHub 代码仓库。
|
||
|
||
程序员朋友们对 GitHub 肯定不陌生，这是全球最大的代码托管平台，可以用它来存储代码、团队协作开发。
|
||
|
||
|
||
|
||
在日常开发中，我可能需要搜索 GitHub 代码仓库、创建 Issue 问题反馈、提交 PR 代码合并请求、查看代码变更、分析提交历史等等。以前这些操作都得在 GitHub 网站上手动完成，现在我可以直接让 AI 帮我做。
|
||
|
||
比如我跟 AI 说：“我最近在 GitHub 上开源了哪些项目？star 数如何？”
|
||
|
||
|
||
|
||
它就能快速给我在 GitHub 上的项目生成一份数据报告：
|
||
|
||
|
||
|
||
或者我说：“帮我看看最近一周的代码变更”，它就能分析 Git 提交记录，告诉我都改了什么。
|
||
|
||
|
||
|
||
|
||
|
||
**如何使用？**
|
||
|
||
首先需要在 GitHub 获取到你的 [Access Token](https://github.com/settings/tokens)，作为访问你 GitHub 资源的凭证：
|
||
|
||
|
||
|
||
然后在 MCP 配置中添加：
|
||
|
||
```json
|
||
{
|
||
"mcpServers": {
|
||
"github": {
|
||
"url": "https://api.githubcopilot.com/mcp/",
|
||
"headers": {
|
||
"Authorization": "Bearer 你的GitHub凭证"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
这个工具还支持代码分析、CI/CD 监控、安全扫描等功能，基本上你在 GitHub 中能做的事，AI 都能帮你做。
|
||
|
||
|
||
|
||
|
||
|
||
## 二、IDE 扩展插件类
|
||
|
||
MCP 服务器讲完了，接下来聊聊 IDE 扩展插件。
|
||
|
||
IDE 就是集成开发环境，简单理解就是写代码的软件，比如 VS Code、JetBrains IDEA 这些，可以通过安装插件来增强编辑器的能力，让你的开发体验更上一层楼。
|
||
|
||
值得一提的是，现在很多有图形界面的 AI 编程工具（比如 Cursor）都是基于 VS Code 开发的，自然也支持 VS Code 的插件，所以下面我也主要分享 VS Code 插件，装上就能用。
|
||
|
||
|
||
|
||
|
||
|
||
### 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" 即可安装：
|
||
|
||
|
||
|
||
这个扩展的优点是提供了图形界面，你可以通过侧边栏面板和 Claude 对话，能够灵活输入文字。
|
||
|
||
|
||
|
||
当 AI 修改代码时，你能在编辑器里实时看到变化，并且自动显示 diff 对比，让你清楚地知道 AI 改了哪些地方。
|
||
|
||
|
||
|
||
我经常用它来重构代码、修复 Bug、添加新功能。它还支持多会话并行，也就是说你可以同时让多个 Claude 代理处理不同的任务，比如一个负责前端，一个负责后端，大大提高开发效率。
|
||
|
||
|
||
|
||
顺带一提，类似的插件还有 Cline、GitHub Copilot 等，功能都差不多，大家可以根据自己的喜好选择。
|
||
|
||
|
||
|
||
### GitLens Git 可视化
|
||
|
||
[GitLens](https://www.gitkraken.com/gitlens) 能让你更直观地查看 Git 代码的修改历史。
|
||
|
||
|
||
|
||
Git 是程序员用来管理代码版本的工具，简单理解就是能记录代码的每一次修改，包括谁改的、什么时候改的、为什么改。
|
||
|
||
有了这些记录，出了 Bug 时我就能快速找到 “凶手” 追责。
|
||
|
||
|
||
|
||
但 Git 只是个命令行工具，想查看历史记录还需要手敲命令，看起来也不太舒服。
|
||
|
||
|
||
|
||
当我通过编辑器的扩展商店安装了 GitLens 后，把鼠标放到任意代码行上，GitLens 就会自动显示这行代码的作者、相关的 PR 合并请求等等。
|
||
|
||
|
||
|
||
进入 Git 管理面板，整个项目的提交记录一目了然。
|
||
|
||
|
||
|
||
此外，它还支持 AI 功能，能自动生成提交信息、解释代码变更、生成变更日志、用 AI 解释某次改动的目的。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### ⭐️ Office Viewer 文档预览
|
||
|
||
[Office Viewer](https://github.com/cweijan/vscode-office) 能帮你在编辑器里直接预览和编辑各种文档。
|
||
|
||
|
||
|
||
我们知道，AI 输出的文档内容以 Markdown 格式为主，默认的编辑器中打开 Markdown 文件只能看到原始的标记语法，不够直观。
|
||
|
||
|
||
|
||
看长文的时候，我还要用 Typora 等专业的 Markdown 编辑器打开文档，比较麻烦。
|
||
|
||
在扩展商店搜索 "Office Viewer" 并安装后，可以直接在编辑器中使用所见即所得的 Markdown 编辑器，看文档、写文档都很方便，不用来回切换窗口。
|
||
|
||
|
||
|
||
此外，这个插件支持 Excel 表格、Word 文档、PDF 文档、SVG、字体文件、压缩包等多种格式，堪称编辑器里的万能文档查看器。
|
||
|
||
|
||
|
||
|
||
### ⭐️ ESLint 代码质量检查
|
||
|
||
[ESLint](https://eslint.org/) 是前端 JavaScript / TypeScript 项目必备的代码检查工具。
|
||
|
||
|
||
|
||
虽然编辑器本身也能检查一些基本的语法错误，但对于代码规范、潜在的逻辑漏洞等问题，就需要专业的代码检查工具来把关了。
|
||
|
||
现在很多 AI 生成的项目代码都会自带 ESLint 配置文件（比如 `.eslintrc.js` 或者 `eslint.config.js`），定义好团队统一的代码检查规则。
|
||
|
||
|
||
|
||
在扩展商店搜索 "ESLint" 并安装后，插件会自动检测项目中的规则配置文件，然后实时检查代码中的问题，并给出修复建议。
|
||
|
||
|
||
|
||
这样一来，AI 写的代码如果有不规范的地方，你立刻就能发现并让 AI 修正，避免埋下隐患。
|
||
|
||
|
||
|
||
|
||
### ⭐️ Prettier 代码格式化
|
||
|
||
[Prettier](https://prettier.io/) 是一个代码格式化工具，能自动统一代码风格。
|
||
|
||
|
||
|
||
团队协作时，每个人的编码习惯不同，有的代码缩进 4 格、有的缩进 2 格；有的用单引号、有的用双引号。大家的代码风格五花八门，看着就很乱，代码审查时也容易出现 Beef。
|
||
|
||
这时就需要统一的格式化规范了。现在很多 AI 生成的项目代码都会自带 Prettier 配置文件（比如 `.prettierrc`），定义好统一的格式化规则。
|
||
|
||
|
||
|
||
在扩展商店搜索 "Prettier" 并安装后，就可以用快捷键一键格式化代码。
|
||
|
||
|
||
|
||
还可以在 VS Code 的设置里搜索 "Format On Save" 并开启，这样每次保存代码时就会自动格式化，保证整个项目的代码风格一致。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### Error Lens 错误实时显示
|
||
|
||
[Error Lens](https://github.com/usernamehw/vscode-error-lens) 能让你一眼看到代码中的错误。
|
||
|
||
|
||
|
||
一般情况下，如果代码中有错误，你得把鼠标移到红色波浪线上才能看到错误提示，不够直观。
|
||
|
||
|
||
|
||
在扩展商店搜索 "Error Lens" 并安装后，错误信息会直接高亮显示在代码行尾，你一眼就能看到哪里有问题。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### Console Ninja 控制台日志显示
|
||
|
||
[Console Ninja](https://github.com/wallabyjs/console-ninja) 能让你在编辑器里直接看到代码的运行结果。
|
||
|
||
|
||
|
||
在调试前端代码时，我经常需要看 `console.log` 打印出来的日志输出。要先切换到浏览器，再按 F12 打开开发者工具来查看控制台，比较麻烦。
|
||
|
||
|
||
|
||
在扩展商店搜索 "Console Ninja" 并安装后，直接在编辑器里就能看到输出结果，看到每个日志是从哪个文件哪一行输出的，还能显示网络请求和错误堆栈。
|
||
|
||
|
||
|
||
有了它，不用频繁切换窗口了，调试效率大大提升。
|
||
|
||
|
||
|
||
|
||
## 三、Agent Skills 技能类
|
||
|
||
Agent Skills 是给 AI 装备的技能包，让 AI 在特定任务上表现得更专业。和 MCP 一样，Agent Skills 现在也是 AI 编程生态中不可或缺的一部分，而且它是跨工具通用的开放标准，不绑定特定的编辑器。
|
||
|
||
详细的 Agent Skills 入门教程可以阅读工具实战目录下的《Agent Skills：通用 AI 技能库》。
|
||
|
||
|
||
|
||
### Agent Skills 通用 AI 技能库
|
||
|
||
[Agent Skills](https://claude.com/blog/skills) 是 Anthropic 新推出的 AI 技能系统。
|
||
|
||
它定义了一种 **封装 AI 工作流** 的标准：开发者可以把复杂的任务指令、脚本和资源打包成一个 **技能（Skill）**；作为用户，你只需要安装这些技能，AI 就能立刻学会这项本事，不用重复造轮子。
|
||
|
||
|
||
|
||
让我们来实战一下，利用 [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
|
||
```
|
||
|
||
|
||
|
||
然后输入 `/plugin`，通过 Tab 键切换到 Marketplaces 界面，批量安装官方提供的 Skills。包括：
|
||
|
||
- document-skills：文档技能包，可以处理 Excel、Word、PPT、PDF 等文档。
|
||
- example-skills：示例技能包 ，可以处理技能创建、构建 MCP、视觉设计、算法艺术、网页测试、动图制作、主题样式等。
|
||
|
||
|
||
|
||
安装好之后，输入 `/skills` 命令，就能看到所有已经安装完成的技能了，我们要的 `frontend-design` 也在其中。
|
||
|
||
|
||
|
||
可以在本地找到 Skills 的安装位置，你会发现，SKills 的本质就是一组封装好的提示词文档 + 脚本文件等：
|
||
|
||
|
||
|
||
还有另外一种安装方式，也可以在 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` 技能。
|
||
|
||
|
||
|
||
使用这个技能后，AI 会选择独特的设计风格，生成的界面既有个性又专业，告别千篇一律的蓝紫渐变色。而且不需要你每次都重复输入一堆设计要求，非常方便！
|
||
|
||
|
||
|
||
不用技能是这样的，对比一下：
|
||
|
||
|
||
|
||
目前 [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/)：社区技能市场
|
||
|
||
|
||
|
||
值得一提的是，Agent Skills 现已成为 [通用标准](https://agentskills.io)。除了 Claude，[Cursor](https://cursor.com/docs/context/skills) 等主流 AI 编程工具也会陆续提供支持。也就是说，你在一个工具里用的技能，在另一个工具里也能复用。
|
||
|
||
|
||
|
||
### Skills 安装管理工具
|
||
|
||
**skills CLI**：Vercel 官方出品的命令行工具，一行命令就能安装任何 Skills，简单好用。
|
||
|
||
用法是 `npx skills add <owner/repo>`，比如 `npx skills add vercel-labs/agent-skills` 就能装上 Vercel 官方的所有 Skills。
|
||
|
||
> 指路：https://www.npmjs.com/package/skills
|
||
|
||
|
||
|
||
|
||
|
||
**find-skills**：Vercel 出品的 Skills 发现工具，帮你快速找到和安装需要的 Skills。支持交互式搜索和关键词搜索，用 `npx skills find` 命令即可启动。
|
||
|
||
> 指路：通过 `npx skills add vercel-labs/skills` 安装
|
||
|
||
|
||
|
||
|
||
|
||
**skill-creator**：Anthropic 官方的 Skill 创建工具，教你怎么创建自定义 Skill。会引导你按照最佳实践编写 SKILL.md 文件，包括技能描述、触发条件、执行步骤等。
|
||
|
||
> 指路：通过 `npx skills add anthropics/skills` 安装
|
||
|
||
|
||
|
||
|
||
|
||
**Skill Seeker**：这个工具牛了，能自动抓取文档网站、GitHub 仓库、PDF 文件，然后直接转换成 Agent Skills，省去了手写技能说明文档的麻烦。支持多源抓取、代码深度分析、一键打包，特别适合给自己常用的库或框架快速生成 Skills。
|
||
|
||
> 指路：https://github.com/yusufkaraaslan/Skill_Seekers
|
||
|
||
|
||
|
||
|
||
|
||
**everything-claude-code**：Anthropic 黑客松冠军的完整配置集合，包括 agents、skills、hooks、commands、rules、MCPs，都是实战验证过的配置，拿来就能用。想一次性配置好 Claude Code 的话装这个就够了。
|
||
|
||
> 指路：https://github.com/affaan-m/everything-claude-code
|
||
|
||
|
||
|
||
|
||
|
||
### Skills 资源平台
|
||
|
||
**skills.sh**：Vercel 官方出品的 Skills 排行榜，能看到每个 Skill 的安装量、使用趋势，还支持一键安装。想知道哪些 Skills 最火，来这里看就对了。
|
||
|
||
> 指路：https://skills.sh
|
||
|
||
|
||
|
||
|
||
|
||
**鱼皮 AI 导航 - Skills 专区**：我的中文 Agent Skills 导航网站，按分类整理好了几百个 Skills，界面友好、查找方便，适合国内的朋友们使用。
|
||
|
||
> 指路：https://ai.codefather.cn/skills
|
||
|
||
|
||
|
||
|
||
|
||
**skillsmp**：自动抓取 GitHub 上所有 Skills 项目，按分类、更新时间、Star 数量整理，数据更新及时。
|
||
|
||
> 指路：https://skillsmp.com/zh
|
||
|
||
|
||
|
||
|
||
|
||
**MCP Market**：MCP Market 的每日 Skills 榜单，能看到每天最热门的 Skills 排名，帮你发现新趋势。
|
||
|
||
> 指路：https://mcpmarket.com/daily/skills
|
||
|
||
|
||
|
||
|
||
|
||
### Skills 开源合集
|
||
|
||
|
||
**anthropics/skills**：Anthropic 官方 Skills 仓库，包含文档处理（PDF、Word、PPT、Excel）、前端设计、MCP 构建、算法艺术等十几个高质量的 Skills。建议刚开始玩 Skills 的朋友首先安装这个。
|
||
|
||
> 指路：https://github.com/anthropics/skills
|
||
|
||
|
||
|
||
|
||
|
||
**awesome-claude-skills**：Skills 精选列表，收录了各种类型的 Skills，分类清晰，是目前最全的 Skills 合集之一。
|
||
|
||
> 指路：https://github.com/ComposioHQ/awesome-claude-skills
|
||
|
||
|
||
|
||
|
||
|
||
**openai/skills**：OpenAI 官方的 Codex Skills 目录。可以通过 Codex 内置的 `$skill-installer` 命令一键安装，让 Codex 在特定任务上表现更专业。
|
||
|
||
> 指路：https://github.com/openai/skills
|
||
|
||
|
||
|
||
**vercel-labs/agent-skills**：Vercel 出品的 React/Next.js 最佳实践，包括 React 开发规范、Web 设计指南、组件组合模式等，做前端的同学必装。
|
||
|
||
> 指路：https://github.com/vercel-labs/agent-skills
|
||
|
||
|
||
|
||
**expo/skills**：Expo 官方的 React Native 开发 Skills。Expo 是一个基于 React Native 的移动应用开发框架，可以让你用 JavaScript / TypeScript 开发 iOS 和 Android 应用。这个 Skills 包括原生 UI 构建、数据获取、部署、CI/CD 等，做移动端开发的朋友可以装上。
|
||
|
||
> 指路：https://github.com/expo/skills
|
||
|
||
|
||
|
||
**kepano/obsidian-skills**：Obsidian 出品的 Skills 集合。Obsidian 是一款基于本地 Markdown 文件的知识管理和笔记应用，深受程序员和知识创作者喜爱。
|
||
|
||
这些 Skills 能增强 Obsidian 的功能，让 AI Agent 能更好地管理你的笔记和知识库。
|
||
|
||
> 指路：https://github.com/kepano/obsidian-skills
|
||
|
||
|
||
|
||
|
||
|
||
**stripe/ai**：Stripe 官方 AI Skills。Stripe 是全球领先的在线支付处理平台，被无数互联网公司用于收款。
|
||
|
||
这个 Skills 包含金融支付相关的最佳实践，比如优先使用 Checkout Sessions API、动态支付方式配置、订阅计费集成等，做支付功能的朋友可以参考。
|
||
|
||
> 指路：https://github.com/stripe/ai
|
||
|
||
|
||
|
||
**trailofbits/skills**：Trail of Bits 安全公司出品的 Skills，专注安全研究和漏洞检测。内容非常丰富，包含智能合约安全审计、Burp Suite 项目解析、Semgrep 规则创建、YARA 恶意软件检测规则编写、差异化代码审查、常量时间分析、属性测试等 20+ 个安全相关插件，强烈推荐给安全方向的朋友。
|
||
|
||
> 指路：https://github.com/trailofbits/skills
|
||
|
||
|
||
|
||
**Notion Skills**：Notion 官方出品的 Skills，让 AI 能更好地与 Notion 工作区交互。可以帮你自动整理会议记录和待办事项、帮你整理和组织研究资料等，适合重度使用 Notion 的朋友。
|
||
|
||
> 指路：https://www.notion.so/notiondevs/Notion-Skills-for-Claude-28da4445d27180c7af1df7d8615723d0
|
||
|
||
|
||
|
||
|
||
|
||
### 项目开发 Skills
|
||
|
||
**superpowers**：一套完整的 AI 编程技能框架和软件开发方法论。它包含十几个可组合的编程技能，比如头脑风暴、编写计划、执行计划、TDD 测试驱动开发、系统性调试、代码审查等。
|
||
|
||
装了它之后，AI 不会直接开始写代码，而是会先问清楚需求、出设计方案让你确认、制定详细执行计划，最后才分步骤实现。适合开发大型项目、需要高质量代码的场景。
|
||
|
||
> 指路：https://github.com/obra/superpowers
|
||
|
||
|
||
|
||
|
||
|
||
**planning-with-files**：被 X 上的开发者评为最强 Skill！它借鉴了被 Meta 以 20 亿美元收购的 Manus AI 的核心工作模式：用 Markdown 文件作为 AI 的外部记忆，解决 AI 上下文丢失的问题。适合多步骤任务、研究任务、跨多次对话的项目开发，让 AI 在复杂项目中也能保持清醒不跑偏。
|
||
|
||
> 指路：https://github.com/OthmanAdi/planning-with-files
|
||
|
||
|
||
|
||
**ui-ux-pro-max**：专业前端设计 Skill，让 AI Agent 具备专业设计师的能力，生成的界面不再是千篇一律的 AI 风格。支持各种主流 AI 编程工具，强烈推荐。
|
||
|
||
> 指路：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
|
||
|
||
|
||
|
||
|
||
|
||
**vercel-react-best-practices**：Vercel 出品的 React 最佳实践，让 AI 按照 React 官方推荐的模式来写代码，包括组件设计、状态管理、性能优化等规范，避免写出反模式的代码。做 React 项目必装。
|
||
|
||
> 指路：通过 `npx skills add vercel-labs/agent-skills` 命令安装
|
||
|
||
|
||
|
||
**web-design-guidelines**：Web 设计规范 Skill，包含间距、颜色、排版、响应式设计等专业设计规范，让 AI 生成的页面更加美观，而不是千篇一律的 AI 风格。
|
||
|
||
> 指路：通过 `npx skills add vercel-labs/agent-skills` 命令安装
|
||
|
||
|
||
|
||
**frontend-design**：Anthropic 官方的前端设计 Skill，帮你开发独具辨识度的生产级前端界面。
|
||
|
||
> 指路：通过 `npx skills add anthropics/skills` 安装
|
||
|
||
|
||
|
||
**vue-skills**：Vue.js 最佳实践 Skills，尤雨溪团队成员维护。让 AI 按照 Vue 生态的最佳实践来写代码，包括 Vue 3 组合式 API、Vite 构建配置、Vitest 单元测试、Pinia 状态管理、UnoCSS 样式方案等。做 Vue 项目必装。
|
||
|
||
> 指路：https://github.com/vuejs-ai/skills
|
||
|
||
|
||
|
||
**supabase-postgres-best-practices**：Supabase 出品的 PostgreSQL 数据库最佳实践，教 AI Agent 怎么写出高质量的数据库代码，包括查询优化、索引设计等。
|
||
|
||
> 指路：https://github.com/supabase/agent-skills
|
||
|
||
|
||
|
||
|
||
|
||
### 浏览器自动化 Skills
|
||
|
||
**browser-use**：让 AI Agent 能访问和操作网站的工具（不仅是 Skill，也可以独立使用），功能强大，可以用来做自动化测试、数据抓取、网页操作等。
|
||
|
||
> 指路：https://github.com/browser-use/browser-use
|
||
|
||
|
||
|
||
**agent-browser**：Vercel 出品的浏览器自动化 Skill，让 AI Agent 能操作浏览器。比如可以自动填表单、点击按钮、截图、抓取动态渲染的内容等，非常适合做端到端测试、自动化爬虫、网页监控等场景。
|
||
|
||
> 指路：https://github.com/vercel-labs/agent-browser
|
||
|
||
|
||
|
||
|
||
### 内容创作 Skills
|
||
|
||
**remotion-dev/skills**：Remotion 官方出品的视频动画制作 Skills，能用 Claude Code 一句话生成可编辑的动画视频，几分钟就能做出专业效果，最近特别火。
|
||
|
||
> 指路：https://github.com/remotion-dev/skills
|
||
|
||
|
||
|
||
|
||
|
||
**baoyu-skills**：宝玉老师自用的 Skills 集合，包括公众号文章写作、PPT 制作、封面图生成、小红书配图、漫画生成等，对内容创作者非常有帮助，直接把大佬的创作工作流复制过来用。
|
||
|
||
> 指路：https://github.com/JimLiu/baoyu-skills
|
||
|
||
|
||
|
||
|
||
|
||
**humanizer**：去除 AI 生成痕迹的 Skill，让 AI 写的文章更像人写的。
|
||
|
||
> 指路：https://github.com/blader/humanizer
|
||
|
||
|
||
|
||
**heygen-com/skills**：HeyGen 官方的 Skills。HeyGen 是一个 AI 数字人视频生成平台，可以用虚拟人物来制作视频。这个 Skills 让 AI 能调用 HeyGen API 生成数字人视频，包括选择虚拟形象、配置语音、生成透明背景视频、视频翻译配音等功能，还支持和 Remotion 集成做程序化视频合成。
|
||
|
||
> 指路：https://github.com/heygen-com/skills
|
||
|
||
|
||
|
||
### 网站审计 Skills
|
||
|
||
**seo-audit**：SEO 审计 Skill，帮你分析网站的 SEO 问题并给出优化建议。来自 marketingskills 仓库，该仓库还有 25+ 个营销相关技能，涵盖转化优化、文案撰写、数据分析、增长策略等。
|
||
|
||
> 指路：https://github.com/coreyhaines31/marketingskills
|
||
|
||
|
||
|
||
**audit-website**：网站安全审计 Skill，基于 squirrelscan 工具，包含 230+ 条审计规则，覆盖 SEO、性能、可访问性、内容和安全等 21 个类别，还能检测 96 种泄露的密钥。
|
||
|
||
> 指路：https://github.com/squirrelscan/skills
|
||
|
||
|
||
|
||
|
||
|
||
## 四、跨编辑器通用工具
|
||
|
||
接下来聊聊跨编辑器通用的工具。这些工具不依赖特定的编辑器，适用于 Cursor、VS Code、Claude Code、GitHub Copilot 等几乎所有主流的 AI 编程工具。
|
||
|
||
|
||
|
||
### Spec-kit 规范驱动开发
|
||
|
||
[Spec-kit](https://speckit.org/) 是 GitHub 推出的规范驱动开发（SDD）框架。
|
||
|
||
什么是 SDD 呢？
|
||
|
||
传统开发流程是：想到什么写什么，边写边改，最后再补文档。这样容易导致需求不清晰、代码和文档对不上。
|
||
|
||
而规范驱动开发的思路正好相反：先把需求写成规范文档，并且把规范文档当作代码的 **唯一真相来源**。你可以把规范文档理解为 **法律条文**，它包含了详细的需求描述、系统设计和接口定义。AI 必须严格遵守这些条文来生成代码，确保产出完全符合预期。
|
||
|
||
|
||
|
||
听起来有些抽象，我们可以跟着 [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
|
||
```
|
||
|
||
|
||
|
||
选择你使用的 AI 编程工具，Spec-kit 支持 Claude Code、GitHub Copilot 等几乎所有主流编程工具。这里我选 Claude Code：
|
||
|
||
|
||
|
||
根据操作系统选择脚本类型，Windows 选下面的，其他选上面的：
|
||
|
||
|
||
|
||
执行完这个命令后，会在当前目录下创建一个 `my-project` 文件夹：
|
||
|
||
|
||
|
||
文件夹里面包含了这些核心文件：
|
||
|
||
- `.specify/memory/constitution.md`：项目的基本准则和约定
|
||
- `.specify/scripts/`：一些可执行脚本
|
||
- `.specify/templates/`：模板文件
|
||
- `.claude/commands/`：定义了一套内置的斜杠命令，让你在 AI 编程工具中可以直接调用
|
||
|
||
|
||
|
||
初始化程序还给了我们一些指引，告诉我们接下来如何运用这些命令来开发项目。
|
||
|
||
|
||
|
||
用 Claude Code 打开这个项目文件夹，就可以在对话中使用定义好的命令了。
|
||
|
||
|
||
|
||
接下来就是标准化的开发流程，参考 [官方文档](https://github.com/github/spec-kit)，主要分为 7 个步骤：
|
||
|
||
1）Constitution 制定项目准则
|
||
|
||
运行 `/speckit.constitution` 命令，定义项目的基本原则、代码规范、性能标准等。这是项目的 “宪法”，后续所有开发都要遵守。
|
||
|
||
比如：
|
||
|
||
```markdown
|
||
/speckit.constitution 禁止使用蓝紫渐变色风格的 UI
|
||
```
|
||
|
||
💡 如果你要做中文项目，最好在制定项目准则时就明确告诉 AI “整个网站使用中文”。
|
||
|
||
|
||
|
||
AI 更新了项目准则文档：
|
||
|
||
|
||
|
||
建议每一步我们都用 Git 提交一个版本，这样出了问题后能及时回滚，也便于我们看到每一步改动的文件。
|
||
|
||
|
||
|
||
|
||
|
||
2）Specify 编写功能规范
|
||
|
||
运行 `/speckit.specify` 命令，描述要做什么功能、为什么做、用户需求是什么。比如：
|
||
|
||
```markdown
|
||
/speckit.specify 我想做个【自动提醒我喝水的网站】
|
||
```
|
||
|
||
|
||
|
||
AI 为这次的需求创建了一个新的 Git 分支，防止污染现有项目。在这个分支下创建了一个需求规格文档（spec.md） + 一个需求检查文档（requirements.md）。
|
||
|
||
|
||
|
||
需求规格文档非常详细，还包含了边缘测试用例，针对用户各种可能的操作进行处理。
|
||
|
||
|
||
|
||
需求检查文档中记录了 AI 对于需求的理解，打钩表示 AI 理解并确认了：
|
||
|
||
|
||
|
||
|
||
|
||
3）Clarify 澄清不明确的地方（可选）
|
||
|
||
如果你发现需求检查文档中有的条目没有打钩，那你需要通过 Clarify 命令来让 AI 引导你进一步明确需求，直到所有的条目都打上勾。
|
||
|
||
运行 `/speckit.clarify` 命令，AI 会提出结构化的问题，让你来回答。从而帮你填补需求中的空白，比如边界情况、错误处理等。
|
||
|
||
|
||
|
||
我运气不错，不需要这一步 AI 就已经理解了所有条目，接下来可以进入制定技术方案阶段。
|
||
|
||
|
||
|
||
|
||
|
||
4）Plan 制定技术方案
|
||
|
||
运行 `/speckit.plan` 命令，让 AI 决定用什么技术栈、系统架构、数据模型、API 接口等。
|
||
|
||
|
||
|
||
制定技术方案完成，这次生成了一大堆文档，简单了解一下：
|
||
|
||
- CLAUDE.md 项目开发指南，记录技术栈和项目结构，用于指导 Claude Code 接下来如何开发
|
||
- quickstart.md 快速入门指南，包含 6 个实施阶段和部署方案
|
||
- plan.md 实施方案，定义了纯客户端架构、存储策略、宪法合规性检查等
|
||
- data-model.md 数据模型设计，定义了 4 个核心实体（提醒设置、水量日志、每日进度、历史记录）和存储结构
|
||
- research.md 技术研究文档，记录了 8 项关键技术决策
|
||
- contracts/api-contract.md API 接口文档
|
||
|
||
|
||
|
||
接下来，我们就可以准备开发实现了。
|
||
|
||
|
||
|
||
|
||
|
||
5）Tasks 拆解任务
|
||
|
||
运行 `/speckit.tasks` 命令，把计划拆解成可执行的任务列表，并标注依赖关系和优先级。
|
||
|
||
|
||
|
||
生成了一个任务列表文档，每一步要做什么都非常清晰：
|
||
|
||
|
||
|
||
|
||
|
||
6）Analyze 分析检查（可选）
|
||
|
||
运行 `/speckit.analyze` 命令，检查规范、计划、任务是否完整一致，提前发现设计缺陷。
|
||
|
||
|
||
|
||
可以看到，AI 没有检查出问题，还让我自信地进行下一步，真爽死了！
|
||
|
||
|
||
|
||
7）Implement 执行实现
|
||
|
||
最后，运行 `/speckit.implement` 命令，让 AI 按照任务列表生成代码。
|
||
|
||
|
||
|
||
大功告成，看一下效果~
|
||
|
||
|
||
|
||
因为我这里始终没有提到使用中文输出，所以网站内容都是英文的，不过我感觉效果还可以。
|
||
|
||
到这里，我们已经学会了如何用 Spec-kit 开发完整项目，再复习一下完整流程：
|
||
|
||
|
||
|
||
即使不用 Spec-kit，我们开发完整项目时也可以人工遵循这些步骤。
|
||
|
||
这种模式最大的好处是 **对齐**。所有人都基于同一份清晰的规范文档工作，大家对需求的理解高度一致，既减少了沟通中的误解，又能确保代码质量。
|
||
|
||
不过缺点也很明显，对于小项目，本来直接写代码几分钟就能搞定了，上面这套流程走下来差不多要半个小时！
|
||
|
||
所以这套流程比较适合团队从 0 开始做完整的新项目，虽然流程比直接写代码慢一些，但能大大降低返工的风险，长远来看反而更高效。
|
||
|
||
|
||
|
||
### OpenSpec 轻量规范框架
|
||
|
||
[OpenSpec](https://openspec.dev/) 是一个轻量的规范驱动开发框架，比 Spec-kit 更简单易用。
|
||
|
||
它的核心理念是把规范文档作为代码库的一部分，每次改功能都 **先写变更提案** => 确认后再实现 => 实现完再把变更归档到规范文档中，让文档和代码始终保持同步。
|
||
|
||
|
||
|
||
访问 [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。
|
||
|
||
|
||
|
||
运行命令后，OpenSpec 会自动在你的项目中生成一个 `openspec/` 目录，里面包含：
|
||
|
||
- `openspec/specs/`：存放主规范文档，记录了项目的完整现状
|
||
- `openspec/changes/`：存放变更提案，记录了每次修改的计划
|
||
- ⭐️ `openspec/AGENTS.md`：让 AI 编程助手使用 OpenSpec 进行规范驱动开发的操作指南，包含了如何创建变更提案、编写需求规范、验证和归档变更的完整工作流程。
|
||
- `openspec/project.md`：当前项目的上下文说明（用来记录项目的信息）
|
||
|
||
|
||
|
||
此外，还会根据你选择的 AI 编程工具，生成对应的命令文件，比如 Cursor 的：
|
||
|
||
|
||
|
||
有了这些文件，我们就可以开始规范化的开发流程了。参考 [官方文档](https://github.com/Fission-AI/OpenSpec/)，主要分为 5 个步骤：
|
||
|
||
1）Draft 起草变更提案
|
||
|
||
直接在 AI 编程工具中跟 AI 说，让它创建变更提案。比如我想添加用户搜索功能：
|
||
|
||
```markdown
|
||
创建一个 OpenSpec 的 change，添加功能：根据名称和邮箱搜索用户
|
||
```
|
||
|
||
也可以用 AI 编程工具（比如 Claude Code、Cursor）的斜杠命令：
|
||
|
||
```markdown
|
||
/openspec:proposal 添加功能：根据名称和邮箱搜索用户
|
||
```
|
||
|
||
|
||
|
||
AI 会给这个功能创建一个独立的目录 `openspec/changes/add-user-search/`，目录下创建一系列文档：
|
||
|
||
- `proposal.md`：描述要改什么、为什么改
|
||
- `tasks.md`：实施步骤的任务分解
|
||
- `specs/…/spec.md`：需求变更的具体内容
|
||
|
||
|
||
|
||
|
||
|
||
2）Verify & Review 验证和审查
|
||
|
||
可以运行下列命令，查看 AI 创建的变更提案是否正确：
|
||
|
||
```bash
|
||
openspec list # 查看所有变更
|
||
openspec validate add-user-search # 验证格式是否正确
|
||
openspec show add-user-search # 查看详细内容
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
3）和团队一起审查提案
|
||
|
||
如果需要完善，可以继续跟 AI 对话，比如：
|
||
|
||
```markdown
|
||
你能帮我添加更多搜索条件和限制么？
|
||
```
|
||
|
||
AI 会更新规范和任务列表，直到大家达成一致。
|
||
|
||
|
||
|
||
4）Implement 实现变更
|
||
|
||
规范确认后，让 AI 开始实现：
|
||
|
||
```markdown
|
||
规范已经很完美了，开始生成代码吧
|
||
```
|
||
|
||
也可以用斜杠命令：
|
||
|
||
```markdown
|
||
/openspec:apply add-user-search
|
||
```
|
||
|
||
AI 会按照 `tasks.md` 中的任务列表逐一实现，并标记完成状态。
|
||
|
||
|
||
|
||
很快生成完成，AI 的输出非常整齐，所有改动一目了然：
|
||
|
||
|
||
|
||
|
||
|
||
5）Archive 归档变更
|
||
|
||
所有任务完成后，让 AI 归档这次变更：
|
||
|
||
```markdown
|
||
请归档这次变更
|
||
```
|
||
|
||
也可以用斜杠命令：
|
||
|
||
```markdown
|
||
/openspec:archive add-user-search
|
||
```
|
||
|
||
或者在终端运行：
|
||
|
||
```bash
|
||
openspec archive add-user-search --yes
|
||
```
|
||
|
||
|
||
|
||
这个命令会：
|
||
|
||
- 将变更文件夹移动到 `openspec/changes/archive/` 归档区
|
||
- 将需求变更自动合并到 `openspec/specs/` 主规范中
|
||
- 保持文档和代码的同步
|
||
|
||
|
||
|
||
这样一来，通过 `openspec/changes/` 的历史记录，你可以随时追溯每次变更的来龙去脉。
|
||
|
||
此外，整个开发过程中，建议大家定期运行 `openspec validate` 验证命令， 确保规范的完整性。
|
||
|
||
|
||
|
||
---
|
||
|
||
|
||
|
||
到这里，相信大家也能感受到 OpenSpec 和 Spec-kit 的区别了。
|
||
|
||
- Spec-kit 需要完整的 7 步流程：制定准则 → 写需求 → 澄清疑问 → 定方案 → 拆任务 → 检查 → 写代码），适合从 0 开始做大型新项目
|
||
- OpenSpec 的流程更简化：起草提案 → 审查 → 实现 → 归档 → 验证，上手更快，适合在现有项目上迭代功能。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### 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：
|
||
|
||
|
||
|
||
然后就可以愉快地跟 AI 对话了：
|
||
|
||
|
||
|
||
但是我个人主要用它的 Shell 助手能力（给命令添加 `-e` 选项），而不是 AI 对话能力。
|
||
|
||
|
||
|
||
比如我想批量重命名文件，但不记得命令怎么写，在终端里执行下列命令：
|
||
|
||
```markdown
|
||
aichat -e 帮我把当前目录下所有 .txt 文件改成 .md
|
||
```
|
||
|
||
它就会生成对应的 shell 命令，我确认后它就自动执行了。
|
||
|
||
|
||
|
||
还可以通过快捷键来智能补全命令：
|
||
|
||
|
||
|
||
除了 Shell 助手，AIChat 还有一些进阶功能。比如支持 RAG 检索增强生成，可以让 AI 基于你的本地文档回答问题；支持创建 AI 代理，把指令、工具和文档组合成自动化工作流。
|
||
|
||
|
||
|
||
此外，如果你想对比不同模型的效果，运行 `aichat --serve` 可以启动本地网页界面，同时对比多个模型的回答。
|
||
|
||
|
||
|
||
|
||
|
||
## 五、AI 的效率工具箱
|
||
|
||
前面介绍的 MCP、插件、Skills 都是跑在 AI 编程工具里的扩展。而接下来要介绍的这些开源项目，本身就是独立的效率工具 —— 它们天生就是为 AI 设计的，让 AI 能读文件、听语音、剪视频、连接外部服务，从一个只会聊天的嘴强王者，变成真正能干活的六边形战士。
|
||
|
||
|
||
|
||
### AI 的阅读器 - 文件处理工具
|
||
|
||
日常工作中，很多资料都是 PDF、Word、Excel、PPT 格式的。但 AI 默认只能读纯文本，你直接把一个 PDF 丢给它，大概率读不出什么有用的东西。
|
||
|
||
解决方法很简单：AI 最喜欢 Markdown 了，那不妨把文件先转成 Markdown，再交给它处理就好了。
|
||
|
||
|
||
|
||
**MarkItDown**
|
||
|
||
[MarkItDown](https://github.com/microsoft/markitdown) 是微软开源的万能格式转换器。PDF、Word、Excel、PPT、图片、音频、HTML，甚至 YouTube 视频，它都能一把梭转成 Markdown。
|
||
|
||
> 开源指路：https://github.com/microsoft/markitdown
|
||
|
||
|
||
|
||
安装和使用非常简单，一行 pip 命令搞定：
|
||
|
||
```bash
|
||
pip install markitdown
|
||
```
|
||
|
||
装好之后，在终端输入一行命令就能转换文件。而且它还提供了 MCP Server，可以直接接入到 AI 编程工具中。之后你在项目里丢一个 PDF 或 Word 文件让 AI 分析，它就会自动调用 MarkItDown 先转成 Markdown 再处理，非常丝滑。
|
||
|
||
|
||
|
||
MarkItDown 的优点在于格式覆盖广，几乎啥格式都能转。但遇到排版很复杂的 PDF，比如论文里的多栏排版、数学公式、复杂表格，就有点力不从心了。
|
||
|
||
这时候可以看看下面两个更专业的工具。
|
||
|
||
|
||
|
||
**MinerU**
|
||
|
||
[MinerU](https://github.com/opendatalab/MinerU) 专攻 PDF 深度解析，能把公式转成 LaTeX、表格转成 HTML，还能自动提取图片，最终输出的是包含图文的多模态 Markdown。如果你经常需要处理论文、技术报告这类排版复杂的文档，MinerU 比 MarkItDown 更靠谱。
|
||
|
||
> 开源指路：https://github.com/opendatalab/MinerU
|
||
|
||
|
||
|
||
|
||
|
||
**Docling**
|
||
|
||
[Docling](https://github.com/docling-project/docling) 是 IBM 开源的文档解析工具。除了 PDF 之外还支持 Word、PPT、Excel、图片，在复杂文档的版面理解和结构还原上比 MarkItDown 更强。甚至装上语音识别扩展后还能处理音视频，提取音轨转成文字。
|
||
|
||
> 开源指路：https://github.com/docling-project/docling
|
||
|
||
|
||
|
||
简单来说：日常转换选 MarkItDown，论文公式选 MinerU，复杂版面选 Docling，按需搭配就好。
|
||
|
||
|
||
|
||
### AI 的耳朵和剪辑师 - 音视频工具
|
||
|
||
除了文档，音视频也是我们日常工作中经常打交道的内容。会议录音要整理、视频素材要下载、格式要转换……这些活儿交给 AI 来做，效率高到飞起。
|
||
|
||
|
||
|
||
**whisper.cpp**
|
||
|
||
[whisper.cpp](https://github.com/ggml-org/whisper.cpp) 是 OpenAI Whisper 模型的 C/C++ 移植版，纯本地运行的语音转文字工具。最大的优势就是不需要 GPU 也不需要联网，CPU 就能跑，完全不用担心隐私数据外泄。
|
||
|
||
转录会议录音、播客、视频字幕都不在话下，支持多种语言的语音识别，还能自动检测语种，丢进去一段音频就能出文字。
|
||
|
||
> 开源指路：https://github.com/ggml-org/whisper.cpp
|
||
|
||
|
||
|
||
|
||
|
||
**yt-dlp**
|
||
|
||
[yt-dlp](https://github.com/yt-dlp/yt-dlp) 是一个视频下载神器，支持上千个网站，包括 YouTube、B 站、TikTok、Twitter 等等，你能想到的基本都有。
|
||
|
||
它是纯命令行工具，AI 调用起来非常丝滑，指定一个 URL 和输出格式就完事了。还能选择分辨率、提取纯音频、下载字幕，功能非常全面。
|
||
|
||
> 开源指路：https://github.com/yt-dlp/yt-dlp
|
||
|
||
|
||
|
||
|
||
|
||
**FFmpeg**
|
||
|
||
[FFmpeg](https://github.com/FFmpeg/FFmpeg) 可能是整个计算机历史上最重要的开源项目之一，几乎所有涉及音视频的软件底层都在用它。不管是转码、裁剪、拼接、加字幕、提取音频还是转换格式，一条命令就能搞定。
|
||
|
||
人类记 FFmpeg 参数头皮发麻，但 AI 记参数可太擅长了！比如你跟 AI 说 "把这个视频裁剪前 30 秒并转成 GIF"，它立刻就能生成对应的 FFmpeg 命令并执行。换成人工操作，可能还得先去搜半天参数……
|
||
|
||
> 开源指路：https://github.com/FFmpeg/FFmpeg
|
||
|
||
|
||
|
||
组合使用的话，yt-dlp 负责下载素材，whisper.cpp 负责语音转文字，FFmpeg 负责音视频处理，三板斧一套下来，AI 就能完成从下载、转录到剪辑的完整工作流了。
|
||
|
||
|
||
|
||
### AI 的手脚 - 浏览器自动化
|
||
|
||
前面在 Skills 板块已经提到了 [Browser Use](https://github.com/browser-use/browser-use)，这里再展开聊聊。
|
||
|
||
Browser Use 不仅是一个 Skill，它本身也是一个功能强大的独立框架 —— 基于 Python 的浏览器自动化工具，让 AI 能像真人一样操控浏览器。
|
||
|
||
比如你跟 AI 说：“帮我打开某个网站，找到 Java 学习路线并截图。”
|
||
|
||
它就能一步步完成，支持点击、输入、滚动等各种操作，甚至支持多标签页操作和自动规划执行步骤，复杂的多步任务也能搞定。
|
||
|
||
> 开源指路：https://github.com/browser-use/browser-use
|
||
|
||
|
||
|
||
适合用来做自动化测试、批量数据抓取、后台系统的重复性操作等场景。它的底层基于微软开源的 Playwright 浏览器自动化框架，稳定性和兼容性都不错。
|
||
|
||
|
||
|
||
### AI 的百宝箱 - 外部服务集成
|
||
|
||
想让 AI 帮你发邮件、创建 GitHub Issue、更新 Notion 文档、给聊天软件发消息？这些事情每个都要对接不同的平台和 API，认证方式也各不相同，一个个对接起来很麻烦。
|
||
|
||
[Composio](https://github.com/ComposioHQ/composio) 就是帮 AI 搞定这些脏活累活的。它预先集成了 1000+ 外部服务，帮你处理好 OAuth 认证、API 调用、错误重试这些细节。AI 只需要调一个函数就能操作 GitHub、Gmail、Slack、Notion 等各种平台，省去了逐个对接的痛苦。
|
||
|
||
> 开源指路：https://github.com/ComposioHQ/composio
|
||
|
||
|
||
|
||
不管你用 Python 还是 TypeScript 开发 AI 应用，都能直接用上。官方还提供了不少现成的应用模板，拿来就能用。
|
||
|
||
|
||
|
||
### AI 的备忘录 - 记忆管理
|
||
|
||
用过 AI 编程的同学应该都有过这种体验：跟 AI 聊了好几轮的需求和技术细节，结果一开新对话，它全忘了，又得从头介绍一遍。
|
||
|
||
虽然现在不少 AI 编程工具已经自带了记忆管理功能，但如果你想自己开发 AI 应用，记忆这块儿就得自己解决。
|
||
|
||
[Mem0](https://github.com/mem0ai/mem0) 能给 AI 装上一个持久记忆层。它会自动从对话中提取关键信息存到数据库里，下次对话时自动检索出来。这样一来，AI 能记住你喜欢用什么编程语言、你的项目用了什么技术栈、上次聊到哪了，下次对话直接接着来，不用重复交代背景了。
|
||
|
||
> 开源指路：https://github.com/mem0ai/mem0
|
||
|
||
|
||
|
||
它支持用户级、会话级、Agent 级三层记忆管理，不同用户的上下文不会互相混淆。如果你在学 AI 应用开发，建议研究一下 Mem0 的记忆系统实现，很有参考价值。
|
||
|
||
|
||
|
||
## 写在最后
|
||
|
||
看到这里，相信你已经了解了各种实用的 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)
|