De prompt a web publicada

1. Elige la pieza

Empieza por lo que necesitas hoy: una landing entera, una sección que falta o un efecto que dé carácter. Puedes entrar por categoría, por sector o empezar por las gratis.

En la ficha de cada pieza tienes lo que necesitas para decidir:

• La demo en vivo: es exactamente lo que el prompt describe. Ábrela también en el móvil.
• La prueba en frío (cuando está publicada): qué salió al pegar el prompt en Claude Sonnet 5.5 sin tocar nada, con veredicto, nota y observaciones. Te dice de antemano qué suele necesitar retoque.
• Técnicas y rendimiento: si usa WebGL, GSAP o solo CSS, y cómo se comporta en móvil.

2. Pega el prompt

Elige versión según la herramienta. Completo en chats y editores (Claude, ChatGPT, Gemini, Cursor): trae todos los valores exactos y es el que más se parece a la demo. Lite en constructores como Lovable, Bolt o v0, o en modelos gratuitos: menos de 2.000 palabras con lo esencial.

1. Abre una conversación nueva, sin mensajes anteriores. Lo que haya antes puede cambiar el resultado.
2. Pega el prompt tal cual. No hace falta añadir «hazme una web»: ya pide un único archivo HTML con todo dentro.
3. Si la respuesta se corta por larga, escribe «continúa exactamente donde lo dejaste» y junta las dos partes.
4. Guarda el resultado como index.html y ábrelo con doble clic para verlo en tu navegador.

Cada herramienta tiene sus manías; las contamos en Claude, ChatGPT, Gemini, Cursor, Lovable, Bolt y v0.

3. Itera sin romperla

Casi nunca sale perfecto a la primera, y es normal. La clave es pedir cambios pequeños y medibles, uno por mensaje, y comparar siempre con la demo abierta al lado.

• Si una respuesta empeora la pieza, vuelve a la versión anterior en vez de encadenar parches.
• Si falta un detalle, copia solo el apartado del prompt Completo que lo describe (por ejemplo, «Movimiento») y pide que lo aplique.
• Revisa la consola del navegador (clic derecho, «Inspeccionar», pestaña Consola): un error rojo suele explicar por qué no se ve un efecto.

4. Personalízala

El personalizador de la ficha mete tu marca, tus colores y tus datos dentro del prompt antes de copiarlo, así la IA ya trabaja con ellos. Si no lo usas, pídeselo a la IA después, en un solo mensaje con todos los datos.

• Textos: sustituye los de la marca ficticia por los reales de tu cliente. Revisa horarios, precios (con IVA incluido) y teléfonos.
• Colores y tipografías: cámbialos en las variables del principio del CSS (el bloque :root) y no uno a uno.
• Fotos: los huecos de foto de las landings están preparados para sustituirlos. Usa fotos propias o con licencia, en WebP o AVIF, a un máximo de unos 1.600 px de ancho, y con su texto alternativo.
• Datos legales del cliente: su aviso legal, su política de privacidad y, si usa analítica, su aviso de cookies. La pieza no los trae porque son de cada negocio.

5. Publícala

Una pieza de Motionframe es, de partida, un único archivo HTML: se puede alojar en cualquier sitio que sirva webs estáticas. Estas son tres formas habituales.

Netlify: arrastrar y soltar

1. Pon tu index.html (y la carpeta de imágenes, si hay) dentro de una carpeta.
2. Entra en app.netlify.com/drop y arrastra la carpeta.
3. En unos segundos tienes una dirección pública. Crea una cuenta para conservarla y conectar tu dominio.

Vercel: desde la terminal o desde GitHub

1. Con Node instalado, abre la terminal en la carpeta y ejecuta npx vercel. Te pedirá entrar en tu cuenta y te dará una dirección de prueba.
2. Cuando esté lista, npx vercel --prod la publica en la dirección definitiva.
3. Si tu proyecto está en GitHub (por ejemplo, el que te genera v0, Lovable o Bolt), impórtalo desde el panel de Vercel y se publicará solo con cada cambio.

Hostinger: subir el archivo

1. En hPanel, abre el Administrador de archivos de tu dominio.
2. Entra en public_html y sube tu index.html (sustituye el que haya si es una web nueva).
3. Activa el certificado SSL gratuito para que la web vaya por HTTPS.

Si la IA te ha devuelto un proyecto con React o Next.js en lugar de un HTML, necesita compilarse: lo más cómodo es Vercel o Netlify conectados a GitHub. En un alojamiento compartido, sube el resultado del build (la carpeta dist u out), no el código fuente.

6. Rápida en móvil

Buena parte de las visitas a cualquier web llegan desde el móvil, a menudo con datos. Las piezas vienen preparadas (resolución limitada en WebGL, pausa fuera de pantalla, versión sin movimiento), pero lo que añadas después puede estropearlo.

• Pruébala en un móvil real, con datos y no con wifi, además del modo móvil del navegador.
• Pásala por PageSpeed Insights. Objetivos de Google: carga principal (LCP) por debajo de 2,5 s, respuesta a la interacción (INP) por debajo de 200 ms y nada que salte al cargar (CLS) por debajo de 0,1.
• Imágenes: el mayor peso suele estar aquí. Tamaño justo, formato moderno y loading="lazy" en las que no se ven al entrar.
• Movimiento reducido: activa «reducir movimiento» en tu móvil y comprueba que la pieza se queda quieta y legible. Si la IA ha quitado ese bloque al iterar, pídele que lo recupere.
• Tipografías: dos familias como mucho y con display=swap, como vienen en el prompt.
• Un efecto fuerte por pantalla: dos fondos WebGL a la vez castigan cualquier móvil.

7. Antes de entregar

Un repaso de cinco minutos que evita la mayoría de los «oye, esto no va»:

• No queda ningún texto de la marca ficticia, ni teléfonos de ejemplo.
• Los botones de llamar, WhatsApp y reservar funcionan desde un móvil.
• El formulario de contacto, si lo hay, llega a donde tiene que llegar.
• Hay título y descripción para Google, favicon e imagen para compartir en redes.
• Todas las imágenes tienen texto alternativo y el texto se lee bien sobre los fondos.
• Se navega con el teclado (tabulador) y el foco se ve.
• Están el aviso legal y la privacidad del cliente.

¿Dudas con alguna pieza? Escríbenos desde contacto. Y para saber qué puedes hacer con ella comercialmente, mira la licencia.