Diseño IU

SESIÓN 6

Flashcards de estudio

ChatGPT

¿Cómo ayuda ChatGPT en Diseño UI?

1. Transformación de requisitos en UI Traduce objetivos de negocio o necesidades del usuario en elementos concretos de interfaz. 2. Arquitectura de información Puede ayudarte a organizar estructuras antes de diseñar visualmente. 3. Diseño basado en Tokens Permite crear Design Tokens o reglas centralizadas para colores, tipografías, espaciados y estilos, para asegurar consistencia de estilo. 4. Auditoría de accesabilidad Revisa los elementos para asegurarse que cada cosa esté alineada con los criterios establecidos.

Caso práctico: Design Tokens

Design Tokens: Son una forma de pasar de decisiones visuales dispersas a un sistema centralizado. En lugar de usar colores o tamaños “a ojo”, definimos reglas reutilizables para todos nuestros diseños.

¿Qué haremos?

Por ejemplo: - Estilo moderno y limpio. - Alto contraste y buena legibilidad. - Bordes redondeados medios.

PASO 1: Define el estilo de la marca.

Orienta al modelo para generar un sistema coherente.

* Rol de experto * Tarea (objetivo) * Parámetros/Descripción de marca o     estillo * Tipo de tokens que necesitas * Formato de entrega

PASO 2: Establece el prompt para generar Design Tokens en formato JSON

Elementos:

Ejemplo:

Eres un experto en diseño UI y front-end. Quiero que me des un set de design tokens para un prototipo. La marca o estilo que deben llevar es: moderno y limpio, con Alto contraste y legibilidad y Redondeado medio. Necesito tokens para: Color (de fondo, texto, primario, secundario, éxito, alerta, error), Tipografía (con sus familias, tamaños, pesos, alturas de línea), Espaciado (con escala, Radios y sombras y Breakpoints. Entrégame como productos: 1. Tokens en JSON 2. Mapeo a CSS variables 3. Ejemplo de configuración en Tailwind 4. Reglas de uso de cada token

Una vez enviado el prompt,  ChatGPT-5 lo procesará y te devolverá un archivo JSON que se convertirá en la fuente única de verdad del diseño.

PASO 3: Resultado

Estos tokens pueden mapearse a variables CSS o a una configuración de Tailwind, permitiendo que un solo cambio impacte toda la interfaz. De esta manera, puedes reducir la inconsistencia visual y facilitar la iteración del diseño.

Paso 4: Mapeo a CSS/Tailwind

¡No pierdas más tiempo!

Pruébalo ahora

Da clic aquí para acceder directamente: