Case study · Product Design & Design Systems
Macro: nutrición familiar, una sola cocina y un plan para cada perfil
Diseño de una aplicación para hogares donde varias personas comparten cocina y cena, pero no comparten objetivos. Macro reúne a la familia en una cuenta con perfiles individuales, convierte una misma preparación en porciones ajustadas al plan de cada miembro y muestra en tiempo real lo que cada uno lleva y lo que le falta. El proyecto integra estrategia de producto, identidad visual, un design system construido en Figma con Claude mediante MCP y una auditoría con las 10 heurísticas de Nielsen.
- Proyecto
- Macro · iniciativa propia
- Rol
- Product Designer · estrategia, diseño y prototipo
- Plataforma
- Web app móvil · modo claro y oscuro
- Disciplinas
- Product Design · UX/UI · Design Systems · Atomic Design · Motion · Diseño asistido por IA (Claude + Figma MCP)
Contexto y oportunidad
Una familia cocina una vez. Cada miembro necesita algo distinto.
En la mayoría de los hogares se prepara una sola comida para toda la familia. Sin embargo, cada integrante puede tener requerimientos nutricionales diferentes: una persona busca reducir peso con déficit calórico, otra necesita ganar masa muscular con superávit y mayor proteína. Las aplicaciones de seguimiento existentes están diseñadas para un usuario individual, lo que obliga a cocinar por separado o a abandonar el seguimiento.
Macro parte de un caso real —dos perfiles con objetivos opuestos que comparten cocina y cena— para diseñar una cuenta familiar en la que una única preparación se reparte en porciones según el plan de cada persona, sin duplicar esfuerzo en la cocina.
Tres objetivos
Mi rol
De la necesidad del hogar a un sistema de diseño escalable.
Lideré el proyecto de punta a punta: definición del problema, identidad visual, arquitectura de la información, prototipo funcional, auditoría heurística, design system en Figma y comunicación en motion. Integré a Claude como copiloto de diseño y, mediante el protocolo MCP, como operador directo sobre Figma para construir variables, componentes, pantallas y diagramas de forma programática y verificable.
- 01Definición del problema y de los perfiles con objetivos opuestos (bajar y subir de peso).
- 02Identidad visual: logotipo, paleta premium (grises, blanco, negro, plateado y acento lima) y tipografía.
- 03Arquitectura de la información y wireframes de 11 pantallas.
- 04Prototipo funcional como web app móvil, con modo claro y oscuro.
- 05Auditoría y rediseño con las 10 heurísticas de usabilidad de Nielsen.
- 06Design system en Figma con Atomic Design, tokens semánticos y modos Claro/Oscuro.
- 07Flujos de usuario, diagrama de interacción y motion graphics del caso.
01 / El problema
Las apps de nutrición asumen que cada persona cocina sola.
Seguimiento individual
Las herramientas existentes modelan a un solo usuario; no contemplan un hogar con varias metas bajo el mismo techo.
02 / Producto y decisiones
Una cuenta familiar, perfiles individuales y una sola preparación.
Cada miembro entra a su propio perfil desde su teléfono y define su meta: bajar, mantener o subir. La app calcula calorías y proteína diarias, y el ritmo recomendado hacia el peso objetivo.
Al registrar una comida —con una foto del plato, a mano o desde atajos de comida casera— el usuario indica para quién es: un perfil o ambos. Cuando es compartida, Macro reparte la porción según el plan de cada persona y actualiza en tiempo real lo que cada uno lleva y lo que le falta.
El calendario semanal muestra a los dos perfiles a la vez, integra el entrenamiento diario y diferencia lo cumplido de lo pendiente, con alertas cuando falta completar el plan o cuando se superan los macros.
Una comida, porciones por objetivo
El reparto de una preparación compartida se calcula según la meta de cada perfil.
Llevas y te falta
El progreso del día se expresa en lenguaje directo, con el número principal en gran formato.
Registro en segundos
Foto del plato con confirmación, atajos de comida casera y registro manual como alternativa.
Alertas accionables
Cada aviso explica qué pasó y qué hacer: completar proteína, ajustar la cena o detener el consumo.
03 / Heurísticas de Nielsen
Diez heurísticas, diez decisiones de diseño verificables.
Tras el primer prototipo, se auditó la experiencia completa con las 10 heurísticas de usabilidad de Jakob Nielsen. Cada hallazgo se tradujo en un cambio concreto en la interfaz.
- 01Visibilidad del estado del sistema
Barras de "llevas / te falta" por macro y estado diario visible en Hoy y en el calendario.
- 02Relación con el mundo real
Lenguaje cotidiano y comida colombiana casera en los atajos, con porciones en medidas familiares.
- 03Control y libertad del usuario
Opción "Deshacer" tras cada registro y "Descartar" antes de guardar el análisis de una foto.
- 04Consistencia y estándares
Un solo design system: mismos componentes, tokens y navegación inferior en todas las pantallas.
- 05Prevención de errores
La foto muestra su nivel de confianza y los valores se confirman antes de guardar; las medidas se validan por rango.
- 06Reconocer antes que recordar
Registro rápido con las comidas frecuentes de la familia y plan siempre visible.
- 07Flexibilidad y eficiencia
Tres vías de registro (foto, atajo, manual) y registro compartido para varios perfiles a la vez.
- 08Diseño estético y minimalista
Un único acento de color, un número protagonista por pantalla e información secundaria en segundo plano.
- 09Ayuda a reconocer y recuperarse de errores
Alertas en lenguaje claro con la acción siguiente: "Pasaste tus calorías por 220: cierra la cocina por hoy".
- 10Ayuda y documentación
Pantalla "Cómo funciona Macro" con la lectura de avisos, colores y calendario.
04 / Design system
Atomic Design, tokens semánticos y dos modos de color.
El sistema se estructuró con la metodología Atomic Design en páginas dedicadas de Figma —fundamentos, átomos, moléculas, organismos, plantillas y páginas— y una colección de color semántica con modos Claro y Oscuro que referencia primitivos ocultos. Así, cada pantalla oscura es la misma instancia con otro modo, no una copia redibujada.
Color
- Fondo #F6F4F7 / #0C050D
- Acento lima #C8F70F
- Neutros plata y grafito #A9A2AD
Tipografía
Urbanist · Display, título, cuerpo y etiqueta · 10 estilos de texto
Componentes
Botones, chips, anillos de progreso, barras de macros, tarjetas de comida, navegación inferior y alertas
8
páginas de Figma
17
tokens semánticos × 2 modos
35+
componentes y variantes
11
organismos
3
plantillas
22
pantallas claro y oscuro
05 / Claude × Figma
Diseño asistido por IA con control directo sobre Figma.
Claude se conectó a Figma a través del Model Context Protocol (MCP). En lugar de generar imágenes, Claude opera la API de Figma: crea colecciones de variables, estilos, componentes con variantes, instancias y pantallas, y verifica cada paso con capturas del archivo.
El trabajo se organizó con un registro de identificadores (variables, componentes, pantallas y flujos) que permitió iterar sin reconstruir: cada cambio del sistema se propaga a las 22 pantallas. Cuando el plan gratuito limitó el número de modos y llamadas, el archivo se trasladó a un equipo Pro y los grupos de color se convirtieron en modos reales.
- 01Instrucción de diseño en lenguaje natural.
- 02Claude traduce la intención a variables, componentes y layout en Figma.
- 03Verificación visual con capturas del archivo y ajustes.
- 04Iteración sobre el sistema, propagada a todas las pantallas.
06 / Flujos y diagrama de interacción
Cuatro flujos y un mapa completo de la interacción.
07 / Interacciones
Del wireframe a la pantalla final, en cuatro flujos.
Cada pieza muestra la estructura en wireframe, la pantalla final y la interacción principal.
Registrar con una foto
Hoy: tu día en un vistazo
Metas: un plan propio
Seguimiento: los dos a la vez
Avances del proyecto
Siete fases, de la necesidad a un sistema listo para escalar.
Fase 01 · Descubrimiento
Entender el hogar.
Se definió el caso: dos perfiles con objetivos opuestos (bajar y subir de peso) que comparten cocina y cena, y una sola preparación por comida.
Resultados
Un producto definido, un sistema documentado y un proceso replicable.
Producto
- Cuenta familiar con perfiles individuales y metas independientes.
- Registro de una comida compartida con porciones por objetivo.
- 11 pantallas en modo claro y oscuro.
- Alertas accionables y calendario semanal de los dos perfiles.
Design system y proceso
- Design system en Figma con Atomic Design en 8 páginas.
- 17 tokens semánticos con modos Claro y Oscuro.
- 4 flujos de usuario, diagrama de interacción y prototipo.
- Flujo de trabajo Claude × Figma mediante MCP, documentado y reutilizable.
Nota metodológica: se trata de una iniciativa propia; los resultados describen el alcance diseñado e implementado, no métricas de negocio.
Aprendizajes
Aprendizajes
01El usuario de un producto de nutrición puede ser un hogar, no una persona
Diseñar para varios perfiles que comparten cocina cambia el modelo: la unidad es la comida compartida y la personalización está en la porción.
02Las heurísticas convierten intuiciones en criterios verificables
Auditar con Nielsen permitió justificar cada cambio —de un texto a una alerta— con un principio claro y medible.
03La IA acelera el sistema cuando opera sobre la herramienta real
Conectar Claude a Figma mediante MCP permitió construir y mantener un design system completo, con tokens y modos reales, en ciclos cortos y con verificación visual en cada paso.
Cierre
Del problema a la solución, en movimiento.
Macro convierte la cocina compartida en un plan compartido: una sola comida, la porción justa para cada perfil y un sistema de diseño preparado para crecer con la familia.