Web 开发

如何为 Web 开发配置 Cursor

Web 开发通常需要在 Cursor 与 Figma 或浏览器等外部工具之间进行快速迭代和紧密的反馈循环。在 Cursor，我们总结出了一些能够加快这一循环的工作流。明确任务范围、复用组件以及利用设计系统，有助于保持开发的高效与一致性。

本指南将介绍如何配置 Cursor 以支持 Web 开发，并进一步缩短反馈周期。

在 Cursor 中开始编排工作流

聊天功能非常适合启动变更。当主要部分就位后，切换到 CMD K 和 Tab 可以帮助你保持专注的工作状态。

配置好 Cursor 后，你就可以在不同工具之间编排工作流。下面是一个示例演示：通过结合 Linear、Figma 和 浏览器工具创建了一个贪吃蛇游戏。虽然实际项目通常更为复杂，但这个例子展示了这些集成工作流的潜力。

连接到你的项目管理工具

你可以通过不同的工具，将 Cursor 集成到你现有的项目管理软件中。本指南将介绍如何通过 MCP 服务器集成 Linear。

安装

将 Linear MCP 服务器添加到 mcp.json 文件中。

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

请确保在 MCP 设置中启用 Linear
网页浏览器会自动打开，并提示你授权 Linear

由于 MCP 目前的状态，设置过程可能需要多次尝试。如果集成未生效，请尝试在 Cursor 设置中“重新加载”服务器。

在 Cursor 中使用 Linear

Linear MCP 服务器会暴露出多种工具，Cursor 可以利用这些工具来读取和管理工单。前往 MCP 设置，找到 Linear 服务器，即可查看所有可用工具的列表。要验证集成是否成功，可以在聊天中尝试以下提示：

list all issues related to this project

引入你的 Figma 设计稿

设计和原型是 Web 开发的核心。通过使用社区构建的 Figma MCP 服务器，你可以在 Cursor 中直接访问和操作设计文件。要开始使用，请按照 https://www.framelink.ai/docs/quickstart 上的设置说明进行操作。

安装

{
  "mcpServers": {
	  ...,
    "figma": {
	    "command": "npx",
	    "args": [
	      "-y",
	      "figma-developer-mcp",
	      "--figma-api-key=YOUR-KEY",
	      "--stdio"
	    ]
	  }
  },
}

用法

此 MCP 服务器要求你传递你想访问的 Figma 图层或画框的链接。更多信息请参阅文档。

保持代码脚手架的一致性

你很可能已经有现有的代码、设计系统或既定的开发规范希望复用。在与模型协作时，参考你代码库中已有的模式（如下拉菜单或其他常用组件）会非常有帮助。我们自身在大型 Web 代码库中工作时发现，声明式代码（尤其是 React 和 JSX）效果特别好。

如果你有设计系统，可以通过为其提供一条规则，帮助智能体（agent）发现并使用它。下面是一个 ui-components.mdc 文件的示例，我们尝试在可能的情况下强制复用组件：

// components.mdc
---
description: Implementing designs and building UI
---
- reuse existing UI components from `/src/components/ui`. these are the primitives we can build with
- create new components by orchestrating ui components if you can't find any existing that solves the problem
- ask the human how they want to proceed when there are missing components and designs

随着你的组件库不断扩展，请相应地添加新的规则。当规则数量过多时，可以考虑将其拆分为更具体的类别，例如“仅在处理用户输入时适用”。

让 Cursor 访问浏览器

为了扩展 Cursor 的能力，你可以配置浏览器工具的 MCP 服务器，从而获取控制台日志和网络请求的访问权限。配置完成后，你可以通过监控控制台输出和网络活动来验证你的更改。这种设置有助于确保你的实现与预期一致。请按照此处的说明设置 MCP 服务器：https://browsertools.agentdesk.ai/installation

我们正在努力让这一集成在 Cursor 中变得更加简单和原生。

要点总结

紧密的反馈循环对 Web 开发至关重要。将 Cursor 与 Figma、Linear 以及浏览器等工具结合使用，可以让你更快推进并保持高效工作流。
MCP 服务器让你可以将外部系统直接集成到 Cursor，减少上下文切换，提高任务执行效率。
复用组件和设计系统有助于模型生成更简洁、一致的代码和输出。
明确且有范围的任务会带来更好的结果。请有意识地设计你的提示和需求。
如果输出效果不佳，可以尝试调整以下方面：
- 指令：使用规则、提示，并通过 MCP 服务器等方式提供更多上下文。
- 系统：良好的模式、抽象和清晰度能让模型更容易理解、协助并更自主地工作。
你可以通过包含运行时信息（如控制台日志、网络请求和 UI 元素数据）来扩展模型的上下文。
并非所有内容都需要自动化。如果系统变得过于复杂，可以回归使用 Tab 和 CMD K 进行更精细的手动编辑。
Cursor 最强大的地方在于作为你的“副驾驶”而不是“自动驾驶”。用它来提升你的决策，而不是完全取代你自己的判断。