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: rescatado 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 upstream. Este skill es
el rescate 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, app, panel, artefacto, componente o UI.
- El usuario pide hacer una interfaz más pulida, distintiva, bonita o menos genérica.
- La implementación necesita jerarquía visual, tipografía, color, movimiento, diseño e interacción.
- La UI actual funciona pero se percibe plana, genérica, basada en plantillas o desajustada para la audiencia.
Dirección de Diseño
Antes de codificar, elige una dirección específica:
- Propósito: ¿qué trabajo hace la interfaz?
- Audiencia: ¿quién repite este flujo de trabajo y qué necesita escanear primero?
- Tono: utilitario, editorial, lúdico, industrial, refinado, técnico, maximalista, minimalista, denso, tranquilo 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, capacidad de respuesta y sistema de diseño existente.
Ajusta la dirección al dominio. Una herramienta de operaciones SaaS debería ser generalmente densa, silenciosa y escaneable. Un portafolio, página de lanzamiento, juego o pieza editorial puede ser más expresiva. 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 usable 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, jugabilidad, gráficos o medios inspeccionables.
- Prefiere tipografía y espaciado contextuales sobre texto heroico genérico sobredimensionado.
- Mantén las paletas multidimensionales: evita una UI dominada por una sola familia de matices.
- Usa variables CSS o tokens de diseño existentes para que la dirección se mantenga coherente entre estados.
- Diseña restricciones responsivas 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 hover.
- Usa 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 recurras a patrones generados comunes: gradientes morados, blobs decorativos, tarjetas sobredimensionadas, texto heroico vago o medios atmosféricos estilo stock.
- No agregues tarjetas de UI 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 agregues 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 interfaz 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 monocromática.
- Se usan iconos para acciones de herramienta familiares cuando están disponibles.
- El diseño responsivo 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 desviarse.