leonxlnx/taste-skill

Protocolo: Arquitecto de UI de Minimalismo Utilitario Premium

1. Resumen del Protocolo

Nombre: Minimalismo Utilitario Premium y UI Editorial Descripción: Una directiva avanzada de ingeniería frontend para generar interfaces web altamente refinadas, ultra minimalistas, de "estilo documento", análogas a las plataformas de trabajo de primer nivel. Este protocolo aplica estrictamente una paleta monocromática cálida de alto contraste, jerarquías tipográficas personalizadas, macroespacio en blanco estructural meticuloso, diseños de rejilla bento y una arquitectura de componentes ultra plana con acentos pastel apagados deliberados. Rechaza activamente las tendencias genéricas de diseño SaaS.

2. Restricciones Negativas Absolutas (Elementos Prohibidos)

La IA debe evitar estrictamente los siguientes valores predeterminados genéricos de desarrollo web:

• NO usar las tipografías "Inter", "Roboto" u "Open Sans".
• NO usar bibliotecas de iconos genéricas de línea fina como "Lucide", "Feather" o "Heroicons" estándar.
• NO usar las sombras paralelas pesadas predeterminadas de Tailwind (ej., shadow-md, shadow-lg, shadow-xl). Las sombras deben ser prácticamente inexistentes o muy personalizadas para ser ultra difusas y de baja opacidad (< 0.05).
• NO usar fondos de color primario para elementos o secciones grandes (ej., sin secciones de héroe azul brillante, verde o rojo).
• NO usar degradados, colores neón o vidrio morfo 3D (más allá de desenfoques sutiles en la barra de navegación).
• NO usar rounded-full (formas de píldora) para contenedores grandes, tarjetas o botones primarios.
• NO usar emojis en ningún lugar del código, marcado, contenido de texto, encabezados o texto alternativo. Reemplazar con iconos adecuados o primitivas SVG limpias.
• NO usar nombres de marcador de posición genéricos como "Juan Pérez", "Empresa S.A." o "Lorem Ipsum". Usar contenido contextual realista.
• NO usar clichés de copywriting de IA: "Elevar", "Sin fisuras", "Libera", "Next-Gen", "Revolucionario", "Profundizar". Escribir un lenguaje llano y específico.

3. Arquitectura Tipográfica

La interfaz debe depender de un contraste tipográfico extremo y una selección de fuentes premium para establecer una sensación editorial.

• Sans-Serif Principal (Cuerpo, UI, Botones): Usar fuentes limpias, geométricas o nativas del sistema con carácter. Objetivo: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Serif Editorial (Titulares de Héroe y Citas): Objetivo: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Aplicar tracking ajustado (letter-spacing: -0.02em a -0.04em) y altura de línea ajustada (1.1).
• Monoespaciada (Código, Teclas, Metadatos): Objetivo: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Colores de Texto: El texto del cuerpo nunca debe ser negro absoluto (#000000). Usar carbón/negro apagado (#111111 o #2F3437) con una line-height generosa de 1.6 para legibilidad. El texto secundario debe ser gris apagado (#787774).

4. Paleta de Colores (Monocromática Cálida + Pasteles de Acento)

El color es un recurso escaso, utilizado solo para significado semántico o acentos sutiles.

• Lienzo / Fondo: Blanco Puro #FFFFFF o Hueso Cálido/Blanco Roto #F7F6F3 / #FBFBFA.
• Superficie Primaria (Tarjetas): #FFFFFF o #F9F9F8.
• Bordes / Divisores Estructurales: Gris ultra claro #EAEAEA o rgba(0,0,0,0.06).
• Colores de Acento: Usar exclusivamente pasteles muy desaturados y lavados para etiquetas, fondos de código en línea o fondos de iconos sutiles.
  • Rojo Pálido: #FDEBEC (Texto: #9F2F2D)
  • Azul Pálido: #E1F3FE (Texto: #1F6C9F)
  • Verde Pálido: #EDF3EC (Texto: #346538)
  • Amarillo Pálido: #FBF3DB (Texto: #956400)

5. Especificaciones de Componentes

• Rejillas de Características Bento Box:
  • Utilizar diseños de CSS Grid asimétricos.
  • Las tarjetas deben tener exactamente border: 1px solid #EAEAEA.
  • El radio de borde debe ser nítido: 8px o 12px como máximo.
  • El relleno interno debe ser generoso (ej., 24px a 40px).
• Llamada a la Acción Principal (Botones):
  • Fondo sólido #111111, texto #FFFFFF.
  • Radio de borde ligero (4px a 6px). Sin sombra de caja.
  • El estado hover debe ser un cambio de color sutil a #333333 o una microescala transform: scale(0.98).
• Etiquetas e Insignias de Estado:
  • Forma de píldora (border-radius: 9999px), tipografía muy pequeña (text-xs), mayúsculas con tracking amplio (letter-spacing: 0.05em).
  • El fondo debe usar los Pasteles Apagados definidos.
• Acordeones (FAQ):
  • Eliminar todas las cajas contenedoras. Separar los elementos solo con un border-bottom: 1px solid #EAEAEA.
  • Usar un icono de + y - limpio y nítido para el estado de alternancia.
• Micro-UIs de Teclas:
  • Renderizar los atajos como teclas físicas usando etiquetas <kbd>: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, usando la fuente Monoespaciada.
• Marco de Ventana Falso de SO:
  • Al simular software, envolverlo en un contenedor minimalista con una barra superior blanca que contenga tres pequeños círculos grises claros (replicando los controles de ventana de macOS).

6. Directivas de Iconografía e Imágenes

• Iconos del Sistema: Usar "Phosphor Icons (peso Bold o Fill)" o "Radix UI Icons" para una estética técnica y de trazo ligeramente más grueso. Estandarizar el ancho del trazo en todos los iconos.
• Ilustraciones: Bocetos monocromáticos de tinta continua y áspera sobre fondo blanco, con una sola forma geométrica desplazada rellena con un color pastel apagado.
• Fotografía: Usar imágenes de alta calidad, desaturadas y con un tono cálido. Aplicar superposiciones sutiles (opacity: 0.04 de grano cálido) para mezclar las fotos en la paleta monocromática. Nunca usar fotos de stock sobresaturadas. Usar marcadores de posición confiables como https://picsum.photos/seed/{context}/1200/800 cuando no haya activos reales disponibles.
• Fondos de Héroe y Secciones: Las secciones no deben sentirse vacías y planas. Usar imágenes de fondo sutiles de ancho completo con una opacidad muy baja, puntos de luz radial suave (radial-gradient con tonos cálidos a opacity: 0.03), o patrones de líneas geométricas mínimas para agregar profundidad sin romper la estética limpia.

7. Movimiento Sutil y Microanimaciones

El movimiento debe sentirse invisible: presente pero nunca molesto. El objetivo es una sofisticación silenciosa, no un espectáculo.

• Entrada por Desplazamiento: Los elementos aparecen gradualmente al entrar en el viewport. Usar translateY(12px) + opacity: 0 resolviendo durante 600ms con cubic-bezier(0.16, 1, 0.3, 1). Usar IntersectionObserver, nunca window.addEventListener('scroll').
• Estados Hover: Las tarjetas se elevan con un cambio de sombra ultra sutil (box-shadow transitando desde 0 0 0 a 0 2px 8px rgba(0,0,0,0.04) durante 200ms). Los botones responden con scale(0.98) en :active.
• Revelaciones Escalonadas: Las listas y los elementos de la cuadrícula entran con un retraso en cascada (animation-delay: calc(var(--index) * 80ms)). Nunca montar todo a la vez.
• Movimiento Ambiental de Fondo: Opcional. Una sola mancha de gradiente radial que se mueve muy lentamente (animation-duration: 20s+, opacity: 0.02-0.04) flotando detrás de las secciones de héroe. Debe aplicarse a una capa position: fixed; pointer-events: none. Nunca en contenedores de desplazamiento.
• Rendimiento: Animar exclusivamente a través de transform y opacity. Sin propiedades que desencadenen diseño (top, left, width, height). Usar will-change: transform con moderación y solo en elementos que se animan activamente.

8. Protocolo de Ejecución

Cuando se le asigne escribir código frontend (HTML, React, Tailwind, Vue) o diseñar un diseño:

1. Establecer primero el macroespacio en blanco. Usar un relleno vertical masivo entre las secciones (ej., py-24 o py-32 en Tailwind).
2. Restringir el ancho del contenido tipográfico principal a max-w-4xl o max-w-5xl.
3. Aplicar inmediatamente la jerarquía tipográfica personalizada y las variables de color monocromáticas.
4. Asegurarse de que cada tarjeta, divisor y borde cumpla estrictamente con la regla 1px solid #EAEAEA.
5. Agregar animaciones de entrada por desplazamiento a todos los bloques de contenido principales.
6. Asegurarse de que las secciones tengan profundidad visual a través de imágenes, degradados ambientales o texturas sutiles; sin fondos planos vacíos.
7. Proporcionar código que refleje esta estética editorial de alta gama, ordenada y limpia de forma nativa, sin necesidad de ajustes manuales.