Principios de diseño para ingenieros de software

Actualizado el 18 de mayo de 2026

Actualización del 18 de mayo de 2026: Se renovó el índice de Estudios de diseño para alinearlo con el corpus actual de 48 estudios y se ampliaron los Patrones de interfaz de IA con evidencia de flujos de trabajo agénticos: puntos de control, estados de aprobación, confianza en las fuentes y verificación visible.

Actualización de mayo de 2026: Se agregó una nota sobre el borrador de trabajo de marzo de 2026 de WCAG 3.0 y la postura del W3C de que WCAG 2.2 y 3.0 coexistirán. WCAG 2.2 sigue siendo el estándar al que debes apuntar para el trabajo actual de accesibilidad.

Actualización de febrero de 2026: Se agregaron dos secciones nuevas: Patrones de interacción (8 paradigmas a partir del estudio de Framer, Flighty, Halide, Warp, Bear, Craft y Superhuman) y Patrones de interfaz de IA (diseño centrado en citas, fases de streaming, transparencia de errores de Perplexity). Se actualizaron los Patrones web a 2026 con posicionamiento de anclas, animaciones impulsadas por scroll y @starting-style. Se actualizó la accesibilidad para reflejar la estandarización ISO de WCAG 2.2. Consulta Estudios de diseño para ver análisis detallados de 48 productos excepcionales. He pasado años estudiando diseño mientras desarrollaba software, absorbiendo principios de leyendas como Dieter Rams y analizando a fondo interfaces de productos como Linear, Stripe y Raycast. Esta guía condensa ese entendimiento en la referencia completa que me habría gustado tener cuando empecé a preocuparme por cómo se veía y se sentía mi software.

El diseño no es decoración. Es comunicación. Cada píxel comunica función, jerarquía y significado. La diferencia entre el software que se siente de aficionado y el software que se siente profesional está en entender estos principios y aplicarlos de forma consistente.

Esta guía parte de que ya sabes escribir código. Te enseña a ver: a entender por qué algunas interfaces se sienten fluidas mientras otras se sienten caóticas y, más importante aún, cómo construir las primeras.

Tabla de contenidos

Parte 1: Fundamentos

1. Psicología Gestalt
2. Tipografía
3. Teoría del color
4. Jerarquía visual
5. Espaciado y ritmo
6. Principios de animación

Parte 2: Interacción e IA

1. Patrones de interacción
2. Patrones de interfaz con IA

Parte 3: Filosofía de diseño

1. Dieter Rams: Diez principios

Parte 4: Implementación

1. Patrones web 2026
2. Sistema de design tokens
3. Modo oscuro bien hecho
4. Flujos de extracción en Figma

Parte 5: Referencia

1. Tablas de referencia rápida
2. Lista de verificación de diseño
3. Estudios de diseño

Psicología Gestalt

“El todo es distinto de la suma de sus partes.” — Kurt Koffka

La psicología Gestalt, desarrollada en la Alemania de los años 1920, explica cómo los seres humanos perciben la información visual. El cerebro no ve píxeles individuales, sino que organiza los elementos en patrones con significado. Domina estos principios para controlar cómo los usuarios perciben tus interfaces.

Proximidad

Los elementos cercanos entre sí se perciben como un grupo.

Este es el principio Gestalt más poderoso en el diseño de UI. El espacio comunica relación más que cualquier otra propiedad visual.

INCORRECTO (espaciado uniforme = sin agrupación):
┌─────────────────┐
│ Label           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

CORRECTO (espaciado desigual = grupos claros):
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Ajustado (4px) - relacionados
│                 │
│                 │ ← Amplio (24px) - separando grupos
│ Label           │
│ Input Field     │ ← Ajustado (4px) - relacionados
└─────────────────┘

Implementación en CSS:

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

.form-group label {
  margin-bottom: 4px;   /* Label to input: tight */
  display: block;
}

Implementación en SwiftUI:

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similitud

Los elementos que comparten características visuales parecen estar relacionados.

Cuando los elementos se ven iguales, los usuarios asumen que funcionan igual. Por eso los sistemas de diseño usan estilos de botón, tratamientos de tarjetas y tipografía consistentes.

Ejemplo de navegación:
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Mismo estilo = misma función
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Mismo estilo = mismo tipo de contenido
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Estilo diferente = función diferente
└───────────────────────────────────┘

Figura-fondo

El contenido debe separarse claramente del fondo.

El cerebro necesita distinguir la “figura” (en qué enfocarse) del “fondo” (el trasfondo). Una mala relación figura-fondo genera confusión visual.

Técnicas: - Contraste (figura clara sobre fondo oscuro, o viceversa) - Sombras (elevar la figura sobre el fondo) - Bordes (delimitar los contornos de la figura) - Desenfoque (desenfocar el fondo, enfocar la figura)

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Región común

Los elementos dentro de un límite se perciben como agrupados.

Encerrar elementos dentro de un contenedor visual (tarjeta, caja, área con bordes) indica que pertenecen al mismo grupo.

Continuidad

El ojo sigue trayectorias, líneas y curvas.

Usa la alineación y el flujo visual para guiar la atención a través de tu interfaz.

CONTINUIDAD EN LA ALINEACIÓN:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alineados en el eje horizontal
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← El ojo sigue el borde izquierdo
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Sigue en el borde izquierdo
└────────────────────────────────┘

Cierre

El cerebro completa las formas incompletas.

Los usuarios no necesitan que cada píxel esté dibujado: completan mentalmente las formas conocidas. Esto permite diseños más minimalistas y elegantes.

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Referencia rápida de Gestalt

Tipografía

“La tipografía es el oficio de dotar al lenguaje humano de una forma visual duradera.” — Robert Bringhurst

La tipografía es la base del diseño de interfaces. El texto comunica funcionalidad, jerarquía y marca. Una tipografía deficiente hace que las interfaces sean más difíciles de usar; una gran tipografía es invisible: simplemente funciona.

Escala tipográfica

Una escala consistente crea armonía visual. Usa una proporción matemática.

La escala 1.25 (recomendada para UI):

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Altura de línea (interlineado)

La altura de línea afecta drásticamente la legibilidad. Distintos tipos de contenido requieren diferente interlineado.

Longitud de línea (medida)

La longitud de línea óptima previene la fatiga visual y mejora la comprensión lectora.

• Óptimo: 45-75 caracteres por línea
• Objetivo: 50-65 caracteres
• Máximo absoluto: 85 caracteres

p {
  max-width: 65ch;  /* ch unit = width of '0' character */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Selección de fuentes

Fuentes del sistema primero. Se cargan al instante, coinciden con la plataforma y están optimizadas para pantallas.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Usa fuentes personalizadas para: - Diferenciación de marca (sitios de marketing) - Sensación editorial o de publicación - Intención de diseño específica no alcanzable con fuentes del sistema

Peso de fuente para jerarquía

Usa el peso para establecer jerarquía, no solo el tamaño.

h1 { font-weight: 700; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Referencia rápida de tipografía

Teoría del color

“El color es un poder que influye directamente en el alma.” — Wassily Kandinsky

El color comunica más rápido que las palabras. Establece el estado de ánimo, guía la atención, señala significado y construye reconocimiento de marca.

La regla 60-30-10

La distribución de color más confiable para interfaces equilibradas.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominant (Background)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secondary (Cards, sections)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Accent (Buttons, links)
└──────────────────────────────────────────┘

Crear una paleta de colores

Cada interfaz necesita estos colores semánticos:

:root {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

  /* Neutrals */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Text */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Psicología del color

/* Design dark first, derive light */
:root {
  /* Dark mode defaults */
  --color-background: hsl(0, 0%, 0%);
  --color-surface: hsl(0, 0%, 7%);
  --color-border: hsl(0, 0%, 15%);
  --color-text: hsl(0, 0%, 93%);
  --color-text-secondary: hsl(0, 0%, 63%);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-background: hsl(0, 0%, 100%);
    --color-surface: hsl(0, 0%, 97%);
    --color-border: hsl(0, 0%, 89%);
    --color-text: hsl(0, 0%, 9%);
    --color-text-secondary: hsl(0, 0%, 40%);
  }
}

Cuándo usarlo: Herramientas para desarrolladores, apps de contenido multimedia, paneles de control: contextos donde los usuarios pasan sesiones largas y el modo oscuro reduce la fatiga visual.

Contraste de accesibilidad

WCAG 3.0 sigue siendo un borrador de trabajo. La revisión más reciente se publicó en marzo de 2026 y no reemplaza a WCAG 2.2; el W3C afirma que ambos estándares coexistirán. El Accessibility Guidelines Working Group planea publicar una cronología proyectada de WCAG 3 en 2026, pero WCAG 2.2 sigue siendo el estándar al que debes apuntar para el trabajo actual.

Herramientas: WebAIM Contrast Checker, selector de color de Chrome DevTools

Jerarquía visual

“El diseño es el embajador silencioso de tu marca.” — Paul Rand

La jerarquía visual controla qué ven los usuarios primero, segundo y tercero. Sin una jerarquía clara, los usuarios tienen que esforzarse para encontrar información. Con ella, las interfaces se sienten fluidas.

Las seis herramientas de la jerarquía

1. Tamaño — Los elementos más grandes atraen la atención primero

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Peso — La negrita se adelanta, el peso ligero retrocede

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Color y contraste — Alto contraste = atención

.title { color: var(--color-text); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

4. Posición — Las posiciones clave importan

F-PATTERN (content pages):     Z-PATTERN (landing pages):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Espacio en blanco — El aislamiento crea importancia

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Profundidad y elevación — Los elementos que se proyectan al frente exigen atención

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

Patrones aplicados

Presencia colaborativa (Figma): Varios cursores de usuarios con etiquetas de nombre, resaltados de selección y contornos de componentes crean un documento vivo. El color de cada colaborador es distinto, pero tiene el mismo peso visual: ningún cursor es “más llamativo” que otro.

Indicadores de estado sutiles (Vercel): El estado de despliegue usa indicadores sutiles y persistentes en lugar de alertas intrusivas. Una barra delgada de color en la parte superior comunica el estado (compilando, desplegado, fallido) sin interrumpir el flujo de trabajo.

Analogías de diseño del mundo real (Flighty): Las visualizaciones del progreso de vuelo reflejan instrumentos físicos de aviación: curvas de altitud, indicadores de velocidad y mapas de puertas de embarque usan metáforas visuales familiares en lugar de barras de progreso abstractas.

La prueba de entrecerrar los ojos

Entrecierra los ojos al mirar tu diseño. ¿Todavía puedes ver la jerarquía? Si la respuesta es sí, es sólida.

Espaciado y ritmo

“El espacio en blanco es como el aire: es necesario para que el diseño respire.” — Wojciech Zieliński

El espaciado es la estructura invisible del diseño. Un espaciado consistente crea ritmo visual: la sensación de que los elementos pertenecen a un sistema coherente.

La cuadrícula de 8px

La cuadrícula de 8px es el estándar de la industria porque: - Se divide de manera uniforme (8, 16, 24, 32, 40, 48…) - Funciona con densidades de pantalla comunes (1x, 1.5x, 2x, 3x) - Crea un ritmo consistente sin hacer cálculos

:root {
  --space-1: 4px;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

Espaciado interno vs externo

Interno (padding): Espacio dentro de un elemento Externo (margin): Espacio entre elementos

Regla: El espaciado interno normalmente debe ser mayor que el espaciado externo dentro de grupos relacionados.

.card {
  padding: 24px;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than padding */
}

Patrones de espaciado de componentes

Tarjetas:

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Tight to subtitle */

Botones:

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Formularios:

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Referencia rápida de espaciado

Principios de animación

“La animación no es el arte de dibujos que se mueven, sino el arte de movimientos que se dibujan.” — Norman McLaren

La animación da vida a las interfaces. Bien ejecutada, guía la atención, comunica estados y genera conexión emocional. Mal ejecutada, frustra y distrae.

El principio fundamental

La animación debe sentirse inevitable, no decorativa.

Buena animación: 1. Comunica algo que el diseño estático no puede 2. Reduce la carga cognitiva al mostrar relaciones 3. Se siente natural y esperada 4. Desaparece de la percepción consciente

Mala animación: 1. Existe solo porque “se ve bien” 2. Ralentiza al usuario 3. Llama la atención sobre sí misma 4. Genera ansiedad o impaciencia

Principios clave para UI

1. Anticipación — Prepara a los usuarios para lo que viene.

.button {
  transition: transform 0.1s ease-out;
}

.button:active {
  transform: scale(0.97);  /* Slight press before action */
}

2. Seguimiento — Deja que el movimiento se complete de forma natural con un asentamiento tipo resorte.

.panel {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isOpen = true
}

3. Ease-In, Ease-Out — Nada en la naturaleza se mueve a velocidad constante.

4. Puesta en escena — Dirige la atención a lo que importa. Solo un elemento debe moverse a la vez, a menos que estén coreografiados como grupo.

5. Escalonamiento — Los elementos deben llegar en secuencia, no todos a la vez.

.list-item {
  animation: fadeSlideIn 0.3s ease-out both;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Guía de tiempos

Rendimiento: la regla de oro

Solo anima transform y opacity — están acelerados por GPU y no provocan recálculo de layout.

/* BAD: Animating layout */
.panel { transition: left 0.3s, width 0.3s; }

/* GOOD: Using transform */
.panel { transition: transform 0.3s; }

Cuándo NO animar

1. El usuario tiene prefers-reduced-motion activado css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

2. La animación no aporta información — spinners gratuitos, elementos que rebotan

3. Los usuarios tienen prisa — estados de error, validación de formularios, resultados de búsqueda
4. La animación retrasaría acciones repetidas — los atajos de teclado deben omitir la animación
5. Los datos ya están cargados — Bear usa cero estados de carga al precargar el contenido, haciendo que la app se sienta instantánea. Si puedes precargar, omite el skeleton/spinner por completo.

// Bear's approach: preload so no loading state is needed
struct NoteListView: View {
    @Query var notes: [Note]  // SwiftData loads from disk instantly
    // No loading state, no skeleton, no spinner — data is always there
    var body: some View {
        List(notes) { note in
            NoteRow(note: note)
        }
    }
}

Referencia rápida de animación

:root {
  /* Durations */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easings */
  --ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
  --ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Patrones de interacción

“La mejor interfaz es no tener interfaz.” — Golden Krishna

Los patrones de interacción definen cómo los usuarios manipulan, navegan y comprenden tu producto. Estos patrones se extraen del estudio de productos que ofrecen interacciones excepcionales.

Manipulación directa (Framer)

Haz tangibles los conceptos abstractos. Framer transforma los breakpoints de CSS —números abstractos— en controles arrastrables. Los usuarios ven cómo los layouts se adaptan en tiempo real.

/* Breakpoint handle styling */
.breakpoint-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  cursor: col-resize;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.breakpoint-handle:hover,
.breakpoint-handle:active {
  opacity: 1;
  width: 6px;
}

Cuándo usar: Cualquier configuración donde el resultado sea visual —redimensionar arrastrando, selectores de color, desplazamiento en líneas de tiempo.

Interfaces sensibles al contexto (Flighty, Figma)

Muestra solo lo relevante para el momento actual. Flighty usa 15 estados distintos para el seguimiento de vuelos. El panel de propiedades de Figma se transforma por completo según lo que hayas seleccionado.

enum ContextState: CaseIterable {
    case farOut, dayBefore, headToAirport, atAirport
    case atGate, boarding, inFlight, landed, connection

    static func current(for flight: Flight, context: UserContext) -> ContextState {
        // Factor in: time, location, flight status
        // Return the single most relevant state
    }
}

Anti-patrón: Mostrar todos los controles y atenuar los irrelevantes. Esto genera ruido visual.

Activación inteligente (Halide)

Las herramientas deben detectar el contexto y activarse solas. La lupa de enfoque de Halide aparece al arrastrar el foco y desaparece al soltar. No se necesitan botones de alternancia.

struct IntelligentlyActivated<Content: View>: ViewModifier {
    let isInteracting: Bool
    @State private var isVisible = false

    func body(content: Content) -> some View {
        content
            .opacity(isVisible ? 1 : 0)
            .scaleEffect(isVisible ? 1 : 0.95)
            .animation(.easeInOut(duration: 0.2), value: isVisible)
            .onChange(of: isInteracting) { _, newValue in
                if newValue {
                    withAnimation { isVisible = true }
                } else {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        if !isInteracting { isVisible = false }
                    }
                }
            }
    }
}

Diseño de modo dual (Halide, Warp)

Los cambios de modo deben transformar la UI, no solo alternar elementos. Los modos Auto y Manual de Halide son interfaces completamente diferentes. Warp conecta CLI y GUI a través de cuatro métodos de entrada (escritura, paleta, IA, ratón) sin forzar a los usuarios a un solo paradigma.

Contenido estructurado (Warp, Bear, Craft)

Añade estructura al contenido tradicionalmente desestructurado. Warp convierte la salida del terminal en bloques discretos que se pueden copiar, compartir o volver a ejecutar. Bear te permite organizar notas en línea mientras escribes (#tag/subtag). Craft permite que cualquier bloque se convierta en página —la estructura emerge del uso, no de una jerarquía predefinida.

Entrenamiento progresivo (Superhuman)

Enseña a los usuarios el camino rápido mediante la exposición repetida. La paleta Cmd+K de Superhuman siempre muestra los atajos de teclado junto a los resultados. Cada uso es una micro-lección.

/* Always show shortcut alongside command name */
.command-result {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
}

.command-shortcut {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

Anti-patrón: Modales de tutorial que explican funciones. La explicación se olvida; la práctica se recuerda.

Patrones de interfaz de IA

“Las mejores interfaces de IA hacen visible el proceso de la máquina y verificable su resultado.”

Las interfaces de IA enfrentan desafíos únicos: los usuarios no pueden predecir el resultado, no pueden verificar la precisión con solo inspeccionarlo y, a menudo, no pueden saber si el sistema está funcionando o fallando.

El problema central

.citation-marker {
  position: relative;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8em;
  vertical-align: super;
}

.citation-preview {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Antipatrón: Interfaces de IA que generan afirmaciones sin fuentes rastreables. Si el modelo no puede citar una afirmación, la interfaz debería señalarlo.

Indicadores de fase de streaming (Perplexity)

Muestra a los usuarios qué está haciendo la IA, no solo que está trabajando. Reemplaza los indicadores de carga genéricos por indicadores de fase: “Buscando…” → “Leyendo 4 fuentes…” → “Escribiendo respuesta…”

.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  border-radius: 16px;
  font-size: 13px;
  color: var(--phase-color);
  transition: all 0.3s ease;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

Transparencia ante errores

Cuando la IA falla o no tiene certeza, muéstralo con claridad; no lo ocultes detrás de texto que suena seguro.

Evidencia de flujos de trabajo agénticos

Los agentes de IA necesitan estados de interfaz que demuestren el trabajo, no que solo narren el esfuerzo. Un buen flujo de trabajo agéntico vuelve el progreso legible mediante puntos de control: plan aceptado, fuentes recopiladas, ediciones aplicadas, pruebas ejecutadas, revisión pendiente y lanzamiento bloqueado o listo.

Dieter Rams: diez principios

“Menos, pero mejor.” — Dieter Rams

Dieter Rams es el diseñador industrial más influyente del siglo XX. Como director de diseño en Braun de 1961 a 1995, creó productos que siguen siendo atemporales décadas después. Su trabajo inspiró directamente el lenguaje de diseño de Apple.

Los diez principios del buen diseño

1. El buen diseño es innovador No copies. Combina los avances tecnológicos con un diseño innovador.

2. El buen diseño hace que un producto sea útil Cada elemento debe cumplir un propósito. La forma sigue a la función.

3. El buen diseño es estético La belleza no es superficial: es esencial. Los productos que usamos a diario afectan nuestro bienestar.

4. El buen diseño hace que un producto sea comprensible Los usuarios no deberían necesitar instrucciones. La interfaz se explica por sí sola.

5. El buen diseño es discreto El diseño debe apoyar, no abrumar. El contenido del usuario es el protagonista, no tu UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. El buen diseño es honesto No uses patrones oscuros. No prometas de más. Sé transparente sobre las limitaciones.

7. El buen diseño es duradero Evita tendencias que envejecerán rápido. Lo clásico por encima de lo pasajero.

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

8. El buen diseño es minucioso hasta el último detalle Nada debe ser arbitrario. Estados de carga, estados vacíos, estados de error: todo diseñado.

9. El buen diseño es respetuoso con el medio ambiente El rendimiento también es ambiental. Respeta la atención del usuario. Código eficiente.

10. El buen diseño es tan poco diseño como sea posible Elimina todo lo que no sea necesario. El mejor diseño es invisible.

Patrones web 2026

El diseño web moderno aprovecha capacidades nativas de CSS que eliminan la necesidad de JavaScript en muchos casos. Entre 2025 y 2026 llegaron a los navegadores de producción el posicionamiento de anclas, las animaciones impulsadas por scroll y @starting-style.

Container Queries

Ajusta el tamaño de los componentes según su contenedor, no según el viewport.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

El selector :has()

Selección del elemento padre en función de sus hijos, algo que antes era imposible sin JavaScript.

/* Card with image gets different padding */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

Anidamiento de CSS

Anidamiento nativo sin preprocesadores.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

Integración con HTMX

Interactividad controlada por el servidor sin frameworks JavaScript pesados.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Posicionamiento con anclas

Posicionamiento nativo de CSS de un elemento con respecto a otro, sin necesidad de JavaScript. Tooltips, popovers y menús desplegables que siguen a sus activadores.

/* Anchor an element to another */
.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Animaciones controladas por scroll

Vincula el progreso de la animación con la posición de scroll. Indicadores de progreso de lectura, efectos de paralaje y secuencias de revelado sin JavaScript.

/* Reading progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@starting-style

Define estilos iniciales para los elementos que entran al DOM, lo que permite animaciones de entrada solo con CSS y sin JavaScript.

.card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

Sistema de tokens de diseño

Un sistema completo de tokens para mantener la coherencia en toda tu aplicación.

:root {
  /* Colors */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Modo oscuro bien hecho

No solo inviertas: rediseña para contextos oscuros.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Text (inverted) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Principios del modo oscuro: - Reduce la saturación en superficies grandes - Aumenta la luminosidad de los colores de acento - Refuerza las sombras (necesitan más contraste) - Diseña el modo oscuro de forma intencional, no como algo que se agrega al final

Flujos de trabajo de extracción en Figma

Transformar archivos de diseño en código de producción requiere una extracción sistemática de tokens de diseño: colores, tipografía, espaciado y efectos que definen tu lenguaje de diseño.

Exportación de Variables de Figma

La función nativa Variables de Figma ofrece la ruta de extracción más limpia:

Pasos de exportación: 1. Abre el archivo de Figma → panel Local Variables 2. Haz clic en el menú de colección → “Export to JSON” 3. Guárdalo como figma-variables.json

Estructura de tokens de JSON:

{
  "colors": {
    "primitive": {
      "blue-500": { "value": "#3b82f6", "type": "color" },
      "blue-600": { "value": "#2563eb", "type": "color" }
    },
    "semantic": {
      "primary": { "value": "{colors.primitive.blue-500}", "type": "color" },
      "primary-hover": { "value": "{colors.primitive.blue-600}", "type": "color" }
    }
  },
  "spacing": {
    "1": { "value": "4px", "type": "spacing" },
    "2": { "value": "8px", "type": "spacing" },
    "4": { "value": "16px", "type": "spacing" }
  }
}

Transformación de tokens a CSS

Propiedades personalizadas de CSS:

:root {
  /* Primitive colors (direct values) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Semantic colors (reference primitives) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

  /* Spacing (8px grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tokens de modo oscuro:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Transformación de tokens a SwiftUI

Extensión de Color:

import SwiftUI

extension Color {
    // MARK: - Primitive Colors
    static let blue50 = Color(hex: "eff6ff")
    static let blue500 = Color(hex: "3b82f6")
    static let blue600 = Color(hex: "2563eb")

    // MARK: - Semantic Colors
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Surface Colors
    static let surfaceBackground = Color(light: .white, dark: Color(hex: "0f172a"))
    static let surfaceElevated = Color(light: Color(hex: "f8fafc"), dark: Color(hex: "1e293b"))
}

extension Color {
    init(hex: String) {
        // Standard hex parsing implementation
    }

    init(light: Color, dark: Color) {
        self.init(UIColor { traits in
            traits.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }
}

Constantes de espaciado:

enum Spacing {
    static let xs: CGFloat = 4    // --space-1
    static let sm: CGFloat = 8    // --space-2
    static let md: CGFloat = 16   // --space-4
    static let lg: CGFloat = 24   // --space-6
    static let xl: CGFloat = 32   // --space-8
}

// Usage
VStack(spacing: Spacing.md) {
    // ...
}
.padding(Spacing.lg)

Lista de verificación para la entrega de diseño

Qué deben exportar los diseñadores:

• [ ] Todos los colores definidos como variables (sin valores hex codificados directamente)
• [ ] La tipografía usa estilos de texto definidos
• [ ] El espaciado sigue el sistema de cuadrícula (base de 8px)
• [ ] Se proporcionan variantes de modo oscuro
• [ ] Los estados interactivos están documentados (hover, active, disabled)
• [ ] Los breakpoints responsivos están anotados
• [ ] Se indican los requisitos de accesibilidad (ratios de contraste)

El desarrollador recibe:

1. Archivos de tokens (JSON/CSS/Swift según la plataforma)
2. Especificaciones de componentes con medidas
3. Exportaciones de recursos en los formatos requeridos
4. Documentación de interacción (estados, animaciones)
5. Anotaciones de accesibilidad

Tablas de referencia rápida

Principios Gestalt

Lista de verificación de diseño

Antes de lanzar cualquier interfaz, verifica:

Gestalt

• [ ] Los elementos relacionados están más cerca entre sí que los no relacionados (Proximidad)
• [ ] Las funciones similares tienen estilos similares (Similitud)
• [ ] Hay una separación clara entre el primer plano y el fondo (Figura-Fondo)
• [ ] La mirada fluye de forma natural por el layout (Continuidad)

Tipografía

• [ ] El tamaño base de la fuente es de al menos 16px
• [ ] La altura de línea es de 1,5 o más para el texto principal
• [ ] La longitud de línea tiene menos de 75 caracteres
• [ ] La jerarquía es clara (3 niveles distinguibles)
• [ ] Se usa una escala consistente en todo el diseño

Color

• [ ] Todo el texto cumple con un contraste de 4,5:1 (WCAG AA)
• [ ] El color no es el único indicador (también hay íconos/etiquetas)
• [ ] El modo oscuro está diseñado de forma intencional
• [ ] Se sigue la distribución 60-30-10

Jerarquía visual

• [ ] Se puede identificar el elemento más importante, el #1
• [ ] La mirada fluye en el orden previsto
• [ ] Hay un CTA claro por sección
• [ ] La escala tipográfica es consistente

Espaciado

• [ ] Todo el espaciado usa una escala definida (sin números mágicos)
• [ ] Las tarjetas/componentes tienen padding consistente
• [ ] El espaciado en móvil es cómodo
• [ ] La alineación de la cuadrícula es consistente (base de 8px)

Interacción

• [ ] ¿Los usuarios pueden lograr sus objetivos sin pensar en la herramienta?
• [ ] ¿La UI se adapta al contexto actual?
• [ ] ¿Las herramientas aparecen solo cuando son relevantes?
• [ ] ¿El uso repetido enseña métodos más rápidos?

Interfaces de IA

• [ ] Cada afirmación factual tiene una fuente rastreable
• [ ] El streaming muestra fases del proceso, no solo un spinner
• [ ] Los estados de error son transparentes, no están ocultos
• [ ] Los resultados de baja confianza se diferencian visualmente

Revisión de Dieter Rams

• [ ] ¿Se puede eliminar algo?
• [ ] ¿Cada elemento cumple una función?
• [ ] ¿Esto se sentiría anticuado en 5 años?
• [ ] ¿Diseñé todos los estados?

Recursos

Libros: - As Little Design as Possible de Sophie Lovell (Dieter Rams) - The Elements of Typographic Style de Robert Bringhurst

Herramientas: - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Gestión de design tokens

Sistemas de diseño: - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Estudios de diseño

Análisis detallados de 48 productos excepcionales, con patrones y principios que vale la pena adoptar.

Herramientas para desarrolladores e IA

Esta guía crece con la práctica. Los principios de diseño son atemporales, pero su aplicación evoluciona con la tecnología y la comprensión.