Vibe coding-exempel: 10 riktiga apptyper, prompter och vad som gick fel

De vanligaste vibe coding-exemplen är små, användbara webbappar: uppföljningsverktyg, bokningssidor, interna verktyg, kundportaler, landningssidor, quiz, instrumentpaneler och enkla AI-verktyg. Nedan följer tio av dem. För varje ser du vem som bygger den, första prompten, vad som oftast går fel och uppföljningsprompten som fixar det.

Det här är sammansatta exempel på de projekt folk oftast tar med sig till AI-appbyggare, inte fallstudier av en enskild person. Prompterna går att kopiera. Felen är de som dyker upp om och om igen, och det är därför de är den användbara delen. Om vibe coding i sig är nytt för dig, börja med vad vibe coding är.

1. Ett personligt budgetverktyg

Vem bygger den: privatpersoner som har provat kalkylblad och gett upp.

Första prompten:

Bygg ett månadsbudgetverktyg. Jag lägger till utgifter med belopp, kategori (mat, hyra, transport, nöje, övrigt), datum och en anteckning. Visa denna månads summa per kategori som ett stapeldiagram och en lista över de senaste utgifterna. Jag kan sätta en budget per kategori och se hur mycket som är kvar.

Det som gick fel: diagrammet räknade varje utgift som någonsin lagts in, inte bara den här månaden, så i månad två såg varje kategori överskriden ut. Dessutom sparades belopp skrivna med komma ("1,200") som 1.

Fixprompt:

Diagrammet och summorna ska bara inkludera utgifter från den valda månaden. Lägg till en månadsväljare överst, som standard visar innevarande månad. Acceptera också belopp skrivna med kommatecken eller mellanslag och spara dem som tal.

Lärdom: "den här månaden" är en regel. Säg reglerna högt.

2. En bokningssida för en liten salong

Vem bygger den: småföretagare som är trötta på att boka via telefon och DM.

Första prompten:

Bygg en bokningssida för min salong. Kunder väljer en tjänst, ett datum och en ledig tid, och anger sedan namn och telefonnummer. Jag har en privat adminsida, bakom en inloggning, som visar bokningar per dag.

Det som gick fel: två kunder bokade samma tid kl. 10:00 inom en minut från varandra, eftersom sidan bara kontrollerade tillgängligheten när den laddades första gången. En färgbehandling på 90 minuter blockerade inte heller tiderna efter den.

Fixprompt:

När en kund skickar in en bokning, kontrollera på servern att varje tid bokningen omfattar fortfarande är ledig, och avvisa med "Tiden togs precis" om den inte är det. En tjänst blockerar hela sin längd, så en bokning på 90 minuter kl. 10:00 blockerar 10:00, 10:30 och 11:00.

Lärdom: allt två personer kan göra samtidigt behöver en kontroll på servern. Se hur man bygger en bokningsapp för hela versionen.

3. En restaurangmeny med QR-kod

Vem bygger den: café- och restaurangägare som skriver ut menyer för ofta.

Första prompten:

Bygg en mobilanpassad menywebbplats för mitt café. Avsnitt för frukost, lunch, drycker och efterrätter, där varje rätt har namn, pris, kort beskrivning och kosttaggar (vegansk, glutenfri). Jag behöver en adminsida för att redigera rätter och markera dem som slutsålda. Visa en QR-kod jag kan skriva ut som länkar till menyn.

Det som gick fel: inget gick sönder, men menyn var seg på caféets wifi eftersom stora bilder från telefoner laddades för varje rätt.

Fixprompt:

Menybilderna är för tunga. Ändra storlek på uppladdade bilder till högst 800 px bredd, komprimera dem och ladda dem när besökaren scrollar.

Lärdom: testa med en långsam uppkoppling, inte bara på kontoret.

4. Ett utrustnings- eller lagerverktyg för ett team

Vem bygger den: driftpersonal som ersätter ett delat kalkylblad.

Första prompten:

Bygg ett lagerverktyg för vårt lagerteam. Artiklar har namn, artikelnummer (SKU), antal, plats och en miniminivå. Personalen loggar in och kan lägga till lager, ta bort lager med en orsak och se en lista över artiklar under minimum markerade i rött. Behåll en historik över varje ändring och vem som gjorde den.

Det som gick fel: historiken visade "user 3" i stället för namn, och att ta ut mer än vad som fanns gjorde antalet negativt.

Fixprompt:

Visa personens namn i historiken, inte deras ID. Tillåt inte ett uttag som skulle ta antalet under noll; visa "Bara 4 i lager" i stället.

Lärdom: beskriv vad som ska vara omöjligt, inte bara vad som ska vara möjligt. Vår guide om hur man bygger en lagerapp täcker resten.

5. En kundportal för en frilans eller studio

Vem bygger den: designers, revisorer, konsulter och byråer.

Första prompten:

Bygg en kundportal. Jag bjuder in kunder via e-post. Varje kund loggar in och ser bara sina egna projekt, filer och fakturor, och kan lämna kommentarer. Jag loggar in som admin och ser allt.

Det som gick fel: det här är det viktigaste felet på listan. Sidorna visade bara varje kund sina egna projekt, men servern returnerade vilket projekt som helst om man ändrade siffran i adressfältet. Att klicka runt som en enskild kund avslöjade aldrig det.

Fixprompt:

Kontrollera varje serverrutt som returnerar projekt, filer, kommentarer eller fakturor. Var och en måste bekräfta att den inloggade kunden äger posten, och returnera "hittades inte" annars. Testa sedan: logga in som kund A och försök öppna kund B:s projekt med dess ID.

Lärdom: att dölja något på skärmen är inte samma sak som att skydda det. Mer om det i är vibe coding säkert?.

6. En lanseringssida med väntelista

Vem bygger den: grundare som testar en idé innan de bygger den.

Första prompten:

Bygg en landningssida för en app som hjälper lärare att schemalägga lektioner och ta emot betalningar. Huvudrubrik, underrubrik, e-postregistrering, tre fördelar, ett avsnitt om hur det fungerar och en FAQ. Spara registreringar i en databas med datum, och låt mig ladda ner dem som CSV från en privat sida.

Det som gick fel: inom några dagar fylldes listan med skräpregistreringar från bottar, och sidan saknade titel och beskrivning, så delade länkar visade en tom förhandsvisning.

Fixprompt:

Lägg till grundläggande botskydd i registreringsformuläret (ett dolt fält som bottar fyller i och en gräns på 5 registreringar per IP-adress och timme). Lägg till sidtitel, metabeskrivning och en bild för delning i sociala medier.

Lärdom: ett offentligt formulär hittas. Se hur man bygger en väntelistesida.

7. En quizapp för en lärare

Vem bygger den: lärare och utbildare som vill ha något lättare än ett LMS.

Första prompten:

Bygg en quizapp för min klass. Jag skapar quiz med flervalsfrågor och ett rätt svar per fråga. Elever går med en kod och sitt förnamn, svarar på frågorna och ser sin poäng i slutet. Jag ser en resultattabell per quiz.

Det som gick fel: de rätta svaren skickades till webbläsaren tillsammans med frågorna, så en nyfiken elev kunde läsa dem i sidans källkod. Elever kunde dessutom skicka in om tills de fick 100 %.

Fixprompt:

Skicka inte de rätta svaren till webbläsaren. Kontrollera svaren på servern efter inskick. Tillåt ett inskick per elevnamn och quiz, och visa läraren om någon försöker igen.

Lärdom: webbläsaren tillhör användaren. Allt som finns där kan läsas.

8. Ett litet AI-verktyg

Vem bygger den: marknadsförare, skribenter och grundare som vill ha en fokuserad AI-hjälpreda.

Första prompten:

Bygg ett verktyg som omvandlar en produktbeskrivning till fem inlägg för sociala medier i olika tonlägen (vänlig, expertis, lekfull, kort, lång). Använd ett AI-API. Jag klistrar in beskrivningen, väljer plattform och får inläggen med kopieringsknappar.

Det som gick fel: den första versionen anropade AI-tjänsten direkt från webbläsaren med API-nyckeln i sidan, där vem som helst kunde kopiera den och köra upp notan.

Fixprompt:

Flytta AI-anropet till servern. Spara API-nyckeln som en hemlighet, aldrig i frontend-koden. Begränsa varje besökare till 20 genereringar per dag.

Lärdom: nycklar hör hemma i hemligheter på servern. Se hur man håller API-nycklar säkra och hur man lägger till AI-funktioner i sin app.

9. En arabisk och engelsk företagswebbplats

Vem bygger den: företag i Gulfregionen och i övriga arabvärlden som betjänar två språk.

Första prompten:

Bygg en webbplats för mitt inredningsföretag på arabiska och engelska, med språkväxling. Sidor: startsida, tjänster, portfölj, om oss och kontakt. Arabiskan ska vara helt högerställd (RTL).

Det som gick fel: den arabiska texten var högerjusterad men layouten speglades inte: pilarna pekade åt fel håll och menyn satt på fel sida. Telefonnummer visades dessutom baklänges på vissa ställen.

Fixprompt:

På arabiska, spegla hela layouten: sätt sidans riktning till höger-till-vänster, lägg menyn till höger, vänd riktningsikoner och håll telefonnummer och e-postadresser vänster-till-höger inne i den arabiska texten.

Lärdom: höger-till-vänster är en layout, inte en justering. Mythex hanterar arabiska och andra layouter från höger till vänster, och du kan skriva prompter på arabiska direkt.

10. Ett verktyg som blir en telefonapp

Vem bygger den: coacher, gym och gemenskapsgrupper vars användare lever i sina telefoner.

Första prompten:

Bygg en träningslogg för mina personliga träningskunder. Varje kund loggar in, ser planen jag tilldelat för veckan, bockar av övningar och registrerar vikter. Jag ser varje kunds framsteg i ett diagram.

Det som gick fel: webbappen fungerade, men på telefoner var knapparna för små för att trycka på mitt i passet och diagrammet var oläsligt.

Fixprompt:

Designa detta för användning med en hand på telefon: stora tryckytor längst ner på skärmen, en övning per skärm med stora knappar för Nästa och Klar, och ett enkelt veckodiagram över framsteg.

Lärdom: om folk ska använda något i telefonen, designa för telefonen först. På Mythex Pro kan den publicerade appen sedan bli en Android-app för Google Play och en iPhone-app som skickas till TestFlight; telefonappen öppnar din publicerade app, så varje publicering uppdaterar den. Se sidan om mobilappbyggaren.

Mönstren bakom exemplen

Över alla tio faller felen i några grupper:

Ingen av dessa kräver att du läser kod. De kräver att du testar som en nyfiken, lite fientlig användare och beskriver exakt vad du ser.

Prova själv

Välj exemplet som ligger närmast din idé, kopiera dess första prompt och ändra detaljerna. Använd sedan fixprompten som en checklista innan du delar appen. Vår prompt-lista för vibe coding har 30 till, och hur man bygger en app med vibe coding går igenom ett projekt från idé till publicerad app. När du är redo, starta den i AI-appbyggaren eller bläddra bland mallar för en bra start.

Frågor