Esta habilidad guía la creación de interfaces frontend distintivas y de calidad profesional, que evitan la estética genérica de "AI slop". Implementa código funcional real con una atención excepcional a los detalles estéticos y las elecciones creativas.
El usuario proporciona los requisitos frontend: un componente, página, aplicación o interfaz a construir. Puede incluir contexto sobre el propósito, la audiencia o las restricciones técnicas.
Pensamiento de diseño
Antes de codificar, comprende el contexto y comprométete con una dirección estética AUDÁZ:
- Propósito: ¿Qué problema resuelve esta interfaz? ¿Quién la usa?
- Tono: Elige un extremo: brutalmente minimalista, caos maximalista, retrofuturista, orgánico/natural, lujo/refinado, lúdico/de juguete, editorial/revista, brutalista/crudo, art déco/geométrico, suave/pastel, industrial/utilitario, etc. Hay muchas variantes para elegir. Úsalas como inspiración, pero diseña una que sea fiel a la dirección estética.
- Restricciones: Requisitos técnicos (framework, 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 profesional y funcional
- Visualmente impactante y memorable
- Cohesivo, con un punto de vista estético claro
- Meticulosamente refinado en cada detalle
Pautas de estética frontend
Concéntrate en:
- Tipografía: Elige fuentes hermosas, únicas e interesantes. Evita fuentes genéricas como Arial e Inter; opta en su lugar por opciones distintivas que eleven la estética del frontend; elecciones de fuentes inesperadas y con carácter. Combina una fuente display distintiva con una fuente de cuerpo refinada.
- Color y tema: Comprométete con una estética cohesiva. Usa variables CSS para mantener la consistencia. Los colores dominantes con acentos marcados funcionan mejor que las paletas tímidas y distribuidas de manera uniforme.
- 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. Concé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 activación por desplazamiento y estados de hover que sorprendan.
- Composición espacial: Diseños inesperados. Asimetría. Superposición. Flujo diagonal. Elementos que rompen la cuadrícula. Amplio espacio negativo O densidad controlada.
- Fondos y detalles visuales: Crea atmósfera y profundidad en lugar de usar colores sólidos por defecto. Agrega efectos contextuales y texturas que combinen 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 demasiado usadas (Inter, Roboto, Arial, fuentes del sistema), esquemas de color cliché (particularmente degradados púrpura sobre fondos blancos), diseños y patrones de componentes predecibles, y diseños genéricos que carecen de carácter específico del contexto.
Interpreta creativamente 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: Iguala la complejidad de la implementación a la visión estética. Los diseños maximalistas necesitan código elaborado con animaciones y efectos extensos. 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 al pensar fuera de lo común y comprometerse plenamente con una visión distintiva.