30 vibe coding-prompts du kan kopiere (cheat sheet)

De bedste vibe coding-prompts er korte, specifikke og handler om adfærd: hvem der bruger appen, hvad de kan gøre, hvad den gemmer, og hvordan den ser ud. Nedenfor er 30 prompts, du kan kopiere og indsætte, grupperet efter det stadie du er på, fra den første build til publicering. Erstat dele i [parenteser] med dine egne detaljer.

De virker i enhver AI-appbygger eller kodeagent. Hvis du vil have begrundelsen bag dem, forklarer vores længere guide om sådan skriver du prompts til AI-appbyggere principperne. Denne side er cheat sheet'et.

Sådan bruger du cheat sheet'et

• Start med én første-build-prompt, og brug derefter de andre én ad gangen.
• Test efter hver prompt. Klik dig igennem ændringen, før du sender den næste.
• Behold det, der virker. De fleste opfølgningsprompts her slutter med "behold alt andet det samme" af en grund.
• Indsæt præcis tekst. Fejlbeskeder, knapnavne og de ord, der står på skærmen, slår beskrivelser hver gang.

Prompts til første build

Disse sætter formen på appen. Hver enkelt navngiver brugerne, handlingerne, dataene og udseendet.

1. En simpel tracker

Byg en [vane]-tracker til mig. Jeg kan tilføje en [vane] med et navn og en farve, sætte flueben én gang om dagen, og se et 30-dages gitter og min aktuelle streak. Gem alt, så det stadig er der efter et genindlæs. Rent, minimalistisk design, der virker på en telefon.

2. En bookingside for en lille virksomhed

Byg en bookingside til min [frisørsalon]. Kunder vælger en behandling ([klip 30 min, farve 90 min]), en dato og et ledigt tidspunkt mellem [9:00 og 18:00], og udfylder derefter navn, telefon og e-mail. To personer kan ikke booke det samme tidspunkt. Jeg har brug for en privat adminside, bag et login, der lister kommende bookinger pr. dag.

3. Et internt værktøj

Byg et internt værktøj til mit team til at holde styr på [udstyrsudlån]. Hver genstand har et navn, en kode og en status (ledig, udlånt, i stykker). Medarbejdere logger ind, kan låne en genstand ud til sig selv og aflevere den igen. Vis en tabel med filtre efter status og en historik over, hvem der havde hver genstand.

4. En landingsside med venteliste

Byg en enkeltsidet hjemmeside til [mit produkt: en måltidsplanlægningsapp til travle forældre]. Hero med overskrift, en underoverskrift på én sætning og tilmelding via e-mail. Derefter tre fordele, en kort sektion om hvordan det virker og en FAQ. Gem tilmeldings-e-mails i en database og vis mig listen på en privat adminside.

5. En kundeportal

Byg en kundeportal til mit [designstudie]. Hver kunde logger ind og ser kun sine egne projekter, med status, filer jeg har uploadet og en kommentartråd. Jeg logger ind som admin og ser alle kunder. Kunder må aldrig se hinandens data.

6. En beregner eller et tilbudsværktøj

Byg en tilbudsberegner til min [rengøringsvirksomhed]. Input: antal soveværelser, badeværelser, ekstra ydelser (ovn, vinduer, køleskab) og frekvens (engangs, ugentligt, månedligt). Vis prisen, når valgmulighederne ændres, med en specifikation. Priser: [indsæt din prisliste]. Tilføj en knap, der sender tilbudsforespørgslen til mig via e-mail.

Planlægningsprompts

Brug disse før en stor funktion, eller når du er i tvivl om, hvordan du beskriver noget.

7. Planlæg før du bygger

Før du skriver nogen kode, så beskriv med almindelige ord de skærme du vil bygge, de data du vil gemme, og de beslutninger du har brug for fra mig. Vent på mit OK.

8. Lav en rodet idé om til en første version

Her er min idé: [indsæt noter]. Foreslå den mindste første version, der stadig er nyttig, i 5–8 punkter. List det, du ville udskyde, og hvorfor.

9. Spørg hvad der mangler

Hvilke spørgsmål ville en udvikler stille mig, før de bygger dette? Stil dem et ad gangen, og opsummer derefter mine svar som en kort specifikation.

10. Tjek en stor ændring først

Jeg vil tilføje [teamkonti, hvor flere personer deler ét workspace]. Forklar, hvad der skal ændres i dataene, skærmene og rettighederne, og hvad der kan gå i stykker. Ændr ikke noget endnu.

Designprompts

11. Sæt en klar stil

Gendesign appen: varm off-white baggrund, mørk tekst, én accentfarve [#1F6F50], afrundede hjørner, rummelig afstand og en moderne sans-serif-skrifttype. Behold layoutet og alle funktioner præcis, som de er.

12. Kopiér følelsen af en reference

Gør dashboardet til en rolig økonomiapp: masser af hvidt rum, tal store og fede, labels små og grå, ét simpelt diagram øverst. Kopiér ikke nogen brands logo eller tekst.

13. Ret layoutet på telefonen

På en telefon på 375 px i bredden scroller tabellen på [ordresiden] sidelæns, og knapperne overlapper. Gør hver række til et stablet kort på små skærme. Ændr ikke desktop-layoutet.

14. Tomme, indlæsende og fejltilstande

Tilføj ordentlige tilstande til [projektlisten]: en venlig tom tilstand med en knap til at tilføje det første projekt, et indlæsningsskelet mens data hentes, og en tydelig besked med en knap til at prøve igen, hvis indlæsningen fejler.

15. Højre-mod-venstre-understøttelse

Tilføj en arabisk version af grænsefladen med fuldt højre-mod-venstre-layout. Ikoner, der peger i en retning, skal vendes; tal og datoer skal bruge det lokale format. Behold engelsk som standard.

Data- og funktionsprompts

16. Gør data vedvarende

Lige nu forsvinder mine data, når jeg genindlæser. Gem dem i stedet i en rigtig database, og lad de nuværende skærme virke på samme måde som før.

17. Tilføj login

Tilføj tilmelding og login med e-mail og adgangskode. Hver bruger skal kun kunne se og redigere sine egne [poster]. Vis brugerens e-mail i topbaren med en log-ud-knap.

18. Tilføj roller

Tilføj to roller: admin og medlem. Admins kan tilføje, redigere og slette [produkter]; medlemmer kan kun se dem. Håndhæv dette på serveren, ikke kun ved at skjule knapper.

19. Tilføj søgning og filtre

Tilføj et søgefelt over [kontaktlisten], der matcher navn, firma eller e-mail, mens jeg skriver, plus et filter for [status]. Behold den nuværende sorteringsrækkefølge.

20. Tilføj filupload

Lad brugere vedhæfte op til [5] billeder til hver [annonce], maks. [5 MB] hver. Vis miniaturer på annoncen og en større visning ved klik. Kun ejeren må slette sine billeder.

21. Importér fra et regneark

Tilføj en Importér-knap, der tager en CSV med kolonnerne [navn, e-mail, telefon, noter], viser en forhåndsvisning af de første 10 rækker og lader mig bekræfte, før noget gemmes. Spring rækker uden e-mail over, og fortæl mig, hvor mange der blev sprunget over.

Rettelsesprompts

22. Rapportér en fejl tydeligt

Når jeg [klikker Gem på redigeringsformularen], ser jeg "[præcis fejltekst]", og ændringen bliver ikke gemt. Forventet: ændringen gemmes, og jeg vender tilbage til listen. Find årsagen, forklar den i en eller to sætninger, og ret den derefter.

23. Stop en rettelsesløkke

Vi har forsøgt at rette dette tre gange, og det fejler stadig. Stop med at ændre kode. List de tre mest sandsynlige årsager, hvordan du tjekker hver enkelt, og hvilken du tror det er.

24. Fortryd bivirkninger

Din sidste ændring rettede datovælgeren, men [sidebaren] forsvandt. Bring sidebaren tilbage præcis som den var, og behold rettelsen af datovælgeren.

25. Forklar før du ændrer

Forklar, hvordan [totalen i checkout] beregnes lige nu, trin for trin, med henvisning til de involverede filer. Ændr ikke noget.

Test- og gennemgangsprompts

26. Kantsager

List 10 måder en rigtig bruger kan ødelægge [bookingformularen]: tomme felter, meget lang tekst, dobbeltklik, to personer på samme tid, forkerte tidszoner. Test hver enkelt og ret det, der fejler. Rapportér, hvad du ændrede.

27. Opsummer de seneste ændringer

Opsummer hver ændring, du har lavet i de sidste [fem] trin, med almindelige ord, og markér alt, der kunne påvirke eksisterende data.

Sikkerhedsprompts

Kombinér disse med vores side om om vibe coding er sikkert.

28. Tjek dataadgang

Gennemgå serverkoden: kan en indloggset bruger læse eller ændre en anden brugers [poster] ved at ændre et ID i en anmodning? Vis mig, hvor adgang tjekkes, og ret eventuelle huller.

29. Tjek for eksponerede hemmeligheder

List hver API-nøgle, adgangskode eller token, denne app bruger, og hvor hver enkelt er gemt. Sørg for, at ingen af dem er i kode, der kører i browseren, eller committet i filer. Flyt dem til hemmeligheder, hvis de er det.

Publiceringsprompts

30. Gennemgang før lancering

Jeg er ved at publicere dette for rigtige brugere. Gennemgå det som en anmelder: ødelagte links, manglende sidetitler og beskrivelser, formularer uden validering, langsomme sider, konsolfejl og alt, der ser uafsluttet ud på en telefon. Giv mig en liste sorteret efter vigtighed, og ret derefter de fem vigtigste.

Prompts at undgå

Nogle prompts giver pålideligt dårligere resultater:

• "Gør det bedre." Bedre hvordan? Navngiv skærmen og ændringen.
• "Ret alt." AI'en vil ændre meget, og du ved ikke, hvad der flyttede sig.
• "Brug [bibliotek] og [framework] og [mønster]." Medmindre du har en grund, så beskriv adfærden og lad værktøjet vælge stakken.
• "Her er min API-nøgle: …" Indsæt aldrig hemmeligheder i en chat. Brug værktøjets indstillinger for hemmeligheder.
• Ti funktioner i én besked. Del dem op.

Gør prompts til en vane

Efter nogle få projekter har du dine egne versioner af disse. Gem dem i en note, og genbrug dem, der virker. Mythex husker også, hvem du er, og hvordan du arbejder på tværs af projekter, så præferencer du gentager, som din sædvanlige stil eller stak, følger med uden at du skal skrive dem igen.

Hvis du sidder fast på en første prompt, så laver den gratis app-prompt-generator en idé på én linje om til en mere fuldstændig startprompt. Og for at se, hvad disse prompts giver i praksis, så læs vores vibe coding-eksempler, eller indsæt prompt 1 i AI-appbyggeren og ændr parenteserne til din egen idé.

Spørgsmål