¡Hola! Soy Hashi, diseñador de UI en Liberogic Inc.
¿Te suena este pequeño problema secreto? «¡Vale, desde hoy lo hago!», con toda la motivación del mundo instalé una app para crear hábitos, pero no hubo manera de mantenerla.
Empezar es lo mío, pero nunca he conseguido mantenerlo.
Hay muchísimas apps excelentes y bonitas en el mundo.
Al principio registro todo con mucha disciplina. Pero llega un día de trabajo agotador o una cena con compañeros y, de repente, se rompe la «racha», y mi motivación cae a cero…
Los recordatorios que al principio me preocupaban acabaron convirtiéndose en simple ruido, y mis apps se fueron fosilizando en un rincón de la pantalla del móvil.
Ese momento en que te asalta el pensamiento «bueno, ya da igual». Seguro que no soy el único que lo ha sentido.
¿No habrá nadie que tienda una mano a quienes se rinden siempre a los tres días? (No, no la hay)
Y lo que más me atormentaba era la "dispersión de aplicaciones".
Pasar de una aplicación a otra para cada cosa (un rastreador de hábitos, un calendario de medicinas, un libro de cuentas del hogar...) solo añadía más pereza al asunto. Además, había muchas suscripciones de pago, así que la gestión se volvía descuidada y acababa olvidando cancelarlas. Esto era, en definitiva, contraproducente.
Entonces, la caprichosa idea de un diseñador estalló. "Si es así, ¿por qué no construyo yo mismo una aplicación que solo tenga las funciones que necesito, hecha únicamente para mí?"
Así empezó el desarrollo del "Cockpit de hábitos a mi medida", especializado en mi estilo de vida, creado en colaboración con la IA (Claude Code).
Seguro que la IA me dará la mejor solución, al menos por ahora.
1. [Presentación de funciones] Una función especial que convierte en sistema mi propia tendencia a posponer las cosas, envolviendo mi desidia dentro de un sistema
A continuación, les presento las funciones que realmente implementé.
Tomando lo mejor de las aplicaciones existentes, busqué crear un "panel" definitivo, especializado en mi estilo de vida.
Para unificar las aplicaciones que necesitaba, primero comencé a crear una aplicación de seguimiento de hábitos.
Además, como quiero alternar entre mañana y noche, preparé tanto un modo claro como un modo oscuro.
🌱 Pantalla inicial
La pantalla inicial muestra un formulario para introducir los hábitos que quieres mantener, y el proceso se completa escribiéndolos tú mismo.
Al desplazarte hacia abajo, encontrarás un enlace para responder y crear un hábito. Al hacer clic en él, responderás a una serie de preguntas y la app te propondrá hábitos adaptados a ti.
En la pantalla inicial se incorpora un diagnóstico de formación de hábitos
Además, en la pantalla inicial también creé un navegador de hábitos: para quienes no saben qué hábito quieren adquirir, basta con responder unas preguntas para elegir un hábito adaptado a ellos.
🌱 Rastreador de hábitos: superar el todo o nada
Para formar un hábito, lo ideal es tener algo que puedas mantener de forma constante, aunque sean pasos pequeños, así que partí de esa idea.
Creé una app para crear hábitos con una función de "evaluación en 5 niveles". Las apps que había usado hasta entonces tendían a ofrecer solo dos opciones: "lo hice" o "no lo hice". Sin embargo, en esta app, no solo se colorea el calendario en los días en que lo hiciste "a la perfección", sino también en los días en que "lo intentaste un poco" (Nivel 1).
Por ejemplo, en el caso del ejercicio, puedes registrar tu esfuerzo diario según corresponda, desde "Nivel 1: subirte a la báscula" y "Nivel 2: hacer sentadillas cada vez que vas al baño" hasta "Nivel 5: nadar 1 km en la piscina y hacer 40 minutos de boxeo".
Los días en que no cumples quedan en blanco, pero con el sistema de "impuesto por pereza" que explicaré más adelante, si no logras continuar, puedes recuperarte en otros días y así no te pesará aunque haya días sin cumplir.
Simplemente lo retomo al día siguiente. Gracias a lo fácil que es volver a empezar, todos los días me subo a la báscula, aunque sea solo por intentarlo.
El calendario se va coloreando poco a poco con un degradado verde, lo que permite disfrutar visualmente de la "acumulación de color". Al ver el mes completo, es fácil notar cuánto has avanzado, y eso aumenta la motivación.
Visualiza tu progreso con la función de calendario
En la interfaz del calendario, el color cambia cuando completas un hábito. Según el nivel, la intensidad y el tono del color varían, lo que te permite ver cuánto has cumplido tus hábitos y ayuda a mantener la motivación.
Also includes hábito archive and new hábito creation features
Una vez que un hábito se ha consolidado durante un tiempo, puede ser buena idea pasar a otro. Por eso incluimos una función para archivar hábitos y otra para crear nuevos. Al pulsar el botón "Hábito consolidado", puedes añadir uno nuevo.
🏛️ Impuesto por pereza: convierte la culpa en ahorro
Esta es otra función vinculada al rastreador de hábitos que acabamos de ver.
Cada día que te saltes un hábito, el sistema te aplica un "impuesto" (por defecto, 300 yenes).
Todos sabemos que a veces simplemente no podemos mantener la constancia.
Por eso necesitamos una penalización para mantenernos disciplinados, pero si fuera una simple multa, me resultaría desagradable.
¿Sabes por qué hay gente con sobrepeso? Es el resultado de optar por lo más cómodo y lo más fácil, buscando satisfacción en la comida y recurriendo a una felicidad momentánea provocada por hormonas. Por eso, de todos modos, endurecer la penalización no tiene sentido para quienes nos cuesta crear hábitos.
Pensé que lo ideal sería donar el equivalente a los días en que me salté el hábito, pero tenía la certeza de que, si me exigía tanto, dejaría de abrir la aplicación por completo (jaja).
Decidí que el pago del "impuesto por pereza" se deposite en mi cuenta de inversión en fondos indexados.
En otras palabras, es una multa, pero no una multa: es una multa para mi propio bien.
Hice que incluso el sentimiento de culpa por haber fallado se convierta en una inversión para mi yo futuro.
Lo que más cuidé fue un sistema de "reducción fiscal" según la tasa de cumplimiento mensual.
- "Si cumples con el 90% o más, exención del 50%"
- "Si cumples con el 80% o más, exención del 25%"
para que se aplique.
La pantalla muestra "¡Solo falta un 1 % para una reducción del 25 %!", y al verlo surge una motivación extraña: "Hoy me conformo con Nv. 2, pero lo intentaré".
El mayor enemigo de crear un hábito es el momento en que, al saltarte un día y romper la racha, sientes ganas de abandonarlo todo.
Pero gracias a este sistema de desgravación fiscal, puedes resistir pensando: "Me salté un día, ¡pero todavía tengo la oportunidad de obtener la reducción!".
Es un diseño amable que se adapta por completo a una persona despistada y no te deja rendir ante un solo tropiezo.
✨ Seguimiento de cuidado de la piel y 💊 gestión de medicamentos: adiós al ir y venir entre aplicaciones
✨ Una herramienta de revisión para el cuidado de la piel que siempre quise tener
Gestionar hábitos, medicamentos y el presupuesto doméstico en apps separadas era una molestia enorme para alguien despistado. Para eliminar ese "ir y venir entre aplicaciones", he integrado por completo el cuidado diario y la salud en esta cabina de control.
Como pude reutilizar tal cual las funciones de una aplicación de hábitos, la implementación fue sencilla.
🧴 Un "Seguimiento de cuidado de la piel" que acepta los días en que no puedes esforzarte
El cuidado de la piel también es un hábito más. Al abrir la pantalla, aparecen cinco pasos que te preguntan: "¿Hasta dónde llegaste?".
En los días en que llegas agotado, basta con "Nv. 1: Solo lavado facial" (lavarse la cara con agua o con limpiador). Si te queda algo de energía, puedes registrar "Nv. 2: Cuidado básico mínimo" (limpiador + loción), "Nv. 3: Cuidado básico" (+ emulsión) y, en días especiales, "Nv. 4: Cuidado detallado" con sérum incluido. Así puedes registrar cada día según tu nivel de energía.
Además, ahora puedes personalizar el nombre y la descripción de cada nivel de cuidado desde "Configuración de pasos". En la parte superior de la pantalla también se muestran datos como el "Nivel promedio del mes" o los "Días seguidos en Nivel 3 o superior", para que puedas mantener la motivación sin presiones. Por ejemplo, si has estado muy cansado y solo has hecho Nivel 1, puedes decirte: "Hoy voy a llegar al Nivel 3".
💊 Gestión de medicamentos para quienes son muy despistados
Y, personalmente, lo que más me cuesta mantener es la gestión de los medicamentos.
Esta aplicación no solo permite registrar el nombre del medicamento, sino también configurar con mucho detalle y flexibilidad: el momento de la toma ("mañana, mediodía, noche"), indicaciones como "antes de comer, después de comer o indistinto", el número de comprimidos en cada toma e incluso frecuencias más complejas, como "diaria, en días alternos o días de la semana específicos".
Cuando hay medicamentos pendientes, aparece en la parte superior de la pantalla una alerta roja llamativa que dice "⚠️ Hay medicamentos que olvidaste tomar. Por favor, revísalos.", que te recuerda que tienes que ponerte al día.
En la parte inferior de la pantalla también se muestran cifras bastante realistas, como el "Porcentaje de cumplimiento de la medicación del mes" o el "Número de olvidos" (en la pantalla de pruebas durante el desarrollo, mi cumplimiento aparece en un 5%, así que queda en evidencia lo despistado que soy... jaja).
Aun así, no te preocupes.
Si hubo días en que olvidaste tomar algún medicamento, puedes registrarlo después desde el calendario gracias a la función de "registro retroactivo", así que no te obsesionas con la perfección y puedes mantener el ritmo a tu manera.
A medida que nos hacemos mayores, tomamos más medicamentos, así que esta función es muy útil. Además, puedo compartir la información de los medicamentos que tomé antes cuando voy al médico, lo que me ayuda mucho (soy de los que siempre se olvidan de llevar la cartilla de medicamentos).
🍺 Gestión de reuniones con bebidas: una función increíble que dispara la motivación para cuidar la salud y ahorrar
Y, en lo personal, la función que más ha cambiado mi vida es esta: la "Gestión de reuniones con amigos".
No se limita a registrar las veces que has bebido: también gestiona el límite mensual de reuniones (por ejemplo, "hasta 4 veces al mes") y el presupuesto, y además incorpora ideas para convertir cada pequeño esfuerzo diario en una recompensa visual.
🍵 ¡Un toque y ding! "Ahorro por no beber"
En el día a día,
"Hoy voy a evitar beber en casa"
Cuando logras resistirte, basta con pulsar una vez el interruptor "Hoy no bebí en casa" de la pantalla de inicio.
Solo con eso, aparece una marca verde en el calendario y se suman 500 yenes a tu "Ahorro por no beber" con un ¡ding!
Como cada pequeño esfuerzo diario se acumula en forma de dinero, a medida que se acerca el fin de mes sientes una extraña satisfacción y una dosis de dopamina al pensar: "¡Este mes ya he ahorrado 3.000 yenes (6 días) sin beber!".
Este dinero ahorrado puede destinarse a inversiones o a tu cuenta de ahorro.
Si sientes en carne propia que los ahorros de no beber o beber menos —destinando al fondo de tus cosas deseadas el dinero que te ahorras— te traen otras recompensas, es más probable que mantengas la abstinencia o la moderación a largo plazo.
🛡️ Modo «prevención de resaca» para mantener el control durante las fiestas
La función estrella de esta aplicación es el «modo prevención de resaca». Cuando empieza la fiesta, activas este modo y aparece en el centro de la pantalla una cuenta regresiva hasta tu «hora objetivo de regreso a casa», previamente configurada. Y si piensas «¡hoy me lo estoy pasando tan bien que quiero seguir un poco más!», puedes ampliar el tiempo de forma flexible con los botones «Cambiar hora de regreso» o «🎉¡Hay margen para una segunda ronda!». Es un diseño pensado para una persona despreocupada como yo.
Además, en la pantalla hay contadores de copas para «🍺Alcohol», «🥤Refresco» y «💧Agua». Evalúan en tiempo real el ritmo de consumo, como «una bebida sin alcohol por cada dos de alcohol», y el indicador se muestra en verde con «OK». Así se reducen de forma notable la resaca del día siguiente y el arrepentimiento de pensar «¿por qué bebí tanto?».
📊 Más funciones útiles para las fiestas
Cuando termina la fiesta, puedes registrar el nombre del local, como «Torikizoku Shibuya», el importe real que pagaste y notas sobre las personas con las que fuiste. También añadí una función que completa la información automáticamente al introducir la URL de Google Maps. Como solo se trata de unas pocas operaciones al mes, una IA me dijo que la integración con la API no generaría costes, así que la implementé.
También añadí esta función como nota, porque a veces olvido hacer la liquidación tras una fiesta.
Ya no hay discusiones sobre quién pagó o no, lo cual es muy bueno.
Además, en el «informe mensual» de fin de mes, el «ahorro por abstinencia», calculado por los días en que evitaste la copa de la noche, se suma a la diferencia entre el presupuesto de la fiesta y lo que realmente gastaste (el dinero ahorrado en la fiesta), y se muestra con orgullo como «ahorro total». Por ejemplo, con «¡este mes he ahorrado 9.000 yenes!», puedes ver de un vistazo el resultado y emocionarte pensando «quizá me compre con este dinero aquel gadget que quería». Es una función favorita que te permite cuidar tanto la salud como el bolsillo.
2. Tras terminar el desarrollo: Claude fue la mejor «herramienta de traducción» para el diseñador
Así, la app que reúne toda mi dejadez y mis caprichos finalmente tomó forma. Que alguien sin experiencia en desarrollo como yo haya llegado hasta aquí se debe, sin duda, a mi compañero Claude.
Es probable que los ingenieros me digan "¿Estás en tus cabales?" al ver esto, pero esta vez avancé con una estructura de archivo único con mucha fuerza bruta: "todo el HTML, CSS y JavaScript dentro de un solo index.html". Pero para nosotros (yo y Claude) esta fue una decisión acertada.
Cuando los archivos están separados, decir "arregla esto en tal archivo, en tal parte" ya supone un esfuerzo, pero con un solo archivo basta con pegar todo el código en el chat, y Claude comprende el conjunto al instante.
Claude convierte mi imagen abstracta de "quiero que funcione así" en código elegante. A veces, un error al cerrar una etiqueta o el orden de carga de JavaScript hacía que toda la app se bloqueara, y nos pasábamos la noche los dos siguiendo registros de errores, pero incluso eso se sentía como una película de compañeros de aventuras, y lo disfruté (jaja).
Con GitHub y Cloudflare también fue así: al conversar con la IA, me explicaba cómo registrar las cuentas y me dejaba los enlaces oficiales directamente, así que conectarlo todo fue cuestión de minutos.
3. El siguiente muro: el diseño y las profundidades de la seguridad
Con la ayuda de Claude, conseguí el mejor juguete (la app), con el aspecto y el movimiento que yo imaginaba.
...pero aquí surgió un nuevo problema.
Sin embargo, al usar esta cabina de control a diario, de pronto recapacité. "Espera, esta app contiene datos de privacidad completamente expuestos: mi estado de salud real, los registros diarios de mi medicación, mi libro de cuentas reciente y hasta el historial de mis momentos de pereza."
Por ahora, como medida de consuelo, he puesto un bloqueo de pantalla con un código PIN sencillo, pero, siendo sincero, en seguridad soy completamente un novato. Con el conocimiento que tenemos solo la IA y yo, en este estado no puedo quitarme la inquietud de confiarle datos tan valiosos.
Como diseñador, al crear una "experiencia agradable", es natural que la sensación de seguridad, es decir, la certeza de que nada se filtra ni puede ser vulnerado, sea una parte igualmente importante.
"¡Lo ideal sería poder abrirlo de forma segura e inteligente, solo yo, usando Face ID del móvil o las últimas Passkeys!"
Así que me propuse hacerlo, pero la seguridad es un campo extremadamente especializado que no se resuelve fácilmente.
Esto ya me supera...
Quiero hablarlo con un ingeniero y avanzar con cuidado.
Más adelante me gustaría incorporar también una herramienta de gestión de finanzas personales e incluir funciones que registren automáticamente el historial de uso de la tarjeta de crédito con solo subir el archivo, pero por ahora lo dejo en pausa porque me preocupa la seguridad.
Conclusión
Ya tengo las herramientas. Ahora quiero construir la "tranquilidad"!
Una idea que se quedaba en mi cabeza con el pensamiento de "no tengo conocimientos de desarrollo" ha cobrado vida y se ha convertido en una herramienta que realmente cambia mi día a día, gracias a la IA, mi mejor compañera. Dejé de culparme por no hacerlo perfecto y, pagando un pequeño "impuesto de pereza", puedo volver a intentarlo tantas veces como quiera. Gracias a este sistema tan amable, incluso yo, que antes era un experto en abandonar los propósitos a los pocos días, ahora consigo mantener mis hábitos con alegría todos los días.
Pero cuanto más cómoda es una herramienta, mayor es también la responsabilidad de protegerla.
Aunque no se menciona en este artículo, también estamos añadiendo poco a poco funciones de notificaciones y de gestión de finanzas personales.
Sin embargo, la gestión del presupuesto doméstico requiere mucho cuidado desde el punto de vista de la seguridad, así que por ahora seguimos trabajando en su desarrollo en el entorno de desarrollo.
Así que, ¡no se pierdan la próxima actualización!
¡El diseño de UI evoluciona cada día! Estoy pensando cómo integrar la accesibilidad en el diseño de landing pages. Hace poco me alejé del maquetado y me pregunto si debería también evolucionar con JS. ¡Me encanta Takumi Kitamura!
Hasshi
Diseñador web / Se unió en 2018 / En el corazón, sigo siendo un diseñador novato