Lab

Componentes que funcionan.

Demos en vivo, no capturas. Puedes manipularlos directamente: son los mismos componentes que uso para llevar producto a producción. Cada uno resuelve un patrón concreto que aparece en los SaaS de hoy, desde la confianza en la IA hasta los detalles pequeños que solo se notan cuando faltan.

Demos funcionales

Categorías

100%

Interactivos

Capturas

01 · AI Patterns

Diseñar inteligencia visible.

Patrones para productos donde la IA es protagonista. Confianza que se muestra, lógica que se puede inspeccionar, y acciones masivas que respetan un umbral de seguridad.

3 demos

Tarjeta de aprobación por confianza

Cada recomendación de la IA muestra su nivel de confianza como porcentaje y como barra. Al expandir una fila se ven los datos detrás del razonamiento. La aprobación masiva solo se aplica por encima del umbral.

AI UXConfianzaAcciones masivas

Umbral para aprobacion masiva

>= 80% confianza

Aumentar stock - Item A

180 -> 240 unidades

+$28K

Confianza de IA

95%

Redistribuir - Item B

95 unidades a hub B

+$12K

Confianza de IA

82%

Pausar reorden - Item C

Pausar por 2 semanas

-$3K riesgo

Confianza de IA

68%

Asistente IA multi-input

La misma intención se puede expresar por voz, por lenguaje natural o pegando datos estructurados. Las tres rutas terminan en la misma pantalla de revisión.

AI UXModos de entradaConvergencia

Filtros inteligentes con contador

Filtros combinables, cada uno con su contador en vivo. La lista se reordena con una animación cuando cambia la selección.

Data UIFiltrosConteo en vivo

Categoría

Estado

9 resultados

Rediseño de onboarding

B2B SaaS · Activo

Actualización de pricing

Marketplace · En revisión

Checkout mobile

Consumo · Activo

Dashboard admin v2

Enterprise · Pausado

Biblioteca de empty states

B2B SaaS · Activo

Filtros de búsqueda

Marketplace · Activo

Reestructura de settings

Enterprise · En revisión

Centro de notificaciones

B2B SaaS · Activo

Actualización de marca

Consumo · Pausado

02 · Design System Foundations

Las piezas que se repiten.

Componentes base que aparecen en cualquier producto de cierta escala. Los muestro sin contexto, en su forma más cruda, para que se lean como un sistema y no como una pantalla suelta.

3 demos

Selector de asignación masiva

Asignar varios roles a un proyecto en una sola operación, con cantidad por rol y el total recalculado en vivo.

Patrones masivosFormulariosTotal en vivo

Paso 1

Asignar roles

Cada chip suma una persona del rol. Antes era 1 rol por entrada; ahora un proyecto puede tener múltiples roles en una operación.

Paso 2 - Horas / persona

40h

Paso 3 - Resumen

Sin roles asignados todavía

0 personas · 40h c/u

Playground de design tokens

Tokens controlados por sliders, con preview en vivo. Los presets simulan cómo se vería el sistema con otra marca.

TokensTemasRe-skin

Presets

Color de acento#B85131

Radio de borde16px

Peso tipográfico500

Salida

:root {
  --accent: #B85131;
  --radius: 16px;
  --weight: 500;
}

Preview en vivo

Título de tarjeta

Una card de muestra que respeta los tokens.

Badge

Laboratorio de ejes tipográficos

Sliders de peso y ancho con preview en vivo, presets, y el CSS exacto de salida.

TipografíaFuentes variablesCSS

Diseño con código en mente.

Peso (wght)500

Ancho (wdth)100

Presets

Salida CSS

font-variation-settings: 'wght' 500, 'wdth' 100;

03 · Data UI

Donde la decisión vive.

Patrones para pantallas con mucha información: edición en línea sin modales y métricas que comunican cambio y dirección.

2 demos

Celda editable en línea

Una tabla donde cada celda se vuelve editable al hacer clic. Enter guarda, Esc cancela, y un clic afuera también guarda.

TablasEdición en líneaTeclado

ProyectoResponsableHorasEstado

Haz clic en cualquier celda para editar · Enter para guardar · Esc para cancelar

Indicador numérico con delta

Cuando una métrica cambia, comunica el valor, cuánto se movió y hacia dónde.

MétricasMotionCifras tabulares

Ingresos

$48.230

+12.4%

vs. periodo anterior

04 · UX Patterns

Detalles que se notan cuando faltan.

Status pills sistematizados y empty states que no se limitan a decir que no hay datos.

2 demos

Sistema de status pills

5 tipos semánticos por 3 variantes y 3 tamaños, con punto opcional.

EstadosVariantesTamaños

Variante

Tamaño

Indicador

ActivoEn revisiónPausadoCríticoListo

15 combinaciones (5 tipos x 3 variantes) x 3 tamaños - un solo componente.

Galería de empty states

Cada empty state funciona como un pequeño onboarding: nombra el problema, da contexto y ofrece la salida.

Empty statesUX writingOnboarding

Sin resultados

Prueba con otros filtros.

Tu búsqueda no encontró coincidencias. Quita un filtro o amplía el criterio para revisar más resultados.

¿Quieres ver cómo se usan en producto?

Mira los case studies.

Ver trabajo →