Cargando la bóveda…
Cargando la bóveda…
Frontend Design (reglas) + UI UX Pro Max (67 estilos) + Skill de Emil Kowalski (animación profesional). Las 3 combinadas hacen que tu landing tenga transiciones, timing y movimiento real — no se ve generada por IA. Setup en 3 comandos.
Le pedís a Claude una landing. Sale correcta. Bonita. Pero algo no convence. Algo se siente plano.
El problema es la falta de movimiento. Sin animación:
Resultado: se ve como una presentación de PowerPoint, no como una app real.
La animación es la diferencia entre un dibujo y una película. Convierte la "página bonita pero plana" en algo que se siente vivo.
Design engineer especializado en interfaces y animación web. Trabajó en empresas como Linear (de las pioneras en motion design web). Empacó su know-how en un skill open source — como tener clases privadas con él.
Es la pieza clave. Las otras 2 skills hacen que el diseño sea correcto. Emil lo hace sentir vivo.
# Skill 1 — Frontend Design (reglas)
claude install-skill https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design
# Skill 2 — UI UX Pro Max (estilos)
npx skills add nextlevelbuilder/ui-ux-pro-max-skill
# Skill 3 — Emil Kowalski (animación)
npx skills add emilkowalski/skill> /skillsLas 3 deben aparecer en la lista.
No necesitás invocarlas explícitamente cada vez. Claude las usa automáticamente cuando detecta que necesita diseñar/animar.
> Creá landing page moderna para startup de IA.
Que tenga:
- Hero con animación de entrada
- 3 columnas de features
- Testimonios
- CTA al final
Colores oscuros con acentos azul.
Las secciones aparecen suavemente al hacer scroll.
Los botones tienen animación al pasar el mouse.Claude:
Sin animación: clickeás y nada visible cambia (excepto la acción).
Con animación: hover suaviza color/sombra, click hace press visible (scale 0.98), loading spinner integrado. Feedback inmediato que confirma al usuario que algo pasa.
Sin animación: secciones aparecen instantáneas al cargar.
Con animación: cada sección fade-in + slight slide-up cuando entra al viewport. Las imágenes con blur-to-sharp. Stagger entre items relacionados (ej: las 3 columnas de features aparecen con 100ms de delay entre cada una).
Sin animación: navegás de A a B, "flash" blanco entre páginas.
Con animación: smooth transition que mantiene contexto visual (página fadea out, próxima fadea in). Sensación de app, no de website estático.
Lo que diferencia animación amateur de profesional no es la cantidad — es el timing:
El skill de Emil mete estos valores por defecto. Te ahorra aprender años de motion design.
> Landing para SaaS B2B "Inventory pro" (gestión inventario).
Audiencia: founders/COOs de retail mediano.
Estética: profesional pero MODERNA. NO la típica SaaS azul aburrida.
Animaciones:
- Hero: typewriter effect en el headline
- Features section: cards aparecen con stagger al scroll
- Numbers: counters que cuentan al ver
- CTA: pulsing sutil que llama atención sin ser intrusivo> Portfolio mío como motion designer.
Estética: minimal + brutal + acento de color VIBRANTE.
Animaciones:
- Cada proyecto: hover con preview de video corto
- Scroll: parallax sutil en imágenes
- Page transitions: morph entre páginas (advanced)
- Cursor custom: cursor que sigue mouse con delay> Marketing site para app móvil de fitness.
Estética: enérgica + motivacional + colores brillantes.
Animaciones:
- Phone mockups: scroll-controlled (parallax 3D)
- Stats: bars que llenan al aparecer
- Testimonios: carousel con auto-play + drag
- Download buttons: bounce sutil al hover> Docs site para mi librería de utils JS.
Animaciones SUTILES (no distraen del contenido):
- Sidebar items con highlight suave
- Code examples con copy button que confirma
- Search abrir con fade rápido
- Skeleton loaders mientras carga búsquedaSi todo se mueve, nada llama la atención. Animá lo que necesita feedback (clicks, scroll), dejá quieto lo que es contenido pasivo.
500ms para hover se siente lento y rompe el flow. 150-200ms es el sweet spot. Si dudás, hacelo más rápido.
Loops constantes (bouncing arrows, pulsing borders sin razón) distraen del CTA real. Usá animaciones que terminan (one-shot al entrar al viewport).
prefers-reduced-motion#Algunos usuarios desactivan animaciones por sensibilidad vestibular. Respetá la media query. Las 3 skills lo manejan por defecto pero verificá.
Animar width/height causa reflow. Animá transform y opacity. Si tu animación lagguea en mobile, no aporta — solo molesta.
> Después de generar las animaciones, abrí con Playwright,
grabá video de 5s del scroll completo, evaluá el timing y
el smoothness. Si algo se ve mal, ajustá.Claude ve sus propias animaciones y las corrige.
Si tu marca tiene personalidad definida (energética, calma, formal), las animaciones deben respetarla:
> Cargá brand pack. Las animaciones deben respetar la
personalidad de la marca: [energética/sutil/formal].5 skills marketing → Brand Guidelines.
Las animaciones a veces meten dependencias gordas (Framer Motion + GSAP). Code Simplifier (en Claude fábrica a pro) te corta lo innecesario.
Una vez que tu página está lista, publicala:
> Crear repositorio GitHub para este proyecto y subí todo
el código.Después en vercel.com:
5 minutos y tenés URL pública con tu página animada en vivo.