Saltar al contenido
Copia y Crea

Diseño

Hizo un sitio de invitación animado para su novia solo con instrucciones a Cursor, en la mitad del tiempo

Un desarrollador se propuso crear una invitación web con animaciones sin escribir código, solo con instrucciones a Cursor. Lo logró en 2 a 3 horas y cuenta qué funcionó y qué no.

Qué hizo

Fabio Zapata quería regalarle a su novia una invitación en forma de sitio web, con un sobre animado que se abre, imágenes, textos y botones para pasar de una página a otra. Aunque es desarrollador, se impuso una regla: hacerlo solo dando instrucciones a Cursor, un editor de código con IA, sin tocar el código.

Empezó con una instrucción detallada con los objetivos, la estructura de las páginas y cómo quería implementarlas. La animación del sobre fue el mayor problema: pasó 15 a 20 minutos pidiendo cambios vagos que empeoraban el resultado. Lo resolvió buscando en internet un ejemplo de sobre animado, cambiándole los colores y entregándoselo a Cursor como base. Desde ahí, agregar botones, tipografías y pantallas nuevas fue rápido.

Cuando el sitio estaba casi listo, los ajustes pequeños (textos, espacios y márgenes) tomaban más tiempo por instrucciones que a mano, así que hizo ese último 5 a 10 % él mismo. En total tardó 2 a 3 horas, cuando calculaba entre 4 y 8 a la manera tradicional.

Sus aprendizajes: hay que explicar la causa del problema y no solo el síntoma, decir explícitamente cuándo un estilo es para todo el sitio, y desconfiar: la IA aceptó sin cuestionar que algo que funcionaba estaba roto y lo reescribió.

El prompt

Prompt reconstruido por Copia y Crea a partir de lo que describe el autor (no publicó sus prompts).

Crea un sitio web de una sola página, sin servidor, que funcione como invitación para [EVENTO].

Estructura:
1. Pantalla inicial con un sobre cerrado; al hacer clic se abre con una animación y aparece la tarjeta.
2. Tarjeta con: [TEXTO DE LA INVITACIÓN], fecha, hora y lugar.
3. Botón "Ver más" que lleva a una segunda pantalla con [FOTOS / MAPA / CÓMO CONFIRMAR].

Estilo (aplícalo a TODO el sitio, no página por página): colores [COLORES], tipografía [TIPOGRAFÍA], botones redondeados.
Debe verse bien en celular.
Para la animación del sobre usa como base este ejemplo: [PEGA EL CÓDIGO O EL ENLACE DEL EJEMPLO].
Antes de cambiar algo que ya funciona, pregúntame.

Cómo replicarlo

  1. Haz un boceto simple de las pantallas en papel o en una nota.
  2. Busca ejemplos de lo más difícil (animaciones, efectos) y entrégalos como referencia.
  3. Usa Cursor, Claude o ChatGPT con el prompt y avanza pantalla por pantalla.
  4. Cuando falten solo detalles, ajústalos a mano o con instrucciones muy concretas.
  5. Publica gratis en Netlify, Vercel o GitHub Pages y comparte el enlace.

Ideas para adaptarlo

  • Bodas, cumpleaños y bautizos: invitaciones web con confirmación de asistencia.
  • Pequeños negocios: una página de lanzamiento de un producto o una promoción por temporada.
  • Diseñadores freelance: ofrecer invitaciones web personalizadas como servicio.

Casos relacionados