30 vibe coding prompts om te kopiëren (spiekbriefje)

De beste vibe coding prompts zijn kort, specifiek en gaan over gedrag: wie de app gebruikt, wat die kan doen, wat hij bewaart en hoe hij eruit ziet. Hieronder staan 30 prompts om te kopiëren en plakken, gegroepeerd naar de fase waarin je zit, van de eerste build tot publiceren. Vervang de delen tussen [haakjes] door je eigen gegevens.

Ze werken in elke AI-appbouwer of codeeragent. Wil je de redenering erachter, dan legt onze langere gids over prompts schrijven voor AI-appbouwers de principes uit. Deze pagina is het spiekbriefje.

Zo gebruik je dit spiekbriefje

• Begin met één eerste-build-prompt en gebruik de andere daarna één voor één.
• Test na elke prompt. Klik de wijziging door voordat je de volgende stuurt.
• Behoud wat werkt. De meeste vervolgprompts hier eindigen niet voor niets met "houd al het andere hetzelfde".
• Plak exacte tekst. Foutmeldingen, knopteksten en de woorden op het scherm winnen het altijd van beschrijvingen.

Prompts voor de eerste build

Deze bepalen de vorm van de app. Elke noemt de gebruikers, de acties, de data en de look.

1. Een eenvoudige tracker

Bouw een [gewoonte]tracker voor mij. Ik kan een [gewoonte] toevoegen met een naam en een kleur, die één keer per dag afvinken en een raster van 30 dagen en mijn huidige reeks zien. Sla alles op zodat het er na verversen nog is. Schoon, minimaal ontwerp dat op een telefoon werkt.

2. Een boekingspagina voor een klein bedrijf

Bouw een boekingspagina voor mijn [kapsalon]. Klanten kiezen een behandeling ([knippen 30 min, kleuren 90 min]), een datum en een vrij tijdslot tussen [9:00 en 18:00], en vullen daarna naam, telefoon en e-mail in. Twee mensen kunnen niet hetzelfde slot boeken. Ik heb een privébeheerpagina nodig, achter een login, die komende boekingen per dag toont.

3. Een interne tool

Bouw een interne tool voor mijn team om [uitgeleende apparatuur] bij te houden. Elk item heeft een naam, een code en een status (beschikbaar, uitgeleend, kapot). Medewerkers loggen in, kunnen een item op eigen naam uitlenen en weer inleveren. Toon een tabel met filters op status en een geschiedenis van wie elk item had.

4. Een landingspagina met wachtlijst

Bouw een eenpagina-website voor [mijn product: een maaltijdplanner-app voor drukke ouders]. Hero met kop, een subkop van één zin en een e-mailaanmelding. Daarna drie voordelen, een korte sectie over hoe het werkt en een FAQ. Sla e-mailadressen van aanmeldingen op in een database en toon me de lijst op een private beheerpagina.

5. Een klantenportaal

Bouw een klantenportaal voor mijn [ontwerpstudio]. Elke klant logt in en ziet alleen zijn eigen projecten, met status, bestanden die ik heb geüpload en een reactiedraad. Ik log in als beheerder en zie alle klanten. Klanten mogen elkaars data nooit zien.

6. Een calculator of offertetool

Bouw een offertecalculator voor mijn [schoonmaakbedrijf]. Invoer: aantal slaapkamers, badkamers, extra diensten (oven, ramen, koelkast) en frequentie (eenmalig, wekelijks, maandelijks). Toon de prijs terwijl de opties veranderen, met een specificatie. Prijzen: [plak je prijslijst]. Voeg een knop toe om de offerteaanvraag per e-mail naar mij te sturen.

Prompts om te plannen

Gebruik deze voor een grote functie, of wanneer je niet weet hoe je iets moet beschrijven.

7. Plan voordat je bouwt

Beschrijf voordat je code schrijft in gewone woorden de schermen die je gaat bouwen, de data die je opslaat en de beslissingen die je van mij nodig hebt. Wacht op mijn akkoord.

8. Maak van een rommelig idee een eerste versie

Dit is mijn idee: [plak notities]. Stel de kleinste eerste versie voor die nog steeds nuttig is, in 5–8 opsommingstekens. Som op wat je voor later laat liggen en waarom.

9. Vraag wat er ontbreekt

Welke vragen zou een ontwikkelaar me stellen voordat hij dit bouwt? Stel ze één voor één en vat mijn antwoorden daarna samen als een korte specificatie.

10. Controleer eerst een grote wijziging

Ik wil [teamaccounts toevoegen waarin meerdere mensen één werkruimte delen]. Leg uit wat er moet veranderen in de data, de schermen en de rechten, en wat er kan breken. Verander nog niets.

Prompts voor ontwerp

11. Kies een duidelijke stijl

Geef de app een nieuwe stijl: warme gebroken witte achtergrond, donkere tekst, één accentkleur [#1F6F50], afgeronde hoeken, ruime witruimte en een moderne schreefloze letter. Houd de lay-out en elke functie precies zoals ze zijn.

12. Kopieer het gevoel van een referentie

Laat het dashboard aanvoelen als een rustige financiële app: veel witruimte, grote vetgedrukte cijfers, kleine grijze labels, bovenaan één eenvoudige grafiek. Kopieer geen logo of tekst van een merk.

13. Repareer de telefoonlay-out

Op een telefoon van 375px breed scrolt de tabel op [de pagina Bestellingen] zijwaarts en overlappen de knoppen. Maak van elke rij een gestapelde kaart op kleine schermen. Verander de desktoplay-out niet.

14. Lege, ladende en foutstaten

Voeg goede staten toe aan [de projectenlijst]: een vriendelijke lege staat met een knop om het eerste project toe te voegen, een laadskelet terwijl data laadt en een duidelijke melding met een knop om opnieuw te proberen als laden mislukt.

15. Ondersteuning voor rechts-naar-links

Voeg een Arabische versie van de interface toe met een volledige rechts-naar-links-lay-out. Pictogrammen die een richting aanwijzen moeten spiegelen; getallen en datums moeten het formaat van de taalregio gebruiken. Houd Engels als standaard.

Prompts voor data en functies

16. Laat data bewaard blijven

Nu verdwijnt mijn data als ik ververs. Sla ze in plaats daarvan op in een echte database en laat de huidige schermen op dezelfde manier werken.

17. Voeg inloggen toe

Voeg registreren en inloggen toe met e-mail en wachtwoord. Elke gebruiker mag alleen zijn eigen [items] zien en bewerken. Toon het e-mailadres van de gebruiker in de bovenbalk met een uitlogknop.

18. Voeg rollen toe

Voeg twee rollen toe: beheerder en lid. Beheerders kunnen [producten] toevoegen, bewerken en verwijderen; leden kunnen ze alleen bekijken. Dwing dit af op de server, niet alleen door knoppen te verbergen.

19. Voeg zoeken en filters toe

Voeg boven [de contactenlijst] een zoekvak toe dat tijdens het typen zoekt op naam, bedrijf of e-mail, plus een filter voor [status]. Behoud de huidige sorteervolgorde.

20. Voeg bestandsuploads toe

Laat gebruikers maximaal [5] afbeeldingen aan elke [advertentie] koppelen, elk maximaal [5 MB]. Toon miniaturen bij de advertentie en een grotere weergave bij klikken. Alleen de eigenaar kan zijn afbeeldingen verwijderen.

21. Importeer uit een spreadsheet

Voeg een knop Importeren toe die een CSV met de kolommen [naam, e-mail, telefoon, notities] inleest, een voorbeeld van de eerste 10 rijen toont en me laat bevestigen voordat er wordt opgeslagen. Sla rijen zonder e-mailadres over en vertel me hoeveel er zijn overgeslagen.

Prompts om te repareren

22. Meld een bug duidelijk

Als ik [op Opslaan klik in het bewerkformulier] zie ik "[exacte foutmelding]" en wordt de wijziging niet opgeslagen. Verwacht: de wijziging wordt opgeslagen en ik keer terug naar de lijst. Zoek de oorzaak, leg die in een of twee zinnen uit en los het dan op.

23. Doorbreek een herstelloop

We hebben dit drie keer geprobeerd op te lossen en het mislukt nog steeds. Stop met code wijzigen. Som de drie meest waarschijnlijke oorzaken op, hoe je elk kunt controleren en welke het volgens jou is.

24. Maak bijwerkingen ongedaan

Je laatste wijziging loste de datumkiezer op maar de [zijbalk] is verdwenen. Breng de zijbalk precies terug zoals hij was en behoud de oplossing van de datumkiezer.

25. Leg uit voordat je wijzigt

Leg stap voor stap uit hoe [het totaalbedrag bij het afrekenen] nu wordt berekend, met verwijzingen naar de betrokken bestanden. Verander niets.

Prompts voor testen en controle

26. Randgevallen

Som 10 manieren op waarop een echte gebruiker [het boekingsformulier] kan breken: lege velden, erg lange tekst, dubbelklikken, twee mensen tegelijk, verkeerde tijdzones. Test elk en los op wat faalt. Meld wat je hebt gewijzigd.

27. Vat recente wijzigingen samen

Vat elke wijziging die je in de laatste [vijf] stappen hebt gemaakt samen in gewone woorden en markeer alles wat bestaande data kan raken.

Prompts voor beveiliging

Combineer deze met onze pagina over of vibe coding veilig is.

28. Controleer toegang tot data

Controleer de servercode: kan een ingelogde gebruiker de [records] van een andere gebruiker lezen of wijzigen door een ID in een verzoek te veranderen? Toon me waar de toegang wordt gecontroleerd en dicht eventuele gaten.

29. Controleer op blootgelegde geheimen

Som elke API-sleutel, elk wachtwoord en elk token op dat deze app gebruikt en waar het is opgeslagen. Zorg dat niets ervan in code staat die in de browser draait of in bestanden is opgenomen. Verplaats ze naar geheimen als dat wel zo is.

Prompts om te publiceren

30. Controle voor de lancering

Ik ga dit publiceren voor echte gebruikers. Loop het door als reviewer: kapotte links, ontbrekende paginatitels en beschrijvingen, formulieren zonder validatie, trage pagina's, consolefouten en alles wat er op een telefoon onaf uitziet. Geef me een lijst op volgorde van belang en los dan de top vijf op.

Prompts om te vermijden

Sommige prompts leveren steevast slechtere resultaten op:

• "Maak het beter." Hoe dan? Noem het scherm en de wijziging.
• "Repareer alles." De AI verandert veel en jij weet niet wat er bewoog.
• "Gebruik [bibliotheek] en [framework] en [patroon]." Beschrijf het gedrag en laat de tool de stack kiezen, tenzij je een reden hebt.
• "Hier is mijn API-sleutel: …" Plak nooit geheimen in een chat. Gebruik de geheimeninstellingen van de tool.
• Tien functies in één bericht. Splits ze op.

Van prompts een gewoonte maken

Na een paar projecten heb je je eigen versies hiervan. Bewaar ze in een notitie en hergebruik wat werkt. Mythex onthoudt ook wie je bent en hoe je werkt over projecten heen, dus voorkeuren die je herhaalt, zoals je gebruikelijke stijl of stack, worden meegenomen zonder dat je ze opnieuw typt.

Zit je vast bij een eerste prompt, dan maakt de gratis app-promptgenerator van een idee in één regel een uitgebreidere startprompt. En om te zien wat deze prompts in de praktijk opleveren, lees onze vibe coding voorbeelden, of plak prompt 1 in de AI-appbouwer en pas de haakjes aan op je eigen idee.

Veelgestelde vragen