web开发

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

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

在 Cursor 中开始协调（orchestrating）

Chat 功能非常适合启动变更。一旦主要部分就位，切换到 CMD K 和 Tab 有助于保持你的流畅状态。

设置 Cursor 后，你将能够在不同工具之间协调工作流程。以下是一个演示可能实现的内容：通过结合 Linear、Figma 和浏览器工具创建的贪吃蛇游戏。虽然实际项目通常更复杂，但这个例子展示了这些集成工作流程的潜力。

连接到你的项目管理工具

你可以使用不同的工具将 Cursor 集成到现有的项目管理软件中。在本指南中，我们将探讨如何将 Linear 与其 MCP 服务器集成。

安装

添加 Linear 到 Cursor

或者手动将 Linear MCP 服务器添加到 mcp.json :

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

操作步骤：

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

note

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

在 Cursor 中使用 Linear

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

list all issues related to this project

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

导入 Figma 设计稿

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

安装

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

将 Figma 添加至 Cursor

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

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

工具

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

保持代码脚手架的一致性

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

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

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

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

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

UI组件.png

授予 Cursor 浏览器访问权限

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

info

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

核心要点

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

在 Cursor 中开始协调（orchestrating）​

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

安装​

在 Cursor 中使用 Linear​

导入 Figma 设计稿​

安装​

工具​

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

授予 Cursor 浏览器访问权限​

核心要点​