Topics

¿Continuarías con Claude Code? El diario de desarrollo de "mi propia aplicación" de salud integral para un diseñador de UI que no puede mantener la constancia

  • column

¡Hola! Soy Hasshi, diseñador UI en Liberogic.

De repente, ¿no tienen ustedes una preocupación secreta como esta? La de que la app de hábitos que instalaron con toda la ilusión de «¡voy a empezar hoy!» simplemente no funciona.

Soy un profesional en empezar cosas, pero nunca he logrado mantener una.

Hay muchas apps excelentes y hermosas en el mundo.

Al principio registro todo diariamente sin falta. Pero cuando el trabajo se vuelve abrumador o hay una cena, de repente un día mi «racha de continuidad» se rompe y mi motivación desaparece en un instante.

Las notificaciones de recordatorio que antes me importaban ahora se convirtieron en ruido, y esas apps se fosilizan lentamente en la esquina de la pantalla del teléfono.

Ese sentimiento de derrota que «bueno, ya no importa» golpea en ese momento. Estoy seguro de que no soy el único que lo ha experimentado.

¿Habrá alguien que extienda una mano salvadora a mi vida de persona que abandona todo al tercer día? (No hay)

Lo que me molestaba aún más era la «fragmentación de apps».

Rastreadores de hábitos, calendarios de medicinas, apps de presupuesto... pasar entre diferentes apps para cada categoría complicaba las cosas aún más. Además, había muchas suscripciones pagadas y mi gestión se volvía descuidada, olvidándome de cancelarlas. Esto era completamente contraproducente.

Fue entonces cuando se me ocurrió una idea de diseñador un poco caprichosa. "¿Y si simplemente creo mi propia aplicación con solo las funciones que necesito, diseñada exclusivamente para mí?"

Así comenzó el desarrollo de mi "cabina de control de hábitos personalizada", creada en colaboración de dos personas con AI (Claude Code), totalmente especializada en mi estilo de vida.

Por ahora, confío en que la AI me proporcione la solución óptima.

1. 【Descripción de funciones】 Una función dedicada que envuelve mi "pereza" en el sistema: "sistematizar la procrastinación".

Ahora les presentaré qué funciones hemos implementado realmente.

Buscamos lo mejor de las aplicaciones existentes mientras creamos un "panel de control" definitivo especializado en mi vida.

Para consolidar las aplicaciones necesarias en una sola, primero empecé a crear una aplicación de automatización de hábitos.

También proporcionamos tanto modo claro como modo oscuro porque queremos usarlos de manera diferente por la mañana y por la noche.

🌱 Pantalla inicial

La pantalla inicial muestra una pantalla de entrada para los hábitos que deseas mantener, y puedes avanzar ingresando los datos tú mismo.

Al desplazarse hacia abajo, encontrarás un enlace que dice "Responder preguntas y crear hábitos". Al hacer clic, responderás a las preguntas y la aplicación te sugerirá hábitos personalizados para ti.

La pantalla inicial incluye un diagnóstico de formación de hábitos

También creé un navegador de hábitos en la pantalla inicial para usuarios que no saben qué hábitos quieren adquirir. Solo responden preguntas y pueden seleccionar hábitos personalizados para ellos.

🌱 Rastreador de hábitos: Sal del mundo del "todo o nada"

Para formar hábitos, es importante tener algo que puedas mantener de manera constante, incluso en pequeños pasos

Creé una aplicación de formación de hábitos con una función de "calificación de 5 niveles". Las aplicaciones anteriores tendían a ser binarias: "lo hice" o "no lo hice". Pero en esta aplicación, no solo registras los días en que lo hiciste perfectamente, sino que el calendario también se colorea en los días de Nivel 1, cuando "solo hiciste un pequeño esfuerzo".

Por ejemplo, para el ejercicio, puedes registrar desde "Nivel 1: Subirte a la báscula" o "Nivel 2: Hacer sentadillas cuando vas al baño", hasta "Nivel 5: Nadar 1 km en la piscina o hacer boxeo de combate durante 40 minutos", dependiendo de tu esfuerzo ese día.

Los días que no hiciste nada quedan en blanco, pero con el sistema de "impuesto por pereza" que explicaré después, incluso si no logras mantener la consistencia, puedes recuperarte en otros días, así que incluso si tienes días sin hábito, no es desmoralizante.

Simplemente comienza de nuevo al día siguiente. Gracias a esa facilidad, ¡he podido al menos subirme a la báscula todos los días!

El calendario se colorea gradualmente con un gradiente verde, lo que te permite disfrutar visualmente de la "acumulación de colores". Cuando lo ves en un mes, es fácil ver cuánto has acumulado y eso aumenta tu motivación.

Visualización con la función de calendario

Cuando ves la UI del calendario y logras alcanzar tu hábito, el color cambia. La intensidad y el color varían según tu nivel, lo que te permite ver cuánto has ejecutado tu hábito. Esto te ayuda a mantener la motivación.

También incluye función de archivo de hábitos y creación de nuevos hábitos

Creemos que una vez que hayas consolidado un hábito durante cierto tiempo, está bien pasar a otro hábito. Por eso incluimos la función de archivo de hábitos y la función de creación de nuevos hábitos. Al hacer clic en el botón "Hábito completado", puedes añadir un nuevo hábito.

🏛️ Impuesto por pereza: convierte la culpa en ahorros

Esta es otra función vinculada al rastreador de hábitos que mencionamos antes.

Es un sistema en el que te impones un "impuesto" (300 yen por defecto) a ti mismo en los días que no cumples.

Todos tenemos momentos en los que simplemente no podemos seguir adelante.

Por eso es necesaria una penalización para disciplinarse, pero si es solo una multa, terminará sintiéndose desagradable.

¿Sabes por qué alguien es obeso? Porque huyen hacia lo fácil, hacia la pereza, y satisfacen la dopamina con comida, dependiendo de simples hormonas de la felicidad. Por eso, aunque hagas más fuertes las penalizaciones, para nosotros que tenemos dificultades para consolidar hábitos, no tendría sentido.

Pensé en "bueno, tal vez debería donar el dinero de los días que me salte"... pero sabía que si me imponía una disciplina tan estricta, definitivamente dejaría de abrir la aplicación (jaja).

Decidí que el destino del "impuesto por flojera" sería "transferir el dinero a mi cuenta de inversión en índices".

Es decir, es una multa, pero no es exactamente una multa. Es una multa para mí mismo.

Incluso la culpa que siento por haberme saltado días se convierte en inversión para mi futuro.

Además, agregué un "sistema de desgravación fiscal" basado en la tasa de cumplimiento mensual.

  • "Si logro 90% o más de cumplimiento, obtengo 50% de exención"
  • "Si logro 80% o más, obtengo 25% de exención"

Incorporé este sistema a la aplicación.

La pantalla muestra "¡Falta 1% para 25% de reducción!" y cuando lo veo, surge una extraña motivación de "bueno, hoy puedo conformarme con Nivel 2 e intentar de todas formas".

El mayor enemigo de la formación de hábitos es el momento en que "te saltas un día, se rompe tu racha, y quieres abandonarlo todo".

Sin embargo, gracias a este sistema de reducción de impuestos, puedo detenerme y pensar: «Falté un día, pero aún tengo la oportunidad de aprovechar la reducción de impuestos».

Un diseño compasivo que no te abandona después de un único fracaso, diseñado específicamente para acompañarte en tu desorganización.

✨ Rastreador de cuidado de la piel & 💊 Gestor de medicamentos: cero saltos entre aplicaciones

✨ La herramienta de verificación de cuidado de la piel es exactamente lo que necesitaba

Gestionar hábitos, medicamentos y presupuestos en aplicaciones separadas era el colmo de la molestia para una persona desorganizada. Para eliminar estos «saltos entre aplicaciones», hemos integrado completamente el cuidado diario y la gestión de la salud en esta cabina de control.

En cuanto a funcionalidad, pudimos reutilizar las características de una aplicación de hábitos, así que la implementación fue sencilla.

🧴 Rastreador de cuidado de la piel que permite los días en que no puedes esforzarte

El cuidado de la piel es un hábito legítimo. Cuando abres la pantalla, te pregunta «¿Hasta dónde llegaste?» y hemos preparado 5 niveles de pasos.

Un día agotador, el «Nivel 1: Solo limpieza (agua o limpiador facial)» está bien. Si tienes un poco más de energía, puedes hacer el «Nivel 2: Cuidado mínimo (limpieza + tónico)», «Nivel 3: Cuidado básico (+ hidratante)», y los días especiales con «Nivel 4: Cuidado cuidadoso (+ sérum)». Puedes registrar tu rutina según tu energía del día.

Además, puedes personalizar el nombre de cada nivel y el contenido del cuidado (descripciones) desde la «Configuración de pasos». En la parte superior de la pantalla se visualiza el «Promedio de nivel este mes» y «Días continuos de nivel 3 o superior», así que puedes mantener la motivación sin excederte: «Últimamente estuve agotado y solo hice nivel 1, así que hoy voy a esforzarme hasta nivel 3».

💊 Gestión de medicamentos: una asistencia completa para los despistados

Y lo que personalmente me cuesta más es gestionar mis medicamentos.

Esta aplicación no se limita a introducir el nombre del medicamento. Permite registrar de manera flexible y detallada el horario de toma (mañana, tarde, noche), las condiciones (antes de comer, después de comer, en cualquier momento), la cantidad de pastillas en cada toma, e incluso frecuencias complejas como "todos los días", "cada dos días" o "días específicos de la semana".

Cuando hay medicamentos sin tomar, en la parte superior de la pantalla aparece una alerta roja llamativa que dice "⚠️ Tienes medicamentos sin tomar. Compruébalo." para recordarte que debes tomarlos.

En la parte inferior de la pantalla también se muestran números reales como "Porcentaje de adherencia este mes" y "Número de olvidos" (en la pantalla de prueba en desarrollo, se muestra un vergonzoso 5% de adherencia... jaja).

Pero no te preocupes.

Si olvidas tomar un medicamento, el diseño permite registrarlo después consultando el calendario (puedes hacerlo en cualquier momento), así que puedes seguir a tu propio ritmo sin obsesionarte con la perfección.

Conforme envejecemos, aumenta la cantidad de medicamentos que tomamos, así que esta función es muy útil, y poder compartir información sobre medicamentos pasados con el médico es de gran ayuda (soy de los que siempre olvidan el libreta de medicamentos).

🍺 Gestión de comidas sociales: una función milagrosa que dispara la motivación por la salud y el ahorro

Y personalmente, la función que más ha transformado mi vida es esta "Gestión de comidas sociales".

No solo registra tus consumiciones, sino que gestiona el límite mensual de salidas para beber (por ejemplo, «hasta 4 veces al mes») y tu presupuesto, mientras transforma los pequeños sacrificios diarios en recompensas visuales.

🍵 ¡Un toque y listo! «Ahorro por reducción de alcohol»

En tu día a día

Hoy voy a evitar beber en casa

y logras contenerte, simplemente toca el botón «Hoy no tomé alcohol por la noche» en la pantalla principal.

Con eso basta para que aparezca una marca verde en el calendario y se sume 500 pesos a tu «Ahorro por reducción de alcohol».

Conforme tus pequeños sacrificios diarios se acumulan en forma de dinero, a medida que se acerca el final del mes obtienes la satisfacción de pensar «¡Este mes ahorré 3.000 pesos (6 días) reduciendo mi consumo!» y un curioso subidón de dopamina.

Ese dinero que sobra puedes destinarlo a inversiones o ahorros.

O puedes sacarlo de tu lista de deseos con el dinero ahorrado. Si realmente sientes que has obtenido algo a cambio por reducir tu consumo, es más probable que puedas mantener la abstinencia o la reducción de alcohol a largo plazo.

🛡️ «Modo de prevención de resaca» para controlarte durante una salida

El as bajo la manga de esta aplicación es el «Modo anti-resaca». Cuando empieza la reunión de bebidas, activa este modo. Entonces, aparece un contador regresivo hasta la «hora objetivo de regreso a casa» que estableciste previamente, bien grande en el centro de la pantalla. Por supuesto, si piensas «¡hoy la estamos pasando bien, un poco más!», puedes extender flexiblemente el tiempo con botones como «Cambiar hora de regreso» o «🎉¡Secundas copas sin problema!»: un diseño amable para alguien perezoso como yo.

Además, la pantalla tiene contadores de copas para «🍺Alcohol», «🥤Bebidas sin alcohol» y «💧Agua». Evalúa en tiempo real el ritmo, como «1 bebida sin alcohol por cada 2 alcohólicas», y el medidor te indica «OK» en verde. De esta manera, puedes reducir drásticamente la resaca del día siguiente y el arrepentimiento de «¿por qué bebí tanto?».

📊 También hemos añadido muchas otras funciones útiles para reuniones de bebidas

Cuando termina la reunión de bebidas, puedes registrar el nombre del lugar (como «Torikizoku Shibuya»), el monto real pagado, notas sobre quién fue contigo y más. Además, añadimos una función que ingresa automáticamente la información si pegas una URL de Google Maps. Como es una tarea que hago solo unas pocas veces al mes, le pregunté a la IA si implementar una integración API sería costoso, y me dijo que no. Así que lo implementamos.

También añadí una función de nota porque a veces olvido hacer la liquidación en las reuniones de bebidas.

Está muy bien que no haya más dudas sobre quién pagó qué.

En el «Informe mensual» de fin de mes, la «reserva de ahorro por moderación» (días en los que evité beber en casa) y la diferencia ahorrada respecto al presupuesto de la reunión (dinero ahorrado en la reunión) se suman y se visualizan con orgullo como «ahorro total». Por ejemplo, ves de un vistazo «¡Este mes ahorré 9,000 yenes en total!», así que puedes emocionarte pensando «¿me compro ese gadget que quería con este dinero?». Es mi función favorita porque obtienes tanto salud como dinero.

2. Después del desarrollo: Claude fue el mejor «traductor» para un diseñador

Así es como este app con toda mi pereza y caprichos tomó forma. El hecho de que alguien sin experiencia en desarrollo como yo llegara hasta aquí es completamente gracias a mi compañero Claude.

Los ingenieros quizá me griten «¿estás cuerdo?», pero esta vez opté por una estructura de archivo único súper arriesgada: «meter todo HTML, CSS y JavaScript en un único index.html». Sin embargo, para nosotros (Claude y yo), fue la decisión correcta.

Cuando un archivo se divide en varios, solo comunicar "qué archivo y dónde corregir" ya es toda una tarea, pero si es una sola página, puedo simplemente lanzar todo el código al chat y Claude lo entiende al instante.

Claude traduce mi imagen abstracta de "quiero este comportamiento" en código hermoso. A veces hubo problemas donde etiquetas de cierre mal cerradas o el orden de carga de JavaScript hacía que toda la aplicación se bloqueara, y mi compañero de equipo y yo perseguíamos registros de errores a mitad de la noche, pero incluso eso se sentía como estar en una película de buddy (¡risas!).

Con integraciones como GitHub y Cloudflare, Claude me enseña métodos de registro de cuentas a través del chat e incluye enlaces directos de sitios oficiales, así que con solo chatear con la IA las integraciones se completan en un instante.

3. El siguiente muro alto: el abismo del diseño y la seguridad

Con la ayuda de Claude, pude obtener el mejor juguete (aplicación) que encapsula mi visión ideal en apariencia y funcionamiento.

......pero aquí surge un nuevo problema.

Después de usar dicho panel de control a diario durante un tiempo, de repente me di cuenta de algo. "Espera, esta aplicación contiene mi verdadero estado de salud, datos de medicamentos diarios, presupuesto familiar reciente e historial de negligencia, un montón de privacidad expuesta".

Actualmente he puesto un bloqueo de pantalla simple con un código PIN como medida de tranquilidad, pero siendo honesto, soy completamente principiante en seguridad. En el estado actual creado solo con mi conocimiento y el de la IA, no puedo deshacerme de cierta inquietud al confiar datos importantes.

Precisamente porque como diseñador creo "experiencias placenteras", la sensación de seguridad de que los datos "nunca se filtran ni se vulneran" debería ser una parte importante.

"¡Realmente quiero poder abrir la aplicación de forma segura y elegante solo con Face ID del teléfono o las últimas Passkeys!

Tenía esa idea, pero la seguridad es un campo súper especializado que no es nada sencillo.

Esto es demasiado para mí solo...

Quiero hablar con un ingeniero y proceder con cuidado.

Me gustaría implementar también una herramienta de gestión de presupuesto en el futuro y agregar funciones que carguen automáticamente el historial de transacciones con tarjeta de crédito, pero la seguridad me preocupa, así que por ahora lo dejo en suspenso.

Conclusión

Las herramientas están listas. ¡Ahora quiero crear "confianza"!

Una idea que solo guardaba en mi cabeza porque "no tengo conocimientos de desarrollo" se ha convertido en una herramienta real que cambia mi vida, gracias a la IA como mi mejor compañera. He dejado de culparme por no ser perfecto, y pagando un pequeño "impuesto de pereza" puedo reintentar cuantas veces quiera. Gracias a este sistema amable, yo, que era un maestro en abandonar las cosas al tercer día, ahora puedo mantener hábitos diarios con entusiasmo.

Pero mientras más conveniente se vuelve, también viene con la responsabilidad de protegerlo.

No lo menciono en este artículo, pero estoy agregando poco a poco funciones de notificación y gestión de presupuesto.

Pero como la gestión de presupuesto requiere precaución desde la perspectiva de seguridad, todavía estoy trabajando en ello en el entorno de desarrollo.

¡Así que espera con entusiasmo la próxima actualización!

Autor de este artículo

¡El diseño UI se actualiza todos los días! También estoy pensando en cómo incorporar la accesibilidad en el diseño LP. Últimamente he estado alejado del marcado y me pregunto si debería mejorar mi JavaScript. ¡Me encanta Takumi Kitamura!

Hasshi

Diseñador Web / Ingresó en 2018 / Todavía se siente como un diseñador principiante en el corazón

Ver artículos de este staff

Destacamos por nuestro equipo confiable y nuestra rápida capacidad de respuesta

En Liberogic, nuestro personal experimentado impulsa activamente los proyectos, lo que nos ha ganado una alta evaluación de nuestros clientes.
Nos aseguramos de asignar adecuadamente gerentes de proyecto y directores, manteniendo una ejecución fluida de todo el proyecto. Evitamos aumentos de costos innecesarios mediante asignación completa, distribuyendo recursos estratégicamente según las necesidades, y somos reconocidos por la rapidez en la comprensión de tareas, elaboración de presupuestos y entrega de cotizaciones.

* Tome en cuenta que nuestra empresa no participa activamente en labores de residencia tipo SES.

Puede utilizar prácticamente todas las herramientas principales de gestión de proyectos y chat como Slack, Teams, Redmine, Backlog, Asana, Jira, Notion, Google Workspace, Zoom, Webex, entre otras.

Consulte con nosotros sobre sus dudas relacionadas con la web.

Casos de Estudio