萬字長文 + 100 多張圖，絕對乾貨！點個收藏，讓我們開始吧~
本文已收錄到
一、MCP 服務器類
MCP 的全稱是 Model Context Protocol 模型上下文協議。簡單來説，就是讓 AI 大模型能夠連接外部工具和數據源的一個開放標準。
打個比方，MCP 就像是 AI 的 USB-C 接口，原本 AI 只能根據訓練數據來回答問題、生成代碼，但有了這個統一接口，它就能連接各種外部工具，比如打開瀏覽器看網站、搜索並抓取網頁內容、部署項目到雲端、訪問數據庫等等，能力一下子就豐富起來了。
⭐️ Firecrawl MCP 網頁內容抓取
首先要介紹的是
我在開發項目時經常需要從網上獲取參考資料、閲讀官方文檔和技術博客，或者分析競品的功能實現。如果人工來做這件事，需要先打開網站、再手動複製粘貼內容，或者自己寫個爬蟲腳本，麻煩得一批。
有了 Firecrawl MCP，這事兒就簡單多了。我直接在 AI 編程工具中跟 AI 説：
-
幫我獲取這個網站的內容
-
幫我讀一下這個文檔
-
幫我從網上搜索 XX 相關的信息
它就能自動把網頁的內容、結構、甚至是動態加載的數據都給我抓下來。
如何使用？
首先你需要在
然後進入到 AI 編程工具中配置一下 MCP 服務器。這裏我以 Cursor 為例，其他 AI 編程工具對接 MCP 的方法可以看各自的官方文檔，比如
打開 Cursor 設置，找到 Tools & MCP，點擊 + New MCP Server。
本質上就是修改 MCP 配置文件，添加這樣的配置：
{
"mcpServers": {
"firecrawl-mcp": {
"command": "npx",
"args": ["-y", "firecrawl-mcp"],
"env": {
"FIRECRAWL_API_KEY": "你的API密鑰"
}
}
}
}
這段配置的意思是：通過 npx 命令來運行 firecrawl-mcp 這個工具，並且把你的 API 密鑰傳給它。如果你電腦上還沒有安裝 npx，需要先
配置好之後，看到綠色的成功點點，表示能夠正常使用了。
除了基礎的網頁抓取，Firecrawl MCP 還支持批量抓取整站內容、遞歸抓取網站的多層鏈接、失敗自動重試等高級功能。
Brave Search MCP 隱私搜索
接下來是
在開發過程中，我經常需要讓 AI 幫我搜索最新的技術資料、查找某個庫的使用示例、或者瞭解某個技術問題的解決方案。傳統的做法是自己去搜索引擎查，然後把結果複製給 AI，比較麻煩。
有了 Brave Search MCP，我直接跟 AI 説：
-
幫我搜索一下 React 19 的新特性
-
查一下這個錯誤怎麼解決
它就能通過 Brave 搜索引擎去找答案。而且 Brave 搜索不會追蹤你的搜索記錄，隱私保護做得很好。
如何使用？
首先去
但這裏比較坑的一點是，即使訂閲免費版，也要填寫付款方式，沒有海外銀行卡的朋友可以撤了。
訂閲成功後，創建 API Key：
拿到 API Key 後，在 Cursor 的 MCP 配置中添加：
{
"mcpServers": {
"brave-search": {
"command": "npx",
"args": ["-y", "brave-search-mcp"],
"env": {
"BRAVE_API_KEY": "你的API密鑰"
}
}
}
}
配置好後，AI 就能隨時幫你搜索最新信息了。
支持網頁、圖片、視頻、新聞等多種類型的內容搜索，甚至能搜索本地商家信息（比如附近的咖啡店）。
它還帶有 AI 摘要功能，能把搜索結果自動總結成簡潔的答案。
⭐️ Context7 獲取最新文檔
我們都知道，AI 的訓練數據是有截止時間的，比如 GPT-4 的知識可能只更新到 2023 年。這就導致一個問題，當你問 AI 關於某個框架最新版本的用法時，它給出的答案可能是過時的。
Context7 就是來解決這個問題的。它會自動從官方文檔網站抓取最新的、特定版本的文檔內容，然後提供給 AI。
這樣一來，AI 給出的代碼示例和建議就是基於最新文檔的，不會去用已經廢棄的寫法，大大提高了項目能正常運行的概率。
如何使用？
訪問
然後在 MCP 配置中添加：
{
"mcpServers": {
"context7": {
"url": "https://mcp.context7.com/mcp",
"headers": {
"CONTEXT7_API_KEY": "你的API密鑰"
}
}
}
}
之後你在 AI 編程工具中跟 AI 對話時，只要跟技術文檔相關，或者主動提一嘴 "use context7"，它就會自動去獲取最新文檔來回復你。
Web to MCP 復刻網頁組件
很多時候，我在瀏覽網站時看到一個不錯的 UI 組件，想讓 AI 幫我實現類似的效果。以前的做法是截圖，然後跟 AI 描述：“幫我做一個類似這樣的按鈕，圓角、漸變色、帶陰影……” 既費時又不準確。
有了 Web to MCP，我只需要在網頁上點擊某個想復刻的元素：
它就會自動捕獲組件的 DOM 結構、CSS 樣式、甚至是交互效果，並且給你一個讓 AI 復刻組件的提示詞。
你只需要把提示詞發送給 AI，AI 會調用 MCP 拿到完整的組件信息，並生成代碼來複刻組件。
相比於直接給 AI 模糊的截圖，生成的代碼更準確了。
如何使用？
1）通過官網或者在 Chrome 應用商店搜索 Web to MCP 來安裝擴展
2）用 Google 賬號登錄，獲取你的 MCP 配置：
3）在 AI 編程工具的 MCP 配置中添加：
{
"mcpServers": {
"web-to-mcp": {
"url": "https://web-to-mcp.com/mcp/你的唯一ID"
}
}
}
之後瀏覽網頁時，點擊擴展圖標，選中你想要的組件，就能直接在 AI 編程工具裏引用它，並且快速生成風格一致的代碼了。
Chrome DevTools MCP 瀏覽器調試
在做前端開發時，我經常需要調試頁面、查看網絡請求、分析性能問題。以前這些都得手動在瀏覽器的開發者工具裏操作，現在有了這個工具，我可以直接讓 AI 幫我做這些事。
比如我跟 AI 説：“幫我分析當前這個網站加載慢的原因”，它就能打開 Chrome DevTools，分析網絡請求、查看資源加載時間，然後告訴我哪裏有問題。
或者我説：“幫我測試一下這個表單提交功能”，它就能自動填寫表單、點擊提交按鈕、查看請求響應。
如何使用？
在 MCP 配置中添加：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
配置好後，AI 就能幫你自動化測試、調試頁面了。工具會自動連接到你正在運行的 Chrome 瀏覽器，無需額外設置。
這個工具還支持元素定位、網絡請求監控、性能分析、頁面截圖等功能，非常適合前端開發和測試。
EdgeOne Pages MCP 一鍵部署
開發完項目後，你一定會想讓別人訪問你的網站。傳統的部署流程很繁瑣，需要人工打包代碼、上傳代碼到服務器、配置域名、設置 HTTPS 安全證書，一套流程下來得花不少時間。
有了 EdgeOne Pages MCP，我直接在 AI 編程工具裏跟 AI 説：“幫我部署這個項目”，它就能自動完成打包、上傳、部署的全過程，最後給我一個可以直接訪問的 URL。而且部署到全球加速網絡，各地訪問速度都很快。
如何使用？
首先到
然後獲取 API Token，作為調用服務的憑證：
在 MCP 配置中添加：
{
"mcpServers": {
"edgeone-pages-mcp-server": {
"command": "npx",
"args": ["edgeone-pages-mcp"],
"env": {
"EDGEONE_PAGES_API_TOKEN": "你的API Token"
}
}
}
}
配置好後，就能讓 AI 幫你一鍵部署項目了。部署是免費的，支持靜態網站、全棧項目、自動配置 HTTPS 和 CDN 加速等功能，非常適合個人項目和小型應用。
COS MCP 對象存儲
對象存儲就是雲端的文件存儲服務，可以理解為雲盤。
在團隊協作開發中，我們經常需要讓 AI 參考一些項目規範文檔、或者引用一些圖片。以前的做法是把這些文件放在本地，然後手動上傳給 AI，既不方便，也不利於團隊維護、修改和共享。
有了 COS MCP，我可以説一句話把這些需要共享的文件存到雲端，然後讓 AI 直接去讀取。
比如我跟 AI 説：“按照我們團隊 COS 共享的項目規範文檔來寫這個功能”，它就能自動從 COS 裏讀取規範文檔，然後按照規範來寫代碼。
如何使用？
1）首先需要開通騰訊雲 COS 對象存儲服務。訪問
2）然後在 "訪問管理" > "API 密鑰管理" 中獲取 SecretId 和 SecretKey，注意一定不要泄露這些信息！
3）在 MCP 配置中添加：
{
"mcpServers": {
"cos-mcp": {
"command": "npx",
"args": [
"cos-mcp",
"--Region=你的地域",
"--Bucket=你的存儲桶",
"--SecretId=你的SecretId",
"--SecretKey=你的SecretKey"
]
}
}
}
配置好後，AI 就能讀取和管理你雲端的文件了，相當於給了 AI 一個網盤。
此外，這個工具還支持圖片搜索、圖片處理、文檔轉換、視頻封面生成等功能。
GitHub MCP 代碼倉庫管理
程序員朋友們對 GitHub 肯定不陌生，這是全球最大的代碼託管平台，可以用它來存儲代碼、團隊協作開發。
在日常開發中，我可能需要搜索 GitHub 代碼倉庫、創建 Issue 問題反饋、提交 PR 代碼合併請求、查看代碼變更、分析提交歷史等等。以前這些操作都得在 GitHub 網站上手動完成，現在我可以直接讓 AI 幫我做。
比如我跟 AI 説：“我最近在 GitHub 上開源了哪些項目？star 數如何？”
它就能快速給我在 GitHub 上的項目生成一份數據報告：
或者我説：“幫我看看最近一週的代碼變更”，它就能分析 Git 提交記錄，告訴我都改了什麼。
如何使用？
首先需要在 GitHub 獲取到你的
然後在 MCP 配置中添加：
{
"mcpServers": {
"github": {
"url": "https://api.githubcopilot.com/mcp/",
"headers": {
"Authorization": "Bearer 你的GitHub憑證"
}
}
}
}
這個工具還支持代碼分析、CI/CD 監控、安全掃描等功能，基本上你在 GitHub 中能做的事，AI 都能幫你做。
MCP 服務器講完了，接下來聊聊 IDE 擴展插件。
IDE 就是集成開發環境，簡單理解就是寫代碼的軟件，比如 VS Code、JetBrains IDEA 這些，可以通過安裝插件來增強編輯器的能力，讓你的開發體驗更上一層樓。
值得一提的是，現在很多有圖形界面的 AI 編程工具（比如 Cursor）都是基於 VS Code 開發的，自然也支持 VS Code 的插件，所以下面我也主要分享 VS Code 插件，裝上就能用。
Claude Code 官方擴展
Claude Code 是 Anthropic 推出的 AI 編程助手，原本是獨立的命令行工具。而
在 VS Code 或 Cursor 的擴展商店搜索 "Claude Code" 即可安裝：
這個擴展的優點是提供了圖形界面，你可以通過側邊欄面板和 Claude 對話，能夠靈活輸入文字。
當 AI 修改代碼時，你能在編輯器裏實時看到變化，並且自動顯示 diff 對比，讓你清楚地知道 AI 改了哪些地方。
我經常用它來重構代碼、修復 Bug、添加新功能。它還支持多會話並行，也就是説你可以同時讓多個 Claude 代理處理不同的任務，比如一個負責前端，一個負責後端，大大提高開發效率。
順帶一提，類似的插件還有 Cline、GitHub Copilot 等，功能都差不多，大家可以根據自己的喜好選擇。
GitLens Git 可視化
Git 是程序員用來管理代碼版本的工具，簡單理解就是能記錄代碼的每一次修改，包括誰改的、什麼時候改的、為什麼改。
有了這些記錄，出了 Bug 時我就能快速找到 “兇手” 追責。
但 Git 只是個命令行工具，想查看歷史記錄還需要手敲命令，看起來也不太舒服。
當我通過編輯器的擴展商店安裝了 GitLens 後，把鼠標放到任意代碼行上，GitLens 就會自動顯示這行代碼的作者、相關的 PR 合併請求等等。
進入 Git 管理面板，整個項目的提交記錄一目瞭然。
此外，它還支持 AI 功能，能自動生成提交信息、解釋代碼變更、生成變更日誌、用 AI 解釋某次改動的目的。
⭐️ Office Viewer 文檔預覽
我們知道，AI 輸出的文檔內容以 Markdown 格式為主，默認的編輯器中打開 Markdown 文件只能看到原始的標記語法，不夠直觀。
看長文的時候，我還要用 Typora 等專業的 Markdown 編輯器打開文檔，比較麻煩。
在擴展商店搜索 "Office Viewer" 並安裝後，可以直接在編輯器中使用所見即所得的 Markdown 編輯器，看文檔、寫文檔都很方便，不用來回切換窗口。
此外，這個插件支持 Excel 表格、Word 文檔、PDF 文檔、SVG、字體文件、壓縮包等多種格式，堪稱編輯器裏的萬能文檔查看器。
⭐️ ESLint 代碼質量檢查
雖然編輯器本身也能檢查一些基本的語法錯誤，但對於代碼規範、潛在的邏輯漏洞等問題，就需要專業的代碼檢查工具來把關了。
現在很多 AI 生成的項目代碼都會自帶 ESLint 配置文件（比如 .eslintrc.js 或者 eslint.config.js），定義好團隊統一的代碼檢查規則。
在擴展商店搜索 "ESLint" 並安裝後，插件會自動檢測項目中的規則配置文件，然後實時檢查代碼中的問題，並給出修復建議。
這樣一來，AI 寫的代碼如果有不規範的地方，你立刻就能發現並讓 AI 修正，避免埋下隱患。
⭐️ Prettier 代碼格式化
團隊協作時，每個人的編碼習慣不同，有的代碼縮進 4 格、有的縮進 2 格；有的用單引號、有的用雙引號。大家的代碼風格五花八門，看着就很亂，代碼審查時也容易出現 Beef。
這時就需要統一的格式化規範了。現在很多 AI 生成的項目代碼都會自帶 Prettier 配置文件（比如 .prettierrc），定義好統一的格式化規則。
在擴展商店搜索 "Prettier" 並安裝後，就可以用快捷鍵一鍵格式化代碼。
還可以在 VS Code 的設置裏搜索 "Format On Save" 並開啓，這樣每次保存代碼時就會自動格式化，保證整個項目的代碼風格一致。
Error Lens 錯誤實時顯示
一般情況下，如果代碼中有錯誤，你得把鼠標移到紅色波浪線上才能看到錯誤提示，不夠直觀。
在擴展商店搜索 "Error Lens" 並安裝後，錯誤信息會直接高亮顯示在代碼行尾，你一眼就能看到哪裏有問題。
Console Ninja 控制枱日誌顯示
在調試前端代碼時，我經常需要看 console.log 打印出來的日誌輸出。要先切換到瀏覽器，再按 F12 打開開發者工具來查看控制枱，比較麻煩。
在擴展商店搜索 "Console Ninja" 並安裝後，直接在編輯器裏就能看到輸出結果，看到每個日誌是從哪個文件哪一行輸出的，還能顯示網絡請求和錯誤堆棧。
有了它，不用頻繁切換窗口了，調試效率大大提升。
三、跨編輯器通用工具
前面介紹的工具都是對編輯器能力的增強，接下來聊聊跨編輯器通用的工具。這些工具不依賴特定的編輯器，適用於 Cursor、VS Code、Claude Code、GitHub Copilot 等幾乎所有主流的 AI 編程工具。
Spec-kit 規範驅動開發
什麼是 SDD 呢？
傳統開發流程是：想到什麼寫什麼，邊寫邊改，最後再補文檔。這樣容易導致需求不清晰、代碼和文檔對不上。
而規範驅動開發的思路正好相反：先把需求寫成規範文檔，並且把規範文檔當作代碼的 唯一真相來源。你可以把規範文檔理解為 法律條文，它包含了詳細的需求描述、系統設計和接口定義。AI 必須嚴格遵守這些條文來生成代碼，確保產出完全符合預期。
聽起來有些抽象，我們可以跟着
首先打開終端，利用 uvx 命令直接安裝運行 Specify 工具，並初始化一個項目：
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 打開這個項目文件夾，就可以在對話中使用定義好的命令了。
接下來就是標準化的開發流程，參考
1）Constitution 制定項目準則
運行 /speckit.constitution 命令，定義項目的基本原則、代碼規範、性能標準等。這是項目的 “憲法”，後續所有開發都要遵守。
比如：
/speckit.constitution 禁止使用藍紫漸變色風格的 UI
💡 如果你要做中文項目，最好在制定項目準則時就明確告訴 AI “整個網站使用中文”。
AI 更新了項目準則文檔：
建議每一步我們都用 Git 提交一個版本，這樣出了問題後能及時回滾，也便於我們看到每一步改動的文件。
2）Specify 編寫功能規範
運行 /speckit.specify 命令，描述要做什麼功能、為什麼做、用户需求是什麼。比如：
/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 輕量規範框架
它的核心理念是把規範文檔作為代碼庫的一部分，每次改功能都 先寫變更提案 => 確認後再實現 => 實現完再把變更歸檔到規範文檔中，讓文檔和代碼始終保持同步。
訪問
首先確保你的電腦安裝了符合要求的 Node.js 版本（比如我這裏要求 Node.js >= 20.19.0），然後全局安裝 OpenSpec CLI：
npm install -g @fission-ai/openspec@latest
進入你的項目目錄，運行初始化命令：
openspec init
初始化過程中會讓你選擇要集成的 AI 工具（比如 Claude Code、Cursor 等），我這裏選擇 Cursor。
運行命令後，OpenSpec 會自動在你的項目中生成一個 openspec/ 目錄，裏面包含：
-
openspec/specs/：存放主規範文檔，記錄了項目的完整現狀 -
openspec/changes/：存放變更提案，記錄了每次修改的計劃 -
⭐️
openspec/AGENTS.md：讓 AI 編程助手使用 OpenSpec 進行規範驅動開發的操作指南，包含了如何創建變更提案、編寫需求規範、驗證和歸檔變更的完整工作流程。 -
openspec/project.md：當前項目的上下文説明（用來記錄項目的信息）
此外，還會根據你選擇的 AI 編程工具，生成對應的命令文件，比如 Cursor 的：
有了這些文件，我們就可以開始規範化的開發流程了。參考
1）Draft 起草變更提案
直接在 AI 編程工具中跟 AI 説，讓它創建變更提案。比如我想添加用户搜索功能：
創建一個 OpenSpec 的 change，添加功能：根據名稱和郵箱搜索用户
也可以用 AI 編程工具（比如 Claude Code、Cursor）的斜槓命令：
/openspec:proposal 添加功能：根據名稱和郵箱搜索用户
AI 會給這個功能創建一個獨立的目錄 openspec/changes/add-user-search/，目錄下創建一系列文檔：
-
proposal.md：描述要改什麼、為什麼改 -
tasks.md：實施步驟的任務分解 -
specs/…/spec.md：需求變更的具體內容
2）Verify & Review 驗證和審查
可以運行下列命令，查看 AI 創建的變更提案是否正確：
openspec list # 查看所有變更
openspec validate add-user-search # 驗證格式是否正確
openspec show add-user-search # 查看詳細內容
3）和團隊一起審查提案
如果需要完善，可以繼續跟 AI 對話，比如：
你能幫我添加更多搜索條件和限制麼？
AI 會更新規範和任務列表，直到大家達成一致。
4）Implement 實現變更
規範確認後，讓 AI 開始實現：
規範已經很完美了，開始生成代碼吧
也可以用斜槓命令：
/openspec:apply add-user-search
AI 會按照 tasks.md 中的任務列表逐一實現，並標記完成狀態。
很快生成完成，AI 的輸出非常整齊，所有改動一目瞭然：
5）Archive 歸檔變更
所有任務完成後，讓 AI 歸檔這次變更：
請歸檔這次變更
也可以用斜槓命令：
/openspec:archive add-user-search
或者在終端運行：
openspec archive add-user-search --yes
這個命令會：
-
將變更文件夾移動到
openspec/changes/archive/歸檔區 -
將需求變更自動合併到
openspec/specs/主規範中 -
保持文檔和代碼的同步
這樣一來，通過 openspec/changes/ 的歷史記錄，你可以隨時追溯每次變更的來龍去脈。
此外，整個開發過程中，建議大家定期運行 openspec validate 驗證命令， 確保規範的完整性。
到這裏，相信大家也能感受到 OpenSpec 和 Spec-kit 的區別了。
-
Spec-kit 需要完整的 7 步流程：制定準則 → 寫需求 → 澄清疑問 → 定方案 → 拆任務 → 檢查 → 寫代碼），適合從 0 開始做大型新項目
-
OpenSpec 的流程更簡化：起草提案 → 審查 → 實現 → 歸檔 → 驗證，上手更快，適合在現有項目上迭代功能。
⭐️ Agent Skills 通用 AI 技能庫
它定義了一種 封裝 AI 工作流 的標準：開發者可以把複雜的任務指令、腳本和資源打包成一個 技能（Skill）；作為用户，你只需要安裝這些技能，AI 就能立刻學會這項本事，不用重複造輪子。
讓我們來實戰一下，利用
1）安裝 Agent Skills
首先打開 Claude Code，輸入一行命令，把官方提供的 Skills 註冊為插件市場：
/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 中輸入一行命令來安裝
skill install anthropic-agent-skills:frontend-design
2）安裝完 SKills 後，你只需要和之前一樣跟 AI 對話，程序會自動根據你的任務選擇使用什麼 Skills。
比如我讓 AI 開發一個精美的狼人殺網頁遊戲，它會詢問我是否要使用 frontend-design 技能。
使用這個技能後，AI 會選擇獨特的設計風格，生成的界面既有個性又專業，告別千篇一律的藍紫漸變色。而且不需要你每次都重複輸入一堆設計要求，非常方便！
不用技能是這樣的，對比一下：
目前
如果官方提供的技能不夠用，你還可以上傳自定義技能，或者訪問
值得一提的是，Agent Skills 現已成為
Superpowers 核心技能庫
傳統的 AI 編程，你一説需求它就開始噼裏啪啦地寫，結果可能並不是你想要的。而裝了 Superpowers 之後，AI 會先問清楚你到底想做什麼，然後出設計方案讓你確認，接着制定詳細的執行計劃，最後才分步驟去實現，每一步還會自我檢查。
就像給一個剛進公司啥都不懂的 AI 加上了超能力，瞬間讓它有了專業程序員的開發習慣。
如何使用？
參考
先註冊市場：
/plugin marketplace add obra/superpowers-marketplace
再從市場安裝插件：
/plugin install superpowers@superpowers-marketplace
安裝後運行 /help 查看可用命令，你會看到這 3 個命令
-
/superpowers:brainstorm通過和用户交互來不斷改進設計 -
/superpowers:write-plan創建實現方案 -
/superpowers:execute-plan批量執行方案
下面以開發一個 “用户註冊模塊” 為例，演示 Superpowers 官方的標準工作流程。
首先，在終端中運行 claude 命令來啓動 Claude Code，然後按照下面的 7 個步驟操作：
1）Brainstorming 頭腦風暴 => 對齊需求
選擇 /superpowers:brainstorm 命令並輸入需求：
Superpowers 不會急着寫代碼，而是先通過多輪問答和你對齊需求，比如：
-
用户註冊模塊的主要場景是什麼？
-
希望支持哪些註冊方式？
通過交互問答，AI 會探索不同方案、不斷改進設計。
當需求和方案確認無誤後，它會自動將詳細的設計文檔保存到 docs/plans/ 目錄。
2）Using Git Worktrees 創建獨立工作空間（可選）
設計方案通過後，Superpowers 會幫你創建一個 Git 工作樹（worktree），在新分支上建立隔離的工作空間，運行項目初始化，並驗證測試基線是否乾淨。這樣可以避免污染主分支。
這一步是可選的，我這裏直接讓 AI 繼續執行，看看會發生什麼：
3）Writing Plans 制定實施計劃
運行 /superpowers:write-plan 命令，讓 Superpowers 生成一份詳細的實施計劃，把開發任務拆解成多個原子級步驟（每個任務控制在 2 ~ 5 分鐘）。
我這裏 AI 直接自動執行了，省了一步命令~
查看 AI 生成的實施計劃文檔，每個任務都包含：
-
精確的文件路徑
-
完整的代碼內容
-
驗證步驟
好傢伙，這哪裏是實施計劃文檔啊，感覺大多數代碼都寫出來了！
4）執行任務
運行 /superpowers:execute-plan 命令，Superpowers 會採用以下方式之一執行：
-
子代理驅動開發（Subagent-Driven Development）：為每個任務分配一個全新的子代理，經過兩階段審查（規範合規性檢查 + 代碼質量檢查）
-
批量執行（Executing Plans）：分批執行任務，在關鍵節點暫停讓人工檢查
我這裏 AI 直接問我想要哪種方式：
我盲選一手 Subagent-Driven 方式，AI 自動選擇了對應的開發技能：
然後 AI 就開始幹活了：
5）Test-Driven Development 測試驅動開發
在實現過程中，Superpowers 會強制執行 紅-綠-重構 流程：
-
先寫失敗的測試
-
運行測試，確認失敗
-
寫最小化的代碼讓測試通過
-
運行測試，確認通過
-
提交代碼
如果發現有代碼是在測試之前寫的，Superpowers 會刪除它，強制你先寫測試。
6）Code Review 代碼審查
每完成一批任務後，Superpowers 會自動觸發代碼審查，對照計劃檢查代碼，按嚴重程度報告問題。如果發現嚴重問題（Critical），會阻止繼續進行。
7）完成開發
所有任務完成後，Superpowers 會驗證所有測試是否通過：
然後 AI 可能會提供幾個選項，比如合併到主分支 / 創建 PR / 保留分支 / 丟棄更改。
如果你確定功能沒有問題，可以利用 Superpowers 內置的技能來完成開發分支的清理工作。
這套 “先設計後編碼” 的規範流程走下來，代碼質量會更有保障，不過代價就是速度確實比讓 AI 直接生成代碼會慢很多。真的是慢很多！就這麼個需求我搞了半個多小時！！！
如果你正在開發大型項目，需要團隊協作，那麼可以試試 Superpowers，前期多花的時間會在後期省回來。但是如果你只是想寫個簡單的腳本或者快速驗證一個想法，用它就有點兒牛刀殺雞了，真沒必要。
AIChat 命令行增強工具
現在主流的 AI 編程工具（Cursor、VS Code 等）都內置了終端，有時我們需要敲命令來執行任務，但是命令記不住怎麼辦？
用了 AIChat 後，你只需要在終端中説人話，它的 Shell 助手 能力就會把你的自然語言自動轉換成準確可執行的命令。
使用方法非常簡單。打開終端，通過包管理器一行命令就能安裝：
# macOS/Linux
brew install aichat
# Windows
scoop install aichat
安裝完成後，運行 aichat 命令，首次執行會引導你創建配置，選擇你要用的大模型並填寫 API Key：
然後就可以愉快地跟 AI 對話了：
但是我個人主要用它的 Shell 助手能力（給命令添加 -e 選項），而不是 AI 對話能力。
比如我想批量重命名文件，但不記得命令怎麼寫，在終端裏執行下列命令：
aichat -e 幫我把當前目錄下所有 .txt 文件改成 .md
它就會生成對應的 shell 命令，我確認後它就自動執行了。
還可以通過快捷鍵來智能補全命令：
除了 Shell 助手，AIChat 還有一些進階功能。比如支持 RAG 檢索增強生成，可以讓 AI 基於你的本地文檔回答問題；支持創建 AI 代理，把指令、工具和文檔組合成自動化工作流。
此外，如果你想對比不同模型的效果，運行 aichat --serve 可以啓動本地網頁界面，同時對比多個模型的回答。
OK，以上就是我推薦的 AI 編程擴展，其中標星 ⭐️ 的是我強烈建議安裝的，其他的你可以按需選擇安裝。
後續我會深入介紹其中部分擴展的高級用法和實戰技巧。如果本期內容對你有幫助，記得點贊收藏三連，歡迎關注魚皮，不錯過更多 AI 編程乾貨。
這篇文章的文字版我同步到了
也歡迎在評論區分享你在用的 AI 編程工具，一起進步吧！
