Este artículo es una traducción del artículo original en inglés.
Actualizado en marzo de 2026 — se añadió cobertura de Background Agents, BugBot, Cursor Memories y Cursor 2.0
La revolución de la IA en el desarrollo de software tiene doble filo. Si te apoyas demasiado en los LLMs sin un conocimiento profundo de tu stack tecnológico, caes en el vibe-coding. Pero si te resistes obstinadamente a todas las herramientas de IA, te quedarás atrás mientras tus colegas multiplican por diez su productividad.
La realidad es que si hoy no usas un editor de código con IA como Cursor, no te estás moviendo tan rápido como podrías, ni trabajando tan inteligentemente como deberías.
Esta guía te llevará de cero a experto usando Cursor. Sigue estos pasos y dispararás tu eficiencia y habilidades mientras escribes código. Nos centraremos específicamente en la configuración ideal de Cursor AI para trabajar con React, Next.js y Tailwind CSS, aunque muchos de estos pasos aplican a cualquier stack tecnológico.
Los mismos modelos. Un sistema más inteligente. Builder.io ejecuta Claude, Gemini, GPT-4 y más a través de su sistema agéntico —con una plataforma de desarrollo visual construida para ingenieros de React y Next.js encima. Sigue usando Cursor para el código, o apuesta todo con Builder.io para el flujo de trabajo completo. En cualquier caso, menos prompting y más producción.Prueba Builder.io gratis →
Sigue este checklist y tendrás una configuración de Cursor AI casi perfecta sin leer más:
Presiona el ícono de engranaje en la esquina superior derecha para abrir la configuración de Cursor. Luego activa lo siguiente:
- Abre la pestaña Features y confirma estos ajustes:
- Abre la pestaña Models
- Abre la pestaña Rules
La función Notepads de Cursor quedó obsoleta a finales de 2025 y fue reemplazada por Cursor Memories. En lugar de crear notepads manualmente, Memories es una base de conocimiento persistente que la IA mantiene automáticamente entre sesiones —aprende tus convenciones y preferencias del proyecto para que no tengas que re-explicarlas.
Puedes iniciarlo manualmente: abre Settings > Features > Memories y añade entradas, o simplemente dile a la IA en el chat: "Recuerda que siempre usamos Zustand para la gestión del estado en este proyecto." Para estándares de código estructurados, coloca archivos .mdc en tu carpeta .cursor/rules para que se apliquen automáticamente en cada sesión.
- ¿Por qué? Reemplaza Notepads con una base de conocimiento persistente que abarca sesiones y reduce el contexto repetitivo.
Asegúrate de tener ESLint instalado y habilitado
- ¿Por qué? ESLint identifica problemas de calidad del código; habilitar
Iterate on lintspermite que Cursor los corrija automáticamente, mejorando la calidad del código.
Usa Cursor + el CLI del Editor Visual de Builder.io para añadir diseños de UI profesionales
- ¿Por qué? Ve de un diseño en Figma a interfaces pulidas sin salir de Cursor. Proporciona el eslabón perdido entre diseño y desarrollo.
Si seguiste los pasos anteriores, ya tienes una configuración de Cursor bastante sólida. Ahora profundicemos.
Primero exploraremos cómo usar la configuración y las funcionalidades principales del editor de código para potenciar tu flujo de trabajo; luego completaremos los pasos finales para nuestra configuración ideal de Cursor AI.
Si quieres saltar adelante y terminar tu entorno de desarrollo para React y Next.js, pasa directamente a la sección "Configurando los bucles de generación de código con tests de Cursor".
Cursor ofrece completado por tabulador, que funciona como un autocompletado potenciado para tu código. Genera sugerencias de código inteligentes y es capaz de realizar ediciones en múltiples líneas, incluso teniendo en cuenta tus cambios recientes o los subrayados del linter.
Puedes habilitarlo en la configuración de Cursor en Features > Tab Completion, donde también puedes personalizar opciones, como deshabilitarlo para comentarios. Para usarlo, simplemente presiona Tab para aceptar una sugerencia y pasar a la siguiente edición, Esc para descartarla, o Ctrl/⌘ → para aceptarla palabra por palabra.
Cursor Chat es un asistente de IA integrado en tu barra lateral, listo para hablar sobre tu codebase en lenguaje natural. Puedes hacerle preguntas sobre tu proyecto, pedir generación de código en múltiples archivos, obtener ayuda para entender todo el codebase, o incluso asistencia con comandos de terminal.
No requiere mucha configuración; puedes acceder con el atajo ⌘+L (Mac) o Ctrl+L (Windows/Linux). Una vez abierto, escribe tu prompt en lenguaje natural, selecciona el modo 'Agent' para tareas complejas de código o 'Ask' para consultas, y deja que Cursor AI te ayude con su potente funcionalidad de generación de código. El chat puede ofrecer sugerencias de código útiles y realizar reescrituras inteligentes de bloques de código seleccionados basándose en el contexto proporcionado.
Por ejemplo, al trabajar con React, Next.js y Tailwind CSS:
- Ejemplo de modo Agent: Puedes decirle al Agent en lenguaje natural: "Crea un nuevo componente React reutilizable llamado
PrimaryButton. Debe aceptarchildreny las props estándar de un botón. Estílalo usando clases de Tailwind para que tenga fondo azul, texto blanco, padding, esquinas redondeadas y un efecto hover sutil. Genera el código para este componente." - Ejemplo de modo Ask: Podrías preguntar en lenguaje natural: "Explica cómo funciona la obtención de datos dentro del Server Component en
app/posts/[id]/page.tsxpara recuperar datos de una publicación específica. Además, ¿cuál es la mejor forma de aplicar clases de Tailwind condicionales al título de la publicación según su estado de publicación? Examina el código relevante."
Cursor Rules te permite dar instrucciones persistentes a la IA, como definir estándares de código o lineamientos específicos del proyecto, para no tener que repetirte. Piensa en ellas como notas adhesivas para la IA que se aplican automáticamente según el contexto o cuando las invocas manualmente, mejorando la comprensión del codebase.
Puedes crear reglas específicas del proyecto añadiendo archivos .mdc en una carpeta .cursor/rules dentro de tu proyecto, o definir reglas globales en la configuración de Cursor. Para usar una regla, puedes configurarla para que se aplique automáticamente (por ejemplo, siempre o cuando ciertos archivos están involucrados) o invocarla explícitamente con @ruleName al generar código.
Ya enlazamos a un ejemplo de regla para React, Next.js y Tailwind CSS. Si buscas más, echa un vistazo a cursor.directory, donde miembros de la comunidad comparten sus mejores reglas de Cursor. Es un gran recurso.
La función @docs de Cursor te permite mejorar las capacidades de la IA proporcionando documentación externa de las bibliotecas o frameworks que usas. Cursor descarga e indexa estos documentos para que la IA pueda consultarlos directamente al responder tus preguntas o escribir código.
Configurarla es sencillo: ve a Settings > Features > Docs y añade las URLs de la documentación que quieras incluir. Luego, cuando chatees con la IA, menciona @docs en tu prompt para indicarle que consulte esa documentación específica y obtenga respuestas más precisas y contextualmente relevantes.
Aquí hay algunos ejemplos relevantes para la documentación de React, Next.js y Tailwind que añadimos antes:
- Consulta sobre hooks de React: "Usando
@docs, explica las diferencias entreuseMemoyuseCallbacken React y proporciona un ejemplo de caso de uso para cada uno dentro de nuestra biblioteca de componentes." - Ruta de API en Next.js: "Consulta los
@docsde Next.js y muéstrame cómo crear una ruta de API dinámica que acepte un parámetro slug y obtenga los datos correspondientes." - Layout con Tailwind: "¿Cómo puedo crear un layout de cuadrícula de tres columnas responsive usando Tailwind? Por favor, consulta los
@docspara las mejores prácticas."
La función @web de Cursor permite que la IA busque en internet directamente desde el chat, incorporando información en tiempo real a tu flujo de trabajo de desarrollo. Es muy útil cuando necesitas la información más actualizada, como encontrar la versión de una nueva biblioteca o verificar cambios recientes en una API que quizás aún no estén indexados en la documentación.
Para habilitarla, ve a Settings > Features > Chat y asegúrate de que el Web Search Tool esté activado. Para usarla, escribe @web seguido de tu consulta en el chat, indicando a la IA que realice una búsqueda web para responder tu pregunta.
Aquí hay algunos ejemplos relevantes para un stack de React/Next.js/Tailwind:
- Verificación de la versión más reciente: "Usa
@webpara encontrar la última versión estable de la bibliotecaframer-motiony verifica su compatibilidad con React 18." - Investigación de nuevas funciones: "¿Hay nuevas funcionalidades experimentales en la última versión canary de Next.js relacionadas con los server components? Busca usando
@web." - Descubrimiento de plugins de Tailwind: "Necesito un plugin de Tailwind para crear gradientes complejos. Busca con
@webopciones populares y su uso."
Actualización de Cursor 2.0: A partir de Cursor 2.0, el Agent recopila automáticamente contexto web cuando es relevante —ya no necesitas escribir
@webexplícitamente para la mayoría de consultas. La etiqueta@websigue funcionando si quieres forzar una búsqueda web, pero en la mayoría de los casos el Agent lo iniciará por sí solo.
Cursor Memories es una base de conocimiento persistente que Cursor mantiene entre sesiones. A diferencia de Rules (que escribes manualmente), Memories se construyen automáticamente mientras trabajas —la IA observa tus patrones, preferencias y convenciones del proyecto y las almacena para no tener que reaprender todo en cada nuevo chat.
Para el desarrollo en React y Next.js, Memories significa que Cursor recordará tu enfoque preferido de gestión del estado, tus patrones de nomenclatura de componentes, cómo estructuras las rutas de API y qué bibliotecas usa tu proyecto —sin que tengas que re-explicarlo en cada sesión.
Puedes ver y editar tus Memories en Settings > Features > Memories. También puedes decirle directamente a la IA: "Recuerda que siempre colocamos los estilos en el mismo archivo que el componente" y lo guardará para sesiones futuras.
Hemos enlazado a documentos de referencia para componentes de React, patrones de App Router de Next.js y Tailwind CSS. En lugar de Notepads (ahora obsoleto), considera inicializar Cursor Memories con tus convenciones clave de estos documentos, o colocándolos como archivos .mdc en .cursor/rules para que se apliquen automáticamente.
A veces el código generado por Cursor introduce pequeños errores. La resolución automática de lint de Cursor ayuda a mantener tu código limpio haciendo que la IA intente corregir cualquier error de lint que pueda introducir después de hacer cambios o generar código nuevo. Funciona verificando automáticamente la salida de tu linter instalado (como ESLint) justo después de que el agente de IA modifica tu código.
Para configurarlo, asegúrate de tener un linter como ESLint configurado para tu proyecto, luego habilita la opción Iterate on Lints en la configuración del chat (Settings > Features > Chat). Cuando uses el modo Agent, Cursor AI intentará resolver automáticamente cualquier advertencia o error nuevo de lint que aparezca tras su generación o modificación inicial del código. También puede limpiar tu código existente en múltiples líneas y archivos.
Aquí hay algunos ejemplos relevantes para un stack de React/Next.js/Tailwind:
- Reglas de hooks de React: Si el Agent genera código que viola las reglas de hooks (por ejemplo, llamar a
useStatedentro de una condición), ESLint lo marcará y Cursor intentará refactorizar el componente para usar el hook correctamente en el nivel superior. - Imports/variables no usados: El Agent puede añadir un import para una función utilitaria y luego no usarla en el código final. El linter marca el import no usado y Cursor elimina automáticamente la línea innecesaria.
- Errores de tipos en TypeScript: Si el Agent genera código TypeScript que provoca un error de tipo detectado por el plugin TypeScript de ESLint, Cursor intentará ajustar los tipos o la lógica del código para resolver el error.
Puedes aprovechar las capacidades iterativas de Cursor para seguir un flujo de trabajo de Desarrollo Guiado por Tests (TDD), donde escribes los tests antes de la implementación del código real. Empieza instruyendo al agente de IA para que genere casos de test para la función o componente específico que planeas construir, asegurándote de describir claramente los inputs y outputs esperados.
Una vez escritos los tests (y fallando, como se espera en TDD), indica al agente que escriba el código de implementación diseñado específicamente para pasar esos tests e itere hasta que todos pasen. Si el código inicial no pasa todos los tests, las reescrituras inteligentes del agente refinarán el código hasta que todos los tests pasen de rojo (fallando) a verde (pasando).
Aquí hay algunos ejemplos relevantes para un stack de React + Next.js + Tailwind (tip: también podrías guardar un patrón TDD general como Cursor Memory o una regla .mdc):
- TDD de función utilitaria: "Escribe tests de Jest para una función utilitaria
formatCurrency(value: number)que recibe un número y devuelve una cadena de moneda formateada (por ejemplo, $1,234.56). Cubre casos de números positivos, cero y negativos." Luego, tras revisar los tests: "Ahora escribe la funciónformatCurrencypara que pase estos tests. Itera hasta que todos estén en verde." - Test de interacción de componente React: "Usando React Testing Library, escribe tests para un componente. Debe mostrar un contador inicial de 0, incrementarse cuando se hace clic en el botón 'Increment' y decrementarse cuando se hace clic en el botón 'Decrement'." Seguido de: "Genera la implementación del componente, incluyendo estilos básicos de Tailwind para los botones, para satisfacer estos tests. Itera hasta que todos estén en verde."
- Test de lógica de ruta de API: "Escribe tests para una ruta de API de Next.js
/api/validateEmailque acepta una solicitud POST con un campoemail. Los tests deben verificar si devuelve un estado 200 para emails válidos y un estado 400 para emails inválidos según un patrón regex básico." Luego: "Implementa el manejador de la ruta de API/api/validateEmailpara que pase los tests que acabas de escribir. Itera hasta que todos estén en verde."
El Model Context Protocol (MCP) funciona como un sistema de plugins para Cursor, permitiéndote conectar herramientas externas y fuentes de datos directamente al agente de IA. Esta integración profunda mejora las capacidades de Cursor AI, habilitándolo para interactuar con bases de datos, APIs u otros servicios sin necesidad de suministrar información manualmente.
Configuras los servidores MCP creando un archivo mcp.json globalmente en ~/.cursor/ o por proyecto en .cursor/, especificando cómo debe conectarse Cursor a tus herramientas (como un comando a ejecutar o un endpoint SSE). Una vez configurado, el Agent puede detectar y usar automáticamente las herramientas MCP relevantes, o puedes indicarle directamente que aproveche estas integraciones para tareas específicas.
Aquí hay algunos ejemplos relevantes para un stack de React/Next.js/Tailwind:
- Integración del esquema de base de datos: Configura un servidor MCP que se conecte a la base de datos de tu proyecto. Luego podrías pedirle al Agent: "Usando la herramienta MCP de base de datos, obtén el esquema de la tabla
usersy genera una ruta de API de Next.js (/api/users/[id]) para recuperar un usuario por ID, incluyendo los tipos TypeScript apropiados según el esquema." - Conexión con CMS headless: Configura una herramienta MCP para tu CMS headless (como Contentful o Sanity). Luego podrías indicarle: "Usa la herramienta MCP del CMS para obtener el modelo de contenido de
blogPosty genera la funcióngetStaticPropsenpages/blog/[slug].jspara obtener y pasar los datos necesarios de la publicación."
Visita cursor.directory para ver una gran lista de integraciones de Cursor + MCP creadas por la comunidad.
Background Agents (introducidos en Cursor v0.50) te permiten delegar tareas largas y despreocuparte. En lugar de observar cómo trabaja la IA, lanzas un agente en segundo plano, describes la tarea —refactorizar este módulo, migrar a una nueva API, ejecutar el conjunto completo de tests— y recibes una notificación cuando termina. Mientras tanto, sigues trabajando en otra cosa en primer plano.
Para proyectos de React y Next.js, esto supone un cambio significativo en el flujo de trabajo. Grandes refactorizaciones, migraciones de dependencias, actualizaciones de esquemas y ejecuciones de tests end-to-end que antes bloqueaban tu editor ahora pueden ejecutarse en segundo plano en un entorno aislado con su propio terminal y navegador. Para iniciar uno, abre la paleta de comandos y selecciona "New Background Agent".
BugBot es el revisor automático de código de PRs de Cursor. Cuando abres un pull request, BugBot analiza el diff y marca posibles problemas —errores lógicos, casos límite faltantes, inconsistencias de tipos— directamente en los comentarios del PR. Cada comentario incluye un botón "Fix in Cursor" que abre el código relevante en tu editor con un prompt pre-cargado, para que puedas abordar el problema sin buscarlo manualmente. Para equipos que desarrollan en React y Next.js, actúa como un revisor siempre activo que detecta regresiones antes de que lleguen a la rama principal.
El plugin del Editor Visual de Builder.io ahora incluye un flujo de trabajo robusto con CLI. Esto te permite exportar diseños de Figma directamente a tu proyecto a través de tu editor de código preferido. Un solo comando automatiza todo el proceso —descargar tu diseño, convertirlo a código e integrarlo en tu codebase.
Si prefieres trabajar en la terminal, y especialmente si quieres dominar los editores de código con IA como Cursor, transformar diseños de Figma en código puede integrarse fácilmente en este flujo de trabajo de desarrollo.
Al configurar diligentemente los ajustes de Cursor AI y aprovechar sus potentes funcionalidades como el modo Agent, Rules, @docs, @web, Memories y Background Agents, has establecido un editor de código potenciado por IA altamente optimizado para el desarrollo con React y Next.js. Esta configuración está diseñada para aumentar significativamente tu velocidad de desarrollo, simplificar tareas complejas, mejorar la eficiencia del código y ayudar a mantener altos estándares de calidad para el nuevo código.
Recuerda que dominar la asistencia de IA es un proceso continuo. Refina tus prompts constantemente, haz commit de tus cambios con frecuencia, prueba nuevos modelos de IA, usa el contexto adecuado y adapta estas técnicas a tus proyectos específicos. Abraza el poder de la IA como compañero colaborativo y alcanzarás nuevos niveles de productividad y competencia en el código.
Cursor es compatible con una amplia gama de modelos, incluyendo Claude Sonnet, Gemini Pro, GPT-4 y el modelo Composer propio de Cursor. Cursor Pro te da acceso a estos modelos a través de la suscripción sin gestionar tus propias claves de API. Si aportas tus propias claves, el uso intensivo puede volverse costoso rápidamente —para la mayoría de los usuarios avanzados, Cursor Pro (o el plan Ultra de nivel superior para equipos con trabajo paralelo intensivo de agentes) es la opción más rentable. Las capacidades de los modelos evolucionan rápido; el mejor enfoque es experimentar con los últimos modelos disponibles en tu configuración de Cursor en lugar de anclarte a una versión específica.
El modo Agent es la configuración de chat más potente de Cursor para tareas complejas y de múltiples pasos —generar nuevos componentes, refactorizar entre archivos, escribir y ejecutar tests, o ejecutar comandos de terminal. Usa el modo "Ask" cuando quieras consultar o entender código sin hacer cambios. Para la mayor parte del trabajo serio de desarrollo en React y Next.js, el modo Agent con ejecución automática habilitada es el predeterminado recomendado.
Las Cursor Rules son instrucciones persistentes que guían cómo la IA genera código —abarcando cosas como convenciones de nomenclatura, estructura de componentes, patrones de TypeScript y mejores prácticas específicas del framework. Puedes definirlas globalmente en la configuración de Cursor o por proyecto colocando archivos .mdc en una carpeta .cursor/rules. Para React, Next.js y Tailwind, añadir un archivo de reglas completo significa que no tienes que re-explicar tus estándares cada vez que escribes un prompt.
Notepads quedó obsoleto a finales de 2025 y fue reemplazado por Cursor Memories. Memories es una base de conocimiento persistente que la IA mantiene automáticamente entre sesiones —observa tus patrones y convenciones del proyecto para que la IA no tenga que reaprender todo en cada nuevo chat. Puedes ver, editar o añadir memories manualmente desde Settings > Features > Memories. Para documentos de referencia más completos, como estándares de componentes o convenciones de enrutamiento, usa archivos .mdc en tu carpeta .cursor/rules para que se apliquen automáticamente.
La función @docs te permite añadir URLs de documentación externa —como la documentación de React, Next.js o Tailwind CSS— que Cursor descarga e indexa. Una vez añadidas, puedes referenciarlas en el chat usando @docs para que la IA consulte esa documentación al responder preguntas o generar código. Es especialmente útil para mantener a la IA fundamentada en la superficie de API correcta para las versiones específicas de tu framework.
@docs extrae de la documentación que has preindexado en la configuración de Cursor —está curada y es confiable. @web realiza una búsqueda web en vivo en el momento de la consulta, útil para cosas que aún no están indexadas: versiones más recientes de bibliotecas, cambios recientes en APIs o funcionalidades recién lanzadas. Usa @docs para tu stack principal y @web cuando necesites información verdaderamente actual. Ten en cuenta que en Cursor 2.0 y versiones posteriores, el Agent realiza automáticamente búsquedas web cuando es relevante, por lo que el uso explícito de @web es menos necesario que antes.
El flujo de trabajo es: primero indica al Agent que escriba tests fallidos para la función o componente que quieres construir, luego pídele que escriba la implementación e itere hasta que todos los tests pasen. Con Iterate on Lints y la ejecución automática habilitada, Cursor seguirá refinando el código automáticamente hasta que esté limpio. Este bucle funciona bien con Jest y React Testing Library para tests de componentes y rutas de API de Next.js.
Los servidores MCP (Model Context Protocol) son integraciones que dan al Agent de Cursor acceso a herramientas externas —bases de datos, plataformas CMS, APIs y más. Los configuras mediante un archivo mcp.json en ~/.cursor/ (global) o .cursor/ (por proyecto). Una vez conectado, el Agent puede consultar el esquema de tu base de datos, obtener modelos de contenido de un CMS headless o interactuar con otros servicios directamente desde el editor. Cursor.directory mantiene una gran lista de integraciones MCP construidas por la comunidad.
No lo necesitas para usar Cursor, pero está muy recomendado. Cuando ESLint está configurado y el ajuste Iterate on Lints está habilitado, el Agent de Cursor detectará y corregirá automáticamente los errores de lint que introduzca —cosas como reglas de hooks violadas, imports no usados o errores de tipos en TypeScript. Esto mantiene el código generado por IA limpio sin que tengas que revisar manualmente cada edición.
El Editor Visual de Builder.io incluye un CLI que te permite exportar un diseño de Figma directamente a tu codebase desde la terminal con un solo comando. Se encarga de descargar el diseño, convertirlo a código React/Next.js e insertarlo en la ubicación correcta de tu proyecto. Está diseñado para encajar de forma natural en un flujo de trabajo basado en Cursor, cerrando la brecha entre el handoff de diseño y el código de UI listo para producción.
Builder.io visually edits code, uses your design system, and sends pull requests.
Builder.io visually edits code, uses your design system, and sends pull requests.
Connect a Repo
