Web 开发涉及快速迭代以及 Cursor 与外部工具（如 Figma 或浏览器）之间的紧密反馈循环。在 Cursor，我们发现了能够收紧这个循环的工作流程。明确的任务范围、重用组件以及利用设计系统有助于保持快速和一致性。 本指南介绍如何设置 Cursor 以支持 Web 开发并收紧反馈循环。

​
开始在 Cursor 中编排工作流

Chat 非常适合引导变更。一旦主要部分就位，切换到 Inline Edit 和 Tab 有助于保持你的流畅状态。 设置好 Cursor 后，你将能够跨不同工具编排工作流。下面是一个可能性的演示：通过结合 Linear、Figma 和浏览器工具创建的贪吃蛇游戏。虽然现实世界的项目通常更加复杂，但这个例子展示了这些集成工作流的潜力。

​
连接到您的项目管理工具

您可以使用不同的工具将 Cursor 集成到现有的项目管理软件中。在本指南中，我们将介绍如何使用 Linear 的 MCP 服务器进行集成。

​
安装

或者手动将 Linear MCP 服务器添加到 mcp.json： 
{
  "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 服务器以查看所有工具的列表。要验证，请在聊天中尝试此提示： 
// 列出与此项目相关的所有问题
list all issues related to this project
linear.png
如果集成设置正确，它应该返回问题列表。

​
导入你的 Figma 设计

设计和原型是 Web 开发的核心。使用 Figma 官方 MCP 服务器，你可以在 Cursor 中直接访问和使用设计文件。要开始使用，请按照 Figma Dev Mode MCP Server 的设置说明进行操作。

​
安装

你可以点击下面的按钮来安装 MCP 服务器。 或者手动添加到你的 mcp.json 文件中： 
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

​
使用方法

该服务器提供了多个工具，你可以在提示中使用。例如，尝试询问 Figma 中当前选择的设计。更多信息请阅读文档。
figma.png

​
保持代码脚手架的一致性

您可能已经有现有的代码、设计系统或既定的约定想要重用。在使用模型时，引用代码库中已有的模式会很有帮助，比如下拉菜单或其他常见组件。 我们自己在大型基于 Web 的代码库中工作时发现，声明式代码效果特别好，尤其是对于 React 和 JSX。 如果您有设计系统，可以通过为其提供规则来帮助代理发现它。这里是一个 ui-components.mdc 文件，我们尝试在其中尽可能强制重用组件：
components.mdc
---
description: 实现设计和构建 UI
---
- 重用 `/src/components/ui` 中现有的 UI 组件。这些是我们可以构建的基础组件
- 如果找不到解决问题的现有组件，通过编排 ui 组件来创建新组件
- 当缺少组件和设计时，询问用户希望如何继续
随着组件库的增长，相应地添加新规则。当规则变得过多时，考虑将它们拆分为更具体的类别，比如”仅在处理用户输入时应用”。
ui-components.png

​
为 Cursor 提供浏览器访问权限

为了扩展 Cursor 的功能，您可以设置浏览器工具 MCP 服务器，该服务器提供对控制台日志和网络请求的访问。配置完成后，您可以通过监控控制台输出和网络活动来验证您的更改。此设置有助于确保您的实现符合您的意图。请按照此处的说明设置 MCP 服务器：https://browsertools.agentdesk.ai/installation
browser.png
我们正在努力让这个功能更容易在 Cursor 中原生集成。

​
要点总结

  • 紧密的反馈循环在 Web 开发中至关重要。将 Cursor 与 Figma、Linear 和浏览器等工具结合使用，以快速行动并保持流畅状态。
  • MCP 服务器让您可以将外部系统直接集成到 Cursor 中，减少上下文切换并改善任务执行。
  • 重用组件和设计系统有助于模型生成更清洁、更一致的代码和输出。
  • 清晰、范围明确的任务会带来更好的结果。在提示和请求时要有意图性。
  • 如果您没有获得良好的输出，请尝试调整：
    • 指令： 使用规则、提示，并通过例如 MCP 服务器等方式提供更多上下文访问。
    • 系统： 模式、抽象和清晰度使模型更容易理解、帮助并更自主地工作
  • 您可以通过包含运行时信息（如控制台日志、网络请求和 UI 元素数据）来扩展模型的上下文。
  • 并非所有内容都需要自动化。如果您的系统变得过于复杂，请回退到使用 Tab 和内联编辑进行更精确的编辑。
  • 当 Cursor 作为副驾驶而非自动驾驶时最为强大。使用它来改善而非替代您自己的决策制定。