01 Por qué Claude diseña «en piloto automático»
Si le pides a un modelo de lenguaje una landing sin más contexto, tiende a la media: degradado morado, tarjetas con sombra suave, un número grande con una etiqueta pequeña y la misma tipografía de siempre. No es falta de capacidad, es que sin instrucciones elige lo más probable, y lo más probable es lo que ya has visto mil veces.
Las skills son carpetas con instrucciones, datos y scripts que Claude carga cuando la tarea lo pide. Las cinco de este kit no son plantillas: cada una le da un tipo de criterio distinto. Juntas cubren el ciclo completo de una interfaz, desde decidir la estética hasta revisar que no haya fallos de accesibilidad.
| Skill | Qué aporta | Cuándo usarla |
|---|---|---|
| frontend-design (Anthropic) | Obliga a fijar una dirección visual antes de escribir código | Siempre que empieces una pantalla nueva |
| UI UX Pro Max | Base de datos de estilos, paletas, tipografías y reglas de UX por sector | Cuando no sabes qué estética encaja con tu producto |
| Skills de Emil Kowalski | Criterio de animación: curvas, duraciones, qué animar y qué no | Al añadir transiciones y microinteracciones |
| Huashu Design | Prototipos clicables, presentaciones editables y animaciones exportables | Para maquetas, demos y material de presentación |
| web-design-guidelines (Vercel) | Auditoría con más de 100 reglas, con archivo y línea | Antes de publicar o entregar |
02 Cómo se instalan
Casi todas se instalan con skills, la herramienta de línea de comandos de Vercel Labs para el ecosistema abierto de skills. No hace falta instalarla: npx la descarga al vuelo. Por defecto instala en la carpeta del proyecto; con -g queda disponible en todos tus proyectos, y con -a claude-code la limitas a Claude Code.
# 1. Dirección visual (Anthropic)
npx skills add anthropics/skills --skill frontend-design
# 2. Animación (Emil Kowalski)
npx skills@latest add emilkowalski/skills
# 3. Prototipos, presentaciones y vídeo (Huashu Design)
npx skills add alchaincyf/huashu-design
# 4. Auditor de interfaz (Vercel)
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesUI UX Pro Max se instala como plugin desde dentro de Claude Code, o con su propia herramienta de terminal si usas otros agentes:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillnpm install -g ui-ux-pro-max-cli
uipro init --ai claude # solo este proyecto
uipro init --ai claude --global # todos tus proyectos03 Dirección visual y criterio: frontend-design + UI UX Pro Max
frontend-design es la skill oficial de Anthropic. Hace que Claude piense primero en el tema, el público y la función principal de la pantalla, y que elija paleta, tipografía y composición con intención en lugar de recurrir al patrón de siempre. Funciona mucho mejor si le das una referencia: una captura de una web que te guste, tu manual de marca o fotos de tu producto.
UI UX Pro Max aporta el conocimiento que le falta: un catálogo buscable de estilos (glassmorphism, brutalismo, bento, modo oscuro…), paletas asociadas a tipos de producto, combinaciones de fuentes y reglas de UX por sector. Su generador de sistemas de diseño propone un sistema completo a partir de la descripción de tu proyecto.
Usa frontend-design y UI UX Pro Max. Voy a diseñar la landing de [tu negocio: p. ej. una gestoría para autónomos en Valencia]. Adjunto dos capturas de referencia. Antes de escribir código:
1. Resume en 3 líneas el público y el objetivo de la página.
2. Propón un sistema de diseño (estilo, paleta con códigos hex, pareja tipográfica, radios y espaciado) y justifica cada elección para este sector.
3. Dime qué patrones genéricos vas a evitar.
Cuando te dé el visto bueno, constrúyela responsive con [HTML y Tailwind / React].04 Movimiento que se siente natural
El repositorio de Emil Kowalski reúne varias skills basadas en su experiencia en interfaces: una principal de ingeniería de diseño, otra para crear animaciones desde cero, otra para revisarlas de forma estricta, otra para encontrar dónde tiene sentido animar (y dónde no) y otra para arreglar animaciones que pierden fotogramas. También incluye una versión para React Native y Expo.
Su valor está en los detalles que un agente suele fallar: usar ease-out en entradas, duraciones cortas en elementos pequeños, animar transform y opacity en lugar de propiedades que fuerzan a recalcular el diseño.
Con las skills de animación de Emil Kowalski, revisa las animaciones de [carpeta o componente]. Para cada una dime: qué curva y duración usa, si es adecuada y por qué, y cómo la cambiarías. Después señala dos o tres sitios donde un movimiento sutil mejoraría la experiencia y otros donde conviene no animar nada. Respeta prefers-reduced-motion.05 Prototipos con Huashu Design y auditoría con Vercel
Huashu Design trabaja en HTML: genera prototipos de app que se pueden pulsar, presentaciones que se exportan a un PPTX editable, infografías y animaciones que puede exportar a MP4 o GIF. Suele proponer varias direcciones visuales para que elijas y puede hacer una revisión del diseño en cinco dimensiones. Es útil para validar una idea con un cliente antes de escribir la aplicación real.
web-design-guidelines no diseña: revisa. Descarga las directrices de interfaz más recientes de Vercel, lee los archivos que le indiques y devuelve los problemas en formato archivo:línea: accesibilidad, foco, formularios, tipografía, animación, rendimiento.
Usa Huashu Design. Necesito un prototipo clicable de una app móvil para [idea: p. ej. reservar clases en un centro de pilates] con 4 pantallas: inicio, calendario, detalle de clase y confirmación. Dame 3 direcciones visuales distintas, explícame la diferencia entre ellas y, cuando elija una, conecta las pantallas para que se pueda navegar.Usa web-design-guidelines y audita resources/views y resources/css. Agrupa los problemas por gravedad (bloqueante, importante, menor), indica archivo y línea de cada uno y propón la corrección. No cambies nada todavía: primero quiero la lista.06 Un flujo de trabajo que funciona
-
1
Reúne referencias
Dos o tres capturas de webs que te gusten, logotipo, colores de marca y textos reales. Sin referencias, cualquier skill rinde menos.
-
2
Fija la dirección
Pide a frontend-design y UI UX Pro Max un sistema de diseño razonado y apruébalo antes de que Claude escriba código.
-
3
Construye por secciones
Cabecera, propuesta de valor, servicios, prueba social y contacto. Revisa cada bloque en el navegador antes de seguir.
-
4
Añade el movimiento al final
Con la estructura cerrada, usa las skills de Emil Kowalski para transiciones y microinteracciones.
-
5
Audita y corrige
Pasa web-design-guidelines, corrige los bloqueantes y vuelve a auditar hasta que solo queden detalles menores.
07 Errores habituales
- ✓Pedir «una web bonita» sin referencias ni público objetivo: el resultado vuelve a ser genérico.
- ✓Instalar las skills en un proyecto y esperar que aparezcan en otro: usa -g si las quieres en todos.
- ✓Dejar que Claude invente textos y cifras: dale contenido real o márcalo como provisional.
- ✓Animar todo: el movimiento debe explicar un cambio, no decorar.
- ✓Saltarse la auditoría porque «se ve bien»: los fallos de contraste y foco no se ven a simple vista.
- ✓No reiniciar Claude Code tras instalar: abre una sesión nueva para que cargue las skills.
Preguntas frecuentes
Sí. Las cinco son repositorios públicos en GitHub. Lo que consumes es el uso de tu plan de Claude o de tu API, que depende de cuánto trabajo le pidas.
La herramienta skills instala en muchos agentes (Codex, Cursor, OpenCode y otros) y UI UX Pro Max tiene instaladores para varios asistentes. Las instrucciones son las mismas; cambia la carpeta donde se guardan.
Nómbrala en el prompt («usa frontend-design») y pídele que te explique las decisiones antes de programar. Si sus respuestas siguen las reglas de la skill, la ha cargado.
Suben mucho el listón de lo que obtienes sin uno, pero no conocen tu marca ni a tus clientes. Para proyectos importantes funcionan mejor como herramienta de un diseñador que como sustituto.
Vuelve a ejecutar el comando de instalación con skills@latest. Para UI UX Pro Max instalada con su CLI, usa uipro update.
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.