Las apps de GoodBarber están listas para el iPhone Duo. Ver cómo
Blog

Roba esta idea: la lista de regalos de Navidad

Septiembre ya pasó, los buenos propósitos de volver al gimnasio se cumplieron (o no), y ahora toca organizar las fiestas de fin de año. Para ayudarte a verlo más claro, aquí tienes una sección de app que quita estrés a la tarea de llenar el saco de Papá Noel: una ficha por persona, ideas que cambian de estado para seguir el presupuesto y una cuenta atrás hasta Nochebuena. Todo generado con una sola descripción al AI Extension Builder de GoodBarber.

La serie «Roba esta idea»: una sección de app que describimos al AI Extension Builder, que construimos de verdad y cuyo prompt completo te entregamos al final, listo para pegar. Después del reto de 30 días de la vuelta a la rutina, llega una de las temporadas más intensas del año.

La sección, del lado del cliente

Todo empieza con una pregunta: Who are you shopping for this year? El cliente añade a una persona con el nombre que quiera: un nombre propio, «Mamá», «los vecinos». También puede fijarle un presupuesto, o no.

Debajo de cada persona, las ideas de regalo. Cada idea lleva un botón de estado que se toca para avanzar: Idea, luego Bought, luego Wrapped. Los regalos comprados y envueltos se suman al presupuesto de esa persona (€0 of €50, con una barra fina) y al total de la temporada, arriba de la pantalla.

El anillo Progress se llena a medida que cada persona tiene al menos un regalo comprado. Cuando la lista crece, las fichas se pliegan con un toque en su cabecera y solo quedan los nombres. Una línea recuerda quién no tiene todavía ninguna idea (1 person has no gift ideas yet): al tocarla, la pantalla baja hasta esa persona.

Maison Lumen, la tienda de estas capturas, es inventada para el ejemplo. Todo lo que se ve en ella es ficticio.

Por qué este formato funciona para una tienda

La ventaja está en el calendario. Desde principios de noviembre hasta el 24 de diciembre, tu cliente vuelve a abrir su lista cada vez que se le ocurre un regalo, y es tu app la que abre para hacerlo. Un escaparate se mira de pasada y una newsletter navideña se pierde entre las demás. Una herramienta que de verdad le sirve vuelve a sus manos justo cuando decide sus compras.

Y es un servicio, no una promoción más. La sección no vende nada, no empuja ningún producto y no pide nada a cambio. Ahorra tiempo y evita pasarse del presupuesto. El día en que tu cliente busca una idea para su madre, tu catálogo está a una pestaña.

El presupuesto cuenta, y no se detiene en el tope

Fíjate en la ficha de Mum: presupuesto de 80 €, dos regalos comprados, 85 € gastados. La barra está llena, la cifra se pone en rojo (€85 of €80) y la cuenta sigue. Está escrito negro sobre blanco en el prompt: nunca dejar de contar al llegar al presupuesto. Una barra bloqueada en el 100 % mentiría justo en el momento en que la información importa.

Dos detalles hacen que ese total sea fiable. Un regalo envuelto sigue contando: pasar de Comprado a Envuelto solo cambia la etiqueta. Y cuando se marca como comprada una idea que no tenía precio, la sección abre al instante la ficha del regalo, con el cursor en el campo Price paid. El cliente escribe lo que ha pagado en ese mismo momento, y el total nunca queda mal por un olvido.

Una lista que se queda en el teléfono

Una lista de regalos es una lista de secretos, y la sección se lo toma en serio: todo se guarda en el dispositivo, no se envía nada, no se comparte nada. Lo dice una vez, en letra pequeña, al pie de la pantalla: This list stays on your phone. We can't see it.

Para los teléfonos que se quedan sobre la mesa del salón, el cliente puede bloquear su lista con un código de cuatro cifras. Al volver a abrirla, la pantalla pide el código antes de mostrar nada.

Las frases del prompt que hacen el trabajo

El prompt completo está más abajo. Si lo adaptas, cinco frases llevan lo esencial: consérvalas.

  1. «When the total passes the budget, the bar fills completely and the figure turns to "€72 of €60" in a warning colour — never stop counting at the budget.» El ejemplo con cifras hace el trabajo: el generador ve exactamente qué mostrar cuando se supera el presupuesto.
  1. «Wrapping a gift never takes it out of any total.» En nuestra construcción, la primera versión quitaba los regalos envueltos del total. Basta una frase para evitarlo.
  1. «When a gift with no price becomes "Bought", its edit window opens with the cursor already in the price field.» El momento en que el cliente conoce el precio es el momento en que compra. La sección se lo pide justo entonces.
  1. «A person is done as soon as at least one of their gifts is bought or wrapped.» La palabra «terminado» no tiene un sentido evidente. Escribe la regla; si no, el generador elige una por ti.
  1. «The list is never sent anywhere, never shared with anyone, and never visible to us.» La promesa de confidencialidad está en el prompt, y la frase que aparece en pantalla también, palabra por palabra.

El prompt: róbalo

Ni una línea de código detrás de esta sección: un brief, entregado al AI Extension Builder. Nuestra construcción necesitó algunos retoques, todos integrados aquí en un único prompt depurado. Lo hemos comprobado: pegado tal cual en una sección nueva, este prompt da a la primera todo lo que describe este artículo.

Create a Christmas gift planner section. Write every text on screen in English. The screen is a list of the people the user is buying for, each with their gift ideas. There is no limit to the number of people. When the list is empty, it shows a single card with the line "Who are you shopping for this year?" and an "Add a person" button, and no other add button. As soon as one person exists, that card disappears and a full-width "Add a person" button sits above the list. Adding a person asks for a name and, optionally, a budget — a plain number, shown with the € symbol. The name is whatever the user types: a first name, "Mum", "the neighbours". Each person is a card. Its header shows the name with a small pen icon right next to it, and the number of gifts on the right ("1 gift", "3 gifts"). Tapping anywhere on the header except the pen folds or unfolds the card; folded, only the header shows, and each card remembers whether it is folded. The pen opens "Edit person": name, budget, Save and Cancel side by side, and below them a full-width "Delete person" button that asks first, then removes the person and all their gifts. Unfolded, a card shows the money line, then the gifts, then "Add a gift idea". The money line reads "No gift ideas yet" when the person has no gift, "€45 of €60" with a thin bar when a budget is set, and "€18 spent" when there is no budget. When the total passes the budget, the bar fills completely and the figure turns to "€72 of €60" in a warning colour — never stop counting at the budget. Each gift is one line: its name, its price if there is one, a state button, and "Edit" and "Delete" links. Tapping the state button moves it from "Idea" to "Bought" to "Wrapped", and a wrapped gift goes back to "Idea". Only those three states, always in that order. Bought and wrapped gifts count toward the person's total and the overall total; ideas don't. Wrapping a gift never takes it out of any total. When a gift with no price becomes "Bought", its edit window opens with the cursor already in the price field, labelled "Price paid". "Add a gift idea" asks for a line of text and an optional price. "Edit" lets the user rename the gift, change its price, or move it to another person with a "For whom?" choice. "Delete" asks first. At the top of the screen, three compact cards in a bento layout. A full-width card reads "48 days until Christmas Eve", counting to 24 December; on 24 December it reads "It's Christmas Eve". Below it, two cards side by side: "Progress", a ring that fills with the share of people who are done, with "2/3" in its centre and "done" under it; and "Total spent on gifts", the sum of the prices of every bought or wrapped gift. A person is done as soon as at least one of their gifts is bought or wrapped. No sentence under the ring. Under the add button, when it is true, one line reads "2 people have no gift ideas yet" ("1 person has no gift ideas yet" in the singular); tapping it scrolls to the first of them and unfolds their card. Everything lives on this device alone. The list is never sent anywhere, never shared with anyone, and never visible to us. Say so on the screen, once, in small text at the bottom: "This list stays on your phone. We can't see it." Above that line, a "Lock this list" button lets the user choose a four-digit code, typed twice, and warns in one sentence that a forgotten code cannot be recovered. Every code entry in the section uses four separate boxes: the cursor moves to the next box as each digit is typed, and backspace moves back. Once a code is set, the section asks for it before showing anything. The lock screen offers "Forget the code and erase the list" as the only way out: its confirmation appears on top of the lock screen, and confirming erases the people, the gifts and the code, and shows the empty list. Once unlocked, the button reads "Remove the lock" and asks for the code before removing it. From 26 December, the top of the screen offers "Start next year's list", which keeps the people and their budgets and removes every gift. Nothing is deleted without asking, and every confirmation is a window drawn by the section, on top of everything else. Nothing flickers or flashes: a gift changing state updates in place without the list jumping or scrolling, totals recount without animating, there is no reload effect when the screen opens, and entrance animations play only on first load. Match the app's design.

Antes de anunciarlo: tres comprobaciones

Una sección generada se comprueba repitiendo los gestos de un cliente. Bastan tres minutos.

El precio al comprar. Añade una idea sin precio y pásala a Bought: la ficha del regalo debe abrirse con el cursor en el campo del precio. Introduce un importe: el total de la persona y el total de arriba de la pantalla deben moverse.

El envoltorio. Pasa ese regalo a Wrapped: ningún total debe cambiar.

La salida del bloqueo. Pon un código, cierra la sección y vuelve a abrirla. En la pantalla bloqueada, sin teclear el código, toca Forget the code and erase the list. La confirmación debe aparecer encima de la pantalla bloqueada.

En nuestra construcción, se abría detrás de la pantalla bloqueada: solo se veía después de desbloquear (captura de la izquierda, al principio de esta parte). Con el prompt de arriba, aparece encima como debe (captura de la derecha).

Es justo el tipo de detalle que solo se ve probando. El prompt de arriba ya lo especifica, pero si tu generación lo deja pasar, no hace falta empezar de cero: pide el retoque describiendo lo que ves y lo que esperas. Aquí lo tienes, listo para pegar:

"Forget the code and erase the list" doesn't work from the lock screen: its confirmation opens behind the lock screen, and I only see it after unlocking. Expected: the confirmation appears on top of the lock screen, and confirming erases the people, the gifts and the code, then shows the empty list — without ever entering the code.

La receta vale para cualquier retoque: el síntoma que ves, el comportamiento que esperas y el detalle que elimina la ambigüedad. Aquí, «sin teclear nunca el código».

El 26 de diciembre

La cuenta atrás ha cumplido su función. A partir del 26 de diciembre, la parte de arriba de la pantalla propone Start next year's list: las personas y sus presupuestos se quedan, los regalos se borran, previa confirmación. El año que viene, tu cliente encontrará su lista donde la dejó, en tu app, y podrá ir apuntando ideas en cuanto pasen las fiestas.

Te toca

Personas, ideas, tres estados y un presupuesto: la mecánica va mucho más allá de la Navidad. Una tienda de puericultura la convertirá en una sección de «lista de nacimiento» que preparar, una papelería en la lista de la vuelta al cole por hijo. Allí donde tus clientes preparan compras para varias personas, la sección se reescribe cambiando unas pocas palabras.

Para ir más lejos

Ahora tú

La lista de Navidad es solo un punto de partida. Describe tu sección como se la explicarías a un vendedor que empieza en diciembre: lo que ve el cliente, lo que toca y lo que debe seguir siendo cierto pase lo que pase. Si se puede describir, puede ser una sección de tu app: crea una app con GoodBarber.

En resumen

¿Puedo ver las listas de mis clientes?

No. Todo se queda en su teléfono: no se envía nada, ni a ti ni a nosotros. La sección lo indica al pie de la pantalla.

¿La lista se sincroniza entre varios dispositivos?

No, es la otra cara de la confidencialidad: la lista vive en un solo teléfono. Si tu cliente cambia de dispositivo, empieza con una lista vacía.

¿Y si mi cliente olvida su código?

Nadie puede recuperarlo. La única salida es borrar la lista y empezar de nuevo. La sección se lo advierte cuando elige su código.

¿Se puede cambiar la moneda o el idioma?

Sí, con una frase en el prompt: sustituye «€» y «English» por lo que convenga a tus clientes.

¿Qué pasa después de Navidad?

A partir del 26 de diciembre, la sección propone preparar la lista del año siguiente conservando las personas y sus presupuestos.

Sigue leyendo

  6 min de lectura

AI Extension Builder: el agente prueba tus secciones y puede crear la base de datos de tu app

Pongamos el caso de un club deportivo que quiere que sus socios elijan la fecha de su torneo. En su sección Crear con IA, escribe: “Añade una encuesta para elegir la fecha del torneo, con los resultados.”El agente lee primero el contexto de la app: su paleta, sus fuentes, su logo, los archivos ya añadidos. Consulta el design system de GoodBarber, escrito por nuestros diseñadores. Después escribe los archivos de la sección.Los votos tienen que compartirse entre todos los socios. El agente lo detecta y hace la pregunta, con tres respuestas:Create the app's database: una sola base de datos, gestionada por GoodBarber. Sus tablas empiezan vacías.Connect my Supabase: los datos van al proyecto Supabase del club.Cancel: el agente hace la sección sin base de datos, y cada teléfono solo ve sus propios votos.El club elige la base de datos de GoodBarber. El agente abre entonces la sección en un navegador, al ancho de un teléfono, y prueba sus botones. Busca errores: un script que falla, una imagen rota, un texto que se sale de la pantalla. Corrige lo que encuentra y después guarda la sección.Los socios votan y todos ven los resultados. Cada uno solo puede cambiar su propio voto.