Vibe coding voorbeelden: 10 echte apptypes, prompts en wat er misging

De meest voorkomende vibe coding voorbeelden zijn kleine, nuttige web-apps: trackers, boekingspagina's, interne tools, klantenportalen, landingspagina's, quizzen, dashboards en eenvoudige AI-tools. Hieronder staan er tien. Bij elk zie je wie het bouwt, de eerste prompt, wat er meestal misgaat en de vervolgprompt die het oplost.

Dit zijn samengestelde voorbeelden van de projecten die mensen het vaakst naar AI-appbouwers brengen, geen casestudy's van één persoon. De prompts zijn kopieerbaar. De fouten zijn de fouten die steeds terugkomen, en dat maakt ze het nuttigste deel. Is vibe coding zelf nieuw voor je, begin dan met wat vibe coding is.

1. Een persoonlijke budgettracker

Wie bouwt het: mensen die spreadsheets hebben geprobeerd en het opgaven.

Eerste prompt:

Bouw een maandelijkse budgettracker. Ik voeg uitgaven toe met bedrag, categorie (eten, huur, vervoer, uitgaan, overig), datum en een notitie. Toon het totaal van deze maand per categorie als staafdiagram en een lijst met recente uitgaven. Ik kan per categorie een budget instellen en zien hoeveel er nog over is.

Wat er misging: de grafiek telde elke ooit ingevoerde uitgave mee, niet alleen die van deze maand, dus in maand twee leek elke categorie overschreden. Ook werden bedragen met een komma ("1,200") opgeslagen als 1.

Oplossingsprompt:

De grafiek en de totalen moeten alleen uitgaven uit de geselecteerde maand bevatten. Voeg bovenaan een maandkiezer toe, standaard op de huidige maand. Accepteer ook bedragen met komma's of spaties en sla ze op als getallen.

Les: "deze maand" is een regel. Zeg regels hardop.

2. Een boekingspagina voor een kleine kapsalon

Wie bouwt het: kleine ondernemers die genoeg hebben van boeken via telefoon en DM's.

Eerste prompt:

Bouw een boekingspagina voor mijn kapsalon. Klanten kiezen een behandeling, een datum en een vrij tijdslot, en vullen daarna naam en telefoonnummer in. Ik heb een privébeheerpagina, achter een login, die de boekingen per dag toont.

Wat er misging: twee klanten boekten binnen een minuut hetzelfde slot van 10:00, omdat de pagina de beschikbaarheid alleen controleerde bij het eerste laden. Een kleurbehandeling van 90 minuten blokkeerde ook de slots erna niet.

Oplossingsprompt:

Controleer bij het versturen van een boeking op de server of elk slot dat erdoor wordt gedekt nog vrij is, en weiger de boeking met "Dit tijdstip is net bezet" als dat niet zo is. Een behandeling blokkeert de volledige duur, dus een boeking van 90 minuten om 10:00 blokkeert 10:00, 10:30 en 11:00.

Les: alles wat twee mensen tegelijk kunnen doen, heeft een controle op de server nodig. In een boekingsapp bouwen staat de volledige versie.

3. Een restaurantmenu met een QR-code

Wie bouwt het: eigenaren van cafés en restaurants die hun menu's te vaak opnieuw drukken.

Eerste prompt:

Bouw een mobiele menuwebsite voor mijn café. Secties voor ontbijt, lunch, drankjes en desserts, elk item met naam, prijs, korte beschrijving en dieetlabels (veganistisch, glutenvrij). Ik heb een beheerpagina nodig om items te bewerken en als uitverkocht te markeren. Toon een QR-code die ik kan afdrukken en die naar het menu linkt.

Wat er misging: er brak niets, maar het menu was traag op de wifi van het café omdat voor elk item foto's van telefoonformaat werden geladen.

Oplossingsprompt:

De menufoto's zijn te zwaar. Schaal geüploade afbeeldingen naar maximaal 800px breed, comprimeer ze en laad ze lazy terwijl de bezoeker scrolt.

Les: test op een trage verbinding, niet alleen op kantoor.

4. Een apparatuur- of voorraadtracker voor een team

Wie bouwt het: operationele mensen die een gedeelde spreadsheet vervangen.

Eerste prompt:

Bouw een voorraadtool voor ons magazijnteam. Items hebben naam, SKU, aantal, locatie en een minimumniveau. Medewerkers loggen in en kunnen voorraad toevoegen, voorraad afboeken met een reden en een lijst zien van items onder het minimum, rood gemarkeerd. Bewaar een geschiedenis van elke wijziging en wie die maakte.

Wat er misging: de geschiedenis toonde "user 3" in plaats van namen, en meer voorraad afboeken dan er was maakte het aantal negatief.

Oplossingsprompt:

Toon de naam van de persoon in de geschiedenis, niet het ID. Sta geen afboeking toe die het aantal onder nul brengt; toon in plaats daarvan "Nog maar 4 op voorraad".

Les: beschrijf wat onmogelijk moet zijn, niet alleen wat mogelijk moet zijn. In onze gids over een voorraadapp bouwen staat de rest.

5. Een klantenportaal voor een freelancer of studio

Wie bouwt het: ontwerpers, boekhouders, consultants en bureaus.

Eerste prompt:

Bouw een klantenportaal. Ik nodig klanten per e-mail uit. Elke klant logt in en ziet alleen zijn eigen projecten, bestanden en facturen, en kan reacties achterlaten. Ik log in als beheerder en zie alles.

Wat er misging: dit is de belangrijkste fout van de lijst. De pagina's toonden elke klant alleen zijn eigen projecten, maar de server gaf elk project terug als je het nummer in de adresbalk veranderde. Door als één klant rond te klikken merk je dat nooit.

Oplossingsprompt:

Controleer elke serverroute die projecten, bestanden, reacties of facturen teruggeeft. Elke route moet bevestigen dat de ingelogde klant eigenaar is van het record en anders "niet gevonden" teruggeven. Test het daarna: log in als klant A en probeer het project van klant B te openen via zijn ID.

Les: iets op het scherm verbergen is niet hetzelfde als het beschermen. Meer hierover in is vibe coding veilig?.

6. Een lanceringspagina met een wachtlijst

Wie bouwt het: oprichters die een idee testen voordat ze het bouwen.

Eerste prompt:

Bouw een landingspagina voor een app waarmee bijlesdocenten lessen plannen en betalingen innen. Hero-kop, subkop, aanmelding met e-mail, drie voordelen, een sectie over hoe het werkt en een FAQ. Sla aanmeldingen met de datum op in een database en laat me ze als CSV downloaden vanaf een privépagina.

Wat er misging: binnen een paar dagen stond de lijst vol nepaanmeldingen van bots, en de pagina had geen titel of beschrijving, waardoor gedeelde links een leeg voorbeeld toonden.

Oplossingsprompt:

Voeg eenvoudige botbescherming toe aan het aanmeldformulier (een verborgen honeypot-veld en een limiet van 5 aanmeldingen per IP per uur). Voeg een paginatitel, meta-beschrijving en een afbeelding voor delen op sociale media toe.

Les: een openbaar formulier wordt gevonden. Zie een wachtlijstpagina bouwen.

7. Een quiz-app voor een docent

Wie bouwt het: docenten en trainers die iets lichters willen dan een LMS.

Eerste prompt:

Bouw een quiz-app voor mijn klas. Ik maak quizzen met meerkeuzevragen met elk één juist antwoord. Leerlingen doen mee met een code en hun voornaam, beantwoorden de vragen en zien aan het eind hun score. Ik zie per quiz een resultatentabel.

Wat er misging: de juiste antwoorden werden samen met de vragen naar de browser gestuurd, dus een nieuwsgierige leerling kon ze in de paginabron lezen. Leerlingen konden ook opnieuw indienen tot ze 100% hadden.

Oplossingsprompt:

Stuur de juiste antwoorden niet naar de browser. Controleer antwoorden op de server na het indienen. Sta één inzending per leerlingnaam per quiz toe en laat de docent zien als iemand het opnieuw probeert.

Les: de browser is van de gebruiker. Alles wat daar staat, kan worden gelezen.

8. Een kleine AI-tool

Wie bouwt het: marketeers, schrijvers en oprichters die een gerichte AI-hulp willen.

Eerste prompt:

Bouw een tool die een productbeschrijving omzet in vijf social-mediaposts in verschillende tonen (vriendelijk, deskundig, speels, kort, lang). Gebruik een AI-API. Ik plak de beschrijving, kies een platform en krijg de posts met kopieerknoppen.

Wat er misging: de eerste versie riep de AI-dienst rechtstreeks vanuit de browser aan, met de API-sleutel in de pagina, waar iedereen hem kon kopiëren en de rekening kon laten oplopen.

Oplossingsprompt:

Verplaats de AI-aanroep naar de server. Bewaar de API-sleutel als geheim, nooit in de frontendcode. Beperk elke bezoeker tot 20 generaties per dag.

Les: sleutels horen als geheimen op de server. Zie API-sleutels veilig houden en AI-functies aan je app toevoegen.

9. Een Arabische en Engelse bedrijfswebsite

Wie bouwt het: bedrijven in de Golfregio en de bredere Arabische wereld die twee talen bedienen.

Eerste prompt:

Bouw een website voor mijn interieurontwerpbedrijf in het Arabisch en Engels, met een taalwisselaar. Pagina's: home, diensten, portfolio, over ons en contact. Het Arabisch moet volledig van rechts naar links zijn.

Wat er misging: de Arabische tekst was rechts uitgelijnd, maar de lay-out was niet gespiegeld: pijlen wezen nog de verkeerde kant op en het menu stond aan de verkeerde kant. Telefoonnummers werden op sommige plekken ook achterstevoren weergegeven.

Oplossingsprompt:

Spiegel in het Arabisch de hele lay-out: zet de paginarichting op rechts-naar-links, zet het menu rechts, draai richtingspictogrammen om en houd telefoonnummers en e-mailadressen binnen de Arabische tekst van links naar rechts.

Les: rechts-naar-links is een lay-out, geen uitlijning. Mythex verwerkt Arabisch en andere rechts-naar-links-lay-outs, en je kunt rechtstreeks in het Arabisch prompten.

10. Een tracker die een telefoon-app wordt

Wie bouwt het: coaches, sportscholen en gemeenschapsgroepen waarvan de gebruikers op hun telefoon leven.

Eerste prompt:

Bouw een trainingslogboek voor mijn personal-trainingsklanten. Elke klant logt in, ziet het plan dat ik voor de week heb toegewezen, vinkt oefeningen af en noteert gewichten. Ik zie de voortgang van elke klant in een grafiek.

Wat er misging: de web-app werkte, maar op telefoons waren de knoppen te klein om midden in een training aan te tikken en was de grafiek onleesbaar.

Oplossingsprompt:

Ontwerp dit voor gebruik met één hand op een telefoon: grote tikdoelen onderaan het scherm, één oefening per scherm met grote knoppen Volgende en Klaar, en een eenvoudige wekelijkse voortgangsgrafiek.

Les: als mensen het op een telefoon gebruiken, ontwerp dan eerst voor de telefoon. Op Mythex Pro kan de gepubliceerde app daarna een Android-app voor Google Play worden en een iPhone-app die naar TestFlight wordt gestuurd; de telefoon-app opent je gepubliceerde app, dus elke Publish werkt hem bij. Zie de pagina mobiele appbouwer.

De patronen achter deze voorbeelden

Bij alle tien vallen de fouten in een paar groepen:

Niets hiervan vraagt dat je code leest. Je moet testen als een nieuwsgierige, iets vijandige gebruiker en nauwkeurig beschrijven wat je ziet.

Probeer er zelf een

Kies het voorbeeld dat het dichtst bij jouw idee ligt, kopieer de eerste prompt en pas de details aan. Gebruik daarna de oplossingsprompt als checklist voordat je het deelt. Ons spiekbriefje met vibe coding prompts heeft er 30 meer, en een app bouwen met vibe coding leidt je met één project van idee naar gepubliceerde app. Ben je klaar, begin dan in de AI-appbouwer of blader door templates voor een voorsprong.

Veelgestelde vragen