jesusgarciafernandez 0. Filosofía Human-Centric AI
Esta habilidad traduce la intención humana en belleza funcional, utilizando la tecnología para crear puentes visuales que inspiran confianza, placer y claridad.
El Rol del Humano: El Diseñador UI debe ser un "Arquitecto de la Percepción Estética". La IA puede generar miles de variaciones de componentes, sugerir paletas de color perfectas y automatizar el espaciado matemático, pero solo el humano puede imbuir la interfaz de un "carácter" único, decidir cuándo una sombra aporta profundidad real o distracción, y asegurar que la estética sirva al propósito emocional de la marca, creando una atmósfera digital donde el usuario se sienta bienvenido y empoderado. Empoderamiento: Usamos la tecnología para automatizar la creación de sistemas de diseño y el traspaso (hand-off) a código, permitiendo que el creativo se centre en la orquestación visual de alto nivel y en la búsqueda de la excelencia estética premium.
1. Descripción Detallada
El Diseño Visual (UI) es la disciplina que crea la capa de interacción tangible de los productos digitales. No es solo "hacerlo bonito"; es Ingeniería de la Información Visual. El enfoque v2.0 incorpora las Tendencias Premium de Alta Densidad (Glassmorphism, Neumorphism evolucionado, Dark Modes avanzados) y el Diseño Sistémico Basado en Tokens, donde cada color, tipografía y espacio se somete a una lógica matemática y semántica, garantizando una consistencia absoluta, una accesibilidad nativa y una belleza que eleva el valor percibido del producto.
2. Escenarios de Aplicación
- Conceptualización de Identidad UI de Nueva Generación: Creación de la estética core para apps disruptivas y herramientas SaaS premium.
- Definición y Mantenimiento de Design Systems: Construcción de librerías de componentes escalables que aseguran la coherencia en toda la empresa.
- Fase de Alta Fidelidad (Hi-Fi) y Prototipado Realista: Transformación de wireframes en interfaces que parecen y se comportan como el producto final.
- Auditoría y Refinamiento Estético de Productos Maduros: Elevación de la percepción de calidad mediante el ajuste de bordes, sombras, jerarquía y aire visual.
- Diseño UI para Pantallas de Alta Densidad (Retina/4K): Optimización de activos y tipografías para una nitidez quirúrgica en hardware de última generación.
3. Requisitos de Implementación
- Dominio Experto de Herramientas de Interfaz: Figma (Variantes, Propiedades, Auto Layout, Variables) como estándar de industria.
- Conocimiento de Lenguajes Nativos: Material Design 3 (Google) e Human Interface Guidelines (Apple) para asegurar la familiaridad del usuario.
- Mentalidad de Diseño Atómico: Construcción de interfaces desde el átomo (icono/color) hasta el organismo (módulo complejo).
4. Diferencial: Diseño UI Genérico vs. Interfaz de Alta Densidad v2.0
| Dimensión | Enfoque "Plantilla Estándar" | Diseño UI Premium (v2.0) |
|---|---|---|
| Jerarquía | Débil o plana. | Profunda y tridimensional (Sombras/Capas). |
| Sistematización | Estilos sueltos o manuales. | Design Tokens y Variables Semánticas. |
| Estética | Plana y poco inspiradora. | Vibrant, Glassmorphism, Micro-animada. |
| Accesibilidad | Por compromiso (A). | Por excelencia y nativa (AA/AAA). |
5. Instrucciones y Pasos Detallados (Protocolo Maestro)
Fase 1: Definición de la Identidad Visual Sistémica (UI Kit Foundation)
Objetivo: Establecer las reglas del juego visual antes de montar pantallas.
- Auditoría de Tokens: Define los 10 colores core, la escala tipográfica (H1-H5 + Body) y el sistema de espaciado basado en 8px.
- Diseño del Componente Maestro: Crea el estilo de los botones, inputs y tarjetas que definirá la "piel" de todo el producto.
Prompt Maestro de Dirección de Diseño UI:
Actúa como Director de Arte Digital y Master UI Designer especialista en Estética Premium. Para el rediseño de la interfaz [NOMBRE], realiza el siguiente plan técnico:
1. Define el 'Mood Visual': [Ej: Oscuro sofisticado con acentos Cyan neon, efectos de cristal (Glassmorphism) y bordes redondeados de 12px].
2. Establece la 'Jerarquía de Capas': Cómo usaremos las sombras (Z-index visual) para separar la información crítica del fondo.
3. Diseña el 'Card System': Especifica el espaciado interno (Padding), radios de borde y estilo tipográfico para los contenedores de datos.
4. Detalla los 'Tokens Semánticos': Nombres de variables para [Background-Primary, Interactive-Hover, Text-Muted].
5. Protocolo de High-Fidelity: Describe cómo deben ser las transiciones visuales (micro-animaciones) para que la interfaz se sienta "viva" y rápida.
Fase 2: Composición de Pantallas Hi-Fi, Responsive Check y Handoff
... (Expansión técnica sobre el uso de Auto Layout para alineación perfecta, la creación de prototipos interactivos con transiciones 'Smart Animate' y la preparación del archivo para desarrollo con especificaciones de inspección) ...
Referencia ampliada
Para ejemplos extendidos, métricas y notas, consulta reference.md (cárgalo solo cuando necesites ese detalle).