Cómo crear un sitio web animado con Claude Code en una tarde

Más información sobre cómo trabajar con modelos en la documentación de Ailoot.

¿Por qué una web creada con IA puede parecer genérica?#

Le pides a un agente que monte una página de destino. Cuarenta minutos después tienes un sitio funcional: las secciones están en su sitio, la disposición se adapta a distintos tamaños de pantalla y los botones funcionan. Y casi de inmediato tienes la sensación de haberlo visto antes en alguna parte.

La razón es mecánica. El modelo se entrenó con una enorme colección de páginas terminadas, y esa colección tenía un fuerte sesgo.

Miles de tutoriales y plantillas iniciales copiaron ese color, sesgaron la muestra y el modelo aprendió que los botones son morados. El mismo mecanismo se aplica a las fuentes, las esquinas redondeadas y las sombras.

Mientras tanto, el «estilo de IA» ha cambiado. En la documentación de su skill frontend-design, Anthropic describe ahora otros estilos.

El problema de fondo: el slop aparece cuando no hay nada específico que copiar y el modelo simplemente promedia todos los estilos de la web. Qt es coherente precisamente porque no sabe tener otro aspecto.

Aquí, «slop» significa trabajo generado por máquinas que se promedia hasta obtener un resultado genérico sin un estilo propio.

La conclusión práctica es que el agente necesita una gramática de diseño acotada en lugar de una tarea abierta. Si dices «hazlo bonito», obtendrá la media. Si le das una paleta específica, un par de tipografías y un recurso visual distintivo, construirá a partir de ellos.

El movimiento es la señal más evidente de todo esto. Incluso una página estática con una tipografía perfecta sigue pareciendo una plantilla, porque los sitios web vivos respiran: los elementos aparecen al desplazarse, el cursor provoca cambios y las transiciones entre pantallas no se interrumpen de golpe.

¿Qué necesitas para crear un sitio web animado con Claude Code?#

Vamos a repasar las herramientas una por una, porque hay bastante confusión sobre los precios.

GSAP es la biblioteca de animación que está detrás de una parte notable de los sitios web premiados. Webflow la compró en octubre de 2024 y casi de inmediato empezaron los rumores de que todo era gratis. No es del todo cierto: en aquel momento, Webflow confirmó que se mantendrían los precios existentes. La biblioteca pasó a ser gratuita a finales de abril de 2025, con la versión 3.13.

La versión 3.13 indica específicamente que los plugins antes de pago, como SplitText y MorphSVG, también pasaron a ser gratuitos, incluso para uso comercial. La versión actual, a fecha de julio de 2026, es gsap@3.15.0.

Que sea gratis no significa que sea de código abierto. La licencia sigue siendo propietaria y prohíbe crear con GSAP un editor visual de animación que compita con Webflow. No hay restricciones para sitios web, proyectos de clientes o trabajos comerciales.

La skill frontend-design de Anthropic es un conjunto de instrucciones que cambia la forma en que el agente trabaja en una interfaz. La descripción de su repositorio dice:

Dentro hay un método en dos pasadas. Primero, el agente prepara un sistema de tokens: de cuatro a seis colores con nombre, tipografías para al menos dos funciones, un esquema de disposición en bocetos de texto y un recurso visual distintivo para la página. Después evalúa críticamente su propio plan en función de la tarea. Solo entonces escribe el código.

La publicación dice que hay 75 skills, la descripción del repositorio enumera 78 y hoy el árbol de archivos contiene 91. El autor lo dice claramente: comprueba el repositorio con un comando de búsqueda, porque la descripción está desactualizada.

¿Cómo conseguir que Claude Code deje de producir plantillas?#

Empecemos por el archivo de reglas, porque se aplica a todas las solicitudes y no cuesta nada.

Un punto de partida útil es un bloque de barreras antiplantilla. La lógica es sencilla: enumera las elecciones concretas hacia las que el modelo tiende por defecto y prohíbelas por su nombre.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

El bloque está escrito en inglés deliberadamente: el modelo sigue las instrucciones técnicas breves con más precisión en el idioma de la documentación.

La línea sobre animación aparece junto a las prohibiciones sobre colores y sombras por una razón. La opacidad en la primera pantalla perjudica directamente la métrica de velocidad, como veremos más adelante.

A continuación, la skill. Las skills oficiales de Anthropic se pueden instalar mediante el plugin:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Un detalle: las skills de diseño no se pueden instalar individualmente; el plugin example-skills instala las doce a la vez. Si solo quieres una, copia la carpeta manualmente: Claude Code la detectará sin reiniciar la sesión:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Otras skills de esta colección que pueden resultar útiles son theme-factory, con diez temas listos para usar y la confirmación obligatoria de una persona antes de aplicarlos; web-artifacts-builder, para crear con React y componentes prediseñados; y algorithmic-art, para gráficos generativos. Otro artículo explica en detalle cómo elegir skills para una tarea: cómo elegir skills para Claude Code.

Las reglas y la skill trabajan juntas: las reglas prohíben las malas elecciones y la skill impone un proceso: primero el sistema, después la crítica y al final el código.

Todo lo importante ocurre antes de enviar la solicitud. Incluyes de antemano en el contexto las restricciones que el agente deberá respetar, y la formulación de la instrucción apenas importa. Este enfoque se llama ingeniería de contexto, y el archivo CLAUDE.md es su primera pieza. La combinación de clon de IA + segundo cerebro + ingeniería de contexto ayuda a convertir a Claude de un generador de resultados promedio en una herramienta que respeta tu estilo.

¿Dónde encontrar direcciones visuales e instrucciones de animación listas para usar?#

Las técnicas de movimiento que incluye son: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Si no programas, lo que más te interesa son las direcciones visuales listas para usar. En lugar del impreciso «hazlo moderno», elige una y dale al modelo la gramática limitada que le faltaba:

• clean-minimal-beige-light-mode - minimalismo beige claro
• dark-glass-clean-layout - cristal oscuro
• documentary-brutalist-agency - estilo documental brutalista
• editorial-portfolio-chapters - portfolio dividido en capítulos, como una revista
• orange-clean-paper-saas - sitio web de servicios con estilo de papel y acento naranja
• solar-duotone-bold - tratamiento bicolor audaz
• tech-green-dark-mode-modern - estilo tecnológico oscuro con verde
• light-mode-paper-technical - papel técnico claro

También hay skills técnicas para gráficos y efectos 3D: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

El repositorio no incluye un comando de instalación: el autor dice claramente en la hoja de ruta que lo añadirá cuando se decida el método de integración. La única instrucción para Claude Code es:

A continuación se muestra una opción de instalación. Este comando no está en el repositorio; es una recomendación de instalación:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Una, no dos ni tres. Mezclar el estilo documental brutalista con el minimalismo beige te dará precisamente el promedio que intentas evitar.

¿Cómo proporcionar a un agente documentación actualizada de GSAP en una línea?#

Un problema habitual con las bibliotecas de animación es que el agente recuerda una forma desactualizada de conectarlas. Escribe una importación desde una ruta antigua, registra un plugin como se hacía hace dos años y el código no se ejecuta.

La solución es incluir tú mismo la documentación en el contexto. GSAP la proporciona en un formato legible por máquinas:

https://gsap.com/llms.txt

A día de hoy, el archivo ocupa unos 25 kilobytes. Cada página de documentación también está disponible en versión Markdown: basta con añadir .md a la URL.

En la práctica, sería algo así:

Read https://gsap.com/llms.txt and https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Then build one scene on the home page: the headline appears as you scroll
through the first screen, and the image on the right shifts more slowly than the text.
Use only transform and opacity. No transition-all.

La biblioteca Motion (antes Framer Motion) tiene el mismo archivo, y es aún más grande. Motion se distribuye con licencia MIT y sigue siendo realmente de código abierto; la versión actual es motion@12.42.2. Si el proyecto usa React y solo necesita apariciones sencillas, puedes elegir Motion; para escenas de desplazamiento complejas, usa GSAP con el plugin ScrollTrigger.

También existen opciones integradas en el navegador que no usan bibliotecas. Las transiciones de estado de página mediante la API View Transitions entraron en la compatibilidad base el 14 de octubre de 2025, pero solo dentro de una misma página; la versión entre páginas no es compatible con Firefox en absoluto. Las animaciones de desplazamiento CSS aún no han entrado en la compatibilidad base: Chrome las admite, Safari las incorporó hace poco, pero en Firefox hay que activarlas manualmente en los ajustes, así que no funcionarán para los lectores habituales. Pídele al agente que compruebe primero si el navegador las admite y, si no, que deje la transición estándar.

¿Cómo convertir un sitio web que te gusta en una instrucción?#

La forma más común de explicar lo que quieres es mostrar un ejemplo. Con un agente, eso no funciona directamente: no ve el sitio web, ve texto.

La skill video-to-superprompt salva esa brecha. La descripción de su repositorio: convertir una referencia en vídeo en una instrucción detallada para recrearla o inspirarse en ella. Analiza la grabación por capas: narrativa, disposición, movimiento, tipografía y gráficos 3D. El resultado es una instrucción lista para usar.

Su regla principal se expresa con contundencia:

La segunda skill, html-to-interaction-prompts, trabaja con el código fuente: encuentra todo lo que se mueve —reacciones al cursor, gráficos 3D, efectos de desplazamiento, capas que se mueven a distintas velocidades— y divide la página en instrucciones independientes, una para cada sección, botón, estado al pasar el cursor o efecto. Su principio es tratar el comportamiento del código fuente como la verdad y no inventar efectos a partir de una captura de pantalla cuando se dispone del código.

La tercera, stitched-full-page-capture, resuelve un problema práctico. Una captura de pantalla normal de página completa en sitios con carga diferida y gráficos 3D sale gris y vacía porque se toma antes de que termine el renderizado. La skill recorre la página pantalla a pantalla, espera a que todo se estabilice y une el resultado.

También hay una forma de hacerlo sin grabación de pantalla: conectar el agente a una biblioteca de ejemplos de interfaces activas mediante MCP. El servidor oficial de Mobbin se instala con un comando:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Después, abre una sesión nueva, selecciona el servidor en la lista e inicia sesión en el navegador. El agente tendrá acceso a capturas de aplicaciones reales y funcionales: hay más de 621.500 pantallas. Son capturas de productos terminados, no componentes ni código. Una advertencia importante: el servidor de Mobbin no funciona con el plan gratuito; está disponible en los planes de pago (en julio de 2026). Hay un artículo aparte sobre Google Stitch que explica cómo conectar servicios externos a un agente y usar el mismo método para incorporar un sistema de diseño a Claude Code.

Paso a paso: un sitio web animado en una tarde#

1. Configura un proyecto

   Si aún no tienes un proyecto, empieza con una carpeta vacía. Créala, ábrela en una terminal y ejecuta claude allí. Para la primera instrucción, pide una estructura inicial: «crea el esqueleto de un sitio web de una sola página para mi negocio (describe de qué se trata), con HTML y CSS simples, sin bibliotecas». Aparecerán varios archivos: esa es la raíz del proyecto, donde a partir de ahora ocurrirá todo.

2. Añade las reglas a CLAUDE.md

   Copia el bloque Anti-Generic Guardrails en un archivo CLAUDE.md en la raíz del proyecto. Si no existe, pídele al agente que lo cree. Las reglas están escritas para Tailwind; si tu estructura inicial usa CSS simple, dile al agente: «aplica estos principios al CSS normal»; el significado de las reglas no cambia. Consulta un análisis de las cuatro reglas para CLAUDE.md para saber cómo funciona el propio archivo y qué más incluir.

3. Instala la skill frontend-design

   Usa el plugin example-skills o copia la carpeta frontend-design, como se describe arriba. Puedes comprobar que la skill se ha cargado con el comando /doctor.

4. Elige una dirección visual

   Una, no dos ni tres. Mezclar el estilo documental brutalista con el minimalismo beige te dará precisamente el promedio que intentas evitar.

5. Crea una página estática

   Sin una sola animación. Primero van la tipografía, el espaciado y la cuadrícula. Pídele al agente que inicie una vista previa local y abre la dirección que te dé. Para verla en el teléfono, di: «ejecútalo para que se abra en otros dispositivos de mi red» y el agente te dará una dirección.

6. Añade una escena de movimiento

   Solo una. Normalmente será la primera pantalla: aparece el titular y una capa del fondo se mueve más despacio que el texto. Dale al agente el archivo llms.txt de la biblioteca y describe la escena de forma concreta: qué se mueve, dónde y durante cuántos milisegundos. No cambies la opacidad de la primera pantalla; más abajo hay una sección aparte que explica por qué.

7. Añade una regla para reducir el movimiento

   Aplica la regla CSS y la configuración JavaScript de movimiento reducido de la sección de accesibilidad. Comprueba la página con movimiento reducido activado antes de publicarla.

8. Publica y comprueba la velocidad

   Publica en cualquier servicio gratuito de alojamiento estático, como Vercel, Netlify o GitHub Pages. Pídele al agente: «publica este proyecto en Vercel y dame el enlace». Solo después de publicarlo, analiza la URL resultante con PageSpeed Insights: el servicio funciona con URL públicas y no puede acceder a una página local. Fíjate en «Largest Contentful Paint»: el tiempo que tarda en mostrarse el elemento más grande; la zona verde llega hasta 2,5 segundos. El agente puede medir la versión local antes de publicarla: Chrome DevTools MCP la abrirá en Chrome y mostrará la misma métrica.

El paso seis es donde resulta más fácil estropear el trabajo de los cinco anteriores.

¿Por qué el exceso de animación hace que un sitio parezca aún más generado por IA?#

Aquí es donde se viene abajo el razonamiento de casi todo el mundo que se acerca al tema: muy poca animación parece barata, así que hay que añadir más.

Eso aparece precisamente en la skill frontend-design que instalaste para mejorar el diseño. Anthropic advierte contra los excesos en la propia herramienta que el agente usa para decorar la página.

También enumera otras técnicas manidas: un número grande con un pequeño texto y un acento en degradado como respuesta estándar a cualquier tarea; bloques numerados 01 / 02 / 03, apropiados solo cuando realmente hay una secuencia.

En la práctica, el exceso se ve así: el agente recibe la tarea «añade animaciones» y añade una revelación al desplazarse en cada sección. El encabezado entra deslizándose, aparecen tres tarjetas una tras otra, los testimonios entran desde un lado y el pie de página se desvanece. Cada efecto por sí solo está bien. Juntos crean una página que nunca deja de moverse y no destaca nada.

Un sitio web vivo funciona de otra manera: una escena deliberada, normalmente en la primera pantalla, y moderación después. El movimiento funciona como énfasis: tiene sentido siempre que recaiga sobre una sola palabra.

Eso te da una regla para la instrucción. Formúlala así: «crea una escena en la primera pantalla y deja todo lo demás estático». Solo son unas pocas palabras distintas de «añade animaciones», pero el resultado es un orden de magnitud mejor.

¿Cómo perjudican las animaciones la velocidad de un sitio web?#

Las tres métricas que Google usa para evaluar una página son: el tiempo que tarda en mostrarse el elemento más grande —no más de 2,5 segundos—; la respuesta a una interacción —no más de 200 milisegundos—; y el desplazamiento de la disposición —no más de 0,1—. Se miden en el percentil 75 de las visitas reales.

Veamos por qué importa en este caso. Por defecto, el agente crea una revelación así: establece la opacidad de una sección en cero y luego quita ese valor cuando la sección entra en la ventana visible. Si esa revelación está en la primera pantalla, la imagen puede haberse cargado y decodificado por completo, pero la métrica no la contará hasta que empiece el renderizado. Es peor si un script quita la opacidad después de la carga: la métrica espera entonces a que termine todo el script.

Hay dos maneras de corregirlo. Una es empezar la revelación con una opacidad baja pero distinta de cero, para que cuente el renderizado inicial. La otra es dejar la opacidad intacta en la primera pantalla y animar solo el desplazamiento.

El segundo problema es qué resulta barato de animar y qué resulta caro.

En palabras sencillas: el navegador ensambla la imagen en capas, y los cambios de posición y opacidad se producen en el último paso, que es el más barato. Cualquier otra cosa le obliga a recalcular la página. Las mediciones de esa misma documentación indican que animar con los desplazamientos top y left requiere 37 milisegundos para la disposición y 79 para el renderizado; el mismo efecto visual con transform requiere cero en ambos casos.

Y esta es una contradicción que conviene recordar: la opacidad es barata de componer, pero descalifica un elemento de la métrica de velocidad. Por tanto, una animación barata para el navegador y una segura para el rendimiento son dos cosas distintas.

Una cosa más sobre la propiedad will-change, que a los agentes les encanta añadir «para optimizar». La documentación de MDN dice lo contrario:

También dice que la propiedad está pensada como último recurso para problemas de rendimiento existentes. No sirve para prevenirlos. Una línea como will-change: transform, opacity en cincuenta elementos es una señal típica de código generado.

La historia es más sencilla con el desplazamiento de la disposición. La documentación de Google no culpa a las animaciones; al contrario, las transiciones cuidadosas ayudan a actualizar el contenido sin sobresaltar al lector. La receta es la misma: cambia la escala con transform en vez de width y height, y desplaza con offsets en vez de coordenadas.

¿Y las personas a las que el movimiento puede perjudicar físicamente?#

Esta sección importa por algo más que simple cortesía. El público que compra a una persona dueña de un negocio está formado precisamente por personas de cuarenta años o más.

El consorcio W3C describe las consecuencias sin suavizarlas: náuseas y migrañas, a veces tan graves que obligan a tumbarse.

Puedes solucionarlo con tres líneas de estilos:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Hay tres puntos que conviene tener en cuenta.

Define la animación como comportamiento predeterminado y desactívala dentro de esta regla; así, la página se degrada de forma más segura que si haces lo contrario.

La especificación dice «elimina, reduce o sustituye»; eliminar por completo ni siquiera es la primera opción. Sustituir una entrada brusca por un fundido breve funciona mejor que cortarla por completo: desactivar todas las animaciones rompe los indicadores de carga y las barras de progreso.

Las animaciones controladas por JavaScript necesitan gestionar la preferencia por separado; cambiar duraciones CSS no cancela una línea de tiempo GSAP. Guardar matchMedia(...).matches en una variable no hace nada sin una rama que lo utilice. En GSAP, mantén el elemento visible en el HTML/CSS normal y crea movimiento solo cuando el usuario lo permita:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

El título no debe tener un estilo base oculto ni desplazado. Con movimiento reducido permanece visible y estático. Si cambia la preferencia con la página abierta, GSAP revierte la animación cuando deja de coincidir la consulta. mm.revert() también elimina la animación recogida al desmontar. En Motion, implementa la rama equivalente en su configuración; la regla CSS por sí sola no basta. Consulta la documentación de ciclo de vida y limpieza de GSAP matchMedia.

También hay un criterio formal de accesibilidad que conviene tener presente. WCAG 2.2.2, un criterio de nivel A, exige que el usuario pueda detener cualquier contenido que se mueva, parpadee o se desplace automáticamente, dure más de cinco segundos y se muestre junto a otro contenido. Esto se aplica a los carruseles que rotan automáticamente y a los banners de desplazamiento infinito que los agentes insertan con facilidad.

Siete puntos donde falla#

1. La primera pantalla permanece oculta hasta que aparece con un fundido. Un elemento con opacidad cero no cuenta como candidato para la métrica de renderizado. Es el error más costoso porque perjudica una métrica que afecta a la clasificación en los buscadores.

2. Todo está animado. Cada sección se desliza y cada tarjeta aparece de golpe. Anthropic dice claramente que esto aumenta la impresión de diseño generado.

3. Scrolljacking. Ocurre cuando un sitio web sustituye el comportamiento normal de la rueda del ratón por su propia lógica «cinematográfica».

En el mismo estudio, la mayoría de los participantes sufrió al menos una desorientación leve.

4. Se animan las propiedades de la disposición. Coordenadas y dimensiones en vez de transformaciones. 37 y 79 milisegundos frente a cero.

5. Las animaciones duran demasiado. El intervalo útil es de 100 a 400 milisegundos; 400 ya es muy lento y solo es adecuado para movimientos amplios. Los agentes suelen usar por defecto un segundo entero.

Según sus conclusiones, el intervalo útil va de 100 a 400 milisegundos; 400 ya es muy lento y solo sirve para movimientos amplios. Los agentes suelen usar por defecto un segundo entero.

6. No hay una regla para reducir el movimiento. El agente no la añadirá por su cuenta.

7. El sitio web se vuelve más lento con cada interacción. Específico de React: una animación creada sin una referencia al elemento y sin limpieza se multiplica con cada actualización del componente. Poco a poco, la página empieza a ralentizarse sin motivo aparente.

Hay una octava trampa. El enfoque de «el agente hace una captura de pantalla y corrige lo que ve» funciona muy bien en páginas estáticas, pero con elementos animados atrapa al agente en un ciclo interminable de cambios: ve un fotograma intermedio, cree que es un error, lo corrige y ve otro fotograma intermedio. Además, cada captura consume contexto.

¿Cuánto cuesta y cómo evitar gastar el límite de un mes en un solo sitio web?#

Una historia habitual en las comunidades anglófonas de programación asistida por IA: alguien crea una página llamativa con un recorrido espacial al desplazarse, publica el resultado y la conversación revela que ese único sitio consumió todo su cupo mensual.

Es de esperar. Las animaciones cuestan más que el trabajo de diseño normal por varios motivos a la vez. No puedes comprobar el resultado leyendo el código: hace falta iterar. Cada cambio obliga a volver a leer los archivos. Y el ciclo de capturas de pantalla en elementos en movimiento añade pasadas innecesarias.

Qué ayuda:

Crea una escena cada vez y deja el resultado cerrado. Una petición única de «añade animaciones a todo el sitio» garantiza un gasto excesivo. Puedes desactivar la verificación mediante capturas de pantalla en los elementos animados y revisarlos tú mismo visualmente. Mantén CLAUDE.md breve para que las reglas no consuman contexto en cada solicitud. Y dale al agente el archivo llms.txt de la biblioteca de antemano; de lo contrario, inventará un método de conexión obsoleto y luego depurará su propia invención.

El artículo por qué Claude Code vuelve a leer todo el proyecto explica dónde se gastan los tokens al trabajar en un proyecto; el artículo cómo no agotar los límites de Claude Code trata formas de controlar el uso.

¿Qué sigue?#

Crea tu primera página siguiendo los ocho pasos. Elige una dirección visual, crea una escena en la primera pantalla y comprueba la velocidad.

Para tus próximos pasos, Ailoot.