Frontend Design

• Construir un nuevo componente de UI o página donde la calidad visual y la distinción importan, no solo la corrección funcional.
• Crear un prototipo de producto o página de aterrizaje y quieres algo que parezca genuinamente diseñado en lugar de autogenerado.
• Explorar direcciones creativas para una marca, aplicación o campaña antes de comprometerse con un sistema de diseño.
• Reemplazar una interfaz existente aburrida o genérica con algo que tenga un punto de vista estético claro.

• Si necesitas cumplimiento estricto de marca/sistema de diseño — esta habilidad prioriza la distinción creativa y puede divergir de las guías de estilo existentes.
• Si solo necesitas una API de backend o capa de datos — esta habilidad está enfocada exclusivamente en el código de presentación frontend.

Antes de escribir una sola línea de código, la habilidad de Frontend Design se compromete con un tono conceptual claro — brutalmente minimalista, maximalista, orgánico, de lujo, industrial, editorial, y muchos más. El resultado es una interfaz con un punto de vista coherente, no un compuesto genérico.

Las combinaciones de fuentes genéricas (Inter, Roboto, Arial) se evitan explícitamente en favor de combinaciones de fuentes de display y cuerpo con carácter propio. Las paletas de colores utilizan variables CSS con tonos dominantes y acentos marcados, en lugar de esquemas tímidos y distribuidos uniformemente.

Las animaciones se utilizan de forma estratégica: revelaciones orquestadas al cargar la página con retardos escalonados, efectos activados por el desplazamiento y estados hover que sorprenden. Se prefieren soluciones solo con CSS para HTML; la biblioteca Motion se utiliza para React cuando está disponible.

Los fondos van más allá de los colores sólidos: mallas de degradado, texturas de ruido, patrones geométricos, transparencias en capas, sombras dramáticas, superposiciones de grano y bordes decorativos se utilizan de forma contextual para crear profundidad y atmósfera.

Los diseños favorecen la asimetría, la superposición, el flujo diagonal y los elementos que rompen la cuadrícula. El espacio negativo generoso o la densidad controlada se eligen de manera deliberada — nunca por defecto.

El código generado es funcional y de nivel productivo, compatible con HTML/CSS/JS, React, Vue y otros frameworks. La complejidad se adapta a la visión estética: los diseños maximalistas incluyen animaciones elaboradas; los minimalistas ofrecen precisión y contención.

Un fundador quiere una página de inicio que destaque entre la competencia. La habilidad de Frontend Design elige una dirección estética atrevida — por ejemplo, un estilo editorial/de revista con una jerarquía tipográfica sólida — y genera una página completamente funcional con animaciones de desplazamiento y un sistema de colores distintivo.

Un diseñador o desarrollador necesita un sitio personal que refleje su personalidad. La habilidad evita estructuras con aspecto de plantilla y produce algo memorable, quizás con un diseño asimétrico, un cursor personalizado y una combinación de fuentes cuidadosamente elegida.

Un equipo necesita un componente de interfaz con gran densidad de datos — una tabla, una tarjeta de gráfico o un panel de filtros — que aun así transmita una sensación de diseño cuidado. La habilidad de Frontend Design aplica una estética utilitaria o de minimalismo refinado, con un espaciado meticuloso y movimientos sutiles para lograr que el componente se sienta pulido y profesional.

Una página de campaña debe ser inmersiva y visualmente impactante. La habilidad puede producir una página maximalista, repleta de animaciones con efectos visuales en capas, tipografía dramática y animaciones de entrada orquestadas que generan un deleite genuino.