Web 開發涉及快速迭代以及 Cursor 與外部工具（如 Figma 或瀏覽器）之間的緊密反饋循環。在 Cursor，我們發現了能夠縮短這個循環的工作流程。明確的任務範圍、重複使用組件以及利用設計系統有助於保持快速和一致性。 本指南涵蓋如何設定 Cursor 以支援 Web 開發並縮短反饋循環。

​
開始在 Cursor 中編排工作流程

Chat 非常適合用來啟動變更。一旦主要部分就位後，切換到 Inline Edit 和 Tab 有助於維持您的流暢狀態。 設定 Cursor 後，您將能夠跨不同工具編排工作流程。以下是一個可能性的演示：結合 Linear、Figma 和瀏覽器工具創建的貪食蛇遊戲。雖然現實世界的專案通常更加複雜，但這個範例展示了這些整合工作流程的潛力。

​
連接到您的專案管理工具

您可以使用不同的工具將 Cursor 整合到現有的專案管理軟體中。在本指南中，我們將介紹如何使用 Linear 的 MCP 伺服器進行整合。

​
安裝

或手動將 Linear MCP 伺服器新增到 mcp.json： 
{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.linear.app/sse"
      ]
    }
  }
}
然後：
  1. 確保從 MCP 設定中啟用 Linear
  2. 網頁瀏覽器將會開啟，系統會提示您授權 Linear
    由於 MCP 目前的狀態，設定可能需要多次嘗試。 如果整合無法正常運作，請嘗試從 Cursor 設定中「重新載入」伺服器。

​
在 Cursor 中使用 Linear

Linear MCP 伺服器提供不同的工具，Cursor 可以使用這些工具來讀取和管理問題。前往 MCP 設定並找到 Linear 伺服器以查看所有工具的清單。要驗證，請在聊天中嘗試此提示： 
list all issues related to this project
linear.png
如果整合設定正確，它應該會回傳問題清單。

​
導入您的 Figma 設計

設計和模型是網頁開發的核心。使用 Figma 的官方 MCP 伺服器，您可以直接在 Cursor 中存取和使用設計檔案。要開始使用，請按照 Figma Dev Mode MCP Server 的設定說明進行操作。

​
安裝

您可以點擊下方按鈕來安裝 MCP 伺服器。 或手動新增到您的 mcp.json： 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
使用方式

該伺服器提供多個工具，您可以在提示中使用。例如，嘗試詢問 Figma 中當前選擇的設計。更多資訊請參閱文件。
figma.png

​
保持程式碼架構的一致性

您可能已經有現有的程式碼、設計系統或既定的慣例想要重複使用。在與模型協作時，參考程式碼庫中已有的模式會很有幫助，例如下拉選單或其他常見元件。 我們自己在大型網頁程式碼庫中工作時，發現宣告式程式碼特別有效，尤其是對於 React 和 JSX。 如果您有設計系統，可以透過為其提供規則來幫助代理發現它。以下是一個 ui-components.mdc 檔案，我們試圖在其中盡可能強制重複使用元件：
components.mdc
---
description: 實作設計和建構 UI
---
- 重複使用 `/src/components/ui` 中現有的 UI 元件。這些是我們可以用來建構的基本元件
- 如果找不到任何現有元件能解決問題，請透過編排 ui 元件來建立新元件
- 當缺少元件和設計時，詢問使用者希望如何進行
隨著您的元件庫成長，請相應地新增新規則。當規則變得過多時，考慮將它們分割成更具體的類別，例如「僅在處理使用者輸入時適用」。
ui-components.png

​
讓 Cursor 存取瀏覽器

為了擴展 Cursor 的功能，您可以設定瀏覽器工具 MCP 伺服器，它提供對控制台日誌和網路請求的存取。配置完成後，您可以透過監控控制台輸出和網路活動來驗證您的變更。這個設定有助於確保您的實作符合您的意圖。請按照此處的說明設定 MCP 伺服器：https://browsertools.agentdesk.ai/installation
browser.png
我們正在努力讓這個功能更容易在 Cursor 中原生整合。

​
重點整理

  • 緊密的反饋循環在網頁開發中至關重要。將 Cursor 與 Figma、Linear 和瀏覽器等工具結合使用，以快速移動並保持流暢狀態。
  • MCP 伺服器讓您可以直接將外部系統整合到 Cursor 中，減少上下文切換並改善任務執行。
  • 重複使用組件和設計系統有助於模型產生更乾淨、更一致的程式碼和輸出。
  • 清晰、範圍明確的任務會帶來更好的結果。在提示和請求時要有意圖性。
  • 如果您沒有獲得良好的輸出，請嘗試調整：
    • 指令： 使用規則、提示，並透過例如 MCP 伺服器提供更多上下文的存取權限。
    • 系統： 模式、抽象化和清晰度讓模型更容易理解、協助並更自主地工作
  • 您可以透過包含執行時資訊（如控制台日誌、網路請求和 UI 元素資料）來擴展模型的上下文。
  • 並非所有事情都需要自動化。如果您的系統變得過於複雜，請回到使用 Tab 和 Inline Edit 進行更精確的編輯。
  • 當 Cursor 作為副駕駛而非自動駕駛時最為強大。使用它來改善而非取代您自己的決策制定。