iamjeffia/estudio-ia

UI para video (y páginas simples)

Fecha: 2026-10-22 · Tipo: guía · Estado: vigente

Resumen: la pantalla con "cara" es lo que hace creíble el motion. Este skill reúne reglas universales de interfaz (jerarquía, espacio, tipografía, color, estados) y lo que cambia cuando la pantalla va a un video: legible en el móvil, recreada en capas, cada pieza animable. También sirve para página simple (landing, link en bio). Números y ejemplos en references/regras-detalhadas.md.

Dos formas de uso:

• Crear: dibujar una pantalla nueva o recrear la de un producto real para el video.
• Revisar: auditar una pantalla terminada, señalar qué regla rompe cada elemento y corregir si el pedido lo incluye.

1. Contexto antes de dibujar

1. Encuentra el sistema visual del proyecto o de la marca del tema: tokens (colores, fuentes, espaciados, radios) y componentes. Para marcas de terceros, sácalo del sitio oficial (método en video-referencias, sección 3). Las reglas siguientes ajustan la ejecución, no reemplazan la marca.
2. Define el tipo de pantalla: landing/sitio (amplitud grande de tipografía) o app/dashboard (alta densidad, texto hasta 24px).
3. Lista qué necesita comunicar cada bloque y cuál es el elemento más importante de cada uno. En video: lo que dice la narración en ese momento.

2. Referencias antes de dibujar

Necesitas	Fuente
Pantalla de app o sitio, sección de landing (hero, precio, FAQ, testimonio), dashboard, flujo (onboarding, checkout)	Mobbin, si la persona tiene (MCP con search_sections, search_screens, search_flows)
Sin Mobbin, o Mobbin no tiene	Dribbble y Pinterest (palabras clave cortas en inglés) y capturas reales del producto
Motion, efecto animado, estética, foto, ambiente	Pinterest
Producto real mencionado en el video	el propio producto: graba la pantalla o captura las pantallas oficiales
Transición lista, icono que cambia de forma, microinteracción, pantalla de agente de IA	bibliotecas de componentes: references/motion-e-componentes.md

Cómo buscar y guardar: references/referencias.md. Reúne de 3 a 6 referencias por pantalla y anota el patrón aprovechado de cada una. Usa la referencia para estructura, jerarquía, espaciado y comportamiento; no copies marca, texto ni imagen de terceros.

3. Reglas (resumen)

1. Signifiers: la pantalla se explica sola. Agrupa con contenedor, resalta lo seleccionado, atenúa lo inactivo. Lo cliqueable muestra hover, presionado e ítem activo; icono sin texto lleva tooltip.
2. Jerarquía: tamaño, posición y color. Lo más importante arriba, más grande y en negrita; lo secundario más pequeño y gris. Un solo resalte de color por bloque. Imagen, logo e icono en lugar de etiquetas ("De:", "Restaurante:"). Lista "etiqueta: valor" toda igual es hoja de cálculo, no diseño.
3. Espacio: espacio en blanco antes de la cuadrícula. Múltiplos de 4 (4 a 40px). Un espaciado base entre bloques (ej.: 32px) y la mitad (16px) entre elementos que van juntos.
4. Tipografía: una familia sans-serif. Texto grande con espaciado entre letras de −2% a −3% y altura de línea de 110 a 120%. Landing: hasta 6 tamaños. Dashboard: hasta 24px.
5. Color: un color primario, con versiones claras para fondo y oscuras para texto (rampa 50–950). Otros colores solo con función: azul foco, rojo error, amarillo advertencia, verde éxito.
6. Modo oscuro: borde claro casi desapareciendo; profundidad mediante superficie más clara que el fondo; chip con fondo oscuro desaturado y texto claro del mismo color.
7. Sombra: opacidad baja, desenfoque alto. Si la sombra es lo primero que se nota, está mal.
8. Iconos y botones: icono del tamaño de la altura de línea del texto, cerca de él. Padding horizontal = 2× el vertical. Par de CTA: primario relleno + secundario fantasma.
9. Feedback: botón con estado normal, hover, presionado, deshabilitado y cargando. Campo con foco, error con mensaje y advertencia. Toda acción responde.
10. Imagen con texto: degradado localizado detrás del texto, no capa oscura sobre toda la foto.
11. Animaciones sutiles en toda interfaz: la tarjeta sube ~2px con sombra amplia y suave en hover, ripple ligero al hacer clic, bloques entran subiendo con fade, esqueleto con brillo al cargar. Corto y discreto: nada se mueve solo fuera de la carga.
12. Diseño caro es decidir fácil, no solo parecer limpio: la imagen que vende es el elemento más grande de la tarjeta; 3 niveles de texto, con el dato de decisión en peso o color; botón que dice la consecuencia ("Ver 41 inmuebles", "Pagar $239.90"); un sello por pantalla; navegación más tranquila que el contenido; una escala de radio. Tablas en references/design-caro.md.
13. Pantalla escaneable: nadie lee la pantalla, busca la respuesta. Cada elemento toca 2 o más bordes (texto a la izquierda, valor y hora a la derecha; centrado solo lo que no es para leer). La densidad se resuelve diferenciando (avatar, grupo con encabezado, chip con icono), no espaciando. El énfasis es la diferencia con los vecinos: para destacar, neutraliza el entorno. Sin caja dentro de caja.

4. Pantalla dentro del video

• Legible en el móvil: cuerpo de interfaz con al menos ~22px en un cuadro de 1080 de ancho; títulos de impacto mucho más grandes. Prueba: detén el cuadro 1s en el tamaño del móvil. ¿Lo que se ve primero es lo que dice la narración?
• Recreada en capas, nunca print pegado: cada botón, texto, icono y burbuja es una capa propia, para animar por separado (entrar con muelle, encenderse, ser clicado). El print entra solo como prueba (noticia, post real).
• Fiel al producto real: mismos colores, fuente, radios, iconos y componentes del app que el público conoce (WhatsApp, Gmail, banco). Iconos oficiales (SF Symbols, Material Symbols o el SVG de la marca).
• Estados reales en movimiento: escritura con el teclado real del sistema subiendo y teclas encendiéndose, nunca texto "estirándose" por máscara; botón que se presiona al hacer clic; carga que carga; notificación en el formato real de la plataforma.
• Datos de ejemplo plausibles: nombres, valores y horarios que tengan sentido en el nicho; nada de "Lorem ipsum", y ningún dato personal real, email o credencial en la pantalla.
• Una idea por pantalla en el cuadro: si la pantalla tiene 10 informaciones y el discurso menciona una, las otras quedan neutras y la cámara enfoca la que importa.

5. Modo Revisar

1. Renderiza la pantalla (navegador, previsualización del motor o cuadro del video) y captura desktop y móvil, o el cuadro en el tamaño del móvil.
2. Repasa el checklist y registra cada problema con: dónde, regla rota, valor actual y corrección propuesta.
3. Ordena por impacto: jerarquía y legibilidad, luego espacio y tipografía, después pulido (sombra, estados, microinteracción).
4. Corrige en cambios pequeños y verificables, preservando la marca y el texto.

Checklist (cada ítem es también un "olor a IA")

• ¿Alguna tarjeta o lista parece hoja de cálculo (etiquetas repetidas, todo del mismo tamaño)?
• ¿Cada bloque tiene un único elemento dominante? ¿Hay más de un resalte de color compitiendo?
• ¿Espaciados fuera de múltiplos de 4, o iguales entre elementos que deberían estar agrupados?
• ¿Más de una familia de fuente? ¿Más de 6 tamaños (landing) o texto por encima de 24px (dashboard)?
• ¿Títulos grandes con espaciado de letras y altura de línea estándar?
• ¿Color usado solo para decorar, o colores semánticos intercambiados?
• ¿Sombra pesada o visible antes del contenido? ¿Borde claro fuerte en oscuro? ¿Chip neón?
• ¿Icono más grande que la altura de línea del texto, lejos de la etiqueta, o pequeño y torcido dentro del cuadrado de color (el dibujo debe ocupar ~55% de la caja)?
• ¿Botones con padding desproporcionado, o dos CTAs con el mismo peso?
• ¿Faltan estados (hover, presionado, foco, deshabilitado, cargando, error)?
• ¿Texto blanco directo sobre foto, o foto entera oscurecida?
• ¿Etiqueta en mayúscula sobre el título en toda sección, o "3 pasos numerados" con icono centrado en lugar de mostrar la cosa real?
• ¿Diseño barato: imagen pequeña, metadato corrido en gris, botón mudo ("Aplicar"), más de un sello, radios mezclados?
• ¿Elemento suelto, sin 2 bordes? ¿Tarjeta dentro de tarjeta?
• ¿Degradado púrpura-azul genérico, emoji como icono, esquinas y sombras iguales en todo, texto de relleno?
• ¿En video: legible en el móvil? ¿Recreada en capas? ¿Fiel al producto real? ¿La primera mirada cae en lo que dice el discurso?

6. Verificación

• Renderiza y observa: desktop (1440px) y móvil (390px), claro y oscuro si existe; en video, el cuadro en el tamaño del móvil.
• Comprueba en el código los números de las reglas (tamaños, alturas de línea, espaciados, sombras).
• Interactúa: hover, clic, foco y envío muestran respuesta.
• Compara antes y después y lista qué cambió y por qué.