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 设置里「Reload」该服务器。

​
在 Cursor 中使用 Linear

Linear 的 MCP 服务器会暴露一组工具，Cursor 可以用它们来读取和管理 issue。前往 MCP 设置并找到 Linear 服务器查看全部工具列表。想要验证的话，可以在 Chat 里试试这个提示词： 
list all issues related to this project
linear.png
如果集成设置正确，它会返回一个 issue 列表。

​
引入你的 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 场景下。 如果你有设计系统，可以通过提供相应规则帮助 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
随着组件库的增长，按需补充新规则。当规则过多时，考虑按更具体的类别拆分，比如“仅在处理用户输入时适用”。
ui-components.png

​
让 Cursor 访问浏览器

为了扩展 Cursor 的能力，你可以配置浏览器工具的 MCP 服务器，它能访问控制台日志和网络请求。配置完成后，你可以通过监控控制台输出和网络活动来验证修改是否生效。这样的设置有助于确保实现符合预期。按照这里的说明设置 MCP 服务器：https://browsertools.agentdesk.ai/installation
browser.png
我们正在努力把它更顺畅地原生集成进 Cursor。

​
关键要点

  • 紧凑的反馈循环对 Web 开发至关重要。把 Cursor 和 Figma、Linear 以及浏览器搭配使用，动作更快、更在状态。
  • MCP 服务器让你把外部系统直接接入 Cursor，减少上下文切换，提升任务执行效率。
  • 复用组件和设计系统能让模型产出更整洁、更一致的代码和结果。
  • 任务要清晰、范围要明确，效果会更好。带着意图去写提示、提需求。
  • 如果产出不理想，试着调整：
    • Instructions：使用规则、提示，并通过（例如 MCP 服务器）提供更多上下文。
    • Systems：良好的模式、抽象和清晰度能让模型更容易理解、协助，并更自主地工作。
  • 你可以通过加入运行时信息（比如控制台日志、网络请求、UI 元素数据）来扩展模型的上下文。
  • 不是什么都要自动化。如果系统变得太复杂，就回到用 Tab 和 Inline Edit 做更精细的修改。
  • 当 Cursor 是你的副驾驶而不是自动驾驶时，它最强大。用它来增强，而不是取代，你自己的决策。