[Cursor-Guide]網頁開發
學習如何透過Cursor優化網頁開發工作流程，整合Figma和Linear等工具，實現更快速的迭代與緊密的回饋循環。
[Cursor-Guide]網頁開發
原始連結: 原始連結
網頁開發通常涉及Cursor與Figma或瀏覽器等外部工具之間的快速迭代與緊密回饋循環。在Cursor，我們發現某些工作流程能強化這種循環。明確的任務範圍界定、元件重用，以及設計系統的運用，都有助於保持開發速度與一致性。
本指南將介紹如何設定Cursor以支援網頁開發，並強化回饋循環。
開始在Cursor中協調工作
聊天功能非常適合用於快速啟動變更。當主要部分就位後，切換至CMD K與Tab鍵能幫助維持您的工作流狀態。
設定完成Cursor後，您將能夠跨不同工具協調工作流程。以下是一個示範案例：結合Linear、Figma與瀏覽器工具所創建的貪吃蛇遊戲。雖然實際專案通常更為複雜，但此範例展示了這些整合工作流程的潛力。
連接至您的專案管理工具
您可以透過不同工具將Cursor整合至現有的專案管理軟體中。本指南將以Linear與其MCP伺服器的整合為例。
安裝步驟
- 將Linear MCP伺服器加入
mcp.json
{
"mcpServers": {
"linear": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.linear.app/sse"
]
}
}
}
- 確保從MCP設定中啟用Linear
- 網頁瀏覽器將開啟，並提示您授權Linear
由於MCP目前狀態，設定可能需要多次嘗試。若整合未成功，請嘗試從Cursor設定中「重新載入」伺服器。
在Cursor中使用Linear
Linear MCP伺服器會暴露不同工具，供Cursor讀取與管理問題。前往MCP設定並找到Linear伺服器，以查看所有工具清單。若要驗證，請在聊天中嘗試此提示：
列出與此專案相關的所有問題
若整合設定正確，應會回傳問題清單。
導入您的Figma設計
設計與模擬是網頁開發的核心。使用社群建構的Figma MCP伺服器，您可以直接在Cursor中存取並處理設計檔案。請遵循https://www.framelink.ai/docs/quickstart的設定說明開始使用。
安裝步驟
{
"mcpServers": {
...,
"figma": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
},
}
使用方式
此MCP伺服器要求您傳入欲存取的Figma圖層或框架連結。詳情請參閱文件。
保持程式碼架構一致性
您可能已有現有程式碼、設計系統或既定慣例希望重用。與模型協作時，參考程式碼庫中既有的模式（如下拉選單或其他常見元件）會很有幫助。
在處理大型網頁程式碼庫的經驗中，我們發現宣告式程式碼特別有效，尤其是React與JSX。
若您擁有設計系統，可透過提供規則幫助代理程式發現它。以下是一個ui-components.mdc檔案範例，我們嘗試在其中盡可能強制元件重用：
components.mdc
---
description: 實作設計與建構UI
---
- 盡可能重用`/src/components/ui`中的現有UI元件，這些是我們可建構的基本元素
- 若找不到解決問題的現有元件，則透過協調ui元件來創建新元件
- 當缺少元件與設計時，詢問人類希望如何進行
隨著元件庫增長，請相應新增規則。當規則過多時，可考慮將其拆分為更特定的類別，例如「僅在處理使用者輸入時適用」。
授予Cursor瀏覽器存取權限
為擴展Cursor功能，您可以設定瀏覽器工具MCP伺服器，該伺服器提供對控制台日誌與網路請求的存取。設定完成後，您可透過監控控制台輸出與網路活動來驗證變更。此設定有助確保實作符合預期。請遵循此處說明設定MCP伺服器：https://browsertools.agentdesk.ai/installation
我們正努力讓此功能更易於原生整合至Cursor中。
重點摘要
- 緊密的回饋循環在網頁開發中至關重要。搭配使用 Cursor 與 Figma、Linear 及瀏覽器等工具，可加速工作流程並保持專注狀態。
- MCP 伺服器（MCP servers）讓您能將外部系統直接整合至 Cursor，減少上下文切換並提升任務執行效率。
- 重用元件與設計系統有助於模型產出更簡潔、一致的程式碼與輸出結果。
- 明確且範圍清晰的任務能帶來更好的成果。請謹慎設計提示內容與具體需求。
- 若輸出結果不理想，可嘗試調整：
- 指令： 運用規則、提示詞，並透過 MCP 伺服器等工具提供更多上下文資訊。
- 系統： 清晰的模式、抽象化與結構能幫助模型更易理解需求，提升自主工作能力。
- 您可透過納入運行時資訊（如控制台日誌、網路請求與 UI 元素數據）來擴展模型的上下文。
- 並非所有流程都需自動化。若系統過於複雜，可改用 Tab 鍵與 CMD K 進行精準編輯。
- 當 Cursor 作為協作夥伴（而非自動駕駛模式）時最能發揮效能。請將其用於輔助決策，而非取代您的判斷。