Liberty Club · e‑commerce sin comisiones · 2026

Lideré el rediseño del panel de vendedores.

18 pantallas en 10 días, construidas con Cursor y Claude Code.

Seguí bajando

El prototipo del Inicio del panel de vendedores de Liberty, con datos de ejemplo: la tienda «Boutique Vera», sus ventas, el plan, los accesos y los productos
Antes
El panel de vendedores anterior de Liberty: el Inicio dentro del sitio, con el buscador, «Mi cuenta» y el carrito arriba, y tarjetas para crear la tienda, verificar la identidad y cargar el primer producto

Todo colgaba del menú «Mi cuenta» del comprador.

Antes
El panel de vendedores anterior de Liberty en el celular: el menú del sitio, con «Mi cuenta» y las opciones del vendedor mezcladas con Favoritos, Notificaciones y Carrito

Todo colgaba del menú «Mi cuenta» del comprador.

Después · Todo en un solo panel de gestión

18 pantallas
en seis grupos,
con navegación propia.

  • IAMensajes de Libia · Asistente
  • AjustesConfiguración
  • KYC/KYBVerificación
El panel de vendedores nuevo de Liberty: el prototipo del Inicio, con datos de ejemplo, la tarjeta de la tienda, las ventas, el plan, los accesos y la lista de productos

Grupos de la barra: Catálogo, Ventas, Cursos, Inteligencia, Tienda y Plan.

El panel de vendedores nuevo de Liberty en el celular: el prototipo del Inicio, con el botón «Nuevo producto» y la tarjeta de la tienda

Grupos de la barra: Catálogo, Ventas, Cursos, Inteligencia, Tienda y Plan.

Mi método, con agentes de IA en cada paso.

  • RolUX Lead
  • Tiempo21 al 31 de agosto de 2026
El problema

No había una navegación centralizada y prolija.

Cada sección recargaba la pantalla entera, con 3 segundos de espera, y la gestión de la tienda estaba mezclada con la cuenta de comprador.

Lo que hice

Dirigí el diseño y la implementación.

Definí el sistema de diseño, prototipé en HTML para pulir la navegación y la interfaz, y construí el frontend con agentes de IA.

El resultado

En producción desde el 31 de agosto.

Los vendedores manejan su tienda y sus productos desde un mismo lugar, y cada sección abre al instante.

Cinco pantallas

La misma cuenta, antes y después.

Antes

Después

Decisión 1 de 4

Primero la estructura, después las pantallas.

Separé el panel del sitio de compras y le di su propio menú lateral. Así cada pantalla se veía andando antes de rediseñarla.

Prototipo del panel en el celular
En el celular: el prototipo en HTML con el que validé el diseño, en vez de uno de Figma. Es el mismo, y lo podés probar acá.

Decisión 2 de 4

Cada estado dice la verdad.

Varias pantallas trataban un error de red como una lista vacía. Ahora cada una separa cargando, vacío con su acción y error con «Reintentar».

Panel de vendedores de Liberty, antes: Ventas con la red caída mostraba el cartel de vacío «Todavía no vendiste nada»
Antes · con la red caída
Panel de vendedores de Liberty, ahora: la tabla de Productos con error, «No pudimos cargar tus productos» y el botón Reintentar
Ahora · prototipo, con error

Decisión 3 de 4

Nombres que se entienden a la primera.

El menú hablaba con siglas y nombres internos. Ahora cada opción se llama por lo que es, en lenguaje claro y cercano.

  • KYC / KYBVerificá tu identidad · tu negocio
  • IAMensajes de Libia · AsistenteLibia es el asistente de Liberty
  • CursoMis cursos

Decisión 4 de 4

Claro y oscuro, con colores propios.

Liberty no tenía un sistema de diseño que permitiera temas. Con el panel le di una identidad visual propia que los hace posibles, con modo claro por defecto, que transmite orden y confianza.

La tabla de Productos del panel de vendedores de Liberty: la mitad de la izquierda, en modo claroy la mitad de la derecha, en modo oscuro

Cómo usé la IA

Primero el diseño validado. Después, los agentes construyen.

Los agentes construían rápido, así que armé el control en capas: las pruebas automáticas revisan el código, el navegador revisa la pantalla y la comparación con el prototipo revisa el diseño. Al final, reviso yo.

Prototipo · datos de ejemplo

El prototipo de Métricas del panel de vendedores de Liberty, con datos de ejemplo: productos sin stock, valoración, preguntas, productos activos y cuánto falta para completar la tienda
Antes de subir, cada parte pasa por:
  1. Tipos, lint y tests unitarios
  2. El build de producción
  3. Un recorrido en el navegador, en claro, oscuro y tres anchos
  4. La comparación con el prototipo: letra, tamaños, colores y espacios
  5. Mi revisión, andando, antes de cada subida

Resultado

En producción desde el 31 de agosto.

Lo que más se festejó: todo lo del vendedor, en un solo lugar, ordenado y al instante, y un Liberty más premium. Antes, cada cambio de sección recargaba la pantalla entera con 3 segundos de animación.

Panel de vendedores de Liberty, antes: la pantalla de espera a pantalla completa, con el logo sobre negro, «Sin intermediarios» y una barra de carga
Antes · la espera de 3 segundos
Panel de vendedores de Liberty, ahora: Productos mientras carga, con la barra lateral y la forma de la pantalla en bloques grises
Ahora · una carga que anticipa lo que viene