01 Por qué tus páginas generadas con IA parecen planas
Sin instrucciones específicas, un modelo tiende a lo seguro: degradado morado, tres tarjetas iguales, tipografía por defecto y ningún movimiento, o animaciones mal elegidas, como entradas con curva ease-in que se sienten lentas. El resultado funciona, pero se reconoce a la legua.
Las skills resuelven eso dándole a Claude criterio experto que carga solo cuando la tarea lo pide. Aquí combinamos tres capas: dirección estética, catálogo de estilos y movimiento.
Frontend Design (Anthropic)
Empuja a Claude a elegir una dirección estética clara y con personalidad, con tipografía y paleta propias, en lugar de la plantilla genérica.
UI UX Pro Max
Un catálogo consultable de decenas de estilos de interfaz, paletas por tipo de producto y combinaciones de fuentes de Google Fonts, más reglas de usabilidad.
Skills de Emil Kowalski
Un ingeniero de diseño que ha trabajado en Vercel y Linear recoge sus reglas de animación: curvas, duraciones, qué animar y qué no, rendimiento y revisión.
02 Instalar las tres capas
Las dos primeras se instalan como plugins desde una sesión de Claude Code. Las de Emil Kowalski usan skills, una CLI abierta de Vercel Labs que copia skills de un repositorio a la carpeta de tu agente; necesita Node.js.
/plugin install frontend-design@claude-plugins-official
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillnpx skills@latest add emilkowalski/skills03 Qué aporta cada skill de animación
| Skill | Para qué sirve |
|---|---|
| emil-design-eng | La principal: criterios de animación y detalles de diseño de interfaz |
| animate | Construye una animación desde cero eligiendo curva, duración y propiedades |
| find-animation-opportunities | Busca en tu interfaz dónde el movimiento ayuda de verdad y dónde sobra |
| review-animations | Revisa con reglas estrictas las animaciones que ya tienes |
| animation-performance | Corrige animaciones que pierden fotogramas |
| mobile-native | Ajustes para que la web se sienta nativa en el móvil: estados hover, zonas seguras, zoom en formularios |
04 Crear la página
No hace falta nombrar las skills: Claude las carga cuando detecta trabajo de interfaz. Lo que sí marca la diferencia es darle contexto de negocio y pedirle que proponga antes de construir.
Quiero una landing para [negocio y qué vende] dirigida a [cliente ideal]. Antes de programar, propónme dos direcciones estéticas distintas con su paleta, tipografías y el estilo de movimiento de cada una, y espera a que elija. Después constrúyela con: cabecera con titular y una entrada animada discreta, sección de servicios, prueba social, preguntas frecuentes y llamada a la acción final. Las animaciones deben ser cortas, con curvas de salida, respetar prefers-reduced-motion y no retrasar la lectura del contenido.Revisa la interfaz de este proyecto y dime en qué cinco puntos una animación mejoraría la comprensión o la respuesta al usuario (botones, menús, cambios de estado, aparición de secciones) y en cuáles no conviene animar. Ordénalos por impacto y aplica solo los que te apruebe.05 Revisar antes de publicar
- ✓Ninguna animación de entrada supera el medio segundo ni bloquea el clic.
- ✓Con la opción de reducir movimiento del sistema activada, la página sigue siendo usable y estática.
- ✓En un móvil de gama media el desplazamiento va fluido; si no, pide la revisión de rendimiento.
- ✓El contraste de textos sobre fondos animados o degradados se lee bien.
- ✓El contenido importante se ve sin esperar a que termine ninguna animación.
Haz una revisión estricta de todas las animaciones del proyecto: curva, duración, propiedades animadas, rendimiento y accesibilidad con prefers-reduced-motion. Devuélveme una tabla con el problema, el archivo y la corrección propuesta, y no cambies nada hasta que lo apruebe.06 Publicar la página
-
1
Sube el código a GitHub
Pide a Claude que inicialice Git, haga el primer commit y cree un repositorio privado con la CLI gh. Comprueba antes que no se suben archivos .env.
-
2
Conecta un servicio de alojamiento
Vercel, Netlify o Cloudflare Pages importan el repositorio de GitHub y publican cada cambio automáticamente; todos tienen plan gratuito para webs pequeñas.
-
3
Añade tu dominio
Configura el dominio en el panel del servicio y revisa que la web cargue con HTTPS.
Preguntas frecuentes
Sí. Las skills dan criterio de diseño y animación; Claude lo aplica en HTML y CSS, React, Next.js, Astro o el framework de tu proyecto.
No. Las propias skills de Emil Kowalski insisten en animar solo lo que aporta. Una web llena de efectos se percibe más lenta y menos profesional.
Las skills también se pueden subir en claude.ai como archivo ZIP desde Personalizar, en Skills, pero para construir y probar una web completa Claude Code es más cómodo.
Los plugins se gestionan con /plugin dentro de Claude Code. Las instaladas con la CLI skills se eliminan con npx skills remove seguido del nombre.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.