¿Qué hace Dirección de Diseño Frontend?
Usa este skill cuando el trabajo no sea solo hacer que la UI funcione, sino que se sienta intencionada, pulida y adecuada al dominio del producto.
Fuente: recuperado del PR comunitario obsoleto #1659 por linus707.
Nota: ECC intencionalmente no reempaqueta el skill canónico frontend-design de Anthropic.
Instálalo desde anthropics/skills cuando quieras el skill oficial ascendente. Este skill es la recuperación
de la dirección de diseño específica de ECC de la guía local útil de #1659.
Cuándo Usarlo
- El usuario pide construir una página web, aplicación, panel, artefacto, componente o UI.
- El usuario pide hacer una interfaz más pulida, distintiva, hermosa o menos genérica.
- La implementación necesita jerarquía visual, tipografía, color, movimiento, diseño e interacciones.
- La UI actual funciona pero se percibe plana, genérica, con plantillas o desajustada para la audiencia.
Dirección de Diseño
Antes de programar, elige una dirección específica:
- Propósito: ¿qué trabajo hace la interfaz?
- Audiencia: ¿quién repite este flujo de trabajo y qué necesita ver primero?
- Tono: utilitario, editorial, lúdico, industrial, refinado, técnico, maximalista, minimalista, denso, calmado u otra dirección explícita.
- Detalle memorable: una idea de diseño que haga que el resultado se sienta intencionado.
- Restricciones: framework, accesibilidad, rendimiento, adaptabilidad y sistema de diseño existente.
Adapta la dirección al dominio. Una herramienta SaaS de operaciones debería ser generalmente densa, silenciosa y escaneable. Un portafolio, página de lanzamiento, juego o pieza editorial puede ser más expresivo. No fuerces una composición de página de aterrizaje en una herramienta que necesita uso diario repetido.
Guía de Implementación
- Construye la experiencia utilizable real como la primera pantalla, a menos que el usuario pida explícitamente texto de marketing.
- Usa componentes, tokens, bibliotecas de iconos y patrones de enrutamiento existentes del proyecto antes de introducir un nuevo sistema visual.
- Usa activos visuales reales o generados cuando la interfaz dependa de imágenes, productos, lugares, personas, juego, gráficos o medios inspeccionables.
- Prefiere tipografía contextual y espaciado sobre texto de héroe genérico sobredimensionado.
- Mantén paletas multidimensionales: evita una UI dominada por una sola familia de tonos.
- Usa variables CSS o tokens de diseño existentes para que la dirección se mantenga coherente entre estados.
- Diseña restricciones de diseño adaptable explícitamente: las cuadrículas, relaciones de aspecto, tamaños mín/máx, barras de herramientas estables y controles de formato fijo no deben cambiar cuando aparecen etiquetas o estados flotantes.
- Usa el movimiento con moderación pero con intención. Prefiere transiciones de alta señal que aclaren el estado sobre animaciones decorativas.
- Verifica que el texto encaje en móvil y escritorio. Las etiquetas largas deben ajustarse o redimensionarse limpiamente en lugar de desbordarse.
Antipatrones
- No uses por defecto patrones generados comunes: degradados púrpura, formas decorativas, tarjetas sobredimensionadas, texto de héroe vago o medios atmosféricos genéricos.
- No añadas tarjetas dentro de otras tarjetas.
- No uses un solo estilo decorativo en todas partes cuando el dominio requiera moderación.
- No ocultes el producto, herramienta, objeto o flujo de trabajo principal detrás de secciones de marketing genéricas.
- No añadas una nueva dependencia para un adorno de diseño a menos que claramente se justifique.
- No describas las características de la UI dentro de la UI cuando los controles puedan hablar por sí mismos.
Lista de Verificación de Revisión
- El primer viewport comunica inmediatamente el producto, flujo de trabajo u objeto.
- La jerarquía visual soporta el escaneo y el uso repetido.
- La tipografía encaja en el contenedor y no se superpone con contenido adyacente.
- Las elecciones de color tienen contraste y no colapsan en una paleta de un solo tono.
- Los iconos se usan para acciones de herramientas familiares cuando estén disponibles.
- El diseño adaptable tiene dimensiones estables para tableros, cuadrículas, barras de herramientas, controles, mosaicos y contadores.
- Los activos se renderizan y transmiten el tema en lugar de actuar como relleno.
- El movimiento mejora la orientación y no enmascara la lentitud.
- El resultado coincide con las convenciones frontend existentes del repositorio a menos que haya una razón clara para apartarse.