[Cursor-Guide]Web开发
学习如何通过Cursor优化Web开发工作流，集成Figma和Linear等工具以实现更快的迭代和更紧密的反馈循环。
[Cursor-Guide]Web开发
原始链接: 原始链接
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服务器以查看所有工具的列表。要验证，请在聊天中尝试以下提示：
列出与此项目相关的所有问题
如果集成设置正确，它应该返回一个问题列表。
引入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。
如果您有设计系统，可以通过为其提供规则来帮助代理发现它。以下是一个ui-components.mdc文件，我们尝试在其中尽可能强制重用组件：
components.mdc
---
description: 实现设计和构建UI
---
- 尽可能重用`/src/components/ui`中的现有UI组件。这些是我们可以构建的基础
- 如果找不到解决现有问题的组件，则通过编排UI组件创建新组件
- 当缺少组件和设计时，询问人类希望如何进行
随着组件库的增长，相应地添加新规则。当规则变得过多时，考虑将它们拆分为更具体的类别，例如“仅适用于处理用户输入时”。
为Cursor提供浏览器访问权限
为了扩展Cursor的功能，您可以设置浏览器工具MCP服务器，该服务器提供对控制台日志和网络请求的访问。配置完成后，您可以通过监视控制台输出和网络活动来验证更改。此设置有助于确保您的实现符合您的意图。按照此处的说明设置MCP服务器：https://browsertools.agentdesk.ai/installation
我们正在努力使这一功能更易于在Cursor中原生集成。
关键要点
- 紧密的反馈循环对Web开发至关重要。将Cursor与Figma、Linear和浏览器等工具配合使用，可快速推进工作并保持流畅状态。
- MCP服务器（MCP servers）允许将外部系统直接集成到Cursor中，减少上下文切换并提升任务执行效率。
- 复用组件和设计系统有助于模型生成更简洁、更一致的代码和输出结果。
- 清晰且范围明确的任务能产生更好的效果。在给出提示和要求时需保持明确意图。
- 若输出结果不理想，可尝试调整：
- 指令说明：使用规则、提示词，并通过MCP服务器等方式提供更多上下文
- 系统设置：清晰的模式、抽象结构和表述能让模型更易理解需求，从而提供更自主的帮助
- 可通过包含运行时信息（如控制台日志、网络请求和UI元素数据）来扩展模型的上下文理解。
- 并非所有流程都需要自动化。若系统变得过于复杂，可改用Tab和CMD K进行更精准的编辑。
- 当Cursor作为副驾驶而非自动驾驶时最能发挥其价值。用它来辅助而非替代你的决策过程。