30 vibe coding-prompter du kan kopiere (jukseark)

De beste vibe coding-promptene er korte, konkrete og handler om atferd: hvem som bruker appen, hva de kan gjøre, hva den lagrer, og hvordan den ser ut. Under finner du 30 prompter du kan kopiere og lime inn, gruppert etter hvor du er, fra første bygg til publisering. Erstatt delene i [klammer] med dine egne detaljer.

De fungerer i alle KI-appbyggere og kodeagenter. Hvis du vil ha begrunnelsen bak dem, forklarer vår lengre guide om hvordan skrive prompter til KI-appbyggere prinsippene. Denne siden er juksearket.

Slik bruker du juksearket

• Start med én første-bygg-prompt, og bruk deretter de andre én om gangen.
• Test etter hver prompt. Klikk gjennom endringen før du sender den neste.
• Behold det som fungerer. De fleste oppfølgingspromptene her avsluttes med «behold alt annet likt», og det er med vilje.
• Lim inn eksakt tekst. Feilmeldinger, knappetekster og ordene på skjermen slår beskrivelser hver gang.

Prompter for første bygg

Disse setter formen på appen. Hver av dem nevner brukerne, handlingene, dataene og utseendet.

1. En enkel tracker

Bygg en [vane]-tracker for meg. Jeg kan legge til en [vane] med navn og farge, krysse den av én gang per dag, og se et 30-dagers rutenett og den nåværende serien min. Lagre alt slik at det fortsatt er der etter en oppdatering. Rent, minimalistisk design som fungerer på telefon.

2. En bookingside for en liten bedrift

Bygg en bookingside for [frisørsalongen min]. Kunder velger en tjeneste ([klipp 30 min, farge 90 min]), en dato og et ledig tidspunkt mellom [9:00 og 18:00], og fyller inn navn, telefon og e-post. To personer kan ikke booke samme tidspunkt. Jeg trenger en privat adminside, bak innlogging, som lister kommende bookinger per dag.

3. Et internt verktøy

Bygg et internt verktøy for teamet mitt for å følge [utstyrsutlån]. Hver gjenstand har et navn, en kode og en status (ledig, utlånt, ødelagt). Ansatte logger inn, kan sjekke ut en gjenstand til seg selv og sjekke den inn igjen. Vis en tabell med filtre på status og en historikk over hvem som hadde hver gjenstand.

4. En landingsside med venteliste

Bygg en nettside med én side for [produktet mitt: en app for måltidsplanlegging for travle foreldre]. Hero med overskrift, en setning som underoverskrift og en påmelding med e-post. Deretter tre fordeler, en kort seksjon om hvordan det fungerer, og en FAQ. Lagre påmeldte e-poster i en database og vis meg listen på en privat adminside.

5. En kundeportal

Bygg en kundeportal for [designstudioet mitt]. Hver kunde logger inn og ser bare sine egne prosjekter, med status, filer jeg har lastet opp og en kommentartråd. Jeg logger inn som admin og ser alle kunder. Kunder må aldri se hverandres data.

6. En kalkulator eller tilbudsverktøy

Bygg en tilbudskalkulator for [rengjøringsfirmaet mitt]. Input: antall soverom, bad, ekstra tjenester (ovn, vinduer, kjøleskap) og frekvens (engangs, ukentlig, månedlig). Vis prisen etter hvert som valgene endres, med en oppdeling. Priser: [lim inn prislisten din]. Legg til en knapp som sender tilbudsforespørselen til meg på e-post.

Planleggingsprompter

Bruk disse før en stor funksjon, eller når du er usikker på hvordan du skal beskrive noe.

7. Planlegg før du bygger

Før du skriver noen kode, beskriv med vanlige ord skjermene du skal bygge, dataene du skal lagre og eventuelle beslutninger du trenger fra meg. Vent på min OK.

8. Gjør en rotete idé om til en første versjon

Her er ideen min: [lim inn notater]. Foreslå den minste første versjonen som likevel er nyttig, i 5–8 kulepunkter. List opp det du ville utsatt til senere, og hvorfor.

9. Spør hva som mangler

Hvilke spørsmål ville en utvikler stilt meg før vi bygger dette? Still dem ett for ett, og oppsummer deretter svarene mine som en kort spesifikasjon.

10. Sjekk en stor endring først

Jeg vil legge til [teamkontoer der flere personer deler én arbeidsflate]. Forklar hva som må endres i dataene, skjermene og tilgangsreglene, og hva som kan gå i stykker. Ikke endre noe ennå.

Designprompter

11. Sett en tydelig stil

Gi appen en ny stil: varm off-white bakgrunn, mørk tekst, én aksentfarge [#1F6F50], avrundede hjørner, romslig avstand og en moderne sans-serif-skrift. Behold layouten og alle funksjonene akkurat slik de er.

12. Kopier følelsen av en referanse

Gjør dashbordet til en rolig økonomiapp: mye hvit plass, tall store og fete, etiketter små og grå, ett enkelt diagram øverst. Ikke kopier noen merkes logo eller tekst.

13. Fiks layouten på telefon

På en telefon 375 px bred, scroller tabellen på [Ordre-siden] sideveis og knappene overlapper. Gjør hver rad om til et stablet kort på små skjermer. Ikke endre layouten på desktop.

14. Tomme, lastende og feilaktige tilstander

Legg til ordentlige tilstander i [prosjektlisten]: en vennlig tom tilstand med en knapp for å legge til det første prosjektet, en lastekontur mens dataene lastes, og en tydelig melding med en knapp for å prøve igjen hvis lastingen feiler.

15. Støtte for høyre-til-venstre

Legg til en arabisk versjon av grensesnittet med full høyre-til-venstre-layout. Ikoner som peker i en retning skal snus; tall og datoer skal bruke lokalens format. Behold engelsk som standard.

Data- og funksjonsprompter

16. Gjør data varige

Akkurat nå forsvinner dataene mine når jeg oppdaterer. Lagre dem i en ekte database i stedet, og behold dagens skjermer slik de fungerer.

17. Legg til innlogging

Legg til registrering og innlogging med e-post og passord. Hver bruker skal bare se og redigere sine egne [oppføringer]. Vis brukerens e-post i topplinjen med en utloggingsknapp.

18. Legg til roller

Legg til to roller: admin og medlem. Admin kan legge til, redigere og slette [produkter]; medlemmer kan bare se dem. Håndhev dette på serveren, ikke bare ved å skjule knapper.

19. Legg til søk og filtre

Legg til et søkefelt over [kontaktlisten] som matcher navn, firma eller e-post mens jeg skriver, pluss et filter for [status]. Behold den nåværende sorteringsrekkefølgen.

20. Legg til filopplastinger

La brukere legge ved opptil [5] bilder til hver [annonse], maks [5 MB] hver. Vis miniatyrbilder på annonsen og en større visning ved klikk. Bare eieren kan slette bildene sine.

21. Importer fra et regneark

Legg til en importknapp som tar en CSV med kolonnene [navn, e-post, telefon, notater], viser en forhåndsvisning av de første 10 radene, og lar meg bekrefte før lagring. Hopp over rader uten e-post og fortell meg hvor mange som ble hoppet over.

Feilrettingsprompter

22. Rapporter en feil tydelig

Når jeg [klikker Lagre på redigeringsskjemaet], ser jeg «[eksakt feilmelding]» og endringen lagres ikke. Forventet: endringen lagres og jeg går tilbake til listen. Finn årsaken, forklar den med en eller to setninger, og fiks den.

23. Stopp en fiksløkke

Vi har prøvd å fikse dette tre ganger, og det feiler fortsatt. Slutt å endre kode. List de tre mest sannsynlige årsakene, hvordan man sjekker hver av dem, og hvilken du tror det er.

24. Angre bieffekter

Den siste endringen din fikset datovelgeren, men [sidepanelet] forsvant. Få sidepanelet tilbake nøyaktig slik det var, og behold datovelger-fiksen.

25. Forklar før du endrer

Forklar hvordan [handlekurvens totalsum] beregnes akkurat nå, steg for steg, med henvisning til filene som er involvert. Ikke endre noe.

Test- og gjennomgangsprompter

26. Grensetilfeller

List 10 måter en ekte bruker kan knekke [bookingskjemaet]: tomme felt, veldig lang tekst, dobbeltklikk, to personer samtidig, feil tidssoner. Test hver og fiks det som feiler. Rapporter hva du endret.

27. Oppsummer nylige endringer

Oppsummer alle endringer du gjorde de siste [fem] stegene med vanlige ord, og flagg alt som kan påvirke eksisterende data.

Sikkerhetsprompter

Kombiner disse med vår side om om vibe coding er trygt.

28. Sjekk datatilgang

Sjekk serverkoden: kan en innlogget bruker lese eller endre en annen brukers [poster] ved å endre en ID i en forespørsel? Vis meg hvor tilgangen sjekkes, og fiks eventuelle hull.

29. Sjekk etter eksponerte hemmeligheter

List hver API-nøkkel, passord eller token denne appen bruker, og hvor hver av dem er lagret. Sørg for at ingen av dem ligger i kode som kjører i nettleseren eller er committet i filer. Flytt dem til hemmeligheter hvis de er det.

Publiseringsprompter

30. Gjennomgang før lansering

Jeg er i ferd med å publisere dette for ekte brukere. Gå gjennom det som en gjennomgåer: ødelagte lenker, manglende sidetitler og beskrivelser, skjemaer uten validering, trege sider, konsollfeil og alt som ser ufullstendig ut på telefon. Gi meg en liste sortert etter viktighet, og fiks de fem øverste.

Prompter du bør unngå

Noen prompter gir reelt dårligere resultater:

• «Gjør det bedre.» Bedre hvordan? Nevn skjermen og endringen.
• «Fiks alt.» KI-en vil endre mye, og du vet ikke hva som flyttet seg.
• «Bruk [bibliotek] og [rammeverk] og [mønster].» Med mindre du har en grunn, beskriv atferden og la verktøyet velge stacken.
• «Her er API-nøkkelen min: …» Lim aldri inn hemmeligheter i en chat. Bruk verktøyets innstillinger for hemmeligheter.
• Ti funksjoner i én melding. Del dem opp.

Gjør prompter til en vane

Etter noen få prosjekter får du dine egne versjoner av disse. Behold dem i et notat, og bruk de som fungerer. Mythex husker også hvem du er og hvordan du jobber på tvers av prosjekter, så preferanser du gjentar, som stilen eller stacken du vanligvis bruker, følger med uten at du må skrive dem på nytt.

Hvis du står fast på en første prompt, gjør den gratis app-prompt-generatoren en idé på én linje om til en fyldigere startprompt. For å se hva disse promptene gir i praksis, les våre eksempler på vibe coding, eller lim inn prompt 1 i KI-appbyggeren og endre klammene til din egen idé.

Spørsmål