El punto de partida
Los CRMs que usan las PyMEs argentinas comparten un problema: muestran todo, accionan poco. El comercial entra, ve un dashboard con 40 widgets, y vuelve a su WhatsApp para trabajar.
Quería diseñar el opuesto. Un producto que el primer día de uso te diga, sin que tengas que pensarlo:
"Hoy llamá a estos 3. La cotización de Aliaga venció ayer. Sofía tiene capacidad, pasale los leads frío de Diego."
Esto es lo que el dueño de una PyME le pide a su comercial todos los lunes. Lo que faltaba era un producto que lo dijera primero.
El tablero no es un dashboard
La home tiene una estructura intencional:
- Estado del pipeline — los USD activos distribuidos por etapa
- Patrón detectado — el sistema le dice al usuario qué está pasando, no espera que lo descubra
- Leads que se enfrían — los que están perdiendo temperatura, ordenados por urgencia
- Oportunidades a mover hoy — los próximos pasos comprometidos con hora
No hay gráficos al frente. No hay KPIs grandes. Esos están a un click, en /conversion. La home se ocupa de qué hacer ahora.
El saludo cambia según el horario — "Hola Mariana, buenas noches" — porque el producto te habla, no te informa.
La inteligencia honesta
Cinco detectores que cruzan el pipeline, el equipo y el histórico:
| Tipo | Qué detecta |
|---|---|
| Operativo | Leads del formulario sin asignar comercial |
| Atasco | Leads >14 días sin movimiento en una etapa |
| Oportunidad | Concentración de cierres en un día/franja |
| Tendencia | Desbalance entre leads creados vs cerrados |
| Sugerencia | Desbalance de carga en el equipo |
Detrás del término "IA" hay queries SQL determinísticas. Lo hice así a propósito: la "IA" que la mayoría de los CRMs vende es exactamente eso. Ser honesto al respecto fue una decisión de producto, no técnica.
-- Detector "atasco" (simplificado)
SELECT l.*
FROM leads l
JOIN ultimo_cambio uc ON uc.lead_id = l.id
WHERE l.estado = 'propuesta'
AND uc.ultima_fecha < now() - interval '14 days';Cada patrón se puede marcar como resuelto, pero queda en el histórico — eso protege al usuario de "perder" un insight si lo cierra por error, y le permite al sistema aprender qué patrones funcionan y cuáles ignora.
La ficha del lead
Cada lead es una página completa con:
- 4 cards de estado — valor estimado, etapa con barra de progreso, días en pipeline, responsable
- Lo siguiente — el próximo paso destacado en violeta
- Historial de contactos y agenda — todo lo que pasó y lo que viene
Tres acciones primarias arriba a la derecha: Registrar contacto (la más frecuente, en negro) · Mover a propuesta · Editar. El menú "..." guarda las acciones secundarias (reasignar, marcar perdido, confirmar ganado).
La barra de progreso bajo el estado actual muestra dónde está y a qué etapa puede mover. Una decisión chica pero importante: el usuario ve siempre el camino completo, no solo el casillero en el que está parado.
El kanban del pipeline
Drag & drop con @dnd-kit, animaciones de spring con framer-motion. Cinco columnas: Nuevos, En conversación, Propuesta, Cierre, Ganados.
Cada columna tiene su propio acento de color en la barra superior. Las cards muestran nombre, origen (LinkedIn, WhatsApp, Formulario, Referido) con un dot del color del canal, valor estimado, tipo (recurrente o proyecto), responsable y antigüedad en la etapa.
El detalle que más me gusta: las advertencias de atasco aparecen como cards amarillas dentro de la columna, mezcladas con el resto. "5 atascados hace +14 días" en Propuesta, "8 atascados hace +14 días" en Ganados (sí, ganados también — los que cerraron pero no se facturaron). El insight vive donde está el trabajo, no en una pestaña aparte.
Conversión y Cerrados, las dos caras del mes
/conversion es para el dueño que busca el cuello del embudo.
El título dice "Dónde estamos perdiendo leads" — no "Embudo de conversión". El framing importa: el dueño abre esta pantalla buscando un problema, no contemplando una métrica.
Cuatro KPIs arriba con delta vs período anterior. Un insight del mes destacado en violeta: "El cuello del embudo está en Propuesta → Cierre. Solo 20% de los leads pasan esa transición. Los leads se quedan en promedio 13 días antes de moverse o caerse."
Abajo, el embudo de barras decrecientes con conversión entre etapas, tiempo en cada etapa (con la etapa cuello destacada en amarillo) y una línea de tendencia de 3 meses.
Nota: en la captura el seed todavía está en proceso de enriquecerse — los números del mes muestran 45 leads y 2 ganados. El seed final del producto tiene más historia mensual para que las tendencias se vean completas.
/cerrados es la contraparte: el resultado tangible del mes.
Cuatro KPIs con accent lateral por color: ganados (verde) / valor cerrado (azul/verde) / perdidos (rojo) / ratio de cierre (violeta). El "USD 59.400 · 79% de meta" muestra al usuario si está cumpliendo el objetivo del mes.
Ranking de comerciales con podio de medallas oro / plata / bronce. La gamificación sutil funciona en ventas, y el ranking se calcula por valor cerrado, no por ratio — eso protege al comercial que cierra pocos pero grandes.
Debajo del podio, la lista de cierres con valor, días que tardó cada uno, responsable y origen. Al final (colapsado), la sección "Lo perdido" con los 3 motivos top en banda visual.
El sistema visual
Cuatro decisiones que mantuve coherentes en todo el producto:
- Una sola tipografía display (Fraunces SOFT=100) en cursiva para una palabra clave por título. Viendo. Cerraste. Perdiendo. En juego. Cada pantalla tiene su verbo.
- Tres colores semánticos (rojo / amarillo / verde) y cuatro de marca (azul / violeta / turquesa / coral). Nada más.
- Un solo elemento hero por pantalla. Si hay núcleo, no hay otra cosa compitiendo.
- Voz rioplatense en toda la UI. "Tenés 21 leads que pidieron seguimiento". "Aquí se atascan". "Empezamos por lo que se enfría". Sin tecnicismos. Una PyME en Bahía Blanca tiene que sentir que el producto le habla a ella, no a una startup de San Francisco.
Mobile-first sin ser mobile-only
Las 7 pantallas principales tienen rediseño mobile completo. No es responsive automático: las KPIs se reordenan en 2×2, los acordeones se colapsan distinto, las tablas se compactan dejando solo lo esencial.
En mobile, los datos pierden columnas (responsable, fecha exacta) y quedan solo los que importan en pantalla chica: nombre del lead, valor, link al detalle. La densidad cambia, la jerarquía no.
Lo que dejé afuera (a propósito)
Tres cosas que un CRM "completo" tendría y este no:
- Email/WhatsApp integrado: el producto pre-rellena y abre el cliente del usuario, pero no manda nada. Integrar Meta Cloud API + Resend agrega 2 semanas de trabajo y 60% de los bugs reales.
- Tablero del dueño separado: hoy todos ven la misma vista. Cuando escale a +5 personas, va a hacer falta un toggle "vista comercial vs vista dueño". Hoy no.
- Reportes PDF: tengo el sistema, no lo integré porque el producto no lo necesita todavía.
Decir "esto no" es tan parte del diseño como decir "esto sí".
Cómo está construido
Stack chico, opinionado, sin sobreingeniería: Next.js 15 con App Router · Supabase (Postgres + RLS) · Tailwind v4 con design tokens · framer-motion + @dnd-kit · Vercel con cron que resetea el seed cada noche a las 03:00 ART.
Las 42 pantallas y componentes del producto se construyeron en ~5 días dividiendo el trabajo entre tres instancias de Claude:
- Claude en chat → diseño visual y UX, decisiones de producto, prompts para implementación
- Claude Code en VS Code → implementación del código a partir de los prompts
- Claude en Chrome → audits post-deploy para detectar bugs visuales
Esta división — Chat diseña, Code implementa, Chrome audita — permite avanzar al ritmo de un equipo de 4 personas siendo una.