Crea tu primera página web con Cursor

¿Te has imaginado alguna vez creando una página web profesional sin tener que escribir cientos de líneas de código? Hoy en día, gracias a la inteligencia artificial, esto no solo es posible, sino que es increíblemente accesible para cualquier persona.

En esta guía te enseñamos cómo desarrollar tu propia página web utilizando un solo prompt (una instrucción de texto) gracias a Cursor, el editor de código con IA que está revolucionando la industria del desarrollo de software.

1. Nuestro kit de herramientas

Para que tu página web pase de ser una idea a una realidad global, utilizaremos el ecosistema estándar de los desarrolladores modernos. Hoy nos enfocamos en la primera herramienta, pero es clave que conozcas a todo el equipo:

• Cursor: Nuestro protagonista. Es un editor de código (basado en VS Code) con una inteligencia artificial muy potente integrada. Aquí ocurre la magia.
• GitHub: La "caja fuerte" en la nube donde guardaremos el código de tu página web.
• Vercel: El servidor que tomará tu código desde GitHub y lo pondrá en Internet para que cualquier persona pueda visitarlo.
• Hostinger: La plataforma donde comprarás el nombre de tu página (tu dominio, como mi-idea-genial.com).

2. Preparando el terreno: instalaciones y cuentas

Antes de construir, necesitamos tener nuestras herramientas listas. Sigue estos pasos:

Descarga Cursor

Entra a la página oficial de cursor.com y descarga el instalador para tu sistema operativo. Instálalo como cualquier otro programa.

Crea tu cuenta de GitHub

Ve a GitHub.com y regístrate gratis. Solo necesitas un correo y una contraseña.

Lectura recomendada: uso básico de GitHub para entender mejor los repositorios.

Cuentas en Vercel y Hostinger (opcional por ahora)

Puedes adelantar trabajo creando una cuenta gratuita en Vercel (usa tu cuenta de GitHub para iniciar sesión) y explorando dominios en Hostinger.

3. Creando tu primer proyecto y el Modo Agente

¡Manos a la obra! Vamos a configurar Cursor para que trabaje por nosotros:

1. Crea una carpeta vacía en tu computadora (por ejemplo, en el Escritorio) y llámala mi-primera-web.
2. Abre Cursor.
3. Ve al menú superior y selecciona File → Open Folder (Archivo → Abrir carpeta) y elige la carpeta que acabas de crear.
4. Activa el Modo Agente (Composer): presiona Ctrl + I (o Cmd + I en Mac) para abrir el Composer de Cursor.
5. En la parte superior de la ventana de chat, cambia el modo de Normal a Agent. En este modo, Cursor no solo sugiere código: puede crear archivos, instalar dependencias y armar toda la estructura por ti.

4. El prompt mágico y el poder de iterar

La clave del éxito con la inteligencia artificial es saber dar instrucciones precisas. Al final de este artículo encontrarás un prompt de ejemplo que puedes personalizar.

Antes de copiarlo y pegarlo en el Modo Agente, adapta los textos entre corchetes a tu idea (colores, estilo, propósito de la web).

¿El resultado no es exactamente lo que querías? ¡Itera! No tienes que conformarte con el primer intento. Cursor funciona como una conversación. Puedes pedir, por ejemplo:

• "Cambia el color de fondo a un azul más oscuro."
• "Haz que el título principal sea más grande y usa una tipografía más moderna."
• "Agrega una sección de contacto al final de la página."

5. Manos a la obra: comandos en la terminal

Cuando le des el prompt al Agente de Cursor, empezará a crear archivos a gran velocidad. Al terminar, te pedirá permiso para ejecutar comandos o te indicará que los ejecutes tú para encender el servidor.

Si necesitas hacerlo manualmente, abre la terminal integrada en Cursor: Terminal → New Terminal y sigue estos pasos:

1. Asegúrate de estar en la carpeta correcta con cd mi-primera-web y presiona Enter.
2. Inicia el servidor de desarrollo con npm run dev y presiona Enter.

Nota: Cursor suele instalar los paquetes automáticamente con el Agente. Si ves un error, ejecuta primero npm install y luego npm run dev.

6. ¡Mira tu creación en localhost!

Cuando la terminal muestre algo como "Ready in X ms", tu página ya está viva en tu computadora.

1. Abre tu navegador favorito (Chrome, Safari, Edge o Firefox).
2. En la barra de direcciones escribe exactamente http://localhost:3000 y presiona Enter.

¡Felicidades! Estás viendo la página web que acabas de construir con un solo prompt.

7. ¿Te gustó el resultado? ¡Hablemos para subirla a Internet!

Hasta este punto, la página solo vive en tu computadora. Para que tenga un enlace real y puedas compartirla, necesitarás GitHub, Vercel y Hostinger — las herramientas que vimos al inicio.

¿Quieres dar el siguiente paso y poner tu página en línea? Escríbenos por redes (@danielortizdatos) o contáctanos con la frase "¡Tengo mi web en Localhost!" y te explicamos paso a paso cómo subirla con GitHub y Vercel, y cómo conectar un dominio profesional con Hostinger.

Tu prompt mágico (plantilla)

Copia este texto en el Modo Agente de Cursor y personaliza lo que está entre corchetes:

Crea una página web moderna y responsive para [nombre o propósito del proyecto].

Requisitos:
- Estilo visual: [minimalista / corporativo / creativo] con colores [ej. naranja #ff6d01 y blanco].
- Secciones: hero con título y subtítulo, sobre mí o el proyecto, servicios o características, y contacto.
- Tipografía legible y diseño mobile-first.
- Usa HTML, CSS y JavaScript simple, o un framework ligero si lo consideras mejor.
- Genera todos los archivos necesarios y dime los comandos para verla en localhost.

Objetivo: que cualquier visitante entienda en 10 segundos de qué trata la web y cómo contactarme.