Glup: una app de hidratación, del Figma al iPhone con Claude Code

01

Registrar un vaso tiene que ser más rápido que olvidarlo

Glup acompaña la hidratación del día: un onboarding de cuatro pasos calcula la meta, un botón registra cada vaso de 250 ml y los recordatorios se reparten en el horario de cada persona. Hay tres pestañas: Home, Historial y Ajustes.

El último paso del onboarding resume todo antes de empezar: la meta, los datos de los que sale y cómo se reparte en el día. Con 2,7 litros y un horario de 7:00 a 22:00 son 11 avisos de 250 ml, uno cada hora y media. La meta deja de ser un número abstracto y se convierte en un plan.

02

Antes del código, auditar el Figma

La primera sesión no tocó código. Claude leyó el archivo con el MCP de Figma y devolvió una lista de hallazgos. Muchos eran errores que yo no veía de tanto mirar las pantallas.

• La pantalla de Ajustes se llamaba "Onboarding 4 - Confirmación", igual que otra pantalla.
• El encabezado del Home decía "2000 ml" y el anillo, justo debajo, "/ 2700 ml".
• Las filas de datos eran copias sueltas llamadas "despertar", incluida la de "Dormir".
• Se mezclaban Inter, Montserrat y SF Pro, y también el voseo con el tuteo.
• Había azules en hexadecimal sin token, y la variable "color/primary" apuntaba a un azul que ninguna pantalla usaba.

Textos sin estilo antes de la auditoría

146/172

Colores de la app sin token después

0

Tipografía: todo en Inter

1

03

Una función por sesión

El trabajo se dividió en nueve fases, de la auditoría a la prueba en el iPhone, con un prompt por función. Cada prompt sigue la misma estructura: dónde estamos, una sola tarea, el nodo de Figma de referencia, qué no puede tocar y cómo demuestra que terminó.

• Los tokens de color, radio y tipografía salen de las variables de Figma. Cuando faltaba uno en el código (aqua/800 para el botón presionado, radius/xs), también se creaba en Figma.
• Los diez componentes se construyeron uno por uno en una galería, cada uno con el enlace a su nodo, y se compararon con el diseño antes de usarlos en una pantalla.
• Para las pantallas, Claude devolvía primero un plan sin editar nada. Yo lo corregía, y recién entonces se escribía el código.
• El CLAUDE.md del proyecto fija las reglas para todas las sesiones: solo Inter, ningún valor suelto, 44 pt de área táctil mínima, respetar "Reducir movimiento" y no agregar dependencias sin preguntar.

04

La lógica, con pruebas

La meta, la racha y los recordatorios son funciones puras con su propio script de comprobaciones. Las reglas las decidí en Figma y en el plan, antes de escribir la lógica.

• Meta: 35 ml por kilo más un extra por actividad, entre 1 y 4 litros, redondeada a 100 ml. Sin el redondeo salían 2670 ml en un lado y 2,7 L en otro.
• Recordatorios: un aviso por cada vaso de 250 ml, repartidos a partes iguales entre despertar y dormir, también cuando el horario cruza la medianoche.
• Racha: días seguidos con la meta cumplida. Hoy suma solo cuando ya se cumplió, así que la racha no se rompe a media mañana.

Comprobaciones de la lógica, todas en verde

98

Las pruebas encontraron errores que a simple vista no se notaban. Por ejemplo, 25 kg pasaban a 55,1 lb, que son 24,99 kg: con solo cambiar de unidad, un peso válido daba error. Ahora el valor se ajusta al rango después de redondear.

05

Los estados que no estaban en Figma

Las pantallas del Figma mostraban el camino feliz. Una app terminada necesita el resto, y cada estado se diseñó como una función aparte.

• Historial vacío: el reto de 7 días se mantiene y debajo aparece "Todavía no hay registros", con un botón que lleva a registrar el primer vaso.
• Peso inválido: el mensaje aparece donde va la ayuda, con el rango en kg o en lb, y VoiceOver lo lee al terminar de escribir.
• Teclado abierto: "Continuar" queda encima del teclado y el formulario se desplaza hasta el campo activo.
• Notificaciones denegadas: el interruptor muestra el permiso real, explica cómo activarlo y lleva a los ajustes del sistema. La app no vuelve a pedir un permiso que ya se negó.
• Borrar datos: un diálogo nativo dice qué se pierde antes de borrar.
• Un cambio que no se guarda se deshace en pantalla y se avisa con "No se pudo guardar". Si el almacenamiento falla al abrir, la app arranca vacía en lugar de quedarse en blanco.

06

El movimiento se prueba en la mano

Registrar un vaso anima el anillo y el número, hace subir unas burbujas desde el botón, da una vibración corta y reproduce un sonido de burbujas. El sonido es propio, dura 0,3 segundos y respeta el modo silencio. Tenía preparado un prompt para comparar tres velocidades, pero no hizo falta: la primera animación ya se sentía bien en la mano, y ahí se quedó.

Lo que sí cambió al probarla en el teléfono fueron las burbujas: de doce casi transparentes pasaron a seis sólidas y más grandes, porque en la mano las primeras no se veían. Cuando un vaso completa la meta, unas gotas saltan desde el anillo justo cuando se pone verde. Solo ese vaso lo celebra.

07

Una revisión independiente

Al final, un subagente que no había escrito nada del código revisó la app y solo informó: accesibilidad, textos, casos límite y valores sueltos. Yo decidí qué se arreglaba, con un prompt y un commit por arreglo.

• El rojo de error daba 3,6:1 en texto pequeño. Se creó el token color/danger/strong, solo para texto, en Figma y en código.
• El gris de apoyo no llegaba a 4,5:1 sobre fondos grises: en esos fondos pasa al gris de texto normal.
• Las barras de los gráficos y los bordes de los campos subieron hasta superar 3:1, el mínimo para elementos gráficos.
• En la vista Día, VoiceOver anunciaba 24 botones que no hacían nada. Ahora tocar una hora muestra su valor.
• En iOS, VoiceOver anuncia la meta nueva y el total después de cada vaso. Las regiones vivas de React Native solo lo hacen en Android.
• El chip "Volver a predeterminado" medía 40 pt de área táctil y ahora llega a 44.

08

El ciclo completo

Glup se puede abrir en un iPhone con Expo Go gracias a EAS Update, sin depender de la Mac. Los datos viven en el teléfono y la app no necesita servidor.

Diseñé el producto, decidí las reglas y revisé cada cambio contra el Figma y en la mano. Claude escribió el código dentro de esos límites. La mitad del trabajo de design engineer está en la parte que no se ve: auditar el diseño antes de construir, dejar las reglas por escrito y comprobar en vez de suponer.