Cómo depurar tu app con prompts pequeños

Cuando trabajas con un builder basado en inteligencia artificial, dos personas pueden escribir instrucciones casi idénticas y recibir resultados distintos. Eso ocurre porque detrás opera un LLM, y aprender a depurar una app con prompts por bloques es la habilidad que marca la diferencia entre una billetera funcional y una llena de inconsistencias.

¿Qué es un LLM y por qué genera resultados distintos?

Un LLM o Large Language Model es un modelo grande de lenguaje que interpreta tus instrucciones en texto y devuelve una respuesta, una explicación o, en el contexto de un builder, cambios visuales y funcionales en tu aplicación [01:10].

Por eso a una persona le puede quedar el tema claro y a otra el oscuro, o aparecer una ventana de resumen que nunca pidió. No significa que el modelo falló: significa que necesitas revisar tu app con criterio antes de seguir avanzando.

¿Qué es un LLM en pocas palabras? Es un modelo de lenguaje que entiende texto e interpreta instrucciones para generar respuestas, código o componentes visuales. Por su naturaleza probabilística, dos prompts iguales pueden dar resultados diferentes.

¿Por qué conviene corregir errores con prompts pequeños y no con uno gigante?

Si metes diez arreglos en un solo prompt y algo sale mal, no sabrás qué cambio rompió la app. La estrategia que funciona es trabajar por bloques: arreglo pequeño, prueba rápida, punto claro en la conversación y seguir.

Antes de tocar nada, deja claro tu punto de partida. No porque sea perfecto, sino porque si un arreglo sale raro, necesitas saber cuál fue la última versión estable.

¿Qué inconsistencias buscar en tu app de billetera?

En la versión inicial aparecen varios detalles que rompen la confianza del usuario [02:00]:

• Saldo de menos cinco millones disponibles, pero estado de cuenta marcado como balance positivo.
• Detalle del último gasto que no se puede editar ni eliminar.
• Modal que saca al usuario del dashboard y lo lleva a una pantalla de movimientos donde nunca estuvo.
• Botón para cambiar el tema que no funciona.
• Gráfica de actividad diaria sin eje X visible y sin información al pasar el mouse.
• Presupuesto mensual que no se puede editar.

¿Cómo limpiar la navegación con un prompt enfocado?

El primer bloque es la navegación. En Google AI Builder se pide eliminar el menú lateral con dashboard, resumen e historial, manteniendo el dashboard como pantalla principal [03:30]. Después se verifica que el botón ver todo abra el historial como modal, es decir, una ventana superpuesta que conserva el contexto del usuario.

Cuando hablas con el builder, puedes usar lenguaje no técnico. Lo importante es claridad y mencionar los detalles concretos que quieres cambiar.

¿Qué es un modal en una app? Es una ventana que se abre encima de la pantalla actual sin sacar al usuario del contexto donde estaba. Mejora la experiencia porque evita perder la referencia visual.

¿Cómo usar la herramienta editar para corregir un componente específico?

En la esquina superior derecha está la opción editar herramienta. Seleccionas el componente exacto que quieres cambiar y el modelo lo identifica automáticamente para recibir tu prompt [05:10].

Con esta función se corrige, por ejemplo, que la ventana de movimientos solo aparezca al dar clic en ver todo y no cuando se cierra el detalle de una transacción. Es un superpoder: seleccionas cualquier elemento de la página y lo arreglas de inmediato.

¿Cómo hacer editable el presupuesto mensual sin romper el balance?

El presupuesto mensual no puede ser un número decorativo. El prompt indica: haz editable el presupuesto mensual desde el dashboard, pero ese cambio arrastra otros [06:30]:

1. Actualizar el saldo disponible para gastar.
2. Recalcular el porcentaje gastado.
3. Ajustar el estado de cuenta.
4. Cambiar el balance a negativo y mostrarlo en color de alerta cuando el saldo sea menor que cero.

Al probar con un saldo de 500.000 menor al gasto, aparece el balance negativo marcado en rojo. La lógica responde como esperabas.

¿Cómo mejorar una gráfica para que se pueda leer?

La gráfica no solo tiene que verse bien, tiene que poder leerse. Con la opción de editar herramienta seleccionas la gráfica de actividad diaria y pides hacer visible la etiqueta del eje X y agregar información al pasar el mouse sobre cada barra, mostrando fecha y monto [07:50].

Si el eje X sigue sin verse, hay un truco poderoso: tomar un pantallazo de la sección y enviarlo al modelo con la instrucción nota que el eje X aún no es completamente visible, arréglalo. Aquí no seleccionas un objeto, pasas la imagen como contexto para que el modelo vea exactamente lo mismo que tú.

¿Cuándo conviene pasar una imagen al builder en vez de texto? Cuando el problema es visual y describirlo con palabras es ambiguo. Una captura le da al modelo el mismo punto de vista que tienes tú frente a la pantalla.

¿Qué retos quedan pendientes en tu billetera?

Dos correcciones que vale la pena resolver tú mismo antes de la siguiente clase:

• Lograr que las opciones de editar y eliminar movimientos funcionen de verdad.
• Hacer que el botón de cambiar entre tema claro y oscuro modifique realmente la apariencia.

Arregla una sola cosa a la vez, escribe el prompt, prueba y avanza solo cuando ese punto funcione. Si encuentras otra inconsistencia, súmala a tu lista. ¿Qué error inesperado apareció en tu versión? Cuéntalo en los comentarios.