SuperDesign

• Necesitas un agente de IA que genere código de interfaz de usuario (HTML/CSS/Tailwind) con un aspecto pulido y moderno, no con plantillas genéricas.
• Estás creando páginas de destino, paneles de control o interfaces con muchos componentes y deseas que se siga automáticamente un proceso de diseño estructurado.
• Quieres una temática consistente en los modos claro/oscuro con técnicas de color modernas como oklch().
• Necesitas diseños accesibles, adaptables y con enfoque móvil primero, con HTML semántico adecuado desde el primer momento.

• Estás trabajando en un entorno móvil nativo (iOS/Android) — estas pautas están orientadas a la web.
• Tu proyecto utiliza un sistema de diseño rígido (por ejemplo, adherencia estricta a Material Design) que entra en conflicto con los patrones de tema con criterio propio que se proporcionan aquí.

Cada interfaz de usuario se aborda a través del Diseño de Maquetación, Diseño de Tema, Diseño de Animación e Implementación, en ese orden. Esto evita saltar directamente al código antes de considerar la estructura y la estética, lo que da como resultado resultados más coherentes.

La habilidad evita explícitamente paletas genéricas anticuadas (como el azul de Bootstrap) y promueve oklch() para definiciones de color modernas y perceptualmente uniformes. Se incluyen patrones de tema prediseñados para Modo Oscuro (estilo Vercel/Linear), Neo-Brutalismo y Glassmorphism con variables CSS listas para usar.

Se proporciona una lista cuidadosamente seleccionada de Google Fonts en las categorías sans-serif, monospace, serif y display, junto con integración lista para CDN de iconos Lucide y componentes Flowbite, eliminando así las dudas en las elecciones tipográficas.

Un sistema de notación conciso para planificar micro-interacciones (p. ej., button: 150ms [S1→0.95→1] press) mantiene las animaciones intencionadas. Se definen los rangos de temporización recomendados para animaciones de entrada, estados de hover, pulsación de botones y transiciones de página.

Las directrices aplican HTML semántico, jerarquía de encabezados adecuada, etiquetas ARIA, una relación de contraste de color mínima de 4.5:1 y compatibilidad con navegación por teclado, garantizando que los resultados cumplan los estándares básicos de accesibilidad sin necesidad de indicaciones adicionales.

Las mejores prácticas para Tarjetas, Botones, Formularios y Navegación están integradas en SuperDesign — abarcando profundidad de sombras, tamaño de áreas táctiles, estados de enfoque, estados de carga/deshabilitado y comportamiento de encabezados fijos.

Pide a tu agente que construya una página de aterrizaje para SaaS y SuperDesign se encarga de que siga una estructura bien definida (encabezado → héroe → características → pie de página), elija una combinación de fuentes moderna, aplique una paleta de colores coherente y genere CSS responsivo con enfoque móvil primero — todo sin necesidad de instrucciones de diseño manuales.

Al crear prototipos de paneles de análisis o administración, la habilidad guía al agente para que primero diseñe el esquema del diseño, aplique un espaciado consistente y sombras sutiles en las tarjetas, e incluya estados de hover y animación — produciendo un prototipo con apariencia lista para producción.

Usa esta habilidad para generar un conjunto coherente de botones, campos de formulario y componentes de navegación que comparten los mismos tokens de diseño (variables CSS para color, radio y sombra) y superan las verificaciones de accesibilidad.

Al construir una interfaz que debe admitir tanto el modo claro como el oscuro, el enfoque de variables CSS de SuperDesign y las pautas de color oklch() ayudan al agente a producir un sistema consciente del tema desde el principio, en lugar de adaptar el modo oscuro más adelante.