Esta habilidad guía la creación de interfaces frontend distintivas y de calidad de producción que evitan la estética genérica de IA. Implementa código funcional real con una atención excepcional a los detalles estéticos y las decisiones creativas.
El usuario proporciona los requisitos del frontend: un componente, página, aplicación o interfaz para construir. Puede incluir contexto sobre el propósito, la audiencia o las limitaciones técnicas.
Pensamiento de diseño
Antes de codificar, comprende el contexto y comprométete con una dirección estética AUDAC:
- Propósito: ¿Qué problema resuelve esta interfaz? ¿Quién la usa?
- Tono: Elige un extremo: brutalmente minimalista, caos maximalista, retro-futurista, orgánico/natural, lujoso/refinado, juguetón/tipo juguete, editorial/revista, brutalista/crudo, art déco/geométrico, suave/pastel, industrial/utilitario, etc. Hay tantos sabores para elegir. Úsalos como inspiración, pero diseña uno que sea fiel a la dirección estética.
- Restricciones: Requisitos técnicos (marco de trabajo, rendimiento, accesibilidad).
- Diferenciación: ¿Qué hace que esto sea INOLVIDABLE? ¿Qué es lo único que alguien recordará?
CRÍTICO: Elige una dirección conceptual clara y ejecútala con precisión. Tanto el maximalismo audaz como el minimalismo refinado funcionan: la clave es la intencionalidad, no la intensidad.
Luego implementa código funcional (HTML/CSS/JS, React, Vue, etc.) que sea:
- De calidad de producción y funcional
- Visualmente impactante y memorable
- Cohesivo con un punto de vista estético claro
- Meticulosamente refinado en cada detalle
Directrices de estética frontend
Céntrate en:
- Tipografía: Elige fuentes hermosas, únicas e interesantes. Evita las fuentes genéricas como Arial e Inter; opta en su lugar por opciones distintivas que eleven la estética del frontend; opciones de fuentes inesperadas y con carácter. Combina una fuente de exhibición distintiva con una fuente de cuerpo refinada.
- Color y Tema: Comprométete con una estética cohesiva. Usa variables CSS para la consistencia. Los colores dominantes con acentos marcados superan a las paletas tímidas y distribuidas uniformemente.
- Movimiento: Usa animaciones para efectos y microinteracciones. Prioriza las soluciones solo con CSS para HTML. Usa la librería Motion para React cuando esté disponible. Céntrate en momentos de alto impacto: una carga de página bien orquestada con revelaciones escalonadas (animation-delay) crea más deleite que microinteracciones dispersas. Usa disparadores de scroll y estados de hover que sorprendan.
- Composición espacial: Diseños inesperados. Asimetría. Superposición. Flujo diagonal. Elementos que rompen la cuadrícula. Espacio negativo generoso O densidad controlada.
- Fondos y Detalles Visuales: Crea atmósfera y profundidad en lugar de recurrir a colores sólidos. Agrega efectos contextuales y texturas que coincidan con la estética general. Aplica formas creativas como mallas de degradado, texturas de ruido, patrones geométricos, transparencias en capas, sombras dramáticas, bordes decorativos, cursores personalizados y superposiciones de grano.
NUNCA uses estéticas genéricas generadas por IA, como familias de fuentes sobreutilizadas (Inter, Roboto, Arial, fuentes del sistema), esquemas de color cliché (particularmente degradados morados sobre fondos blancos), patrones de diseño y componentes predecibles, y diseños genéricos que carecen de carácter contextual.
Interpreta de forma creativa y toma decisiones inesperadas que se sientan genuinamente diseñadas para el contexto. Ningún diseño debe ser igual. Varía entre temas claros y oscuros, diferentes fuentes, diferentes estéticas. NUNCA converjas en opciones comunes (Space Grotesk, por ejemplo) entre generaciones.
IMPORTANTE: Empareja la complejidad de la implementación con la visión estética. Los diseños maximalistas necesitan código elaborado con extensas animaciones y efectos. Los diseños minimalistas o refinados necesitan moderación, precisión y atención cuidadosa al espaciado, la tipografía y los detalles sutiles. La elegancia proviene de ejecutar bien la visión.
Recuerda: Claude es capaz de un trabajo creativo extraordinario. No te contengas, muestra lo que realmente se puede crear cuando se piensa fuera de la caja y se compromete plenamente con una visión distintiva.