網頁開發講求在 Cursor 與外部工具（如 Figma 或瀏覽器）之間的快速迭代與緊密回饋循環。在 Cursor，我們整理出了一些能進一步收斂這個循環的工作流程。清楚界定任務範圍、重用元件，以及善用設計系統，都能讓節奏更快、表現更一致。 本指南會說明如何設定 Cursor 來支援網頁開發，並進一步縮短回饋循環。

​
在 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"
      ]
    }
  }
}
Then:
  1. 確認在 MCP 設定中啟用 Linear
  2. 會開啟瀏覽器，並提示用 Linear 進行授權
    由於 MCP 目前的狀態，設定可能需要嘗試多次。 如果整合無法運作，試著在 Cursor 設定中「重新載入」伺服器。

​
在 Cursor 中使用 Linear

Linear MCP 伺服器會提供多種工具，讓 Cursor 用來讀取和管理 issue。前往 MCP 設定並找到 Linear 伺服器即可查看所有工具清單。要驗證的話，可以在 Chat 中試試這個提示： 
列出此專案的所有 issue
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 而言。 如果你有設計系統，可以透過提供規則來讓 agent 發現它。以下是 ui-components.mdc 檔案，我們嘗試在可行時強制重用元件：
components.mdc
---
description: 實作設計並建立 UI
---
- 盡量重用位於 `/src/components/ui` 的現有 UI 元件。這些是我們可用來構建的基礎元件
- 如果找不到能解決問題的現有元件，就用多個 UI 元件組合協作來建立新元件
- 當缺少元件或設計時，先問使用者想怎麼進行
隨著元件庫不斷擴充，依需求新增規則。當規則變得太多時，考慮將它們拆分成更具體的類別，例如「僅在處理使用者輸入時套用」。
ui-components.png

​
讓 Cursor 存取瀏覽器

為了擴充 Cursor 的功能，可以設定 Browser Tools 的 MCP 伺服器，讓 Cursor 能存取主控台日誌與網路請求。完成設定後，可以透過監看主控台輸出與網路活動來驗證你的變更。這樣的設定能確保你的實作符合預期。依照這份安裝說明設定 MCP 伺服器：https://browsertools.agentdesk.ai/installation
browser.png
我們正著手在 Cursor 中提供更原生的整合，讓設定更容易。

​
重點整理

  • 在網頁開發裡，緊密的回饋迴圈至關重要。把 Cursor 搭配 Figma、Linear 和瀏覽器一起用，動作更快、更能維持心流。
  • MCP 伺服器能把外部系統直接整合進 Cursor，減少情境切換並提升任務執行效率。
  • 重用元件與設計系統有助於模型產出更乾淨、更一致的程式碼與結果。
  • 明確、範圍清楚的任務能帶來更好的結果。要刻意設計提示方式與需求內容。
  • 如果輸出不理想，試著調整：
    • Instructions： 使用規則、提示語，並透過例如 MCP 伺服器提供更多脈絡。
    • Systems： 模式、抽象化與清晰度能讓模型更容易理解、協助，並更自主地工作
  • 你可以透過包含執行期資訊（例如主控台日誌、網路請求與 UI 元件資料）來擴充模型的脈絡。
  • 不需要把所有事都自動化。若系統變得太複雜，就用 Tab 和 Inline Edit 回到更精準的手動編修。
  • 當 Cursor 當副駕而不是自動駕駛時最強大。用它來強化，而不是取代，你自己的決策。