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 chicos 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

Confidence-driven approval card

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 UXTrustBulk actions

Threshold para bulk approve

≥ 80% confianza

Aumentar stock — Item A

180 → 240 unidades

+$28K

AI confidence

95%

Redistribuir — Item B

95 unidades a hub B

+$12K

AI confidence

82%

Pausar reorden — Item C

Hold por 2 semanas

−$3K riesgo

AI confidence

68%

Multi-input AI assist

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. La entrada es flexible; la verificación, siempre la misma.

AI UXInput modesConvergence

Smart filter chips with live count

Filtros combinables, cada uno con su contador en vivo. Se acumulan: categoría y estado filtran al mismo tiempo. La lista se reordena con una animación cuando cambia la selección.

Data UIFiltersLive count

Categoría

Status

9 resultados

Onboarding revamp

B2B SaaS · Active

Pricing page refresh

Marketplace · In review

Mobile checkout

Consumer · Active

Admin dashboard v2

Enterprise · Paused

Empty state library

B2B SaaS · Active

Search filters

Marketplace · Active

Settings restructure

Enterprise · In review

Notification center

B2B SaaS · Active

Brand refresh

Consumer · Paused

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

Bulk allocation selector

Asignar varios roles a un proyecto en una sola operación, con cantidad por rol y el total recalculado en vivo. Reemplaza el patrón de un rol a la vez, que obliga a repetir el mismo flujo una y otra vez.

Bulk patternsFormsLive total

Paso 1

Asignar roles

Cada chip suma una persona del rol. Antes era 1 rol por entry — 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

Design tokens playground

Tokens (color de acento, radio, peso) controlados por sliders, con preview en vivo. Los presets simulan cómo se vería el sistema con otra marca: una capa de alias permite cambiar el branding sin tocar los componentes.

TokensThemingRe-skin

Presets

Accent color#FF4D14

Border radius16px

Font weight500

Output

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

Preview en vivo

Card title

Una card de muestra que respeta los tokens.

Badge

Variable font axis lab

Una fuente variable no es un puñado de pesos sueltos: son ejes que se interpolan. Sliders de peso y ancho con preview en vivo, presets, y el CSS exacto de salida. Sirve para validar font-variation-settings antes de llevarlo a producción.

TypographyVariable fontsCSS

Diseño con código en mente.

Weight (wght)500

Width (wdth)100

Presets

CSS output

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 el cambio y la dirección sin obligarte a leer un párrafo.

2 demos

Inline editable cell

Una tabla donde cada celda se vuelve editable al hacer clic. Sin modal y sin expandir la fila. Enter guarda, Esc cancela, y un clic afuera también guarda. Los campos numéricos se validan en línea.

TablesInline editKeyboard

ProjectOwnerHoursStatus

Click cualquier cell para editar · Enter para guardar · Esc para cancelar

Number ticker with delta

Cuando una métrica cambia, tiene que comunicar el valor, cuánto se movió y hacia dónde. El número se anima al cambiar, y la píldora de delta cambia de color según el signo. Usa cifras tabulares para que todo quede alineado.

MetricsMotionTabular nums

Revenue

$48.230

+12.4%

vs. periodo anterior

04 · UX Patterns

Detalles que se notan cuando faltan.

Status pills bien sistematizados y empty states que no se limitan a decir que no hay datos. Cosas que la mayoría de los productos hace mal y que un buen design system resuelve una sola vez, para todas las pantallas.

2 demos

Status pill system

5 tipos semánticos por 3 variantes (sólida, suave, contorno) por 3 tamaños, con punto opcional. 90 combinaciones de un solo componente, todas visibles con un control.

StatusVariantsSizing

Variant

Size

Dot indicator

ActiveIn reviewPausedCriticalDone

15 combinaciones (5 kinds × 3 variants) × 3 sizes — un solo componente.

Empty states gallery

Cada empty state funciona como un pequeño onboarding. El título nombra el problema, el texto da el contexto y el botón ofrece la salida. Nunca un "no hay datos" genérico: siempre con voz humana.

Empty statesUX copyOnboarding

Sin resultados

Probá con otros filtros.

Tu búsqueda no encontró coincidencias. Remové un filtro o ampliá el criterio para ver resultados.

¿Quieres ver cómo se usan en producto?

Mira los case studies.

Ver trabajo →