chnjinlei/ai-guide

Fork 0

Files

T

yupi-translate-app[bot] 3bcc65d631 [GitHub Global] Translate Vibe Coding 零基础教程/10 编程工具/10 优质 AI 编程扩展推荐.md to zh-TW

2026-02-05 13:07:11 +00:00

14 KiB

Raw Permalink Blame History

優質 AI 程式設計擴充推薦

大家好，我是程式設計師魚皮。給大家分享一些我自己在用的 AI 程式設計擴充，幫你大幅提高 AI 程式設計效率和程式碼品質。

萬字長文 + 100 多張圖，絕對乾貨！點個收藏，讓我們開始吧~

一、MCP 伺服器類

MCP 的全稱是 Model Context Protocol 模型上下文協議。簡單來說，就是讓 AI 大模型能夠連接外部工具和資料來源的一個開放標準。

打個比方，MCP 就像是 AI 的 USB-C 接口，原本 AI 只能根據訓練資料來回答問題、生成程式碼，但有了這個統一接口，它就能連接各種外部工具，比如打開瀏覽器看網站、搜尋並抓取網頁內容、部署專案到雲端、存取資料庫等等，能力一下子就豐富起來了。

⭐️ Firecrawl MCP 網頁內容抓取

首先要介紹的是 Firecrawl MCP，讓 AI 能夠自動抓取和理解網頁內容。

我在開發專案時經常需要從網上獲取參考資料、閱讀官方文件和技術部落格，或者分析競品的功能實現。如果人工來做這件事，需要先打開網站、再手動複製貼上內容，或者自己寫個爬蟲腳本，麻煩得一批。

有了 Firecrawl MCP，這事兒就簡單多了。我直接在 AI 程式設計工具中跟 AI 說：

幫我獲取這個網站的內容
幫我讀一下這個文件
幫我從網上搜尋 XX 相關的資訊

它就能自動把網頁的內容、結構、甚至是動態載入的資料都給我抓下來。

如何使用？

首先你需要在 Firecrawl 官網註冊帳號，並建立一個呼叫服務的 API Key。

然後進入到 AI 程式設計工具中配置一下 MCP 伺服器。這裡我以 Cursor 為例，其他 AI 程式設計工具對接 MCP 的方法可以看各自的官方文件，比如 Claude Code 接入 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，需要先到官網安裝 Node.js，npx 會隨著 Node.js 一起安裝。

配置好之後，看到綠色的成功點點，表示能夠正常使用了。

除了基礎的網頁抓取，Firecrawl MCP 還支援批次抓取整站內容、遞迴抓取網站的多層連結、失敗自動重試等高級功能。

Brave Search MCP 隱私搜尋

接下來是 Brave Search MCP，讓 AI 能夠進行注重隱私保護的網路搜尋。

在開發過程中，我經常需要讓 AI 幫我搜尋最新的技術資料、查找某個庫的使用範例、或者了解某個技術問題的解決方案。傳統的做法是自己去搜尋引擎查，然後把結果複製給 AI，比較麻煩。

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

幫我搜尋一下 React 19 的新特性
查一下這個錯誤怎麼解決

它就能透過 Brave 搜尋引擎去找答案。而且 Brave 搜尋不會追蹤你的搜尋記錄，隱私保護做得很好。

如何使用？

首先去 Brave Search API 註冊帳號，然後進入 API Key 管理頁面，首先要選擇一個訂閱計劃。必須選擇免費版啊！每月有 2000 次查詢額度，對於個人開發來說夠用了。

但這裡比較坑的一點是，即使訂閱免費版，也要填寫付款方式，沒有海外銀行卡的朋友可以撤了。

訂閱成功後，建立 API Key：

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

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

配置好後，AI 就能隨時幫你搜尋最新資訊了。

支援網頁、圖片、影片、新聞等多種類型的內容搜尋，甚至能搜尋本地商家資訊（比如附近的咖啡店）。

它還帶有 AI 摘要功能，能把搜尋結果自動總結成簡潔的答案。

⭐️ Context7 獲取最新文件

Context7 能幫 AI 獲取到最新的技術文件。

我們都知道，AI 的訓練資料是有截止時間的，比如 GPT-4 的知識可能只更新到 2023 年。這就導致一個問題，當你問 AI 關於某個框架最新版本的用法時，它給出的答案可能是過時的。

Context7 就是來解決這個問題的。它會自動從官方文件網站抓取最新的、特定版本的文件內容，然後提供給 AI。

這樣一來，AI 給出的程式碼範例和建議就是基於最新文件的，不會去用已經廢棄的寫法，大大提高了專案能正常執行的概率。

如何使用？

訪問 Context7 Dashboard 註冊帳號並獲取 API Key，個人使用是免費的。

然後在 MCP 配置中添加：

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

之後你在 AI 程式設計工具中跟 AI 對話時，只要跟技術文件相關，或者主動提一嘴 "use context7"，它就會自動去獲取最新文件來回覆你。

Web to MCP 復刻網頁元件

Web to MCP 是一個 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 配置中添加：

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

之後瀏覽網頁時，點擊擴充圖標，選中你想要的元件，就能直接在 AI 程式設計工具裡引用它，並且快速生成風格一致的程式碼了。

Chrome DevTools MCP 瀏覽器除錯

Chrome DevTools MCP 是 Chrome 官方團隊開發的 MCP 伺服器，讓 AI 能夠直接控制 Chrome 瀏覽器進行操作和除錯。

在做前端開發時，我經常需要除錯頁面、查看網路請求、分析效能問題。以前這些都得手動在瀏覽器的開發者工具裡操作，現在有了這個工具，我可以直接讓 AI 幫我做這些事。

比如我跟 AI 說：「幫我分析當前這個網站載入慢的原因」，它就能打開 Chrome DevTools，分析網路請求、查看資源載入時間，然後告訴我哪裡有問題。

或者我說：「幫我測試一下這個表單提交功能」，它就能自動填寫表單、點擊提交按鈕、查看請求回應。

如何使用？

在 MCP 配置中添加：

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

配置好後，AI 就能幫你自動化測試、除錯頁面了。工具會自動連接到你正在執行的 Chrome 瀏覽器，無需額外設定。

這個工具還支援元素定位、網路請求監控、效能分析、頁面截圖等功能，非常適合前端開發和測試。

EdgeOne Pages MCP 一鍵部署

EdgeOne Pages MCP 是騰訊雲團隊開發的部署工具，能把你的專案一鍵部署到騰訊雲的加速網路，讓別人能訪問你的網站，並且給你的網站提速。

開發完專案後，你一定會想讓別人訪問你的網站。傳統的部署流程很繁瑣，需要人工打包程式碼、上傳程式碼到伺服器、配置網域、設定 HTTPS 安全憑證，一套流程下來得花不少時間。

有了 EdgeOne Pages MCP，我直接在 AI 程式設計工具裡跟 AI 說：「幫我部署這個專案」，它就能自動完成打包、上傳、部署的全過程，最後給我一個可以直接訪問的 URL。而且部署到全球加速網路，各地訪問速度都很快。

如何使用？

首先到 EdgeOne 控制台開通 Pages 服務：

然後獲取 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 物件儲存

COS MCP 能讓 AI 直接操作騰訊雲物件儲存。

物件儲存就是雲端的檔案儲存服務，可以理解為雲端硬碟。

在團隊協作開發中，我們經常需要讓 AI 參考一些專案規範文件、或者引用一些圖片。以前的做法是把這些檔案放在本地，然後手動上傳給 AI，既不方便，也不利於團隊維護、修改和共享。

有了 COS MCP，我可以說一句話把這些需要共享的檔案存到雲端，然後讓 AI 直接去讀取。

比如我跟 AI 說：「按照我們團隊 COS 共享的專案規範文件來寫這個功能」，它就能自動從 COS 裡讀取規範文件，然後按照規範來寫程式碼。

如何使用？

1）首先需要開通騰訊雲 COS 物件儲存服務。訪問騰訊雲 COS 控制台，建立一個儲存桶（Bucket）：

2）然後在 "存取管理" > "API 密鑰管理" 中獲取 SecretId 和 SecretKey，注意一定不要洩露這些資訊！

3）在 MCP 配置中添加：

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