教程
从全网精选、手把手教你用 Cursor 做设计与原型的指南。
使用 Cursor 生成品牌资产和图标集
使用 Cursor 生成 SVG 图标系统、favicon 和代码中的统一视觉识别系统——一次定义调色板和笔画规则，然后生成匹配的标记并导出构建就绪的资产。
使用 Cursor、shadcn/ui 和 Tailwind 构建落地页
从空白 Next.js 应用到上线落地页：使用 shadcn/ui 进行脚手架搭建，通过 Cursor 逐区块提示生成布局，并利用设计令牌保持英雄区、定价和页脚的视觉一致性。
使用 .cursor/rules 强制执行设计系统
编写 design-system.mdc 规则文件来固定间距标度、颜色令牌、圆角和排版，确保 Cursor 生成的每个组件都符合品牌标准——包含作用域规则和 glob 定位的示例。
设计一致性项目规则 (.cursor/rules)
Cursor 官方规则系统让您固定可复用、作用域化的指令——包括编码令牌、间距和组件约定的设计系统规则——确保每次生成都保持品牌一致性。涵盖 MDC 格式、通配符和自动附加与始终启用规则。
在 Cursor 中从截图设计 UI — 无需 Figma
实用的 Design Mode 工作流：将 Dribbble、Mobbin 或 Pinterest 的参考设计直接粘贴到 Agent 聊天中，固定设计系统规则文件，迭代优化组件 — 无需打开 Figma。
设计工程师在 Cursor 中的日常工作流
代码设计师如何架构 Cursor 环境——令牌和可访问性规则、用于视觉检查的 Playwright MCP、以及提示、审查差异和细化像素的紧密循环。
在 Cursor 中使用 Dev Mode MCP 服务器将 Figma 转换为代码
如何将 Figma 的 Dev Mode MCP 服务器集成到 Cursor，使智能体直接读取框架、变量和自动布局——将选定的设计转换为简洁的、token 感知的 React 和 Tailwind 组件。
在 Cursor 中设置 Figma MCP 服务器
官方设置指南：将 Figma Dev Mode MCP 服务器连接到 Cursor，使 AI 代理能直接读取选中框架、变量和自动布局，然后生成遵循设计令牌的代码。包含 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 如何消除设计师到开发者的交付障碍——通过可视化编辑实时应用并生成可审查的真实代码,无需额外的规范文档转换。