Kit de animaciones para tu página: 9 prompts para que Claude te las haga, paso a paso

Paso a paso

1. 01

   Elegí qué animación querés primero

   Dónde

   Aquí mismo. No hace falta hacer las 9: empezá por una.

   Qué hacer

   1. a)Si tu página no tiene un titular que llame la atención, empezá por la 1 (titular que aparece) o la 2 (palabra que cambia).
   2. b)Si vendés productos, la 5 (menú que se arma) y la 6 (precios que cambian) son las que más ayudan a vender.
   3. c)Si la gente no te conoce todavía, la 3 (números que suben) y la 4 (reseñas en baraja) dan confianza. Usá solo números y reseñas de verdad.
   4. d)Si querés que te escriban, la 9 (botón que responde) va al final de la página.
   5. e)Si todavía no tenés página, saltá al prompt maestro de más abajo: arma una página completa con las 9.

   Qué vas a ver

   Una lista corta: la animación con la que vas a empezar y las que harás después.

   Un consejo: Más no es mejor. Una página con dos o tres animaciones bien puestas se ve más seria que una donde todo se mueve.

2. 02

   Abrí Claude y revisá que pueda crear archivos

   Dónde

   En claude.ai desde el navegador, o en la app de Claude en tu computadora.

   Qué hacer

   1. a)Entrá a Claude con tu cuenta.
   2. b)Abrí Configuración (en tu nombre o tus iniciales, en el menú) y entrá a "Capacidades".
   3. c)Fijate que esté encendida la opción de ejecución de código en la nube y creación de archivos. Sin eso, Claude no puede mostrarte la animación funcionando.
   4. d)Volvé a la pantalla principal y empezá una conversación nueva para cada animación.

   Qué vas a ver

   Un chat nuevo, listo para pegar el primer prompt.

   Si te sale distinto: Si no encontrás la opción, no te preocupés: viene encendida en la mayoría de cuentas. Probá directamente con el prompt; si Claude te responde solo con texto y no te muestra la animación, volvé a revisarla.
3. 03

   Animación 1: titular que aparece

   Dónde

   En un chat nuevo de Claude.

   Qué hacer

   1. a)Copiá el prompt con el botón "Copiar", pegalo en el cuadro para escribir y cambiá todo lo que está entre corchetes por tus datos.
   2. b)Mandalo y esperá. Claude escribe el código y, al lado o abajo, te muestra la portada funcionando.
   3. c)Si no la ves moverse, pedile "volvé a reproducir la animación" o recargá la vista previa.
   4. d)Pedile cambios con palabras normales: "más lento", "el botón en verde", "la letra más grande en celular".

   Qué vas a ver

   Tu portada con tu titular apareciendo palabra por palabra y tus botones.

   Copiá este texto y pegalo en el chat Copiar

   Haceme la portada de la página de mi negocio en un solo archivo HTML.
   
   Mi negocio: [qué vendés o qué hacés, en una frase]
   Titular: [la frase principal, por ejemplo: Pupusas hechas a mano, a tu puerta.]
   Palabras para destacar en color: [por ejemplo: a mano]
   Frase de abajo: [una frase corta, por ejemplo: Pedí por WhatsApp y te las llevamos calientitas.]
   Botón principal: [por ejemplo: Pedir por WhatsApp], que abra https://wa.me/503[tu número sin espacios]
   Botón secundario: [por ejemplo: Ver el menú]
   Colores: [tu color principal y el color del fondo]
   
   La animación: al cargar la página, las palabras del titular aparecen una por una, de borrosas a nítidas y subiendo un poquito. Las palabras destacadas se subrayan con una línea que se dibuja de izquierda a derecha. Después aparecen la frase y los botones. Todo en menos de 2 segundos.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

   Un consejo: El enlace https://wa.me/503 seguido de tu número abre un chat de WhatsApp contigo. Escribí el número todo junto, sin espacios ni guiones.

4. 04

   Animación 2: palabra que cambia

   Dónde

   En un chat nuevo de Claude.

   Qué hacer

   1. a)Copiá el prompt, pegalo y llenalo. Pensá en 3 o 4 cosas que vendés que quepan en la misma frase.
   2. b)Mandalo y mirá cómo la palabra del medio va cambiando sola.
   3. c)Si una palabra es muy larga y se ve apretada, pedile "hacé la cajita más ancha" o cambiá la palabra.

   Qué vas a ver

   Un titular donde la palabra del medio cambia sola, con rebote.

   Copiá este texto y pegalo en el chat Copiar

   Haceme un titular animado para la página de mi negocio en un solo archivo HTML.
   
   La frase: "[Inicio de la frase, por ejemplo: Hacemos] [PALABRA QUE CAMBIA] [final de la frase, por ejemplo: para tu fiesta.]"
   Las palabras que van cambiando: [por ejemplo: pasteles, piñatas, bocadillos, decoraciones]
   Colores: [color de la cajita de la palabra y color del fondo]
   
   La animación: la palabra que cambia va dentro de una cajita de color. Cada segundo y medio, la palabra sale hacia arriba y entra la siguiente desde abajo, con un pequeño rebote, y la cajita se estira o se encoge al tamaño de la palabra nueva. Abajo, unos puntitos marcan cuál palabra va. Cuando llega a la última, vuelve a empezar.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

   Un consejo: Usá palabras de lo que la gente busca de verdad. Si te preguntan más por los pasteles, que "pasteles" sea la primera.

5. 05

   Animación 3: números que suben

   Dónde

   En un chat nuevo de Claude.

   Qué hacer

   1. a)Antes de pegar el prompt, juntá tres números reales de tu negocio: años trabajando, pedidos entregados, tu calificación en Google.
   2. b)Copiá el prompt, pegalo y poné tus números.
   3. c)Mandalo. Los números suben desde cero cuando la sección aparece en pantalla.

   Qué vas a ver

   Tres tarjetas con tus números subiendo desde cero.

   Copiá este texto y pegalo en el chat Copiar

   Haceme una sección para la página de mi negocio, en un solo archivo HTML, con tres números que suban desde cero.
   
   Número 1: [por ejemplo: 8] y lo que significa: [por ejemplo: años en el barrio]
   Número 2: [por ejemplo: 1200] y lo que significa: [por ejemplo: pedidos entregados]
   Número 3: [por ejemplo: 4.9] y lo que significa: [por ejemplo: estrellas en Google]
   Colores: [tu color principal y el fondo]
   
   La animación: tres tarjetas en fila (una debajo de otra en celular). Cuando la sección aparece en la pantalla, cada número sube desde cero hasta su valor en un segundo y medio, frenando al final. Si el número es una calificación, mostrá las estrellas llenándose al mismo tiempo. Que la animación pase una sola vez.
   
   Importante: usá exactamente mis números. No agregués ni redondeés ninguno.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

   Un consejo: Nunca inventés ni inflés estos números. Si un cliente se da cuenta de que no son reales, pierde la confianza en todo lo demás.

6. 06

   Animación 4: reseñas en baraja

   Dónde

   En un chat nuevo de Claude. Antes, en tu perfil de Google, para copiar tus reseñas.

   Qué hacer

   1. a)Abrí tu perfil de negocio en Google Maps y copiá 3 a 5 reseñas reales, con el nombre que aparece.
   2. b)Usá solo el primer nombre y la inicial del apellido de cada persona (por ejemplo: Carlos R.). Es más respetuoso con su privacidad.
   3. c)Copiá el prompt, pegalo y pegá tus reseñas donde dice.
   4. d)Mandalo. Las tarjetas se barajan solas, una cada pocos segundos.

   Qué vas a ver

   Tus reseñas reales pasando una tras otra, como cartas.

   Copiá este texto y pegalo en el chat Copiar

   Haceme una sección de reseñas para la página de mi negocio, en un solo archivo HTML, donde las tarjetas se barajen.
   
   Mis reseñas (son reales, copiadas de Google):
   1. "[texto de la reseña]" - [Nombre e inicial], [ciudad]
   2. "[texto de la reseña]" - [Nombre e inicial], [ciudad]
   3. "[texto de la reseña]" - [Nombre e inicial], [ciudad]
   
   Mi calificación promedio en Google: [por ejemplo: 4.9]
   Colores: [tu color principal y el fondo]
   
   La animación: las tarjetas están apiladas, una encima de otra y un poco giradas. Cada 3 segundos, la de arriba sale deslizándose hacia un lado y la siguiente pasa al frente con un pequeño rebote. Cuando se acaban, vuelven a empezar. Cada tarjeta lleva 5 estrellas, el texto y un circulito con las iniciales. Abajo va el promedio de Google.
   
   Importante: no cambiés ni una palabra de las reseñas.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

   Un consejo: Copiá las reseñas tal cual, con sus faltas de ortografía si las tienen. Corregirlas o mejorarlas sería cambiar lo que dijo el cliente.

7. 07

   Animación 5: menú que se arma

   Dónde

   En un chat nuevo de Claude.

   Qué hacer

   1. a)Escribí tus productos con su precio, uno por línea. Con 4 a 6 alcanza para empezar.
   2. b)Copiá el prompt, pegalo y poné tu lista. Si tenés fotos de tus productos subidas a internet, pegá el enlace de cada una; si no, Claude dibuja formas de colores.
   3. c)Mandalo. Las tarjetas aparecen una por una, como piezas que se acomodan.

   Qué vas a ver

   Tu menú armándose pieza por pieza, con tu producto estrella más grande.

   Copiá este texto y pegalo en el chat Copiar

   Haceme un menú para la página de mi negocio, en un solo archivo HTML, con tarjetas que aparezcan una por una.
   
   Mis productos (nombre y precio):
   - [producto]: $[precio]
   - [producto]: $[precio]
   - [producto]: $[precio]
   - [producto]: $[precio]
   El más pedido: [nombre del producto]
   Fotos: [pegá el enlace de cada foto, o escribí "sin fotos, usá formas de colores"]
   Colores: [tu color principal y el fondo]
   
   La animación: las tarjetas forman una cuadrícula de tamaños distintos (la del producto más pedido es la más grande). Cuando la sección aparece en pantalla, cada tarjeta entra una detrás de otra, creciendo un poquito y con un pequeño rebote. Al final aparece una etiqueta que dice "El más pedido" sobre la tarjeta grande.
   
   Importante: usá exactamente mis precios.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

   Si te sale distinto: Si las fotos no aparecen, revisá que el enlace empiece con https:// y que abra la foto sola en el navegador. Los enlaces de fotos de WhatsApp o de Facebook no sirven.
8. 08

   Animación 6: precios que cambian

   Dónde

   En un chat nuevo de Claude.

   Qué hacer

   1. a)Pensá en dos formas de vender lo mismo: por unidad y por docena, por mes y por año, o un paquete chico y uno grande.
   2. b)Copiá el prompt, pegalo y poné tus dos precios.
   3. c)Mandalo y tocá el botón en la vista previa: el precio cambia rodando como un marcador.
   4. d)Revisá la cuenta del ahorro con tu calculadora antes de usarla.

   Qué vas a ver

   Una tarjeta donde el precio rueda al tocar el interruptor, con tu ahorro en verde.

   Copiá este texto y pegalo en el chat Copiar

   Haceme una tarjeta de precios para la página de mi negocio, en un solo archivo HTML, con un botón para cambiar entre dos opciones.
   
   Producto o servicio: [por ejemplo: Pupusa revuelta]
   Opción 1: [por ejemplo: Por unidad] a $[precio]
   Opción 2: [por ejemplo: Por docena] a $[precio]
   Colores: [tu color principal y el fondo]
   
   La animación: arriba hay un interruptor con las dos opciones. Al tocar la otra opción, el fondo del interruptor se desliza hacia ella y el precio cambia rodando hacia arriba, como un marcador. Si la opción 2 sale más barata que comprar por separado, aparece una etiqueta verde que dice cuánto se ahorra. Calculá el ahorro con mis precios y escribime la cuenta para que yo la revise.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

   Un consejo: Si la opción grande no sale más barata, quitá la etiqueta de ahorro: pedile a Claude "sin la etiqueta de ahorro".

9. 09

   Animación 7: pasos que se dibujan

   Dónde

   En un chat nuevo de Claude.

   Qué hacer

   1. a)Escribí en tres pasos cortos cómo te compran (por ejemplo: escribinos, confirmamos, te llega).
   2. b)Copiá el prompt, pegalo y poné tus pasos.
   3. c)Mandalo. Una línea se dibuja de un paso al otro y cada paso se marca con un check.

   Qué vas a ver

   Tus tres pasos marcándose uno por uno, unidos por una línea que se dibuja.

   Copiá este texto y pegalo en el chat Copiar

   Haceme una sección de "cómo funciona" para la página de mi negocio, en un solo archivo HTML, con 3 pasos y una línea que se dibuje.
   
   Paso 1: [título corto] - [una frase]
   Paso 2: [título corto] - [una frase]
   Paso 3: [título corto] - [una frase]
   Mensaje final: [por ejemplo: Tu pedido va en camino]
   Colores: [tu color principal y el fondo]
   
   La animación: arriba de los pasos hay una línea curva que se dibuja de izquierda a derecha cuando la sección aparece en pantalla. Cada vez que la línea llega a un paso, aparece un círculo con un check y sube la tarjeta de ese paso. Al terminar aparece el mensaje final en una pastilla verde. En celular, los pasos van uno debajo del otro y la línea baja en vertical.
   
   Reglas para el código:
   - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
   - Que se adapte al ancho de la pantalla y se vea bien en celular.
   - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
   - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
   - Al final, explicame en dos líneas cómo cambio los textos y los colores.

10. 10

    Animación 8: antes y después

    Dónde

    En un chat nuevo de Claude.

    Qué hacer

    1. a)Sirve para servicios donde se nota el cambio: limpieza, remodelación, barbería, uñas, jardinería.
    2. b)Necesitás dos fotos tuyas del mismo lugar, una antes y otra después, subidas a internet (por ejemplo, en tu misma página) para tener su enlace.
    3. c)Copiá el prompt, pegalo y poné los enlaces de tus fotos.
    4. d)Mandalo y probá arrastrar la barrita en la vista previa, con el mouse o con el dedo.

    Qué vas a ver

    Tus dos fotos con una barrita que muestra el cambio al deslizarla.

    Copiá este texto y pegalo en el chat Copiar

    Haceme un comparador de antes y después para la página de mi negocio, en un solo archivo HTML.
    
    Foto de antes: [enlace de la foto, que empiece con https://]
    Foto de después: [enlace de la foto, que empiece con https://]
    Qué se ve: [por ejemplo: sofá antes y después de la limpieza]
    Colores: [tu color principal]
    
    La animación: las dos fotos están una encima de la otra y una barrita vertical con un círculo divide la pantalla. A la izquierda se ve el antes y a la derecha el después. Al aparecer en pantalla, la barrita se mueve sola de un lado al otro una vez, para que se note que se puede mover. Después la persona la arrastra con el mouse o con el dedo. Arriba de cada lado va una etiqueta: "Antes" y "Después".
    
    Reglas para el código:
    - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
    - Que se adapte al ancho de la pantalla y se vea bien en celular.
    - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
    - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
    - Al final, explicame en dos líneas cómo cambio los textos y los colores.

    Si te sale distinto: Si todavía no tenés las fotos subidas, pedile a Claude que use dos rectángulos de colores de prueba. Cuando tengás los enlaces, le pedís "cambiá los rectángulos por estas fotos".

    Un consejo: Pedí permiso a tu cliente antes de publicar fotos de su casa, su carro o su cara.

11. 11

    Animación 9: botón que responde

    Dónde

    En un chat nuevo de Claude.

    Qué hacer

    1. a)Copiá el prompt, pegalo y poné tu número de WhatsApp.
    2. b)Mandalo y tocá el botón en la vista previa: se vuelve un check, salen papelitos de colores y aparece tu mensaje.
    3. c)Probalo desde tu celular cuando ya esté en tu página: tiene que abrir el chat con tu número.

    Qué vas a ver

    Un botón verde que, al tocarlo, celebra y abre WhatsApp con tu mensaje listo.

    Copiá este texto y pegalo en el chat Copiar

    Haceme un botón de WhatsApp para la página de mi negocio, en un solo archivo HTML, que responda al tocarlo.
    
    Texto de arriba: [por ejemplo: ¿Listo para pedir?]
    Texto del botón: [por ejemplo: Pedir por WhatsApp]
    Mi número: 503[tu número sin espacios]
    Mensaje que ya va escrito en el chat: [por ejemplo: Hola, quiero hacer un pedido]
    Mensaje después de tocar: [por ejemplo: ¡Listo! Te escribimos.]
    
    La animación: al tocar el botón, se aprieta un poquito, se encoge hasta ser un círculo con un check, salen papelitos de colores alrededor y aparece el mensaje. Un segundo después se abre WhatsApp en una pestaña nueva con el enlace https://wa.me/ más mi número y el mensaje ya escrito.
    
    Reglas para el código:
    - Un solo archivo HTML, con el CSS y el JavaScript adentro del mismo archivo. Sin librerías de afuera.
    - Que se adapte al ancho de la pantalla y se vea bien en celular.
    - Sin imágenes metidas dentro del código. Si hace falta una foto, dejá un espacio marcado para que yo ponga el enlace.
    - Si el teléfono o la compu tienen activado "reducir movimiento", que se muestre quieto, ya en su estado final.
    - Al final, explicame en dos líneas cómo cambio los textos y los colores.

12. 12

    Sacá el código de Claude

    Dónde

    En el chat donde Claude te hizo la animación.

    Qué hacer

    1. a)Arriba de la ventana donde ves la animación hay botones para ver el código, copiarlo o descargarlo. Los nombres cambian un poco según tu versión de Claude.
    2. b)Si no los encontrás, escribile en el mismo chat: "Mostrame el código completo en un solo bloque para copiarlo". Te lo da en un recuadro con su propio botón de copiar.
    3. c)Si hiciste la animación con la plantilla de Diseño, usá el botón "Exportar" de arriba a la derecha y elegí "Exportar como HTML independiente".
    4. d)Pegá el código en un documento o en las notas de tu compu, para tenerlo guardado.

    Qué vas a ver

    El código completo copiado, que empieza con <!DOCTYPE html> o con <html>.

    Un consejo: No uses el enlace de "Compartir" de Claude para tu página: para abrirlo, la gente necesita una cuenta de Claude. Lo que va en tu página es el código.

13. 13

    Pegalo en tu página

    Dónde

    En el editor de tu página. Elegí la parte que corresponde a tu editor.

    Qué hacer

    1. a)Wix (Editor): hacé clic en "Agregar elementos", luego "Código incrustado", "Incrustaciones populares" y "Incrustar HTML". Hacé clic en el recuadro que aparece, elegí "Ingresar código", pegá el código en "Agrega tu código aquí" y hacé clic en "Aplicar".
    2. b)Wix Studio: "Agregar elementos", luego "Incrustación y redes" e "Incrustar código". Después "Ingresar código", pegá y "Aplicar".
    3. c)WordPress: en la página, tocá el "+" para agregar un bloque, buscá "HTML" y elegí el bloque "HTML personalizado". Pegá el código y hacé clic en "Actualizar".
    4. d)Hostinger (creador de sitios): en "Agregar elementos", arrastrá "Incrustar código" a tu página. Hacé clic en el recuadro, elegí "Introducir código", pegá, hacé clic en "Incrustar código" y después actualizá tu web.
    5. e)Google Sites: a la derecha, hacé clic en "Insertar", luego "Insertar" otra vez y "Insertar código". Pegá, hacé clic en "Siguiente" y en "Insertar". Al final, "Publicar".
    6. f)Abrí tu página publicada en el celular y en la compu para ver la animación funcionando.

    Qué vas a ver

    Tu página con la animación moviéndose, en la versión publicada.

    Si te sale distinto: En Hostinger, el código no se ve dentro del editor: revisalo en la vista previa o en la página publicada. Si Hostinger te dice "embed code is too large", es porque el código trae una imagen adentro; pedile a Claude "quitá las imágenes del código y dejá un espacio para el enlace". En WordPress.com, el plan gratis borra las animaciones al guardar: hace falta un plan pagado con las funciones de alojamiento activadas.

    Un consejo: En Wix, el código queda dentro de un recuadro de tamaño fijo. Si en el celular se ve cortado, agrandá el recuadro o pedile a Claude que la animación ocupe el 100 % del ancho y del alto.

Preguntas frecuentes