Reportes automáticos de redes sociales para estudios creativos. Un link, no un PDF. Primer caso de referencia: Lanz World.
Capturas de Meta Business Suite, Excel frágil, un PDF que se ve amateur y se abre poco. Looker Studio es frío y necesita un data engineer. Metricool es genérico y no carga la marca del estudio. Hay un hueco: un reporte web animado, con la identidad del estudio, pensado para abrir desde el celular.
Gritt Reports no compite con Looker. Compite con la tarde del viernes que el estudio pierde preparando el reporte, y con la impresión que deja un PDF genérico cuando el cliente paga millones mensuales por un servicio premium.
El segmento intermedio son estudios con 3-20 clientes, demasiado chicos para montar BI serio y demasiado premium para entregar un dashboard genérico. Pagan por reportes que se vean como su marca, sin diseñarlos a mano cada semana.
Rechazo deliberado al admin template genérico. Negro cálido #1d1d1b, acento lima, blanco. Mucho aire, jerarquía clara, números grandes como protagonistas. Animaciones cortas con propósito, no decorativas.
Entrada escalonada de las KPI cards, conteo de números al cargar, transición suave en hover. Framer Motion respetando prefers-reduced-motion. El criterio es: si el cliente abre el link desde el celular en el bus, lo tiene que entender en 15 segundos.
La UI se construye contra una interfaz MetricsProvider tipada. MockMetricsProvider sirve datos ficticios de Lanz hoy; MetaMetricsProvider conectará Meta Graph API mañana sin tocar un componente.
Decisión de scope: las integraciones reales están fuera del MVP. Se diseñan como interfaz y se dejan listas para implementarse. El MVP demuestra criterio de producto y diseño; no es necesario pelearme con OAuth de Meta esta semana para probar que el reporte convence al cliente.
Client, Report, Metric (serie diaria), Campaign, AudienceBreakdown (edad, género, ubicación), Insight./r/[slug] — reporte público, sin auth, compartible por link./admin con mock de auth, lista de clientes, historial y creación de reporte./admin/email-preview/[slug] para iterar sobre el render del email semanal.Tokens Tailwind + componentes base (KpiCard, ChartCard, Delta, Badge, Skeleton) viven en /system como demo navegable. Para una vacante de Design Engineer, el design system es la prueba más honesta.
La ruta /system expone tokens y componentes como demo navegable. Es parte del case study, no un anexo técnico — el design system es la evidencia de cómo pienso un producto antes de pintarlo.
Button, Badge, Delta, Skeleton, EmptyState.KpiCard, ChartCard, InsightCard, BudgetBar.Scaffolding Next.js en pie, tokens inicializados, interfaz MetricsProvider tipada. En trabajo activo: componentes base y ruta /r/[slug] con seed de Lanz. Deploy planeado en gritt.buenhombre.design.