Desarrollo web

Cómo configurar Cursor para desarrollo web

El desarrollo web implica iteraciones rápidas y ciclos de feedback estrechos entre Cursor y herramientas externas como Figma o el navegador. En Cursor, hemos encontrado flujos de trabajo que aceleran este ciclo. Definir bien el alcance de las tareas, reutilizar componentes y apoyarse en sistemas de diseño ayuda a mantener todo rápido y consistente.

Esta guía explica cómo configurar Cursor para potenciar el desarrollo web y cerrar el ciclo de feedback.

Empieza a orquestar en Cursor

El Chat es ideal para iniciar cambios. Cuando ya tengas las piezas principales listas, cambiar a Inline Edit y Tab te ayuda a mantener el estado de flow.

Después de configurar Cursor, vas a poder orquestar flujos de trabajo entre distintas herramientas. Abajo hay una demostración de lo que es posible: un juego de la serpiente creado combinando Linear, Figma y herramientas del navegador. Aunque los proyectos reales suelen ser más complejos, este ejemplo muestra el potencial de estos flujos de trabajo integrados.

Conecta tus herramientas de gestión de proyectos

Puedes integrar Cursor en tu software de gestión de proyectos existente usando distintas herramientas. En esta guía, veremos cómo integrar Linear con su servidor MCP.

Instalación

O agrega manualmente el servidor MCP de Linear a mcp.json:

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

Luego:

1. Asegúrate de habilitar Linear desde la configuración de MCP
2. Se abrirá el navegador y se te pedirá que autorices con Linear
   Debido al estado actual de MCP, la configuración puede requerir varios intentos. Si la integración no funciona, intenta “recargar” el servidor desde la configuración de Cursor.

Usar Linear en Cursor

Los servidores MCP de Linear exponen distintas herramientas que Cursor puede usar para leer y gestionar incidencias. Ve a la configuración de MCP y localiza el servidor de Linear para ver la lista de todas las herramientas. Para verificar, prueba este prompt en Chat:

list all issues related to this project

Debería devolverte una lista de incidencias si la integración está configurada correctamente.

Trae tus diseños de Figma

Los diseños y los mockups son fundamentales para el desarrollo web. Con el servidor MCP oficial para Figma, puedes acceder y trabajar directamente con archivos de diseño en Cursor. Para empezar, sigue las instrucciones de configuración en Figma Dev Mode MCP Server.

Instalación

Haz clic en el botón de abajo para instalar el servidor MCP.

O agrégalo manualmente a tu mcp.json:

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

Uso

El servidor expone varias herramientas que podés usar en tus prompts. Por ejemplo, probá pedir los diseños de la selección actual en Figma. Leé más en la documentación.

Mantén coherente el scaffolding de tu código

Probablemente ya tienes código existente, un sistema de diseño o convenciones establecidas que quieres reutilizar. Cuando trabajas con modelos, es útil referirte a patrones que ya están en tu codebase, como menús desplegables u otros componentes comunes.

Trabajando nosotros mismos en un codebase grande basado en la web, hemos descubierto que el código declarativo funciona especialmente bien, en particular para React y JSX.

Si tienes un sistema de diseño, puedes ayudar al agente a descubrirlo proporcionando una regla para él. Aquí hay un archivo ui-components.mdc donde intentamos hacer cumplir la reutilización de componentes cuando sea posible:

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

A medida que crece tu librería de componentes, agrega nuevas reglas en consecuencia. Cuando las reglas sean demasiadas, considera dividirlas en categorías más específicas, como “aplicar solo cuando se trabaje con entradas de usuario”.

Dale acceso al navegador a Cursor

Para ampliar las capacidades de Cursor, puedes configurar el servidor MCP de Browser Tools, que proporciona acceso a los registros de la consola y a las solicitudes de red. Una vez configurado, puedes verificar tus cambios monitoreando la salida de la consola y la actividad de la red. Esta configuración ayuda a garantizar que tu implementación se ajuste a tu intención. Sigue las instrucciones aquí para configurar el servidor MCP: https://browsertools.agentdesk.ai/installation

Estamos trabajando para que sea más fácil integrarlo de forma nativa en Cursor.

Conclusiones

• Los ciclos de feedback rápidos son esenciales en el desarrollo web. Usa Cursor junto con herramientas como Figma, Linear y el navegador para moverte rápido y mantener el flow.
• Los servidores MCP te permiten integrar sistemas externos directamente en Cursor, reduciendo el cambio de contexto y mejorando la ejecución de tareas.
• Reutilizar componentes y sistemas de diseño ayuda al modelo a producir código y resultados más limpios y consistentes.
• Las tareas claras y bien acotadas generan mejores resultados. Sé intencional con cómo planteas los prompts y qué pides.
• Si no estás obteniendo buenos resultados, intenta ajustar:
  • Instrucciones: Usa reglas, prompts y da acceso a más contexto con, por ejemplo, servidores MCP.
  • Sistemas: Patrones, abstracciones y claridad facilitan que el modelo entienda, ayude y trabaje de forma más autónoma.
• Puedes ampliar el contexto del modelo incluyendo información de runtime como logs de consola, solicitudes de red y datos de elementos de UI.
• No todo tiene que estar automatizado. Si tu sistema se vuelve demasiado complejo, vuelve a ediciones más puntuales con Tab e Inline Edit.
• Cursor es más potente cuando es un copiloto, no un piloto automático. Úsalo para mejorar, no para reemplazar, tu propia toma de decisiones.