Diseño de Interfaces

Construye interfaces de producto con la artesanía de un equipo de diseño de primer nivel — Linear, Vercel, Stripe, Apple. La diferencia entre estos y los resultados genéricos no es el talento. Es que cada decisión fue decidida, la jerarquía es inconfundible y un centenar de pequeños detalles están correctos a la vez. Este skill es cómo llegar allí.

Alcance

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

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

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

El Problema

Generarás resultados genéricos. 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 se basa en patrones. La brecha entre ellos es donde ganan los valores predeterminados. 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 predeterminados no hacen.

El listón: Si otra IA, con una indicación similar, produjera sustancialmente el mismo resultado, has fallado. No diferente por sí mismo — diferente porque la interfaz emergió de este usuario, esta tarea, este mundo. Cuando diseñas a partir de valores predeterminados, todo se ve igual, porque los valores predeterminados son compartidos.

Dónde se Esconden los Valores Predeterminados

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

La tipografía parece un contenedor. Pero el tipo no sostiene 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. Recurrir a tu fuente habitual significa que no estás diseñando.
La navegación parece un 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 demostración de componentes, no software.
Los datos parecen presentación. Pero un número en pantalla no es diseño. ¿Qué significa para la persona que mira? Un anillo de progreso y una etiqueta apilada muestran "3 de 10" — uno cuenta una historia, el otro llena espacio.
Los nombres de tokens parecen detalle de implementación. Pero --ink y --parchment evocan un mundo; --gray-700 y --surface-2 evocan una plantilla. Alguien que lea solo tus tokens debería adivinar qué producto es.

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

Intención Primero

Antes de tocar código, responde estas preguntas. Mantenlo como un resumen de trabajo compacto 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á 5 minutos después? Un profesor a las 7am con café no es un desarrollador depurando a medianoche ni un fundador entre reuniones de inversores.
¿Qué debe 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 operaciones? ¿Tranquilo como una aplicación de lectura? Esto moldea color, tipo, espaciado, densidad — todo.

Si la indicación es demasiado vaga para identificar al humano, la tarea y la sensación, haz una pregunta concisa. Si el contexto permite una suposición responsable, exprésala brevemente y continúa.

La intención debe ser sistémica. Decir "cálido" y luego usar colores fríos no es ser consecuente. Si la intención es cálida: superficies, texto, bordes, acentos, colores semánticos, tipo — todo cálido. Si es densa: 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 recurrido al valor predeterminado.

Exploración del Dominio del Producto

Aquí es donde los valores predeterminados 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 invertido en el 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 color — ¿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 predeterminados — 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 hay disponible una herramienta de renderizado visual en línea 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 sobre 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 exista tal herramienta (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 Sugerir + Preguntar, renderiza un pequeño espécimen en vivo: la paleta como muestras reales, la escala tipográfica 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 variaciones lado a lado) para que las decisiones de artesanía — espaciado, bordes, jerarquía, estados — sean visibles, no afirmadas. Renderiza los estados reales (predeterminado, 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 muestre, no se narre.

Reglas al renderizar:

El widget muestra solo lo visual. Todo el razonamiento, la exploración del dominio, la lista de valores predeterminados rechazados y la recomendación permanecen en tu texto de respuesta — nunca pegues prosa dentro del widget.
Respeta el contrato del sistema de diseño de la propia 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 luches contra el chrome del anfitrión.
El espécimen debe seguir pasando las comprobaciones a continuación. Un valor predeterminado renderizado sigue siendo un valor predeterminado — renderizar es cómo la artesanía se ve, no un sustituto de ella.
Esto renderiza a la conversación, no al proyecto. La implementación real aún llega al código base a través de ediciones normales.

El punto: colapsar el bucle 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 se ve diseñado" versus "esto se ve generado." Los valores predeterminados producen planitud — todo el 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. Esa cosa domina — a través de 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 tipográfica es una proporción, y el peso vence al tamaño

No elijas tamaños por intuición. Elige una proporción y aplícala en pasos: ~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 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 del peso + opacidad solos — valor: 600 / primario, etiqueta: 500 / secundario, meta: 400 / atenuado — separando más limpiamente que dos pesos regulares separados por dos puntos. Construye a partir de tres palancas juntas (tamaño, peso, color/opacidad), nunca solo el 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 práctico — una métrica, plana vs decidida. Plana: Ingresos / $48,200 ambos 14px regular gris, tres cajas idénticas, sin punto focal. Decidida: INGRESOS 11px/500/atenuado/espaciado · $48,200 28px/600/primario/tabular-nums (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 está degradada, las métricas secundarias caen a un nivel inferior.

La densidad es una decisión, expresada en px

Linear es apretado; Stripe es aireado. Ninguno es predeterminado — 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 como un banco de trabajo apretado; 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 densas de control dan paso a contenido abierto; los elementos pesados equilibran a 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 grupos.

Las proporciones hablan

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

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

~60/30/10: una superficie neutra 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 pensar. 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 las 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.
Ajuste óptico en tipos grandes: aprieta el espaciado entre letras a medida que el tipo se hace más grande (titulares con tracking ligeramente negativo); afloja el interlineado en el cuerpo para la legibilidad (~1.5). El tipo apretado se lee como artesanal; el tracking predeterminado en un titular de 32px se lee como un documento.

Fundamentos de Artesanía

Capas Sutiles (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 control 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 menú desplegable está por encima de una tarjeta que está por encima de la página. Construye un sistema numerado — base, luego niveles crecientes. Cada salto es solo unos pocos puntos porcentuales de claridad — ej. modo oscuro base → +7% → +9% → +12%; modo claro permanece claro y agrega sombra en su lugar. Apenas puedes ver un paso en aislamiento, pero apilados, la jerarquía emerge. Cambios susurrantes que sientes más que ves.

Barras laterales: mismo fondo que el lienzo, no un color diferente. Colores diferentes fragmentan el espacio en "mundo de barra lateral" y "mundo de contenido." Un borde sutil es suficiente.
Desplegables/popovers: un nivel por encima de su superficie padre, o se mezclan y la capa se pierde.
Entradas: ligeramente más oscuras que su entorno, no más claras. Las entradas están empotradas — reciben contenido. Un relleno más oscuro señala "escribe aquí" sin bordes pesados.

Bordes. Deberían desaparecer cuando no los buscas, pero ser encontrables cuando necesitas estructura. rgba de baja opacidad se mezcla con el fondo y define un borde sin exigir atención; los bordes sólidos hex parecen 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 enfoque — y empareja la intensidad con la importancia del límite.

La prueba de entrecerrar los ojos: desenfoca la vista 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 fallas en esto, nada más importa.

Expresión Infinita

Cada patrón tiene expresiones infinitas — ninguna dos interfaces deberían verse igual. Una visualización de métricas podría ser un número héroe, estadística en línea, minigráfico, indicador, barra de progreso, delta de comparación o insignia de tendencia. El mismo ancho de barra lateral, la misma cuadrícula de tarjetas, las mismas cajas métricas de icono-izquierda-número-grande-etiqueta-pequeña cada vez señala generación por IA 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, expresiones infinitas. Antes de construir, pregúntate: ¿cuál es la ÚNICA cosa que los usuarios hacen aquí, y qué producto resuelve un problema similar de manera brillante?

El Color Vive en Algún Lugar

Cada producto existe en un mundo de color único. No se trata de elegir un tono de marca y repetirlo; se trata de encontrar la paleta que pertenece a este ecosistema. El color debe sentirse nativo, no pegado. Pregunta: si este producto fuera un paisaje, ¿de qué color sería el cielo, el suelo, los puntos de referencia? La paleta debe reflejar el dominio: una herramienta financiera podría inclinarse hacia grises fríos y verdes sobrios; una aplicación de salud podría usar tonos tierra y azules suaves. El acento (el 10%) es la elección más importante — debe ser inolvidable y funcional.

Estados y Transiciones

Cada componente debe hablar en todos sus estados: predeterminado, hover, activo, enfocado, deshabilitado, cargando, vacío, error. El estado predeterminado es solo el comienzo. El arte está en cómo el componente se mueve entre estados. Las transiciones deben ser rápidas (150-200ms), predecibles y con propósito. Un botón que se desvanece suavemente a un estado deshabilitado se siente receptivo; uno que parpadea se siente roto. La animación no es decoración — es comunicación. Un spinner de carga no es un detalle; es una señal de que el sistema está vivo.

Microinteracciones

Los detalles más pequeños a menudo tienen el mayor impacto. Una entrada que se expande suavemente al enfocarse, un menú que aparece con un ligero retraso (50ms), una tarjeta que se eleva al pasar el cursor — estas no son características, son señales de atención. Cada microinteracción debe responder a una pregunta: "¿qué está pasando?" o "¿qué puedo hacer aquí?" Si una interacción no aclara el estado o la acción, es ruido.

Legibilidad y Accesibilidad

La accesibilidad no es una lista de verificación; es un subproducto de un diseño claro. Las proporciones de contraste deben ser suficientes para WCAG AA (al menos 4.5:1 para texto normal, 3:1 para texto grande). El tamaño del objetivo táctil debe ser de al menos 44x44px. La navegación por teclado debe ser lógica y visible. Pero más allá de los números, la accesibilidad significa que el diseño no asume nada sobre la capacidad del usuario — el texto es legible, los estados son claros, la jerarquía es obvia. Si necesitas explicar un diseño, no es lo suficientemente accesible.

Metodología de Trabajo

Fase 1: Exploración

Antes de abrir un editor, explora el dominio. Habla con el usuario (si es posible), lee los requisitos, mira productos competidores. El objetivo no es recopilar características, sino entender el territorio. ¿Cuál es la tensión central? ¿Qué hace que este producto sea único? ¿Cuál es el momento "ajá" que los usuarios tienen? Este es el material crudo de la firma.

Fase 2: Síntesis

Destila la exploración en una dirección. Elige el mundo de color, la firma y la jerarquía. Escribe una declaración de intención que podría estar en la puerta del producto: "Esta interfaz permite a los equipos de ventas cerrar tratos un 20% más rápido al hacer que los datos de clientes potenciales sean la pieza central de cada vista." Esta declaración guía cada decisión posterior.

Fase 3: Construcción

Comienza con la estructura, no el estilo. Esqueleto primero: diseño, jerarquía de contenido, navegación. Luego agrega el sistema visual: tipo, color, espaciado. Finalmente, pule: estados, transiciones, microinteracciones. Construir en este orden asegura que el estilo sirva a la estructura, no al revés.

Fase 4: Revisión

Revisa contra la declaración de intención. ¿Cada elección sirve al objetivo? ¿La firma es obvia? ¿Los valores predeterminados han sido atrapados? Usa la prueba de entrecerrar los ojos, la prueba de eliminación de nombre de producto y la prueba de "¿esto se siente como el dominio?" Si algo falla, vuelve a la fase de síntesis.

Conclusión

El diseño de interfaz de producto no se trata de seguir una receta; se trata de tomar decisiones. Cada elección — desde el tipo de letra hasta el espaciado entre párrafos — es una declaración sobre el producto y sus usuarios. Este skill te da el marco para hacer esas declaraciones con intención, consistencia y artesanía. No es una garantía de gran diseño; es una herramienta para atrapar los valores predeterminados y hacer espacio para lo que hace que este producto sea único.

Ahora, ve y diseña algo que solo tú podrías haber hecho.

Preguntar en tu IA favorita

Documentación