mannobeats/ui-director

UI Director

Diriges una interfaz, la construyes y la revisas antes de darla por terminada. El estándar es lo que envían los mejores estudios de producto: pocas palabras en tamaño muy grande, una imagen que solo podría ser de este producto, espacio generoso, oficio exacto. Audaz en la idea, silencioso en todo lo demás.

Qué tan fuerte presionar

Los ejemplos de oro en examples/ son el estándar, no una referencia a copiar. Si tu versión es la más verbosa, pequeña, plana o genérica junto al ejemplo de oro más cercano, esa es la primera corrección. Luego, mira tus capturas de pantalla como lo haría el diseñador más exigente que conoces, el que toma captura de la única cosa incorrecta y la devuelve diciendo «¿qué es esto?»: un párrafo donde debería haber una línea, un titular que podría vender cualquier cosa, una imagen de producto demasiado pequeña para leer, una etiqueta tocando su píldora. Si puedes imaginarte esa captura de pantalla, has encontrado la siguiente corrección.

Elige el trabajo

Trabajo	Lee ahora
Una página que vende: aterrizaje, lanzamiento, producto, precios, evento	references/landing.md, references/product-shots.md
Interfaz de app en pantalla: panel, tabla, configuración, detalle, administración	references/app-ui.md
Una app móvil: inicio, lista, detalle, onboarding, paywall, pantallas nativas	references/mobile.md, references/app-ui.md
Rediseño, pulido, «se ve mal»: conserva las URLs, etiquetas, orden de campos y logotipo; corrige los problemas visuales más grandes de una sola pasada	references/tells.md
Solo auditoría: máximo 5 hallazgos, del peor al mejor, cada uno con su captura de pantalla y la corrección más pequeña; no cambies nada a menos que te lo pidan	references/look.md, references/tells.md
Configurar o limpiar un sistema de diseño, en el formato propio del proyecto	references/system.md

La dirección del usuario gana. Un estilo nombrado, una referencia, su marca o un sistema de diseño existente supera cualquier valor predeterminado aquí. Extiende lo que existe. Solo los «Nunca» de abajo se mantienen independientemente.

Empieza desde el oro

Cada trabajo comienza desde la página terminada más cercana, nunca desde un archivo en blanco. Sirve la carpeta del skill (python3 -m http.server en ella) y abre el ejemplo de oro en 1440, 820 y 390 de ancho. Copia su estructura y su oficio: el espaciado, la escala tipográfica, la forma en que se muestra el producto, el movimiento. Luego reemplaza su mundo con el del producto: la idea, las palabras, la imagen, los colores, los datos de muestra. Una copia que solo cambie el nombre no está terminada; debe leerse como este producto, no como el del ejemplo de oro.

Oro	Qué es	Copia de él
landing-sky	Página clara. Una promesa centrada de cinco palabras sobre un cielo dibujado en código; la aplicación surge de él y llena la pantalla mientras te desplazas	La pila centrada, la escena fijada, un cielo de medios tonos a partir de ruido, paneles de vidrio sobre escenas dibujadas, una metáfora llevada desde el chip hasta el cierre, teclas que se iluminan
landing-object	Página oscura. Tres líneas de texto a la izquierda, un objeto mecanizado a la derecha que se puede girar	Líneas que emergen de máscaras, un objeto esculpido solo con CSS, una placa frontal como imagen de producto, especificaciones línea por línea, un precio que es el titular
landing-card	Página clara, todo centrado. Una tarjeta de grafito dibujada en CSS que se inclina hacia el puntero	Un token de espaciado entre secciones y uno entre bloques, un satélite sobre el espacio vacío, un cierre que hace eco del héroe
app-dashboard	Shell de barra lateral. Resumen de una plataforma de despliegue, claro y oscuro	La respuesta como título, solo lo que te necesita, cada elemento como una celda en su estado, un acento para una acción, un carril en tabletas, frescura dicha con precisión
app-analytics	Shell insertado: una barra lateral redondeada y una hoja flotando sobre un fondo teñido	Una oración para la semana, números en una sola tira con sus tendencias, un gráfico cuyas etiquetas se encuentran debajo de sus puntos, listas con barras en línea
app-finance	Shell de navegación superior, una columna centrada	El saldo como titular, su mes dibujado debajo, cuentas, lo que viene y lo que pasó
phone-app	Una app de running después de la carrera, a 390	La respuesta primero, el objeto clave dibujado (una ruta coloreada por ritmo), la misma escala reutilizada, una barra de pestañas de vidrio

teaching/ contiene pares de antes y después pequeños (bordes, agrupación, énfasis, iconos, color, oscuro, tablas, líneas de tiempo, acciones destructivas, filas de teléfono) para diagnosticar un problema. Cada par es la misma pantalla dos veces con un solo fallo cambiado, y cada mitad correcta pasa la verificación. Enseñan una corrección a la vez; nunca empieces una página desde teaching/, empieza desde el oro.

La primera pantalla

La mayor parte de lo que se lee como premium se decide aquí, y la mayor parte es sustracción.

• Pocas palabras, en tamaño muy grande. Un titular de 3 a 8 palabras en 2–3 líneas, de 64 a 112 px en escritorio (clamp() hasta aproximadamente 48 px en teléfono), peso 600–650, tracking −.045 a −.055em, altura de línea .92–1. Una segunda línea puede estar en un tono más tranquilo; una línea completa, nunca una sola palabra.
• Una línea debajo, de 14 palabras como máximo, que diga cómo y para quién. Nunca un párrafo en la primera pantalla.
• Dos acciones como máximo: una cápsula principal (48px) y una tranquila. Una línea de riesgo al lado o debajo («Gratis para una bandeja de entrada») solo cuando sea verdad.
• Un chip como máximo sobre el titular, que lleve un dato o hable en la voz del producto (el de una app de correo: «Pronóstico de hoy: 4 de personas, 12 para ojear»).
• La imagen es lo más grande. Una ventana de producto al 80% o más del ancho del contenido, que emerge del pliegue; un objeto a aproximadamente el 40% de la pantalla; un teléfono en sus proporciones reales. Pequeño y encajonado es el aspecto generado.
• Espacio: la pila centrada en la mitad superior con 24–36px entre sus partes, o palabras en la mitad izquierda y el objeto en la derecha. Todo lo demás en la pantalla está en silencio.

Los titulares son el diseño, así que escribe diez y quédate con uno. Di la verdad del producto en las palabras del visitante, en una voz que suene a persona: «Tu bandeja de entrada, mayormente clara». «Calidez analógica, sin el rack». «23 de 24 aplicaciones están funcionando». Elige una metáfora del mundo del producto (clima para el correo, hardware para el audio) y llévala a través del chip, las etiquetas del producto y la línea de cierre, con suavidad. Nunca un eslogan que pueda vender cualquier cosa («Potencia tu flujo de trabajo»), nunca una descripción de categoría («La plataforma todo en uno para…»).

Espacio y equilibrio

La consistencia es la mayor parte de lo que se lee como cuidado. Cada ejemplo de oro sigue estas reglas, y la verificación las hace cumplir.

• Dos tokens de espaciado para una página: uno entre secciones (--section, aproximadamente clamp(88px, 10vw, 136px)) y otro entre bloques dentro de una sección (--gap, 48–56px). Úsalos una vez: una sección solo tiene padding superior, por lo que dos secciones nunca apilan su espaciado.
• Sin banda de nada. Ningún espacio entre dos piezas de contenido es mayor que el espaciado de sección, en ningún ancho o alto, incluso después de una escena de desplazamiento (banda vacía).
• Centrado significa centrado. Una columna centrada centra cada bloque dentro de ella, incluidos grupos de botones y párrafos cortos (margin-inline: auto); una columna de página se sitúa en el medio del área que tiene, nunca pegada a la izquierda de una pantalla ancha (descentrado).
• Cajas equilibradas. El contenido se sitúa en el medio de su tarjeta o la llena a propósito; el espacio de arriba es igual al espacio de abajo (desequilibrado); ninguna tarjeta termina en un panel vacío (panel vacío) ni toca el borde de su sección (toca el borde); las palabras nunca se salen de su panel.
• Cada ancho está diseñado: escritorio, tableta (una barra lateral se pliega a un carril de iconos a aproximadamente 760–1180px) y teléfono (una columna, la misma escala de espaciado). La verificación examina 1440, 820 y 390.
• La navegación se queda. Se fija en la parte superior y se adapta: transparente sobre un héroe oscuro o fotográfico, una barra esmerilada con texto en tinta una vez que hay algo claro debajo. Nunca una navegación que se desplace fuera de la pantalla.

Haz las imágenes tú mismo

Puedes dibujar casi todo lo que una página necesita en código, y las imágenes dibujadas siempre coinciden con la página:

• Una escena: un cielo, un campo, una textura, a partir de ruido en capas sobre un canvas: volumen suave bajo un medios tonos de puntos (landing-sky, references/craft.md). Capas que se mueven a diferentes velocidades mientras te desplazas.
• Un objeto: metal, vidrio, plástico, papel en gradientes y sombras CSS: una tapa cepillada es un conic-gradient de pasos claros y oscuros sobre un repeating-radial-gradient fino (landing-object).
• Los datos como héroe: una ruta, una forma de onda, una flota de celdas, un medidor, dibujados en SVG a partir de números con aspecto real (phone-app, app-dashboard).
• El producto en sí mismo, reconstruido a su tamaño real (references/product-shots.md).

Las fotografías provienen del usuario, de una herramienta de imágenes o de una foto con licencia libre guardada en el proyecto (references/visuals.md). Nunca un blob de gradiente, una ilustración de stock o formas CSS que pretendan ser una foto.

El bucle

Cada paso termina en algo que puedes verificar.

1. Dirección. Completa el bloque de dirección desde el archivo de tu trabajo y escríbelo en DESIGN.md en la raíz del proyecto. Nombra el ejemplo de oro, el titular que conservaste y la imagen que harás. Terminado cuando ninguna línea podría describir otro producto.
2. Oro y tokens. Copia la estructura del ejemplo de oro; escribe los tokens en el formato del proyecto (references/system.md), con los archivos de fuente en el proyecto.
3. Construye todo. Cada sección y estado que implique el brief, con contenido real (references/words.md) y un mundo de muestra.
4. Hazlo único. La imagen y el movimiento característico (references/product-shots.md, references/motion.md). Terminado cuando puedas señalar el momento en que la gente tomaría una captura de pantalla.
5. Revisa. Ejecuta node <skill>/scripts/check.mjs <url> y abre cada captura de pantalla que escriba. Pon tu primera pantalla junto a la del ejemplo de oro y nombra la única diferencia. Para una página que vende o una nueva pantalla de app, pide una revisión con ojos frescos (references/review.md). Terminado cuando la verificación termine con verificación superada, la revisión esté respondida, y hayas corregido y revisado de nuevo al menos dos veces.
6. Termina. Escribe la sección «Verificación» de DESIGN.md, detén los servidores, elimina las capturas y dile al usuario lo que hiciste, lo que inventaste y lo que debe verificar.

Fallos que vuelven

• Demasiadas palabras: un párrafo debajo del titular, una oración en cada mosaico, una etiqueta sobre cada sección. Corta hasta que duela, luego corta una línea más.
• Un titular que podría vender cualquier cosa, o uno en la voz de la categoría.
• La imagen demasiado pequeña, encajonada en una tarjeta, o un marcador de posición gris donde debería estar el producto.
• Colocación desequilibrada: un titular empujado a un lado sin nada que sostenga el otro, un botón flotando lejos de su línea, una ventana cortada en un borde aleatorio. Centra la pila, o empareja las palabras con un objeto de igual peso.
• El teléfono es el escritorio encogido: cada página tiene su propia composición de teléfono (texto diminuto).
• Palabras cubiertas o cortadas: una ventana sobre el titular, un estado cortado por un recorte (cubierto, cortado por el recorte).
• Contraste en texto tranquilo y enlaces; el segundo tono de un titular con 3:1 o mejor.
• IA de stock: destellos, gradientes violeta, una letra en un cuadrado de color, emoji como iconos.

Números de oficio

Los valores predeterminados. Un plano o el sistema del usuario los reemplaza.

• Tipografía: una familia (Geist y Geist Mono se incluyen en fonts/), una fuente decorativa solo con motivo. Páginas que venden: visualización como arriba; encabezados de sección 36–64px a −.04em; cuerpo 16–18px; ledes 17–20px con altura de línea 1.45. Interfaz de app: 12 / 13 / 14 / 16 / 20 / 24–26px, pesos 450 cuerpo, 500 interfaz, 600 encabezados. Apps de teléfono: 15–17px cuerpo, 34px títulos grandes. Como máximo 10 tamaños en una página. tabular-nums en números, text-wrap: balance en encabezados, minúsculas en todas partes.
• Color: los neutros hacen la estructura (3 superficies, 2 líneas, 4 niveles de texto). Un acento, dosificado en lo que actúa, está seleccionado o iluminado. Rojo significa fallido o destructivo, independientemente de la marca. Contraste 4.5:1 para texto de lectura, 3:1 para texto grande, medido sobre el fondo real.
• Espacio: una cuadrícula de 4px. 8px dentro de un grupo, 12–16px entre elementos relacionados, 24–32px entre grupos, palabras al menos a 12px de cualquier borde. Secciones en páginas que venden clamp(96px, 12vw, 176px) de distancia. Contenido hasta 1200–1320px, canal clamp(20px, 4vw, 48px).
• Forma: una familia de radios, anidada (interior = exterior − padding): 20–32px para mosaicos y ventanas, cápsulas para botones, 8–12px dentro de aplicaciones. Los bordes son líneas finas de 0.5–1px; sombras teñidas al fondo, largas y suaves para lo que flota.
• Controles: 3–4 alturas: aproximadamente 32px en interfaz de app, 44px en táctil, 48px botones en páginas que venden. Etiquetas a 10px o más de su borde, line-height: 1.

Diseño

• Bordes: el texto se alinea a la izquierda en orden de lectura, los números y acciones a la derecha; una pila de titulares corta puede centrarse. Cada bloque se alinea con una línea que usa otro bloque.
• Agrupa, luego diferencia: las personas obtienen caras, las categorías obtienen colores, los números obtienen figuras tabulares, la misma cosa obtiene la misma marca en todas partes.
• Muestra, no cuentes: el producto, una barra, una cara en lugar de una oración.
• El énfasis es una diferencia: silencia a los vecinos; colorea solo lo que cambió, está seleccionado o necesita atención.
• Una superficie, dividida por líneas y espacio. Las tarjetas contienen objetos reales y capas flotantes, nunca otra tarjeta.

Nunca

• Un punto dentro de una píldora o insignia; el estado es una palabra.
• Un icono sobre un círculo teñido que encabeza una tarjeta, estadística o estado vacío.
• Emoji en texto de interfaz; saludos («Bienvenido de nuevo, Sarah»).
• Color de IA predeterminado: gradientes violeta a rosa o brillo azul, blobs borrosos, neón, un destello o varita que represente IA.
• Una palabra de un titular en otro color, estilo o peso.
• Etiquetas en mayúsculas con seguimiento, etiquetas de sección numeradas («01 /»), una etiqueta pequeña sobre cada sección.
• Pruebas inventadas: testimonios, muros de logotipos, calificaciones y conteos de usuarios que nadie te dio.
• Marcadores de posición: lorem, «Acme», «Juan Pérez», números redondos, «Ver todo →» en cada panel.
• Barras grises o gráficos falsos que sustituyen al producto.
• Un logotipo inventado: una letra en un cuadrado de color. La marca real, o el nombre como marca denominativa.
• Iconos dibujados a mano o como símbolos de texto (✦ ✳ ◐), dos conjuntos de iconos en una página, flechas en botones.

La versión obvia

Lo que cualquier modelo construye cuando no se ha elegido nada. Nómbralo en tu dirección, luego déjalo.

• Una primera pantalla blanca con un blob de gradiente, un titular con una palabra en degradado, un párrafo sobre lo que hace la aplicación, tres tarjetas con bordes de 1px, un pie de página de 5 columnas, iconos de Material Design, un logotipo de letra en cuadrado.

Herramientas de verificación

El skill incluye un script de verificación que revisa tu página en varios anchos (1440, 820, 390) y reporta fallos comunes de diseño. Para usarlo:

node <ruta_al_skill>/scripts/check.mjs <url>

El script toma capturas de pantalla y las compara con las reglas definidas en este documento. Debes corregir cualquier fallo hasta que el script termine con verificación superada.

Referencias

La carpeta references/ contiene guías detalladas para cada aspecto del diseño:

• references/landing.md – Páginas que venden
• references/app-ui.md – Interfaz de aplicaciones
• references/mobile.md – Diseño para móviles
• references/product-shots.md – Cómo mostrar el producto
• references/visuals.md – Guía de imágenes y fotografías
• references/craft.md – Técnicas de dibujo en código
• references/motion.md – Principios de animación
• references/words.md – Cómo escribir contenido
• references/system.md – Cómo configurar tokens de diseño
• references/look.md – Guía de auditoría
• references/tells.md – Señales de diseño deficiente
• references/review.md – Cómo hacer una revisión con ojos frescos

Cada referencia está diseñada para leerse en 2-3 minutos y contiene ejemplos concretos.