Crear una landing page con Cursor deja de ser un dolor de cabeza cuando combinas inteligencia artificial con fundamentos de desarrollo. Aquí verás cómo construir una landing desde cero usando Cursor, React, Vite y Sass, con un flujo guiado por contexto que te da control real sobre el resultado.
La clave no está en pedirle a la IA que lo haga todo de golpe, sino en levantar requerimientos claros, ir paso a paso y aprovechar tus conocimientos de ingeniería para que el modelo trabaje a tu favor.
¿Qué es Cursor y por qué usarlo para construir una landing?
Cursor es un editor de código basado en VS Code que integra modelos de IA como Claude 3.7 o GPT 4.1 para programar de forma asistida. Si ya usas VS Code, puedes migrar tus extensiones y temas sin perder nada [3:30].
Dentro del panel de chat hay tres modos de interacción que conviene distinguir antes de empezar:
- Agent: edita directamente tu código y accede a todo el codebase del proyecto.
- Ask: sugiere cambios paso a paso sin tocar archivos, ideal cuando quieres revisar antes de aplicar.
- Selección de modelo: puedes alternar entre Claude, GPT y otros según la tarea [4:50].
¿Cursor reemplaza a un desarrollador? No. Acelera el trabajo, pero sin fundamentos de ingeniería no sabrás qué pedirle ni cómo corregir cuando rompa algo en producción.
¿Cómo levantar el contexto antes de programar?
Antes de escribir una línea de código, crea un archivo context.md con el levantamiento de requerimientos. Markdown facilita que el modelo entienda jerarquía y estructura [7:20].
Dentro de ese archivo conviene definir:
- Stack: en este caso React con Vite y Sass.
- Audiencia objetivo: por ejemplo, personas entre 18 y 25 años interesadas en videojuegos.
- Objetivos de la landing: mostrar planes de membresía, animar a la compra y exhibir features y screenshots del producto.
- Paleta de colores: extraída de un sitio como coloradoof.com y pegada en formato Sass o hexadecimal.
Este archivo se vuelve documentación viva del proyecto: lo puedes actualizar a medida que avanzas y Cursor lo retroalimenta cuando agregas nuevas features [12:40].
¿Cómo usar una imagen de referencia para guiar el diseño?
Si tienes un wireframe en Figma o una inspiración visual, expórtalo como PNG y pásalo a ChatGPT con el prompt: describe detalladamente las secciones de este wireframe. La descripción que devuelve la pegas en tu context.md y ya tienes una estructura inicial con header, hero, pricing y features [14:50].
¿Cómo construir la landing paso a paso con Cursor?
El error más común es decirle al agente créame toda la landing. El resultado suele ser caótico y poco controlable. Mejor avanza por bloques.
El primer prompt debería ser específico y acotado, por ejemplo: empecemos a crear el proyecto, por ahora solamente instala Vite y usa Yarn como manejador de paquetes [18:30]. Así eliges manejador de dependencias en lugar de aceptar el default de NPM.
Después vienen los siguientes pasos en orden:
- Limpiar
App.tsx y dejar solo un Hola mundo que use la paleta de colores del contexto.
- Crear una carpeta
styles con un archivo colors.css que centralice la paleta.
- Pedir el header con logo, navegación y CTA destacado hacia pricing.
- Construir el hero con título, descripción y llamada a la acción.
- Generar la sección de pricing con tres cards de planes y beneficios.
¿Por qué pedirlo en bloques y no todo junto? Porque cada bloque te permite revisar el código generado, validar el HTML semántico, ajustar metodologías como BEM y aceptar solo lo que funciona antes de seguir.
¿Qué hacer cuando Cursor rompe algo que ya estaba bien?
Dos prácticas resuelven el 90% del problema. La primera es usar Git desde el inicio: haz commits pequeños después de cada bloque estable, así puedes volver atrás sin perder avances [33:10]. La segunda es referenciar archivos o líneas específicas en el prompt en lugar de dejar que el agente acceda a todo el proyecto.
Cuando seleccionas las líneas exactas donde quieres un cambio y las arrastras al chat, le das atención al modelo sobre esa zona puntual. Esto reduce alucinaciones y evita que reescriba código que ya validaste.
¿Cómo afinar el estilo y hacer la landing responsive?
Si el primer resultado visual no convence, no reescribas el prompt entero. Pásale una captura del estado actual y describe el problema concreto, por ejemplo: los bordes inferiores de los elementos de navegación están mal, corrígelos [27:40].
Para darle personalidad puedes pedir un estilo definido como synthwave, con colores neón, contrastes fuertes y degradados, y dejar que Cursor amplíe la paleta en colors.css. Para el responsive basta un prompt como ahora trabajemos en el diseño responsive de esta landing, aunque conviene revisar dónde coloca los media queries: lo ideal es que vivan dentro de cada componente, no en un archivo aparte [44:20].
¿Cómo escalar el proyecto con Cursor Rules y MCP?
Cuando el proyecto crece, los Cursor Rules se vuelven imprescindibles. Son archivos donde defines estándares para tu equipo: nomenclatura de clases, orden de imports, convenciones de nombres. Existe un repositorio público llamado Cursor Directory con reglas listas para distintos lenguajes y frameworks [46:00].
Otro nivel es el MCP (Model Context Protocol) de Anthropic, que permite conectar Cursor con servicios externos como Figma para extraer diseños directamente desde tus archivos.
¿Sirve Cursor para proyectos en producción? Sí, pero con cautela. En bases de código grandes, como un backend en Python con FastAPI, no funciona pedir cambios masivos. Hay que ir endpoint por endpoint, función por función, y validar manualmente cada modificación.
¿Cómo conectar un backend a tu landing?
La landing por sí sola es un MVP visual. Para que la tabla de precios funcione necesitas decidir el stack del servidor (Node, FastAPI), modelar la base de datos y definir qué datos del usuario vas a guardar. Mientras construyes eso, un atajo válido es enlazar los botones de compra a un WhatsApp para recibir mensajes de interés [51:30]. Ese MVP ya genera valor mientras desarrollas la infraestructura completa.
¿Ya probaste construir tu primera landing con Cursor? Cuéntame en los comentarios qué stack usaste y qué bloque te costó más afinar.
