網頁開發仰賴快速迭代，以及 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"
      ]
    }
  }
}
接著：
  1. 確認在 MCP 設定中啟用 Linear
  2. 瀏覽器會開啟，並提示你授權 Linear
    由於 MCP 目前的狀態，設定可能需要多次嘗試。 如果整合沒有生效，試著在 Cursor 設定中「Reload」伺服器。

​
在 Cursor 中使用 Linear

Linear MCP 伺服器會提供不同的工具，讓 Cursor 能讀取並管理 issue。前往 MCP 設定找到 Linear 伺服器即可看到所有工具清單。要驗證的話，試著在 Chat 使用這個提示： 
list all issues related to this project
linear.png
如果整合設定正確，應該會回傳一份 issue 清單。

​
匯入你的 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: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs
隨著你的元件庫成長，按情況新增規則。當規則變得過於繁多時，可以考慮將它們拆分為更具體的類別，例如「只在處理使用者輸入時套用」。
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）： 模式、抽象化與清晰度能讓模型更容易理解、協助，並更自主地工作。
  • 你可以把執行期資訊（例如 console logs、網路請求、UI 元件資料）納入，來擴充模型的脈絡。
  • 不需要把所有東西都自動化。系統變得太複雜時，改用 Tab 和 Inline Edit 做更精準的局部修改就好。
  • Cursor 最強的時候，是當它是副駕而不是自動駕駛。用它來強化，而不是取代，你自己的決策。