社群 · 精選 · 非官方
Cursor Design
Cursor Design 是用 Cursor 做設計的社群精選中心——教學、推文、影片與範本，盡在一處。
GitHub 
Discord 
@nexudotio 
Next.js + Tailwind Cursor 快速原型開發啟動模板
一個精簡的 Next.js App Router + Tailwind 專案框架，針對 Cursor 快速原型開發優化 — 包含合理的 token 預設和清晰的佈局模板，可直接用於提示詞工程。
shadcn/ui — 為 Cursor 工作流複製貼上組件
可訪問、預設無樣式的 React 組件，完全掌握在你的代碼庫中 — 當提示 Cursor 在 Tailwind 上組裝落地頁和儀表板時的首選原始組件庫。
完整 Cursor AI 初學者教程 (2025)
awesome-cursorrules — 為各種技術棧精心策劃的 .cursorrules
社群最大的 .cursorrules 檔案集合，包含前端和設計系統規則集，確保 Cursor 的輸出與 Tailwind、Next.js 和元件約定保持一致。
如何用 AI 製作網站 — Cursor 2025
使用 Cursor 生成品牌資產和圖示集
利用 Cursor 生成 SVG 圖示系統、網站圖示和統一的視覺識別代碼 — 定義調色盤和筆畫規則一次，然後生成匹配的標記並匯出可用於構建的資產。
使用 Cursor MCP 轉換 Figma 設計
使用 Cursor、shadcn/ui 和 Tailwind 建構著陸頁面
從空白 Next.js 應用到上線著陸頁面：使用 shadcn/ui 搭建、透過 Cursor 提示逐節打造版面，並運用設計 token 保持 hero、定價和頁尾的視覺一致性。
@volo_builds 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
如何使用 AI 打造精美 UI
@shadcn 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
@jasonzhou1993 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
10倍更好的 UI 設計給 Vibe Coders — 直接在 Cursor 中使用 v0
Magic UI — Cursor 建構登陸頁的動畫元件庫
150+ 個動畫 React + Tailwind + Motion 元件庫，完美搭配 Cursor 打造具精細微互動的行銷頁面。
使用 .cursor/rules 強制設計系統
撰寫 design-system.mdc 規則檔案，固定間距標度、色彩 token、圓角和排版，確保 Cursor 生成的每個元件都符合品牌——包含範圍規則和 glob 定位的範例。
設計一致性專案規則 (.cursor/rules)
Cursor 官方規則系統讓你釘選可重用的限定範圍指令——包括編碼代符、間距和組件慣例的設計系統規則——確保每次生成都符合品牌標準。涵蓋 MDC 格式、glob 模式和自動附加與始終啟用規則。
Cursor 設計系統規則入門包
即插即用的 .cursor/rules 套件，編碼間距尺度、語意色彩標記、圓角及排版，使生成的 UI 從第一個提示就保持品牌一致性。
@rauchg 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
在 v0 中進行 DESIGN，在 Cursor 中完成
在 Cursor 中從截圖設計 UI — 無需 Figma
實用的設計模式工作流：直接將 Dribbble、Mobbin 或 Pinterest 的參考貼到 Agent 聊天中、釘選設計系統規則文件，迭代打磨組件，無需開啟 Figma。
@builderio 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
設計工程師在 Cursor 中的日常工作流程
懂程式碼的設計師如何組織 Cursor 設置——令牌和無障礙規則、用於視覺檢查的 Playwright MCP、以及提示、檢查差異、微調像素的緊密迴圈。
@joelunger 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
設計師的 AI 指南：為什麼這位設計師轉向使用 Cursor
在 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_ai 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
@elizabethlin 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
Cursor 互動原型、聲音設計與數據可視化
@patrickjs__ 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
在 Cursor 中提示資料儀表板設計 — 避免範本感
在 Cursor 中提示儀表板佈局的模式 — 預先描述資訊層級、圖表密度和空白狀態，然後使用參考圖片精煉，讓結果呈現設計感而非範本感。
@cursor_ai 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
Cursor 設計師工作坊（完整版）
Cursor 2.0 — 多代理界面与原生浏览器
Cursor 2.0 围绕代理而非文件重组 IDE，并提供原生浏览器工具供代理驱动来测试和迭代 UI。这是 Visual Editor 设计工作流的基础，以及 Cursor 内部低延迟编码模型 Composer。
@cursor_ai 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
Cursor 的視覺編輯器：點擊、提示和應用
Cursor 瀏覽器內視覺編輯器的完整介紹 — 拖放佈局編輯、Figma 風格的間距和文字排版檢查器，以及將視覺調整轉換為真實 JSX 和 Tailwind 的應用步驟。
@cursor_ai 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
Cursor 2.2 — 視覺編輯器、除錯模式與多代理評審
Cursor 2.2 官方更新日誌。重點包括瀏覽器視覺編輯器（設計模式）、除錯模式、多代理評審、Plan 模式 Mermaid 圖表和釘選聊天 — 將視覺設計引入代理工作流的重要版本。
Cursor 瀏覽器視覺編輯器 — 實時應用的設計模式
Cursor 官方視覺編輯器將瀏覽器內預覽轉變為設計界面：跨 DOM 的拖放版面編輯、Figma 風格的檢查器（用於間距、顏色、排版和設計令牌）、React 狀態切換，以及代理程式提交回真實代碼的指點與提示流程。
@cursor_ai 關於用 Cursor 做設計的一篇貼文。在 X 上閱讀原文。
全新視覺編輯器：直接在程式碼庫中設計
Cursor 設計模式（視覺編輯）詳解
Builder.io 深入解析 Cursor 設計模式 — Figma 風格側邊欄在編輯實時 React 應用中的優勢，以及誠實面對的限制（不支援多選、沒有便捷的復原、編輯受 LLM 限制）與真正設計工具的對比。
Cursor 剛剛終結了設計交付流程
深入分析 Cursor 的 Visual Editor 如何瓦解設計師到開發者的交付——直觀編輯執行中的應用程式並保存真實、可審查的程式碼，無需翻譯單獨的規格文件。
Cursor 的新視覺編輯器是 Figma 殺手嗎？教學
Cursor 視覺編輯器 — 以視覺方式修改佈局
來自 nexu.io 的姊妹專案
Open Design —— 可接入 Cursor 的開源設計 agent
讓你現有的編碼 agent —— Cursor · Claude Code · Codex · Gemini · OpenCode · Qwen —— 化身設計引擎，由 137 個可組合 skill 與 150 套可移植的 DESIGN.md 系統驅動。
Discord 