Diseño de interfaz

Fuente: Contenido adaptado de anthropics/skills (MIT).

Esta habilidad guía la creación de interfaces frontales distintivas y de nivel de producción que evitan la estética genérica de "descuido de IA". Implemente código de trabajo real con atención excepcional a los detalles estéticos y las opciones creativas.

El usuario proporciona los requisitos de la interfaz: un componente, página, aplicación o interfaz para construir. Pueden incluir contexto sobre el propósito, la audiencia o limitaciones técnicas.

Pensamiento de diseño

Antes de codificar, comprenda el contexto y comprométase con una dirección estética ATREVIDA:

• Propósito: ¿Qué problema resuelve esta interfaz? ¿Quién lo usa?
• Tono: Elige un extremo: brutalmente minimalista, caos maximalista, retrofuturista, orgánico/natural, lujoso/refinado, juguetón/parecido a un juguete, editorial/revista, brutalista/crudo, art déco/geométrico, suave/pastel, industrial/utilitario, etc. Hay muchísimos sabores para elegir. Úselos como inspiración, pero diseñe uno que sea fiel a la dirección estética.
• Restricciones: Requisitos técnicos (marco, rendimiento, accesibilidad).
• Diferenciación: ¿Qué hace que esto sea INOLVIDABLE? ¿Qué es lo único que alguien recordará?

CRÍTICO: Elija una dirección conceptual clara y ejecútela con precisión. Tanto el maximalismo audaz como el minimalismo refinado funcionan: la clave es la intencionalidad, no la intensidad.

Luego implemente el código de trabajo (HTML/CSS/JS, React, Vue, etc.) que es:

• Funcional y de calidad de producción
• Visualmente impactante y memorable
• Cohesivo con un claro punto de vista estético.
• Meticulosamente refinado en cada detalle.

Pautas de estética del frontend

Concentrarse en:

• Tipografía: elija fuentes hermosas, únicas e interesantes. Evite fuentes genéricas como Arial e Inter; opte en su lugar por opciones distintivas que eleven la estética del frontend; opciones de fuentes inesperadas y con carácter. Combine una fuente de visualización distintiva con una fuente de cuerpo refinada.
• Color y tema: Comprométete con una estética cohesiva. Utilice variables CSS para mantener la coherencia. Los colores dominantes con acentos nítidos superan a las paletas tímidas y distribuidas uniformemente.
• Movimiento: utiliza animaciones para efectos y microinteracciones. Priorice las soluciones solo CSS para HTML. Utilice la biblioteca Motion para React cuando esté disponible. Concéntrese en los momentos de alto impacto: una carga de página bien orquestada con revelaciones escalonadas (animación-retraso) genera más placer que las microinteracciones dispersas. Utilice estados de desplazamiento y desplazamiento que sorprendan.
• Composición espacial: diseños inesperados. Asimetría. Superposición. Flujo diagonal. Elementos rompedores de red. Espacio negativo generoso O densidad controlada.
• Fondos y detalles visuales: cree atmósfera y profundidad en lugar de utilizar colores sólidos de forma predeterminada. Agregue efectos contextuales y texturas que coincidan con la estética general. Aplique formas creativas como mallas de degradado, texturas ruidosas, patrones geométricos, transparencias en capas, sombras dramáticas, bordes decorativos, cursores personalizados y superposiciones de grano.

NUNCA utilice estéticas genéricas generadas por IA, como familias de fuentes usadas en exceso (Inter, Roboto, Arial, fuentes del sistema), esquemas de color clichés (particularmente degradados morados sobre fondos blancos), diseños y patrones de componentes predecibles, y diseños sencillos que carecen de un carácter específico del contexto.

Interprete creativamente y tome decisiones inesperadas que parezcan genuinamente diseñadas para el contexto. Ningún diseño debería ser igual. Varíe entre temas claros y oscuros, diferentes fuentes, diferentes estéticas. NUNCA converjan en opciones comunes (Space Grotesk, por ejemplo) entre generaciones.

IMPORTANTE: Haga coincidir la complejidad de la implementación con la visión estética. Los diseños maximalistas necesitan un código elaborado con amplias animaciones y efectos. Los diseños minimalistas o refinados necesitan moderación, precisión y una cuidadosa atención al espaciado, la tipografía y los detalles sutiles. La elegancia proviene de ejecutar bien la visión.

Recuerde: Claude es capaz de realizar un trabajo creativo extraordinario. No se contenga, muestre lo que realmente se puede crear cuando se piensa fuera de lo común y se compromete plenamente con una visión distintiva.

Archivos de recursos

LICENCIA.txt

Descargar LICENCIA.txt

Recurso binario

Ver en GitHub

Ver en GitHub