30 vibe coding-prompter att kopiera (fusklapp)

De bästa vibe coding-prompterna är korta, specifika och handlar om beteende: vem som använder appen, vad de kan göra, vad den sparar och hur den ser ut. Nedan följer 30 prompter att kopiera och klistra in, grupperade efter var du är i processen, från första bygget till publicering. Ersätt delarna inom [hakparenteser] med dina egna detaljer.

De fungerar i alla AI-appbyggare och kodagenter. Om du vill ha resonemanget bakom dem förklarar vår längre guide om hur man skriver prompter för AI-appbyggare principerna. Den här sidan är fusklappen.

Så använder du den här fusklappen

• Börja med en första-bygget-prompt, och använd sedan de andra en i taget.
• Testa efter varje prompt. Klicka igenom ändringen innan du skickar nästa.
• Behåll det som fungerar. Många uppföljningsprompter här slutar med "behåll allt annat oförändrat" av en anledning.
• Klistra in exakt text. Felmeddelanden, knapptexter och orden på skärmen slår beskrivningar varje gång.

Prompter för första bygget

Dessa sätter appens form. Varje prompt namnger användarna, åtgärderna, datan och utseendet.

1. En enkel tracker

Bygg en [vana]-tracker åt mig. Jag kan lägga till en [vana] med ett namn och en färg, bocka av den en gång per dag och se ett 30-dagarsrutnät och min nuvarande svit. Spara allt så att det finns kvar efter en uppdatering. Ren, minimal design som fungerar på telefon.

2. En bokningssida för ett litet företag

Bygg en bokningssida för min [frisörsalong]. Kunder väljer en tjänst ([klippning 30 min, färgning 90 min]), ett datum och en ledig tid mellan [9:00 och 18:00], och anger sedan namn, telefon och e-post. Två personer kan inte boka samma tid. Jag behöver en privat adminsida, bakom en inloggning, som listar kommande bokningar per dag.

3. Ett internt verktyg

Bygg ett internt verktyg åt mitt team för att spåra [utrustningslån]. Varje föremål har ett namn, en kod och en status (tillgänglig, utlånad, trasig). Personalen loggar in, kan checka ut ett föremål till sig själva och checka tillbaka det. Visa en tabell med filter efter status och en historik över vem som hade varje föremål.

4. En landningssida med väntelista

Bygg en webbplats på en sida för [min produkt: en måltidsplanerare för upptagna föräldrar]. Hjälte med rubrik, underrubrik på en mening och en e-postregistrering. Sedan tre fördelar, ett kort avsnitt om hur det fungerar och en FAQ. Spara registrerings-e-postadresser i en databas och visa mig listan på en privat adminsida.

5. En kundportal

Bygg en kundportal för min [designstudio]. Varje kund loggar in och ser bara sina egna projekt, med status, filer jag laddat upp och en kommentarstråd. Jag loggar in som admin och ser alla kunder. Kunder får aldrig se varandras data.

6. En kalkylator eller offertverktyg

Bygg en offertkalkylator för mitt [städföretag]. Indata: antal sovrum, badrum, extratjänster (ugn, fönster, kylskåp) och frekvens (engångs, varje vecka, varje månad). Visa priset när alternativen ändras, med en specifikation. Priser: [klistra in din prislista]. Lägg till en knapp som skickar offertförfrågan till mig via e-post.

Planeringsprompter

Använd dessa före en stor funktion, eller när du inte är säker på hur du ska beskriva något.

7. Planera före bygget

Innan du skriver någon kod, beskriv med vanliga ord vilka skärmar du kommer att bygga, vilken data du kommer att lagra och vilka beslut du behöver från mig. Vänta på mitt OK.

8. Gör en rörig idé till en första version

Här är min idé: [klistra in anteckningar]. Föreslå den minsta första versionen som ändå är användbar, i 5–8 punkter. Lista vad du skulle lämna till senare och varför.

9. Fråga vad som saknas

Vilka frågor skulle en utvecklare ställa till mig innan den byggde det här? Ställ dem en i taget och sammanfatta sedan mina svar som en kort specifikation.

10. Kontrollera en stor ändring först

Jag vill lägga till [teamkonton där flera personer delar ett arbetsutrymme]. Förklara vad som måste ändras i datan, skärmarna och behörigheterna, och vad som kan gå sönder. Ändra inget än.

Designprompter

11. Sätt en tydlig stil

Designa om appen: varm off-white bakgrund, mörk text, en accentfärg [#1F6F50], rundade hörn, generös luft och ett modernt sans-serif-typsnitt. Behåll layouten och varje funktion exakt som den är.

12. Kopiera känslan från en referens

Gör instrumentpanelen till en lugn ekonomiapp: mycket vitt utrymme, siffror stora och feta, etiketter små och grå, ett enkelt diagram överst. Kopiera inte någon varumärkes logotyp eller text.

13. Fixa layouten för telefon

På en telefon på 375 px bred scrollar tabellen på [Ordersidan] åt sidan och knapparna överlappar. Gör varje rad till ett staplat kort på små skärmar. Ändra inte skrivbordslayouten.

14. Tomma, laddande och felade lägen

Lägg till ordentliga lägen för [listan över projekt]: ett vänligt tomläge med en knapp för att lägga till det första projektet, en laddningsskelett medan data hämtas och ett tydligt meddelande med en knapp för att försöka igen om inläsningen misslyckas.

15. Stöd för höger-till-vänster

Lägg till en arabisk version av gränssnittet med fullständig layout från höger till vänster. Riktningsikoner ska vändas; siffror och datum ska använda lokalt format. Behåll engelska som standard.

Data- och funktionsprompter

16. Gör datan beständig

Just nu försvinner min data när jag laddar om. Lagra den i en riktig databas i stället, och låt de nuvarande skärmarna fungera på samma sätt.

17. Lägg till inloggning

Lägg till registrering och inloggning med e-post och lösenord. Varje användare ska bara kunna se och redigera sina egna [poster]. Visa användarens e-post i den övre raden med en utloggningsknapp.

18. Lägg till roller

Lägg till två roller: admin och medlem. Admins kan lägga till, redigera och ta bort [produkter]; medlemmar kan bara visa dem. Genomdriv detta på servern, inte bara genom att dölja knappar.

19. Lägg till sök och filter

Lägg till en sökruta ovanför [kontaktlistan] som matchar namn, företag eller e-post medan jag skriver, plus ett filter för [status]. Behåll den nuvarande sorteringsordningen.

20. Lägg till filuppladdning

Låt användare bifoga upp till [5] bilder till varje [annons], max [5 MB] var. Visa miniatyrer på annonsen och en större vy vid klick. Endast ägaren kan ta bort sina bilder.

21. Importera från ett kalkylblad

Lägg till en Importera-knapp som tar en CSV med kolumnerna [namn, e-post, telefon, anteckningar], visar en förhandsvisning av de första 10 raderna och låter mig bekräfta innan något sparas. Hoppa över rader utan e-post och berätta hur många som hoppades över.

Felsökningsprompter

22. Rapportera ett fel tydligt

När jag [klickar på Spara i redigeringsformuläret] ser jag "[exakt felmeddelande]" och ändringen sparas inte. Förväntat: ändringen sparas och jag återgår till listan. Hitta orsaken, förklara den i en eller två meningar och fixa den.

23. Stoppa en fixloop

Vi har försökt fixa det här tre gånger och det fungerar fortfarande inte. Sluta ändra kod. Lista de tre mest sannolika orsakerna, hur man kontrollerar var och en och vilken du tror det är.

24. Ångra bieffekter

Din senaste ändring fixade datumväljaren men [sidofältet] försvann. Återställ sidofältet exakt som det var och behåll datumväljarfixen.

25. Förklara innan du ändrar

Förklara hur [kassans totalsumma] beräknas just nu, steg för steg, och peka på de filer som är inblandade. Ändra inget.

Test- och granskningsprompter

26. Kantfall

Lista 10 sätt en verklig användare kan knäcka [bokningsformuläret]: tomma fält, mycket lång text, dubbelklick, två personer samtidigt, fel tidszoner. Testa varje och fixa det som fallerar. Rapportera vad du ändrade.

27. Sammanfatta senaste ändringarna

Sammanfatta varje ändring du gjorde under de senaste [fem] stegen med vanliga ord, och flagga allt som kan påverka befintlig data.

Säkerhetsprompter

Kombinera dessa med vår sida om huruvida vibe coding är säkert.

28. Kontrollera dataåtkomst

Kontrollera serverkoden: kan en inloggad användare läsa eller ändra en annan användares [poster] genom att ändra ett ID i en förfrågan? Visa var åtkomsten kontrolleras och fixa eventuella luckor.

29. Kontrollera exponerade hemligheter

Lista varje API-nyckel, lösenord eller token som den här appen använder och var var och en lagras. Se till att ingen av dem finns i kod som körs i webbläsaren eller incheckad i filer. Flytta dem till hemligheter om de är det.

Publiceringsprompter

30. Genomgång före lansering

Jag är på väg att publicera detta för riktiga användare. Gå igenom det som granskare: trasiga länkar, saknade sidtitlar och beskrivningar, formulär utan validering, långsamma sidor, konsolfel och allt som ser ofärdigt ut på telefon. Ge mig en lista rangordnad efter vikt och fixa de fem viktigaste.

Prompter att undvika

Vissa prompter ger reliabelt sämre resultat:

• "Gör det bättre." Bättre hur? Namnge skärmen och ändringen.
• "Fixa allt." AI:n kommer att ändra mycket och du vet inte vad som flyttats.
• "Använd [bibliotek] och [ramverk] och [mönster]." Om du inte har en anledning, beskriv beteendet och låt verktyget välja stacken.
• "Här är min API-nyckel: …" Klistra aldrig in hemligheter i en chatt. Använd verktygets inställningar för hemligheter.
• Tio funktioner i ett meddelande. Dela upp dem.

Gör prompterna till en vana

Efter några projekt har du egna versioner av dessa. Spara dem i en anteckning och återanvänd de som fungerar. Mythex kommer dessutom ihåg vem du är och hur du arbetar över projekt, så preferenser du upprepar, till exempel din vanliga stil eller stack, följer med utan att du behöver skriva om dem.

Om du kör fast på en första prompt gör den kostnadsfria app-promptgeneratorn om en idé på en rad till en mer fullständig startprompt. Och för att se vad dessa prompter ger i praktiken, läs våra vibe coding-exempel, eller klistra in prompt 1 i AI-appbyggaren och ändra hakparenteserna till din egen idé.

Frågor