--- title: "Steel dit idee: de kerstcadeaulijst voor je winkel" description: "Een app-sectie waarmee je klanten hun kerstcadeaus plannen, budget inbegrepen, zonder iets te verzamelen. De volledige prompt, klaar om te plakken." canonical_url: "https://nl.goodbarber.com/blog/steel-dit-idee-de-kerstcadeaulijst-a1493/" lang: nl date: 2026-11-06 last_updated: 2026-11-06 --- # Steel dit idee: de kerstcadeaulijst September ligt achter ons, de goede voornemens om weer te gaan sporten hebben stand gehouden (of niet), en nu is het tijd om de feestdagen te organiseren. Om je te helpen het overzicht te houden, is hier een app-sectie die de stress van het vullen van de zak van de Kerstman wat verlicht: één kaart per persoon, cadeau-ideeën die van status veranderen om het budget te volgen, en een aftelling tot kerstavond. Alles gegenereerd met één enkele beschrijving aan de AI Extension Builder van GoodBarber. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) [Florian Luccioni](https://nl.goodbarber.com/blog/author/flo-luccioni/)PWA Developer [Kies **GoodBarber** als jeFavoriete nieuwsbronKies **GoodBarber** als je](https://www.google.com/preferences/source?q=nl.goodbarber.com) 6 nov 2026 · 11 min leestijd ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98617639-68828110.jpg?v=1793959772.2483842) De serie "Steel dit idee": een app-sectie die we aan de AI Extension Builder beschrijven, echt bouwen, en waarvan we je aan het eind de volledige prompt geven, klaar om te plakken. Na [de 30-dagenchallenge na de zomer](https://nl.goodbarber.com/blog/steel-dit-idee-de-30-dagenchallenge-na-de-zomer-voor-je-sportschool-a1415/) is nu een van de drukste periodes van het jaar aan de beurt! ## De sectie, aan de kant van de klant ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98617639-68828111.jpg?v=1793959773.2643814) Alles begint met een vraag: *Who are you shopping for this year?* De klant voegt een persoon toe, met de naam die hij wil: een voornaam, "Mama", "de buren". Hij kan ook een budget instellen, of niet. Onder elke persoon staan de cadeau-ideeën. Elk idee heeft een statusknop die je aantikt om verder te gaan: *Idea*, dan *Bought*, dan *Wrapped*. Gekochte en ingepakte cadeaus tellen op in het budget van die persoon (*€0 of €50*, met een dunne balk) en in het totaal van het seizoen, bovenaan het scherm. De ring *Progress* vult zich naarmate elke persoon minstens één gekocht cadeau heeft. Wordt de lijst langer, dan klappen de kaarten in met een tik op de kop, en blijven alleen de namen over. Een regel herinnert eraan wie nog geen enkel idee heeft (*1 person has no gift ideas yet*): tik erop en het scherm scrolt naar die persoon. Maison Lumen, de winkel op deze screenshots, is verzonnen voor het voorbeeld. Alles wat je erin ziet, is fictief. ## Waarom dit format werkt voor een winkel Het voordeel zit in de kalender. Van begin november tot 24 december opent je klant zijn lijst telkens als hij aan een cadeau denkt, en daarvoor opent hij jouw app. Een etalage bekijk je in het voorbijgaan, en een kerstnieuwsbrief raakt verloren tussen alle andere. Een hulpmiddel dat echt van pas komt, ligt juist weer in zijn hand op het moment dat hij beslist wat hij koopt. En het is een service, geen zoveelste actie. De sectie verkoopt niets, duwt geen enkel product en vraagt niets terug. Ze bespaart tijd en voorkomt dat het budget wordt overschreden. Op de dag dat je klant een idee zoekt voor zijn moeder, is jouw catalogus maar één tabblad verderop. ## Het budget telt, en stopt niet bij de grens ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98617639-68828113.jpg?v=1793959774.3083782) Kijk naar de kaart van Mum: een budget van € 80, twee cadeaus gekocht, € 85 uitgegeven. De balk is vol, het bedrag wordt rood (*€85 of €80*) en het tellen gaat door. Het staat zwart op wit in de prompt: stop nooit met tellen bij het budget. Een balk die op 100% blijft steken, zou liegen precies op het moment dat de informatie ertoe doet. Twee details maken dat totaal betrouwbaar. Een ingepakt cadeau blijft meetellen: van *Gekocht* naar *Ingepakt* gaan verandert alleen het label. En als een idee zonder prijs als gekocht wordt gemarkeerd, opent de sectie meteen de kaart van het cadeau, met de cursor in het veld *Price paid*. De klant typt ter plekke in wat hij heeft betaald, en het totaal is nooit verkeerd door vergeetachtigheid. ## Een lijst die op de telefoon blijft ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98617639-68828114.jpg?v=1793959775.432375) Een cadeaulijst is een lijst vol geheimen, en de sectie neemt dat serieus: alles wordt op het toestel opgeslagen, niets wordt verstuurd, niets wordt gedeeld. Ze zegt het één keer, in kleine letters, onderaan het scherm: *This list stays on your phone. We can't see it.* Voor telefoons die in de woonkamer op tafel blijven liggen, kan de klant zijn lijst vergrendelen met een code van vier cijfers. Bij het opnieuw openen vraagt het scherm om de code voordat het ook maar iets toont. ## De zinnen in de prompt die het werk doen De volledige prompt staat hieronder. Als je hem aanpast, dragen vijf zinnen de essentie: houd ze. 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."** Het rekenvoorbeeld doet het werk: de generator ziet precies wat hij moet tonen als het budget wordt overschreden. 1. **"Wrapping a gift never takes it out of any total."** In onze build haalde de eerste versie ingepakte cadeaus uit het totaal. Eén zin is genoeg om dat te voorkomen. 1. **"When a gift with no price becomes "Bought", its edit window opens with the cursor already in the price field."** Het moment waarop de klant de prijs kent, is het moment waarop hij koopt. Dan vraagt de sectie er ook om. 1. **"A person is done as soon as at least one of their gifts is bought or wrapped."** Het woord "klaar" heeft geen vanzelfsprekende betekenis. Schrijf de regel op, anders kiest de generator er een voor je. 1. **"The list is never sent anywhere, never shared with anyone, and never visible to us."** De privacybelofte staat in de prompt, en de zin op het scherm ook, woord voor woord. ## De prompt: steel hem Geen regel code achter deze sectie: alleen een briefing, gegeven aan de AI Extension Builder. Onze build had een paar aanpassingen nodig, die hier allemaal in één verfijnde prompt zitten. We hebben het gecontroleerd: ongewijzigd geplakt in een nieuwe sectie, levert deze prompt in één keer alles wat dit artikel beschrijft. 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. ## Voordat je het aankondigt: drie checks ![](https://cmsphoto.ww-cdn.com/superstatic/2962774/art/grande/98617639-68828117.jpg?v=1793959776.3403726) Een gegenereerde sectie controleer je door de handelingen van een klant na te doen. Drie minuten zijn genoeg. **De prijs bij aankoop.** Voeg een idee zonder prijs toe en zet het op *Bought*: de kaart van het cadeau moet openen, met de cursor in het prijsveld. Vul een bedrag in: het totaal van de persoon en het totaal bovenaan moeten veranderen. **Het inpakken.** Zet dat cadeau op *Wrapped*: geen enkel totaal mag veranderen. **De uitweg uit de vergrendeling.** Stel een code in, sluit de sectie en open haar opnieuw. Tik op het vergrendelscherm, zonder de code in te voeren, op *Forget the code and erase the list*. De bevestiging moet boven het vergrendelscherm verschijnen. In onze build opende ze achter het vergrendelscherm: je zag haar pas na het ontgrendelen (linkerscreenshot, bovenaan dit deel). Met de prompt hierboven verschijnt ze netjes erboven (rechterscreenshot). Precies het soort detail dat je alleen ziet door te testen. De prompt hierboven legt het nu vast, maar laat je generatie het toch passeren, dan hoef je niet opnieuw te beginnen: vraag om de aanpassing door te beschrijven wat je ziet en wat je verwacht. Hier is ze, klaar om te plakken: "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. Het recept werkt voor elke aanpassing: het symptoom dat je ziet, het gedrag dat je verwacht en het detail dat de dubbelzinnigheid wegneemt. Hier is dat "zonder ooit de code in te voeren". ## 26 december De aftelling heeft haar werk gedaan. Vanaf 26 december biedt de bovenkant van het scherm *Start next year's list* aan: de personen en hun budgetten blijven, de cadeaus worden na bevestiging gewist. Volgend jaar vindt je klant zijn lijst terug waar hij hem liet, in jouw app, en hij kan er meteen na de feestdagen al ideeën in noteren. ## Aan jou Personen, ideeën, drie statussen en een budget: het mechanisme gaat veel verder dan kerst. Een babywinkel maakt er een sectie voor de geboortelijst van, een kantoorboekhandel de schoollijst per kind. Overal waar je klanten aankopen voor meerdere mensen voorbereiden, herschrijf je de sectie door een paar woorden te veranderen. ## Verder lezen - [Prompt teardown](https://nl.goodbarber.com/blog/prompt-teardown-gps-geheugen-en-maps-uit-een-enkele-zin-a1398/): we nemen een prompt en leggen hem regel voor regel uit. - [De AI Extension Builder](https://nl.goodbarber.com/extensions/ai-extension-builder/): beschrijf een sectie en krijg haar in je app. - [De 30-dagenchallenge na de zomer](https://nl.goodbarber.com/blog/steel-dit-idee-de-30-dagenchallenge-na-de-zomer-voor-je-sportschool-a1415/): de vorige aflevering van de serie. ## Jouw beurt De kerstlijst is maar een vertrekpunt. Beschrijf je sectie zoals je haar zou uitleggen aan een verkoper die in december begint: wat de klant ziet, wat hij aantikt en wat hoe dan ook waar moet blijven. Als het te beschrijven is, kan het een sectie van je app worden: [maak een app met GoodBarber](https://nl.goodbarber.com/create/). ## Kort samengevat **Kan ik de lijsten van mijn klanten zien?** Nee. Alles blijft op hun telefoon: er wordt niets verstuurd, niet naar jou en niet naar ons. De sectie vermeldt dat onderaan het scherm. **Wordt de lijst gesynchroniseerd tussen meerdere toestellen?** Nee, dat is de keerzijde van de privacy: de lijst leeft op één telefoon. Als je klant van toestel wisselt, begint hij met een lege lijst. **En als mijn klant zijn code vergeet?** Niemand kan hem terughalen. De enige uitweg is de lijst wissen en opnieuw beginnen. De sectie waarschuwt hem daarvoor wanneer hij zijn code kiest. **Kun je de valuta of de taal wijzigen?** Ja, met één zin in de prompt: vervang "€" en "English" door wat bij je klanten past. **Wat gebeurt er na kerst?** Vanaf 26 december stelt de sectie voor om de lijst van volgend jaar voor te bereiden, met behoud van de personen en hun budgetten. Volg GoodBarber op Google [![Add as a preferred source on Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-en.172e670ec003.png)](https://www.google.com/preferences/source?q=nl.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) Over de auteur 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. [Meer van Flo](https://nl.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)