教學
從全網精選、手把手教你用 Cursor 做設計與原型的指南。
使用 Cursor 生成品牌資產和圖示集
利用 Cursor 生成 SVG 圖示系統、網站圖示和統一的視覺識別代碼 — 定義調色盤和筆畫規則一次，然後生成匹配的標記並匯出可用於構建的資產。
使用 Cursor、shadcn/ui 和 Tailwind 建構著陸頁面
從空白 Next.js 應用到上線著陸頁面：使用 shadcn/ui 搭建、透過 Cursor 提示逐節打造版面，並運用設計 token 保持 hero、定價和頁尾的視覺一致性。
使用 .cursor/rules 強制設計系統
撰寫 design-system.mdc 規則檔案，固定間距標度、色彩 token、圓角和排版，確保 Cursor 生成的每個元件都符合品牌——包含範圍規則和 glob 定位的範例。
設計一致性專案規則 (.cursor/rules)
Cursor 官方規則系統讓你釘選可重用的限定範圍指令——包括編碼代符、間距和組件慣例的設計系統規則——確保每次生成都符合品牌標準。涵蓋 MDC 格式、glob 模式和自動附加與始終啟用規則。
在 Cursor 中從截圖設計 UI — 無需 Figma
實用的設計模式工作流：直接將 Dribbble、Mobbin 或 Pinterest 的參考貼到 Agent 聊天中、釘選設計系統規則文件，迭代打磨組件，無需開啟 Figma。
設計工程師在 Cursor 中的日常工作流程
懂程式碼的設計師如何組織 Cursor 設置——令牌和無障礙規則、用於視覺檢查的 Playwright MCP、以及提示、檢查差異、微調像素的緊密迴圈。
在 Cursor 中使用 Dev Mode MCP Server 將 Figma 轉換為代碼
了解如何將 Figma 的 Dev Mode MCP 伺服器連接到 Cursor，使代理直接讀取框架、變數和自動佈局 — 將選定的設計轉換為乾淨、支援 token 的 React 和 Tailwind 元件。
在 Cursor 中設置 Figma MCP 伺服器
官方設置指南，用於將 Figma Dev Mode MCP 伺服器連接到 Cursor，讓代理直接讀取選定的框架、變數和自動佈局 — 然後生成符合您設計令牌的代碼。包含 Cursor MCP 安裝流程和提示技巧。
在 Cursor 中提示資料儀表板設計 — 避免範本感
在 Cursor 中提示儀表板佈局的模式 — 預先描述資訊層級、圖表密度和空白狀態，然後使用參考圖片精煉，讓結果呈現設計感而非範本感。
Cursor 2.0 — 多代理界面与原生浏览器
Cursor 2.0 围绕代理而非文件重组 IDE，并提供原生浏览器工具供代理驱动来测试和迭代 UI。这是 Visual Editor 设计工作流的基础，以及 Cursor 内部低延迟编码模型 Composer。
Cursor 的視覺編輯器：點擊、提示和應用
Cursor 瀏覽器內視覺編輯器的完整介紹 — 拖放佈局編輯、Figma 風格的間距和文字排版檢查器，以及將視覺調整轉換為真實 JSX 和 Tailwind 的應用步驟。
Cursor 2.2 — 視覺編輯器、除錯模式與多代理評審
Cursor 2.2 官方更新日誌。重點包括瀏覽器視覺編輯器（設計模式）、除錯模式、多代理評審、Plan 模式 Mermaid 圖表和釘選聊天 — 將視覺設計引入代理工作流的重要版本。
Cursor 瀏覽器視覺編輯器 — 實時應用的設計模式
Cursor 官方視覺編輯器將瀏覽器內預覽轉變為設計界面：跨 DOM 的拖放版面編輯、Figma 風格的檢查器（用於間距、顏色、排版和設計令牌）、React 狀態切換，以及代理程式提交回真實代碼的指點與提示流程。
Cursor 設計模式（視覺編輯）詳解
Builder.io 深入解析 Cursor 設計模式 — Figma 風格側邊欄在編輯實時 React 應用中的優勢，以及誠實面對的限制（不支援多選、沒有便捷的復原、編輯受 LLM 限制）與真正設計工具的對比。
Cursor 剛剛終結了設計交付流程
深入分析 Cursor 的 Visual Editor 如何瓦解設計師到開發者的交付——直觀編輯執行中的應用程式並保存真實、可審查的程式碼，無需翻譯單獨的規格文件。