Diseño de Interfaces

Construye interfaces de producto con la artesanía de un gran equipo de diseño — Linear, Vercel, Stripe, Apple. La diferencia entre esas y la salida genérica no es talento. Es que cada decisión fue decidida, la jerarquía es inconfundible, y un centenar de pequeños detalles son correctos a la vez. Este skill es cómo llegar ahí.

Alcance

Úsalo para: Paneles de control, paneles de administración, aplicaciones SaaS, herramientas, páginas de configuración, interfaces de datos.

No es para: Páginas de aterrizaje, sitios de marketing, campañas, trabajo exclusivo de marca. Usa un skill de diseño frontend/de marketing para esos.

Este skill es autónomo: dirección, jerarquía visual, arquitectura del sistema de diseño, y lo esencial de pulido y movimiento necesarios para enviar UI de grado de producción viven aquí.

El Problema

Generarás salida genérica. Tu entrenamiento ha visto miles de paneles de control, y los patrones son fuertes. Puedes seguir todo este proceso — explorar el dominio, nombrar una firma, declarar tu intención — y aún así producir una plantilla: colores cálidos sobre estructuras frías, fuentes amigables sobre diseños genéricos.

Esto sucede porque la intención vive en prosa, pero la generación de código extrae de patrones. La brecha entre ellos es donde ganan los valores por defecto. El proceso ayuda, pero no garantiza la artesanía. Tienes que atraparte a ti mismo, y tienes que conocer los movimientos concretos que los valores por defecto no hacen.

El estándar: Si otra IA, con un prompt similar, produjera sustancialmente la misma salida, has fallado. No diferente por el simple hecho de ser diferente — diferente porque la interfaz emergió de este usuario, esta tarea, este mundo. Cuando diseñas a partir de valores por defecto, todo se ve igual, porque los valores por defecto son compartidos.

Dónde se esconden los valores por defecto

Los valores por defecto se disfrazan de infraestructura — las partes que parecen que solo necesitan funcionar, no ser diseñadas.

La tipografía se siente como un contenedor. Pero el tipo no está sosteniendo tu diseño, es tu diseño. El peso de un titular, la personalidad de una etiqueta, la textura de un párrafo moldean cómo se siente el producto antes de que alguien lea una palabra. Usar tu fuente habitual significa que no estás diseñando.
La navegación se siente como andamio. Pero la navegación es el producto — dónde estás, a dónde puedes ir, qué importa. Una página flotando en el espacio es una demo de componente, no software.
Los datos se sienten como presentación. Pero un número en pantalla no es diseño. ¿Qué significa para la persona que lo mira? Un anillo de progreso y una etiqueta apilada ambos muestran "3 de 10" — uno cuenta una historia, el otro llena espacio.
Los nombres de tokens se sienten como detalle de implementación. Pero --tinta y --pergamino evocan un mundo; --gris-700 y --superficie-2 evocan una plantilla. Alguien que solo lea tus tokens debería adivinar qué producto es este.

No hay decisiones estructurales. Todo es diseño. El momento en que dejas de preguntar "¿por qué esto?" es el momento en que los valores por defecto toman el control.

Intención Primero

Antes de tocar código, responde a estas preguntas. Mantenlo como un breve resumen de trabajo a menos que la dirección necesite confirmación del usuario.

¿Quién es este humano? No "usuarios." La persona real. ¿Dónde está cuando abre esto? ¿Qué hizo hace 5 minutos, qué hará en 5 minutos? Un profesor a las 7am con café no es un desarrollador depurando a medianoche no es un fundador entre reuniones de inversores.
¿Qué deben lograr? El verbo. Calificar estas entregas. Encontrar el despliegue roto. Aprobar el pago. La respuesta determina qué lidera, qué sigue, qué se oculta.
¿Cómo debería sentirse esto? En palabras que signifiquen algo. "Limpio y moderno" no significa nada — toda IA dice eso. ¿Cálido como un cuaderno? ¿Frío como un terminal? ¿Denso como un piso de trading? ¿Tranquilo como una app de lectura? Esto da forma al color, tipo, espaciado, densidad — todo.

Si el prompt es demasiado vago para identificar al humano, la tarea y la sensación, haz una pregunta concisa. Si el contexto permite una suposición responsable, indícala brevemente y procede.

La intención debe ser sistémica. Decir "cálido" y luego usar colores fríos no es seguir adelante. Si la intención es cálida: superficies, texto, bordes, acentos, colores semánticos, tipo — todo cálido. Si denso: espaciado, tamaño de tipo, arquitectura de información — todo denso. Revisa cada token contra la intención declarada. Para cada elección — diseño, temperatura de color, tipo de letra, escala de espaciado, jerarquía — debes poder decir por qué. "Es común" o "funciona" significa que has usado un valor por defecto.

Exploración del Dominio del Producto

Aquí es donde los valores por defecto son atrapados — o no. Camino genérico: Tipo de tarea → plantilla visual → tema. Camino artesanal: Tipo de tarea → dominio del producto → firma → estructura + expresión. La diferencia es el tiempo dedicado al mundo del producto antes de cualquier pensamiento visual.

Produce los cuatro antes de proponer cualquier dirección:

Dominio — conceptos, metáforas, vocabulario del mundo de este producto. No características — territorio. Mínimo 5.
Mundo de colores — ¿qué colores existen naturalmente aquí? No "cálido" o "frío" — ve al mundo real. Si este producto fuera un espacio físico, ¿qué verías? Enumera 5+.
Firma — un elemento (visual, estructural o de interacción) que solo podría existir para ESTE producto. Si no puedes nombrar uno, sigue explorando.
Valores por defecto — 3 opciones obvias para este tipo de interfaz, visual Y estructural. No puedes evitar patrones que no has nombrado.

La prueba: Lee tu propuesta con el nombre del producto eliminado. ¿Podría alguien identificar para qué es? Si no, explora más profundo.

Renderiza Cuando Puedas

Si una herramienta de renderizado visual en línea está disponible en la sesión (por ejemplo, una herramienta show_widget / visualize que renderiza HTML o SVG en línea en la conversación), prefiere mostrar el diseño en lugar de describirlo. Una dirección atrapada en prosa es una fracción tan útil como una que la persona pueda mirar. Esto es condicional: cuando no hay tal herramienta presente (CI, agentes sin cabeza, terminales simples), recurre a código, tokens y una propuesta escrita. Nunca asumas que la herramienta existe; verifica, luego úsala.

Renderiza en tres momentos:

Proponiendo una dirección. Junto con el bloque de Sugerir + Preguntar, renderiza un pequeño espécimen en vivo: la paleta como muestras reales, la escala de tipo en el tipo de letra real, los pasos de elevación de superficie como tarjetas apiladas, el elemento de firma como un componente real. La persona debería ver "cálido como un cuaderno", no leer las palabras.
Diseñando un componente. Renderiza el componente real (o un antes/después ajustado, ambas variantes lado a lado) para que las decisiones de artesanía — espaciado, bordes, jerarquía, estados — sean visibles, no afirmadas. Renderiza los estados reales (por defecto, hover, vacío, error) donde importen.
Criticando o auditando. Renderiza la versión actual y la versión mejorada juntas para que la brecha se vea, no se narre.

Reglas al renderizar:

El widget muestra solo lo visual. Todo el razonamiento, la exploración del dominio, la lista de valores por defecto rechazados y la recomendación permanecen en el texto de tu respuesta — nunca pegues prosa dentro del widget.
Coincide con el contrato del sistema de diseño de la herramienta de renderizado (carga su read_me/guía si tiene una). Usa sus variables de tema para que el espécimen herede el modo claro/oscuro y se sienta nativo en el anfitrión. No pelees con el chrome del anfitrión.
El espécimen aún debe pasar las comprobaciones a continuación. Un valor por defecto renderizado sigue siendo un valor por defecto — el renderizado es cómo se ve la artesanía, no un sustituto de ella.
Esto renderiza a la conversación, no al proyecto. La implementación real aún aterriza en el repositorio de código a través de ediciones normales.

El punto: colapsar el ciclo entre "aquí está mi pensamiento" y "aquí está cómo se ve" en un solo mensaje al que la persona pueda reaccionar.

Jerarquía Visual y Composición

El mayor impulsor único de "esto parece diseñado" versus "esto parece generado". Los valores por defecto producen planitud — todo del mismo tamaño, peso y espaciado, así que nada lidera y el ojo no tiene a dónde ir. La artesanía produce jerarquía — el ojo sabe instantáneamente qué importa. Estos son movimientos concretos, no vibraciones.

Un punto focal por vista

Cada pantalla tiene una cosa para la que el usuario vino a hacer. Esa cosa domina — a través del tamaño, contraste, posición o el espacio a su alrededor. Cuando todo compite por igual, nada gana y la interfaz se lee como un estacionamiento. Antes de construir, nombra el elemento focal en voz alta. Luego haz que gane: más grande, de mayor contraste, o rodeado de espacio en blanco. Degrada todo lo demás deliberadamente.

La escala de tipos es una proporción, y el peso vence al tamaño

No elijas tamaños por sensación. Elige una proporción y aplícala: ~1.2 (tercera menor) para UI densa/tranquila, ~1.25 para la mayoría de UI de producto, ~1.333 para expresiva. Desde un cuerpo de 14–16px, esto produce una escala visiblemente distinta, no una papilla de 15/16/17. Una base de 14px a 1.25: caption 11 · body 14 · h4 16 · h3 18 · h2 22 · h1 28 · display 44+. Redondea a píxeles enteros y a tu cuadrícula de espaciado.

El movimiento de Apple/Linear: el peso y el color hacen más trabajo de jerarquía que el tamaño. Un solo tamaño de 14px sostiene tres niveles a través de peso + opacidad sola — valor: 600 / primario, etiqueta: 500 / secundario, meta: 400 / atenuado — separando más limpiamente que dos pesos regulares a dos puntos de distancia. Construye a partir de tres palancas juntas (tamaño, peso, color/opacidad), nunca solo tamaño. Si entrecierras los ojos y no puedes distinguir el titular del cuerpo de la etiqueta, la jerarquía es demasiado débil.

Ejemplo trabajado — una métrica, plana vs decidida. Plano: Ingresos / $48,200 ambos 14px regular gris, tres cajas idénticas, sin punto focal. Decidido: INGRESOS 11px/500/atenuado/espaciado · $48,200 28px/600/primario/números-tabulares (el héroe) · ↑12% 12px/500/éxito. Mismos datos, legibilidad opuesta — la cifra lidera a través de tamaño+peso+un acento, la etiqueta se degrada, las métricas secundarias caen a un nivel inferior.

La densidad es una decisión, expresada en px

Linear es ajustado; Stripe es aireado. Ninguno es por defecto — ambos son elegidos, y la elección es el mismo número repetido en todas partes. Decide la densidad de antemano y nombra los valores: un panel de herramientas con padding de 12–16px se siente ajustado como un banco de trabajo; la misma tarjeta con 24px se siente como un folleto. El mismo número puede ser correcto en un contexto y perezoso en otro. Elige deliberadamente, luego mantenlo.

Ritmo espacial — respira de manera desigual

Las grandes interfaces no espacian todo por igual. Las zonas de control densas dan paso a contenido abierto; los elementos pesados se equilibran con los ligeros; el ojo viaja con propósito. Los diseños monótonos — mismo tamaño de tarjeta, mismo espacio, misma densidad en todas partes — son el sonido de nadie decidiendo. Varía el ritmo a propósito: agrupa cosas estrechamente relacionadas, luego pon aire real entre los grupos.

Las proporciones hablan

Un sidebar de 280px junto a contenido de ancho completo dice "la navegación sirve al contenido." Un sidebar de 360px dice "estos son pares." El número específico declara qué importa. Si no puedes articular lo que dice una proporción, no dice nada. Elige anchos y proporciones que enuncien una relación.

Distribución y moderación (el aspecto "costoso")

~60/30/10: una superficie neutral dominante, un tono secundario, y ~10% de acento. El color es un recurso escaso — la mayor parte de la pantalla es estructura.
Un acento, usado con intención, vence a cinco colores usados sin pensamiento. El gris construye estructura; el color comunica (estado, acción, identidad). El color sin motivación es ruido.
Jerarquía a través del espacio y el peso, no de líneas. Recurre al espacio en blanco y al cambio tonal antes que a los bordes y divisores. Las interfaces más premium son mayormente estructura invisible.
Tamaño óptico en tipos grandes: aprieta el interletraje a medida que el tipo se hace más grande (tracking ligeramente negativo en titulares); afloja el interlineado en el cuerpo para legibilidad (~1.5). El tipo apretado se lee como artesanal; el tracking por defecto en un titular de 32px se lee como un documento.

Fundamentos de Artesanía

Capas Sútiles (la columna vertebral)

Independientemente de la dirección, esto se aplica a todo. Deberías apenas notar el sistema funcionando — cuando miras el panel de Vercel no piensas "bonitos bordes", simplemente entiendes la estructura. La artesanía invisible es artesanía que funciona.

Elevación de superficie. Las superficies se apilan: un desplegable se sienta sobre una tarjeta se sienta sobre la página. Construye un sistema numerado — base, luego niveles crecientes. Cada salto es solo unos pocos puntos porcentuales de luminosidad — p.ej. modo oscuro base → +7% → +9% → +12%; modo claro se mantiene claro y añade sombra en su lugar. Apenas puedes ver un paso de forma aislada, pero apilados, la jerarquía emerge. Cambios susurrantemente silenciosos que sientes en lugar de ver.

Sidebars: mismo fondo que el canvas, no un color diferente. Colores diferentes fragmentan el espacio en "mundo del sidebar" y "mundo del contenido." Un borde sutil es suficiente.
Desplegables/popovers: un nivel por encima de su superficie padre, o se mezclan y la capa se pierde.
Inputs: ligeramente más oscuros que el entorno, no más claros. Los inputs están empotrados — reciben contenido. Un relleno más oscuro señala "escribe aquí" sin bordes pesados.

Bordes. Deberían desaparecer cuando no los estás buscando, pero ser localizables cuando necesitas estructura. El rgba de baja opacidad se mezcla con el fondo y define un borde sin exigir atención; los bordes hex sólidos se ven duros en comparación. El modo oscuro vive alrededor de rgba(255,255,255,0.06–0.12), el modo claro ligeramente más alto. Construye una progresión — estándar, separación más suave, énfasis, anillo de foco — y empareja la intensidad con la importancia del límite.

La prueba del entrecerrar los ojos: desenfoca los ojos en la interfaz. Aún deberías percibir jerarquía — qué está sobre qué, dónde se dividen las secciones — pero nada debería sobresalir. Sin líneas duras, sin cambios discordantes. Solo estructura silenciosa. Si te equivocas en esto, nada más importa.

Expresión Infinita

Cada patrón tiene infinitas expresiones — no hay dos interfaces que deban verse igual. Una pantalla de métrica podría ser un número héroe, estadística en línea, sparkline, medidor, barra de progreso, delta de comparación, o insignia de tendencia. El mismo ancho de sidebar, la misma cuadrícula de tarjetas, las mismas cajas de métrica con icono a la izquierda, número grande, etiqueta pequeña cada vez señala IA generada inmediatamente y es olvidable. Las tarjetas de Linear no se parecen a las de Notion; las métricas de Vercel no se parecen a las de Stripe. Mismos conceptos, infinitas expresiones. Antes de construir, pregúntate: ¿cuál es la ÚNICA cosa que los usuarios hacen aquí, y qué producto resuelve un problema similar brillantemente?

El Color Vive en Algún Lugar

Cada producto existe en un mundo — incluso si ese mundo es "hoja de cálculo corporativa." El color no es una decoración que aplicas a un diseño neutral; el color es el diseño, y su fuente es el dominio del producto.

El color no es gratis. El gris que elijas — gris azulado, gris cálido, el blanco roto de un periódico — ya es una elección que declara algo. La saturación de tu acento, la calidez de tu tono de superficie — todo comunica. Nada es neutral.

Cuando el color flota, no funciona. Si tus acentos no viven dentro de elementos — si son puntos aislados — no hay sistema, solo decoración. El color debe estar incrustado: los acentos viven en bordes, indicadores, y el 10% de alto impacto. Las superficies no necesitan color propio; necesitan la calidez o frialdad correcta.

Semántica primero, estética después. El rojo significa error o peligro antes de que signifique "este botón se ve bien." El verde significa éxito o progreso. El azul significa acción o información. Si tus colores semánticos contradicen la expectativa del usuario (rojo para éxito por razones de marca), has puesto la estética por encima de la usabilidad. No lo hagas. La paleta de un producto debe ser semánticamente correcta incluso antes de verse bien.

Movimientos de Diseño Avanzados

Acento de Fondo

Un patrón de alto impacto pero de bajo volumen: toda la pantalla obtiene un sutil tono de la paleta de acentos, aplicado como un matiz de fondo en lugar de como un elemento aislado. No una tarjeta azul; un fondo de página azul polvo con una máscara de opacidad. Esto no es para paneles densos — es para estados vacíos, páginas de bienvenida, o pantallas de enfoque único donde quieres que el producto se sienta vivido, no solo poblado.

Reglas:

Una capa de opacidad muy baja (2-5% para modo claro, 5-10% para modo oscuro) sobre el color de acento completo.
Solo para superficies grandes de fondo — tarjetas, modales, texto nunca coloreado de esta manera.
El acento de fondo desaparece cuando se superpone con contenido real — es un tratamiento atmosférico, no parte de la jerarquía de información.
Usa con moderación: un fondo acentuado por vista, no por sección. Una vez que se convierte en patrón, pierde su poder.

Desplazamiento de Superficie (Falso Elevado)

A veces no quieres una sombra; quieres que una superficie parezca haber sido levantada y colocada sobre la página. En lugar de box-shadow, usa una ligera diferencia de color de fondo + borde + un sutil cambio de alineación — como una tarjeta que no está perfectamente alineada con la cuadrícula. Usado con cuidado, esto comunica "temporal" e "importante" mejor que una sombra, que a menudo comunica "flotando" sin peso.

Tipografía de Marca en Inputs

Los inputs no tienen que usar la pila de sistema. Si tu producto tiene un tipo de letra distintivo (incluso uno geométrico sans-serif), úsalo en inputs, etiquetas, y texto de entrada. Esto une sutilmente la entrada de datos con la identidad del producto. El campo de búsqueda de Linear no se parece al de cualquier otro, en parte porque usa la misma tipografía que el resto de la interfaz.

Anillos de Foco Personalizados

Los contornos de foco del navegador son feos. Reemplázalos siempre. Pero no solo los elimines — diseña anillos de foco que continúen el lenguaje de diseño: un borde de 2px del color de acento, o una sutil sombra interior, o un cambio en el color de fondo del input. El foco es un estado, no una ocurrencia tardía.

Sistema de Tokens

El Contrato

Tus tokens deben ser comprensibles por sí mismos. Si alguien solo leyera tus tokens de diseño (nombres + valores), debería tener una idea de cómo se ve y se siente el producto. Los nombres de token no son oscurecimiento — son tu primera y más repetida oportunidad de comunicar la intención del diseño.

Nombra con propósito:

--lienzo en lugar de --fondo (evoca una superficie en la que pintar, no una pantalla vacía)
--entintado en lugar de --color-primario-texto (evoca una pluma, no una variable)
--sombra-de-elevación en lugar de --sombra-2 (la elevación es una elección de diseño, la sombra es un efecto)

La prueba del lector de tokens: Entrégale tu lista de tokens a otro diseñador sin contexto. ¿Pueden decir si esto es para un banco, una red social o una herramienta de productividad? Si no, tus tokens no cuentan una historia.

Jerarquía de Tokens

Token global: define el mundo (--lienzo, --entintado, --font-cuerpo)
Token semántico: hereda de global para un propósito (--superficie-tarjeta, --texto-enlace, --borde-enfocar)
Token de componente: específico de un solo componente (--btn-primario-fondo, --input-borde-error)

No pases por alto la capa de componente directamente a la capa global en todos los lugares. La capa semántica es donde el diseño traduce el mundo en decisiones de UI.

El Cuarto Eje (Tiempo)

Los sistemas de diseño(variables CSS, tokens de diseño) típicamente trabajan en tres ejes: tema (claro/oscuro), modo (normal/daltónico), estado (hover/activo). El cuarto eje es tiempo — la misma interfaz se ve y se siente diferente a lo largo de una sesión, un día, o un año de uso. Considera:

Adaptación temporal: Una interfaz matutina podría usar colores más cálidos y menos contraste; una versión nocturna podría ser más oscura y silenciosa.
Tokens de estado de uso: Una interfaz recién instalada tiene un tono de bienvenida; después de 30 días de uso, el mismo panel se ve más denso y orientado a la tarea.

No — no necesitas implementar esto ahora. Pero piensa en ello. Las mejores interfaces se sienten vivas, no solo construidas.

El Flujo de Trabajo

1. Recopilar Contexto (1 mensaje)

Entender la tarea, la persona, y la sensación a través de preguntas o suposiciones.
Decidir: ¿este es un nuevo diseño, una revisión, una auditoría o un refinamiento?
Establecer el nivel de esfuerzo: ¿exploración completa del dominio + dirección visual, o solo pulido de tokens y espaciado?

No preguntes todo cada vez. Si el contexto es claro, salta a la exploración del dominio y la propuesta. Si no lo es, haz una pregunta concisa.

Primicia de alcance: Si el alcance del trabajo no está claro, pregúntalo primero: ¿Estamos diseñando un solo componente, una vista completa, o todo el producto? El nivel de detalle requerido es diferente. Un botón necesita exploración de dominio; un panel de control necesita jerarquía de información completa y un sistema de layout. No diseñes un ecosistema cuando el usuario solo necesita un componente.

2. Proponer Dirección (1 mensaje)

El bloque de salida para la fase de dirección. Siempre incluye:

## Proceso
(Resumen de 2-3 líneas de tu enfoque)

## Exploración del Dominio
**Dominio**: ...
**Mundo de Colores**: ...
**Firma**: ...
**Valores por Defecto a Rechazar**: ...

## Especificación de Intención
**Humano**: ...
**Tarea**: ...
**Sensación**: ...

## Dirección Visual
**Tipo de Letra**: ... (citar exactamente: nombre, pesos, tamaño de cuerpo, escala de titulares, tamaño mínimo)
**Paleta**: ... (5-8 colores con nombre y valor hex/rgba; estructura ~60/30/10)
**Sistema de Elevación**: ... (los valores numéricos para base, +1, +2 para modo claro y oscuro)
**Espaciado**: ... (el valor de cuadrícula base y el rango que usas; p.ej., 4px base, hasta 48px)
**Densidad**: ... (rango de padding de la pieza más pequeña a la tarjeta más grande)

## Elemento de Firma
(Describe el patrón único de 1-2 que hace que esto se sienta como este producto y no otro)

## Sugerir + Preguntar
- Recomendación: ...
- Pregunta o compensación: ...

3. Construir (n mensajes, iterar)

Construir en orden: estructura → layout → componente → token → estado → micro-interacción. No diseñes micro-interacciones en un lienzo vacío.
Por componente: renderizar + tokenizar + estado. Siempre renderiza el componente real; no te saltes a la tokenización después del primer render.
Prueba de legibilidad: un usuario nuevo, con los ojos entrecerrados, debe entender la jerarquía de la página. Si no, corrige el contraste.
Aplicar los movimientos de diseño avanzados cuando sea apropiado.
Cuando sea posible, entrega tanto la implementación como la justificación. "Cambié el padding de 16px a 20px porque el layout se sentía apretado y la métrica necesita respirar" es más útil que una diff silenciosa.

4. Revisar y Auditar (1 mensaje)

Revisa lo que se ha construido contra la intención declarada y la exploración del dominio. Busca específicamente valores por defecto deslizándose de vuelta. Enumera 3-5 cosas que específicamente están funcionando (conexiones de intención) y 2-3 que podrían mejorarse (brechas de artesanía).

## Revisión de Artesanía
### Trabajando
- [ ] ... (qué decisión específica funciona y por qué)
- [ ] ...

### Brechas
- [ ] ... (dónde se coló un valor por defecto, o dónde un movimiento de diseño es débil)
- [ ] ...

## Acción Siguiente Recomendada
- Próximo paso específico, o lista de elementos del backlog para la próxima iteración.

Sé honesto aquí. Si el diseño salió mal, dilo. El objetivo no es hacer sentir bien al usuario; es mejorar el producto.

Verificación Final: Una Última Lista

Cuando hayas terminado de diseñar — o incluso como parte de la revisión — repasa esto:

Prueba del entrecerrar los ojos: La jerarquía es legible con los ojos borrosos, sin líneas duras ni colisiones.
Prueba de la persona: Este diseño es para el humano específico que usa esta herramienta, no para un usuario genérico.
Prueba de intención: ¿La sensación (cálido/frío/denso/aireado) coincide con la intención declarada en cada superficie, borde y texto?
Prueba de emoción: ¿Cómo se siente una persona al mirar esto? ¿Confianza? ¿Curiosidad? ¿Frustración? La interfaz correcta evoca la emoción correcta.
Prueba de firma: ¿Un competidor podría tomar este diseño, cambiar el logo, y llamarlo suyo? Si es así, no hay suficiente diferenciación.
Prueba de impresión: ¿Qué es lo PRIMERO que nota un usuario? ¿Es la cosa a la que vinieron a hacer? Si no, el punto focal está mal.
Prueba de token: Si alguien lee solo tus variables CSS, ¿sabe qué producto es?
Prueba de expresión: ¿Hay al menos un patrón de UI que se siente original para este producto? (Componente, interacción, o layout que no esperarías ver en otro lugar)
Prueba de valor por defecto: ¿Hay alguna elección en esta interfaz que no puedas justificar excepto "se ve bien" o "es común"? Si es así, es un valor por defecto. Cámbialo o justifícalo.

Ninguna interfaz pasa todas las pruebas todo el tiempo. El objetivo es saber cuándo estás fallando, y por qué.

Hacer Preguntas

No preguntes innecesariamente. Este skill está diseñado para que asumas la mayor parte del contexto del prompt. Pero hay momentos en que preguntar es correcto:

Cuando la intención es ambigua. No puedes diseñar para un humano, una tarea y una sensación que el usuario no te ha dado. Pregunta una vez, de forma concisa.
Cuando hay una compensación que cambiará fundamentalmente el diseño. "Este panel de control tendrá 12 widgets o 120 widgets?" es una pregunta que cambia la arquitectura de la información. Hazla temprano.
Cuando el usuario pide algo que contradice un principio de diseño fundamental. "Has pedido que todos los elementos tengan el mismo tamaño, pero eso destruirá la jerarquía visual. ¿Te gustaría que en su lugar probemos un enfoque de diseño con un punto focal fuerte?"

No preguntes:

Cuestiones de preferencia de diseño que el skill está destinado a resolver ("¿quieres que el sidebar sea de 280px o 320px?"). Decide y justifica.
Cuestiones que el contexto del prompt ya responde. Vuelve a leer el prompt.
Preguntas retóricas o falsas opciones. "¿Quieres que se vea bien?" no es una pregunta.

Por qué este skill existe

Los LLMs generan buenas interfaces de manera confiable. Pueden hacer lo que 90% de los diseñadores humanos pueden hacer. Eso es el problema.

Los diseñadores humanos no son reemplazados por IA que puede igualar el percentil 90. Son reemplazados por IA que puede igualar el percentil 99. Eso requiere no solo conocimiento — requiere discernimiento. Saber cuándo lo que has generado es un valor por defecto disfrazado, no un diseño. Saber cuándo un layout "se ve bien" pero no está funcionando. Saber cuándo un token dice "plantilla" en lugar de "producto."

Este skill no te da discernimiento. Te da una lista de verificación, un proceso, y un montón de movimientos concretos para que tus interfaces no se vean como todo lo demás. Y te da una trampa: cada vez que dices "esto es lo suficientemente bueno," has fallado.

La buena noticia: el listón no es tan alto. La mayoría de los productos tienen interfaces que son funcionales pero olvidables. Si puedes hacer interfaces que la gente recuerde, ya estás por delante de la mayoría.

Créditos

Este skill está basado en el enfoque de diseño de interfaces usado en CX y otros estudios de diseño de producto. No es único ni original — es una síntesis de lo que los mejores equipos de diseño de producto hacen, destilado en un proceso que una IA puede seguir. Úsalo bien.

Preguntar en tu IA favorita

Documentación