/frontend-design
Descripción
¿Qué hace? /frontend-design guía a Claude para crear interfaces de usuario que eviten el estilo genérico de IA: tipografía expresiva, paleta de colores con propósito, microinteracciones, espaciado generoso y detalles visuales que hacen el diseño memorable.
Se activa automáticamente cuando Claude detecta trabajo de frontend (HTML, CSS, React, Vue...), pero también puedes invocarlo explícitamente para indicarle que quieres un diseño con personalidad, no una plantilla anónima.
Ejemplos de uso
Sin /frontend-design, Claude genera algo funcional pero genérico: fondo blanco, botón azul, grid de 3 columnas. Con el skill activo, propone tipografía con carácter, colores que transmiten la personalidad de la marca, animaciones sutiles en los CTAs y un hero con jerarquía visual clara. La diferencia entre una web que se olvida y una que se recuerda.
/frontend-design Crea la página de inicio de carsandrooms.ge con diseño moderno y diferenciador para alquiler de coches en Georgia/frontend-design aplica las directrices de diseño: transición suave en el hover que eleva la tarjeta, imagen con zoom sutil, texto que respira con padding generoso y un CTA con micro-animación al hacer hover. El resultado se siente hecho a medida, no sacado de una plantilla gratuita.
/frontend-design Crea un componente de tarjeta de producto para e-commerce de moda con efecto hover y transiciones suavesCuándo usarlo
Usa /frontend-design al crear o modificar cualquier componente de UI o página web donde la calidad visual importe. El skill se activa automáticamente al detectar trabajo frontend, pero invocarlo explícitamente le indica a Claude que priorizas el carácter visual sobre la funcionalidad básica. Especialmente útil para proyectos donde el diseño es parte del valor del producto.