Crear una web de invitación solo con instrucciones a Cursor

A quién le sirve. Quien quiere una invitación web con animaciones para una boda, un cumpleaños o un acto de empresa sin contratar a un diseñador.

Qué hicieron

Fabio Zapata dio a Cursor una primera instrucción con los objetivos, el aspecto y el enfoque técnico de la página, y le dejó ejecutar comandos en la consola. La animación del sobre salió mal durante 15 o 20 minutos de comentarios vagos. Entonces encontró en internet un ejemplo de sobre animado, le cambió el color, lo pegó en la instrucción y le pidió a Cursor que construyera a partir de él. Después fue pidiendo botones, tipos de letra y distribución.

Cómo salió

La web llevó 2 o 3 horas, frente a las 4 u 8 que calcula que habría tardado a mano. Cuando iba al 90 o 95 % pasó a editar el código él mismo para textos, relleno y márgenes, porque los pequeños retoques por instrucción tardaban demasiado.

Conviene saber

Di de forma explícita que las fuentes, los fondos y los estilos de botón son globales, o Cursor los aplica página por página. También aceptó que una función que ya funcionaba estaba rota, porque él lo afirmó falsamente, y la reescribió.

Qué necesitas

• Cursor, un editor de código con IA integrada, instalado en tu ordenador (según el uso, puede que necesites un plan de pago)
• Las fotos y los textos de la invitación: fecha, lugar, programa
• Un ejemplo de animación o diseño que te guste, en captura o en enlace
• Un navegador, y un alojamiento web si quieres enviar la invitación por enlace

Cómo hacerlo tú, paso a paso

1. Define la ocasión, a quién va y el estilo. Decide qué secciones quieres: bienvenida, detalles, galería de fotos, confirmación de asistencia.
2. Abre una carpeta vacía en Cursor y escribe una primera instrucción larga con los objetivos, el aspecto y el enfoque técnico: una web solo de interfaz, sin servidor.
3. Deja que Cursor ejecute en la consola, la ventana donde se escriben órdenes al ordenador, los comandos que haga falta para montar el proyecto. Lee lo que va a ejecutar antes de aprobarlo.
4. Si algo no sale, como una animación, no insistas con comentarios vagos. Busca un ejemplo real en internet, cámbiale el color, pégalo en la instrucción y pide que construya a partir de él.
5. Pide botones, tipos de letra y distribución. Di de forma explícita que las fuentes, los fondos y los botones son globales, para que valgan en todas las páginas.
6. Abre la web en tu ordenador con el comando que te indique y recorre todas las páginas. Pide los retoques en lenguaje normal.

Crea una web de invitación solo de interfaz (sin servidor) para [evento u ocasión] dirigida a [persona o público]. Debe tener [secciones, por ejemplo pantalla de bienvenida, detalles, galería de fotos, información para confirmar asistencia], animaciones suaves y un estilo [color o ambiente], usando las imágenes de [carpeta]. Haz que funcione en local y dime cómo abrirla. Habrás terminado cuando pueda pasar por todas las páginas y verlas funcionando. Los retoques te los pediré en lenguaje normal.

Consejos

• Cuando algo no salga como quieres, enséñale un ejemplo concreto en lugar de repetir descripciones. En el caso se perdió un buen rato con comentarios vagos.
• No afirmes que algo está roto si no lo has comprobado. Cursor te creerá y puede reescribir una función que funcionaba.
• Para los últimos retoques pequeños, como un texto o un margen, a veces es más rápido tocar tú el archivo que pedirlo.

Preguntas frecuentes

Fuentes

• @fazd en DEV ↗
• tristrumtuttle en Medium ↗

En el directorio desde el 13 de octubre de 2026.