跳到主要内容

在 Web 开发中，Cursor 与 Figma 或浏览器等外部工具之间往往需要快速迭代并保持紧密的反馈循环。通过 Cursor，我们探索出了一系列优化这一流程的工作方法。明确任务范围、复用组件以及善用设计系统，都有助于保持开发速度与一致性。

本指南将介绍如何配置 Cursor 以支持 Web 开发并优化反馈循环。

code]:pr-[3rem] [&_pre>code>span.line-highlight]:min-w-[calc(100%+3rem)] [&_pre>code>span.line-diff]:min-w-[calc(100%+3rem)] rounded-2xl bg-white overflow-x-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20 active:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25" component-part="code-block-root" style="font-variant-ligatures: none; height: auto;">

{
"mcpServers": {
"Linear": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.linear.app/sse"
]
}
}
}

操作步骤：

  1. 确保在 MCP 设置中启用 Linear
  2. 浏览器将自动打开并提示您授权 Linear 账号

💡 由于当前 MCP 的版本限制，可能需要多次尝试才能完成设置。如果集成未生效，请尝试在 Cursor 设置中点击「重新加载」服务器。

在 Cursor 中使用 Linear

Linear MCP 服务器提供了多种工具供 Cursor 读取和管理问题。前往 MCP 设置并定位 Linear 服务器即可查看所有工具列表。要进行验证，请在聊天中输入以下提示词：

code]:pr-[3rem] [&_pre>code>span.line-highlight]:min-w-[calc(100%+3rem)] [&_pre>code>span.line-diff]:min-w-[calc(100%+3rem)] rounded-2xl bg-white overflow-x-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20 active:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25" component-part="code-block-root" style="font-variant-ligatures: none; height: auto;">

list all issues related to this project

linear.png

如果集成配置正确，应该会返回问题列表。

导入 Figma 设计稿

设计稿与原型是 Web 开发的核心组成部分。通过使用 Figma 官方提供的 MCP 服务器，您可以直接在 Cursor 中访问并处理设计文件。要开始使用，请按照 Figma 开发者模式 MCP 服务器指南 中的设置说明进行操作。

（注：根据核心术语表，"Figma" 作为工具名称保留英文不翻译。链接文本进行了中文翻译，同时完整保留了原始 URL 地址。标题和正文内容采用了符合中文技术文档表达习惯的句式重构。）

安装

您可以通过点击下方按钮安装 MCP 服务器：

将 Figma 添加至 Cursor

或手动添加至您的 mcp.json 文件：

{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}

用量

服务器开放了多个可在提示词中使用的工具。例如，尝试在提示词中请求获取 Figma 当前选中元素的设计稿。更多信息请参阅文档。

figma.png

保持代码脚手架的一致性

您可能已有现成的代码库、设计系统或希望复用的既定规范。在使用模型时，参考代码库中已有的模式（如下拉菜单或其他通用组件）会很有帮助。

在我们自身的大型 Web 代码库实践中发现，声明式代码（特别是 React 和 JSX）能产生最佳效果。

若您已建立设计系统，可以通过制定规则帮助智能体发现现有组件。以下是一个 ui-components.mdc 文件示例，我们在此文件中强制要求尽可能复用现有组件：

components.mdc

code]:pr-[3rem] [&_pre>code>span.line-highlight]:min-w-[calc(100%+3rem)] [&_pre>code>span.line-diff]:min-w-[calc(100%+3rem)] rounded-[14px] bg-white overflow-x-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20 active:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25" component-part="code-block-root" style="font-variant-ligatures: none; height: auto;">

---
description: 实现设计与构建用户界面
---
- 优先复用 `/src/components/ui` 中的现有 UI 组件（这些是我们的基础组件）
- 若现有组件无法解决问题，可通过组合基础组件创建新组件
- 当遇到缺失组件或设计时，应向人类开发者确认后续方案

随着组件库的扩展，请及时更新对应规则。当规则数量过多时，建议按功能维度拆分（例如"仅适用于用户输入场景"）。

UI组件.png

授予 Cursor 浏览器访问权限

为扩展 Cursor 的功能，您可以配置浏览器工具 MCP 服务器，该服务可提供控制台日志和网络请求的访问权限。配置完成后，您可以通过监控控制台输出和网络活动来验证变更。此设置有助于确保您的实现符合预期。请按照以下说明配置 MCP 服务器：https://browsertools.agentdesk.ai/installation

browser.png

💡 我们正在努力将其更便捷地原生集成到 Cursor 中。

核心要点

  • 紧密的反馈循环是 Web 开发的关键。将 Cursor 与 Figma、Linear 和浏览器等工具配合使用，既能保持高效流动，又能快速推进开发。
  • MCP 服务器允许你将外部系统直接集成到 Cursor 中，减少上下文切换并提升任务执行效率。
  • 复用组件和设计系统有助于模型生成更简洁、更一致的代码与输出结果。
  • 明确且范围清晰的任务能带来更佳效果。在使用提示词时要有明确意图，清晰界定需求范围。
  • 若输出结果不理想，可尝试以下调整：
  • 指令层面：通过规则约束、提示词优化，以及使用 MCP 服务器等方式提供更多上下文
  • 系统层面：清晰的模式、抽象和规范能让模型更易理解需求，从而提供更自主的协助
  • 可通过包含运行时信息（如控制台日志、网络请求、UI 元素数据）来扩展模型的上下文感知能力。
  • 无需过度追求自动化。若系统变得过于复杂，可回归使用 Tab 自动补全和 CMD K 进行精准编辑。
  • Cursor 的最佳定位是智能副驾而非自动驾驶。用它来增强而非替代你的决策能力。