Este skill guía la creación de interfaces frontend de grado de producción, distintivas, que evitan la estética genérica de "basura de IA". 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, retro-futurista, orgánico/natural, lujo/refinado, lúdico/tipo juguete, editorial/revista, brutalista/crudo, art déco/geométrico, suave/pastel, industrial/utilitario, etc. Hay muchas opciones para elegir. Úsalos como inspiración pero diseña uno 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 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 grado de producción y funcional
- Visualmente impactante y memorable
- Coherente con un punto de vista estético claro
- Meticulosamente refinado en cada detalle
Directrices de estética frontend
Concéntrate en:
- Tipografía: Elige fuentes que sean hermosas, únicas e interesantes. Evita fuentes genéricas como Arial e Inter; opta en cambio por opciones distintivas que eleven la estética del frontend; elecciones 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 coherente. 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 soluciones solo CSS para HTML. Usa la biblioteca Motion para React cuando esté disponible. Enfócate 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 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 recurrir a colores sólidos por defecto. 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 de molde que carecen de carácter específico del contexto.
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: Haz coincidir la complejidad de la implementación con 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 verdaderamente se puede crear al pensar fuera de lo común y comprometerse plenamente con una visión distintiva.
Flujo de trabajo de diseño orientado a tareas
Lee el flujo de trabajo de diseño completo para la clasificación monitor/operar/autor, descubrimiento de contexto, variantes, estados y validación. En productos existentes, su sistema de diseño y la tarea del usuario prevalecen sobre la exploración estética anterior: no fuerces fuentes inusuales, superposición, fondos decorativos o composición de marketing en la interfaz de operación. Usa las herramientas de navegador y archivo disponibles, no un modelo de producto específico. Los catálogos de referencia opcionales son prismer-popular-web-designs y prismer-design-md; cárgalos solo para la tarea solicitada por el usuario.