Hoe je een schets op een servet in 5 minuten verandert in een functionele tabletkiosk

Schets het gewenste scherm op een servet, maak er een foto van en upload deze naar Build, de AI-builder van Final. Build leest de schets op het servet, genereert een bijpassende, werkende checkout-flow en opent een live voorvertoning waar je doorheen kunt tikken. Verfijn het via chat en implementeer het vervolgens op een tablet. Dat is het hele proces. Hier lees je hoe elke stap werkt en waar die vijf minuten nu echt aan worden besteed.

Waarom beginnen met een schets in plaats van een prompt?

Omdat een lay-out ruimtelijk is, en zinnen ruimte slecht beschrijven. "Productraster links, winkelwagen rechts, grote betaalknop in de hoek" laat nog steeds tientallen beslissingen open voor interpretatie. Een tekening lost dat direct op: wat staat waar, wat is het grootst en wat ziet een klant als eerste.

De Builder is prompt-gebaseerd, dus een geschreven beschrijving werkt op zichzelf prima. Een afbeelding is simpelweg de prompt met de hoogste bandbreedte die er is. Een paar vakken en pijlen bevatten hiërarchie, groepering en verhoudingen die al snel alinea's tekst zouden kosten om uit te leggen, en ze verankeren de AI aan jouw bedoeling in plaats van aan een generiek sjabloon.

Hoe upload je een schets naar de AI-builder?

1. Maak een foto van de schets. Een foto met je telefoon is voldoende. Hoe duidelijker de vakken en labels, hoe beter de eerste versie.

2. Open Build en voeg de afbeelding toe. Voeg op de startpagina van Build de foto toe, samen met een regel context, zoals "bestelkiosk voor een koffiebar, klanten gebruiken deze zelf."

3. Bekijk de live voorvertoning. Build genereert de schermen, de lay-out en de logica, en opent vervolgens een interactieve voorvertoning. Tik erdoorheen zoals een klant dat zou doen.

4. Verfijn via chat. Verkeerde groepering? Ontbreekt er een scherm voor opties? Geef het aan en de voorvertoning wordt bijgewerkt.

Een servet is de charmante versie, maar elke afbeelding van een lay-out werkt als referentie: een foto van een whiteboard, een wireframe (een ruwe schets van de lay-out) uit een ontwerptool of een screenshot. En als je liever met je eigen tools werkt, kun je je eigen AI verbinden via MCP (een standaard om AI-tools aan elkaar te koppelen) en van daaruit dezelfde flow bouwen.

Hoe verandert een statische tekening in een aan data gekoppelde checkout?

Build plakt je schets niet zomaar op een scherm. Het bouwt de tekening opnieuw op als software die is gekoppeld aan je winkel. Elke rechthoek wordt een live element dat is verbonden met echte data: het productraster haalt gegevens uit je catalogus, de winkelwagen berekent je belastingen, betalingen lopen via Final Pay en bonnen worden geprint. Die verbinding werkt ook offline, dus de kiosk blijft betalingen accepteren als de netwerkverbinding wegvalt.

In de praktijk wordt de door jou getekende knoppenmatrix een actieve checkout-matrix. Tik in de voorvertoning op het vakje dat je 'latte' hebt genoemd en er wordt een echt product met een echte prijs toegevoegd. De verkoop komt vervolgens terecht in rapportages die aansluiten (overeenkomen met je daadwerkelijke betalingen) in plaats van in een spreadsheet die je handmatig bijhoudt.

Dat is de grens tussen een mockup en een kassa. Een ontwerptool geeft je een afbeelding van een checkout. Dit geeft je de daadwerkelijke checkout, wat het echte verschil is tussen een POS met AI-functies en een POS die door een AI kan worden gebouwd.

Hoe optimaliseer je voor kiosken en handheld-terminals?

Vertel Build vooraf op welke hardware je je richt. Dezelfde schets moet andere flows opleveren voor een desktop op de toonbank, een klantgerichte tablet, een handheld, een keukenscherm of een menubord, en de builder past zich aan zodra je aangeeft welke je bedoelt.

Bij een klantgerichte restauranttablet zijn de gebruikers gasten en geen getraind personeel, dus gelden er andere ontwerpregels. Beperk elk scherm tot één beslissing. Maak tikdoelen groot en de volgende stap overduidelijk, want een klant krijgt geen enkele uitleg vooraf. Zet dat direct in de prompt: "klanten bestellen zelf, dus houd het aantal keuzes per scherm minimaal en de knoppen groot."

Handheld-terminals draaien de randvoorwaarden om: bediening met één hand, de meest gebruikte knoppen binnen het bereik van de duim, en korte flows die een medewerker aan tafel kan afronden tijdens de spits. Beslissingen zoals fooien kunnen volledig van je scherm verdwijnen, aangezien fooiprompts op de kaartlezer kunnen worden getoond.

De implementatie is in elk geval hetzelfde. Een flow wordt geïmplementeerd op je kassa's, en elk compatibel Apple- of Android-apparaat met de Final POS-app kan zich registreren als kassa. Koppel voor fysieke kaartbetalingen een gecertificeerde lezer via Final Pay.

Dus, kun je in vijf minuten van servet naar kiosk gaan?

Een eerste werkende versie wel, ja. Fotograferen, uploaden, en binnen enkele minuten verschijnt er een functionele flow gekoppeld aan je catalogus in een live voorvertoning. Klaar zijn voor productie duurt wel iets langer dan de kop suggereert: reken op een verfijningsronde, een testrun en tien minuten kijken hoe een echte klant het gebruikt voordat je de tablet aan de toonbank schroeft. Dat is nog steeds een middagwerk, in plaats van een implementatieproject van zes weken.

Vuistregel: als een vreemde je schets kan lezen en je kan vertellen wat het scherm doet, kan de builder het bouwen.

Begin direct met een gratis Build-abonnement en je slechtste servet.