---
title: "Roube esta ideia: a lista de presentes de Natal"
description: "Uma seção de app que ajuda seus clientes a organizar os presentes de Natal, com orçamento, sem coletar dados. O prompt completo, pronto para colar."
canonical_url: "https://pt.goodbarber.com/blog/roube-esta-ideia-a-lista-de-presentes-de-natal-a1396/"
lang: pt
date: 2026-11-06
last_updated: 2026-11-06
---

# Roube esta ideia: a lista de presentes de Natal

Setembro ficou para trás, as boas resoluções de voltar à academia foram cumpridas (ou não), e agora é hora de organizar as festas de fim de ano. Para ajudar você a enxergar com mais clareza, aqui está uma seção de app que tira um pouco do estresse de encher o saco do Papai Noel: uma ficha por pessoa, ideias que mudam de estado para acompanhar o orçamento e uma contagem regressiva até a véspera de Natal. Tudo gerado com uma única descrição para o AI Extension Builder da GoodBarber.

![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg)

[Florian Luccioni](https://pt.goodbarber.com/blog/author/flo-luccioni/)PWA Developer

[Escolha a **GoodBarber** como suaFonte de notícias preferidaEscolha a **GoodBarber** como sua](https://www.google.com/preferences/source?q=pt.goodbarber.com)

6 de nov. de 2026 · 11 min de leitura

![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98617636-68828073.jpg?v=1793959761.0284176)

A série "Roube esta ideia": uma seção de app que descrevemos ao AI Extension Builder, construímos de verdade e cujo prompt completo entregamos no final, pronto para colar. Depois do [desafio de 30 dias da volta à rotina](https://pt.goodbarber.com/blog/roube-esta-ideia-o-desafio-de-30-dias-da-volta-a-rotina-para-a-sua-academia-a1321/), chegou a vez de uma das épocas mais movimentadas do ano!

## A seção, do lado do cliente

![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98617636-68828074.jpg?v=1793959762.1284144)

Tudo começa com uma pergunta: *Who are you shopping for this year?* O cliente adiciona uma pessoa com o nome que quiser: um primeiro nome, "Mãe", "os vizinhos". Também pode definir um orçamento, ou não.

Embaixo de cada pessoa ficam as ideias de presente. Cada ideia tem um botão de estado que se toca para avançar: *Idea*, depois *Bought*, depois *Wrapped*. Os presentes comprados e embrulhados entram no orçamento dessa pessoa (*€0 of €50*, com uma barra fina) e no total da temporada, no alto da tela.

O anel *Progress* vai se preenchendo à medida que cada pessoa tem pelo menos um presente comprado. Quando a lista cresce, as fichas se recolhem com um toque no cabeçalho e só os nomes ficam visíveis. Uma linha lembra quem ainda não tem nenhuma ideia (*1 person has no gift ideas yet*): ao tocar nela, a tela desce até essa pessoa.

Maison Lumen, a loja destas capturas, foi inventada para o exemplo. Tudo o que aparece nela é fictício.

## Por que esse formato funciona para uma loja

A vantagem está no calendário. Do início de novembro até 24 de dezembro, seu cliente reabre a lista toda vez que pensa em um presente, e é o seu app que ele abre para isso. Uma vitrine é vista de passagem e uma newsletter de Natal se perde entre tantas outras. Uma ferramenta que realmente serve volta para a mão dele exatamente no momento em que ele decide o que comprar.

E é um serviço, não mais uma promoção. A seção não vende nada, não empurra nenhum produto e não pede nada em troca. Ela economiza tempo e evita estourar o orçamento. No dia em que seu cliente procura uma ideia para a mãe, o seu catálogo está a uma aba de distância.

## O orçamento conta, e não para no limite

![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98617636-68828076.jpg?v=1793959763.184411)

Veja a ficha de Mum: orçamento de € 80, dois presentes comprados, € 85 gastos. A barra está cheia, o número fica vermelho (*€85 of €80*) e a contagem continua. Está escrito com todas as letras no prompt: nunca parar de contar no limite do orçamento. Uma barra travada em 100% estaria mentindo justamente no momento em que a informação importa.

Dois detalhes tornam esse total confiável. Um presente embrulhado continua contando: passar de *Comprado* para *Embrulhado* só muda a etiqueta. E quando uma ideia sem preço é marcada como comprada, a seção abre na hora a ficha do presente, com o cursor no campo *Price paid*. O cliente digita o que pagou ali mesmo, e o total nunca fica errado por esquecimento.

## Uma lista que fica no celular

![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98617636-68828077.jpg?v=1793959764.1524081)

Uma lista de presentes é uma lista de segredos, e a seção leva isso a sério: tudo é salvo no aparelho, nada é enviado, nada é compartilhado. Ela avisa uma vez, em letra pequena, no pé da tela: *This list stays on your phone. We can't see it.*

Para os celulares esquecidos na mesa da sala, o cliente pode bloquear a lista com um código de quatro dígitos. Ao reabrir, a tela pede o código antes de mostrar qualquer coisa.

## As frases do prompt que fazem o trabalho

O prompt completo está mais abaixo. Se você for adaptá-lo, cinco frases carregam o essencial: mantenha-as.

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."** O exemplo com números faz o trabalho: o gerador vê exatamente o que mostrar quando o orçamento é ultrapassado.

1. **"Wrapping a gift never takes it out of any total."** Na nossa construção, a primeira versão tirava os presentes embrulhados do total. Uma frase basta para impedir isso.

1. **"When a gift with no price becomes "Bought", its edit window opens with the cursor already in the price field."** O momento em que o cliente sabe o preço é o momento em que ele compra. A seção pergunta justamente nessa hora.

1. **"A person is done as soon as at least one of their gifts is bought or wrapped."** A palavra "concluído" não tem um sentido óbvio. Escreva a regra, senão o gerador escolhe uma por você.

1. **"The list is never sent anywhere, never shared with anyone, and never visible to us."** A promessa de privacidade está no prompt, e a frase exibida na tela também, palavra por palavra.

## O prompt: roube

Nem uma linha de código por trás desta seção: só um briefing, entregue ao AI Extension Builder. Nossa construção precisou de alguns ajustes, todos incorporados aqui em um único prompt refinado. Nós verificamos: colado do jeito que está em uma seção nova, este prompt entrega de primeira tudo o que este artigo descreve.

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 anunciar: três verificações

![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98617636-68828080.jpg?v=1793959765.0164056)

Uma seção gerada se verifica refazendo os gestos de um cliente. Três minutos bastam.

**O preço na compra.** Adicione uma ideia sem preço e mude para *Bought*: a ficha do presente deve abrir com o cursor no campo do preço. Digite um valor: o total da pessoa e o total no alto da tela devem mudar.

**O embrulho.** Mude esse presente para *Wrapped*: nenhum total deve mudar.

**A saída do bloqueio.** Defina um código, feche a seção e abra de novo. Na tela bloqueada, sem digitar o código, toque em *Forget the code and erase the list*. A confirmação deve aparecer por cima da tela bloqueada.

Na nossa construção, ela abria atrás da tela bloqueada: só dava para vê-la depois de desbloquear (captura da esquerda, no topo desta parte). Com o prompt acima, ela aparece por cima, como deve (captura da direita).

É exatamente o tipo de detalhe que só aparece testando. O prompt acima agora deixa isso explícito, mas se a sua geração deixar passar, não precisa recomeçar: peça o ajuste descrevendo o que você vê e o que espera. Aqui está ele, pronto para colar:

"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.

A receita vale para qualquer ajuste: o sintoma que você vê, o comportamento que espera e o detalhe que tira a ambiguidade. Aqui, "sem nunca digitar o código".

## 26 de dezembro

A contagem regressiva cumpriu seu papel. A partir de 26 de dezembro, o alto da tela oferece *Start next year's list*: as pessoas e seus orçamentos ficam, os presentes são apagados, depois de uma confirmação. No ano que vem, seu cliente vai encontrar a lista onde a deixou, no seu app, e pode ir anotando ideias assim que as festas passarem.

## Sua vez de jogar

Pessoas, ideias, três estados e um orçamento: a mecânica vai muito além do Natal. Uma loja de artigos para bebê pode transformá-la em uma seção de "lista de chá de bebê" para preparar, uma papelaria na lista de material escolar por filho. Onde quer que seus clientes façam compras para várias pessoas, a seção se reescreve trocando poucas palavras.

## Para ir mais longe

- [Prompt teardown](https://pt.goodbarber.com/blog/prompt-teardown-gps-memoria-e-maps-a-partir-de-uma-unica-frase-a1304/): pegamos um prompt e o explicamos linha por linha.
- [O AI Extension Builder](https://pt.goodbarber.com/extensions/ai-extension-builder/): descreva uma seção e tenha ela no seu app.
- [O desafio de 30 dias da volta à rotina](https://pt.goodbarber.com/blog/roube-esta-ideia-o-desafio-de-30-dias-da-volta-a-rotina-para-a-sua-academia-a1321/): o episódio anterior da série.

## Agora é com você

A lista de Natal é só um ponto de partida. Descreva a sua seção como você explicaria a um vendedor que começa em dezembro: o que o cliente vê, o que ele toca e o que precisa continuar valendo aconteça o que acontecer. Se dá para descrever, pode virar uma seção do seu app: [crie um app com a GoodBarber](https://pt.goodbarber.com/create/).

## Em resumo

**Eu consigo ver as listas dos meus clientes?**

Não. Tudo fica no celular deles: nada é enviado, nem para você, nem para nós. A seção informa isso no pé da tela.

**A lista sincroniza entre vários aparelhos?**

Não, é o outro lado da privacidade: a lista vive em um único celular. Se seu cliente trocar de aparelho, ele começa com uma lista vazia.

**E se o meu cliente esquecer o código?**

Ninguém consegue recuperá-lo. A única saída é apagar a lista e recomeçar. A seção avisa isso no momento em que ele escolhe o código.

**Dá para mudar a moeda ou o idioma?**

Sim, com uma frase no prompt: troque "€" e "English" pelo que fizer sentido para seus clientes.

**O que acontece depois do Natal?**

A partir de 26 de dezembro, a seção oferece preparar a lista do ano seguinte, mantendo as pessoas e seus orçamentos.

Siga a GoodBarber no Google

[![Adicione como fonte preferencial no Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-pt.7226f5ccc026.png)](https://www.google.com/preferences/source?q=pt.goodbarber.com)

![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg)

Sobre o autor

Flo Luccioni

PWA Developer

I’m a frontend developer on GoodBarber’s Progressive Web Apps team, where we build the rendering engine of our no-code platform for browsers.

I work on the shared UI and performance foundations that make our users’ no-code experience into fast, polished and accessible web products that feel native on every device.

[Mais de Flo](https://pt.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)
