Plantilla de prompts y trampas a evitar para crear una web con animaciones Bento Grid usando ChatGPT, Claude y Gemini

¿Quieres hacer una web como la de Apple, de esas que “se animan al hacer scroll”, pero no quieres masticarte el front-end desde cero? Yo recomiendo más la combinación de “tres modelos de chat para escribir código + Midjourney para generar imágenes”: la eficiencia es absurda.

Un flujo de trabajo lo resuelve todo: página, estructura, animaciones y recursos

ChatGPT se encarga de montar la estructura

Es el más rápido escribiendo HTML5 + Tailwind; va perfecto para dejar listos de una vez requisitos “duros” como el Bento Grid, fondo negro + color de acento #2657FD, y títulos numéricos gigantes.

Prompt copiables directamente: Genera un único archivo HTML, usa TailwindCSS CDN y el JS necesario, diseño Bento Grid, fondo negro, resaltado #2657FD, gran título en chino con pequeñas palabras en inglés como adorno, incluye marcadores de posición de mini gráficos de datos, no omitas puntos clave del contenido.

Claude se encarga de que las animaciones queden suaves

Con Framer Motion por CDN es fácil que “funcione pero tiemble”; Claude es mejor afinando disparadores por scroll, animaciones de entrada y curvas de ritmo para que se vean más agradables (también le gusta ayudarte añadiendo condiciones de borde).

Gemini se encarga de revisar y completar

Si el navegador da errores, los estilos se pisan o los componentes no se alinean, pídele a Gemini que lo arregle con el formato “explicar por secciones + localizar el problema + dar código de reemplazo”, y te ahorras quedarte mirando la consola.

Midjourney se encarga del visual principal

Un visual principal tipo “núcleo de reactor / explosión galáctica / liberación de energía” (en los recursos se menciona brillo ultracolorido + fondo oscuro) se lo dejas a él; luego vuelves a pasar la imagen a ChatGPT para adaptación responsive.

Dos quejas pequeñas que suelo repetir

• Los enlaces CDN que generan los modelos a veces caducan; si no arranca, no dudes de tu vida: cámbialos por los últimos oficiales.
• No amontones demasiadas animaciones: cuanto más contenido sea el Bento Grid, más premium se ve; si no, parece un PPT de fiesta anual.

Si aún estás atascado en “cómo elegir modelo / cómo armar prompts / cómo configurar de una vez cuentas y herramientas”, puedes pasarte por Titikey; yo también lo uso a menudo para evitar rodeos.