Vibe coding-eksempler: 10 rigtige app-typer, prompts og hvad der gik galt

De mest almindelige vibe coding-eksempler er små, nyttige webapps: trackere, bookingsider, interne værktøjer, kundeportaler, landingssider, quizzer, dashboards og simple AI-værktøjer. Nedenfor er ti af dem. For hver ser du, hvem der bygger den, den første prompt, hvad der typisk går galt, og opfølgningsprompten der retter det.

Disse er sammensatte billeder af de projekter, folk oftest tager med til AI-appbyggere, ikke casestudier af én person. Promptene kan kopieres. Fejlene er dem, der kommer igen og igen, og det er derfor, de er den nyttige del. Hvis vibe coding i sig selv er nyt for dig, så start med hvad vibe coding er.

1. Et personligt budgetværktøj

Hvem bygger det: privatpersoner, der har prøvet regneark og givet op.

Første prompt:

Byg et månedligt budgetværktøj. Jeg tilføjer udgifter med beløb, kategori (mad, husleje, transport, fritid, andet), dato og en note. Vis denne måneds total pr. kategori som et søjlediagram og en liste over de seneste udgifter. Jeg kan sætte et budget pr. kategori og se, hvor meget der er tilbage.

Hvad gik galt: diagrammet talte hver udgift nogensinde indtastet, ikke kun denne måned, så i måned to så alle kategorier ud som overforbrugt. Beløb skrevet med komma ("1,200") blev også gemt som 1.

Rettelsesprompt:

Diagrammet og totalerne skal kun medtage udgifter fra den valgte måned. Tilføj en månedsvælger øverst, som som standard er den aktuelle måned. Accepter også beløb skrevet med kommaer eller mellemrum, og gem dem som tal.

Lærdom: "denne måned" er en regel. Sig reglerne højt.

2. En bookingside til en lille frisørsalon

Hvem bygger det: små virksomhedsejere, der er trætte af at booke over telefon og DM.

Første prompt:

Byg en bookingside til min salon. Kunder vælger en behandling, en dato og et ledigt tidspunkt og udfylder navn og telefonnummer. Jeg har en privat adminside bag login, der viser bookinger pr. dag.

Hvad gik galt: to kunder booked det samme kl. 10:00-tidspunkt inden for et minut fra hinanden, fordi siden kun tjekkede ledighed, når den først blev indlæst. En 90 minutters farvebehandling blokerede heller ikke tidspunkterne efter den.

Rettelsesprompt:

Når en kunde sender en booking, skal serveren tjekke, at alle tidspunkter den dækker stadig er ledige, og afvise den med "Det tidspunkt blev lige taget", hvis ikke. En behandling blokerer hele sin længde, så en 90 minutters booking kl. 10:00 blokerer 10:00, 10:30 og 11:00.

Lærdom: alt, to personer kan gøre samtidig, kræver et tjek på serveren. Se sådan bygger du en bookingapp for den fulde version.

3. En restaurantmenu med QR-kode

Hvem bygger det: café- og restaurantejere, der genoptrykker menuer for ofte.

Første prompt:

Byg en mobilvenlig menuside til min café. Sektioner for morgenmad, frokost, drikkevarer og desserter, hver ret med navn, pris, kort beskrivelse og kostmærker (vegansk, glutenfri). Jeg har brug for en adminside til at redigere retter og markere dem som udsolgt. Vis en QR-kode, jeg kan printe, der linker til menuen.

Hvad gik galt: intet gik i stykker, men menuen var langsom på caféens wifi, fordi fotos i fuld telefonstørrelse blev indlæst for hver ret.

Rettelsesprompt:

Menufotos er for tunge. Skaler uploadede billeder ned til maksimalt 800 px i bredden, komprimer dem, og indlæs dem lazy, når besøgende scroller.

Lærdom: test på en langsom forbindelse, ikke kun på dit kontor.

4. Et udstyrs- eller lagerværktøj til et team

Hvem bygger det: driftsfolk, der erstatter et fælles regneark.

Første prompt:

Byg et lagerværktøj til vores lagerteam. Varer har navn, SKU, antal, placering og et minimumsniveau. Medarbejdere logger ind og kan tilføje lager, fjerne lager med en begrundelse og se en liste over varer under minimum, fremhævet med rødt. Gem en historik over hver ændring og hvem der lavede den.

Hvad gik galt: historikken viste "bruger 3" i stedet for navne, og når man fjernede mere lager, end der var, blev antallet negativt.

Rettelsesprompt:

Vis personens navn i historikken, ikke deres ID. Tillad ikke en fjernelse, der ville sænke antallet under nul; vis i stedet "Kun 4 på lager".

Lærdom: beskriv, hvad der skal være umuligt, ikke kun hvad der skal være muligt. Vores guide om at bygge en lagerapp dækker resten.

5. En kundeportal for en freelancer eller et studie

Hvem bygger det: designere, revisorer, konsulenter og bureauer.

Første prompt:

Byg en kundeportal. Jeg inviterer kunder via e-mail. Hver kunde logger ind og ser kun sine egne projekter, filer og fakturaer, og kan skrive kommentarer. Jeg logger ind som admin og ser alt.

Hvad gik galt: dette er den vigtigste fejl på listen. Siderne viste kun hver kunde sine egne projekter, men serveren returnerede ethvert projekt, hvis man ændrede tallet i adresselinjen. Det blev aldrig opdaget ved at klikke rundt som én kunde.

Rettelsesprompt:

Gennemgå hver serverrute, der returnerer projekter, filer, kommentarer eller fakturaer. Hver skal bekræfte, at den indloggede kunde ejer posten, og ellers returnere "ikke fundet". Test derefter: log ind som kunde A og forsøg at åbne kunde B's projekt via dets ID.

Lærdom: at skjule noget på skærmen er ikke det samme som at beskytte det. Mere om dette i er vibe coding sikkert?.

6. En launchside med venteliste

Hvem bygger det: grundlæggere, der tester en idé, før de bygger den.

Første prompt:

Byg en landingsside til en app, der hjælper undervisere med at planlægge timer og modtage betalinger. Hero-overskrift, underoverskrift, tilmelding via e-mail, tre fordele, en sektion om hvordan det virker og en FAQ. Gem tilmeldinger i en database med dato, og lad mig downloade dem som CSV fra en privat side.

Hvad gik galt: inden for få dage fyldtes listen med skrald-tilmeldinger fra bots, og siden havde ingen titel eller beskrivelse, så delte links viste en tom forhåndsvisning.

Rettelsesprompt:

Tilføj grundlæggende botbeskyttelse til tilmeldingsformularen (et skjult honeypot-felt og en grænse på 5 tilmeldinger pr. IP pr. time). Tilføj en sidetitel, meta-beskrivelse og et billede til deling på sociale medier.

Lærdom: en offentlig formular bliver fundet. Se sådan bygger du en venteliste-side.

7. En quizapp til en lærer

Hvem bygger det: lærere og trænere, der vil have noget lettere end et LMS.

Første prompt:

Byg en quizapp til min klasse. Jeg opretter quizzer med multiple choice-spørgsmål og ét rigtigt svar hver. Elever deltager med en kode og deres fornavn, besvarer spørgsmålene og ser deres score til sidst. Jeg ser en resultattabel pr. quiz.

Hvad gik galt: de rigtige svar blev sendt til browseren sammen med spørgsmålene, så en nysgerrig elev kunne læse dem i sidens kildekode. Eleverne kunne også indsende igen, indtil de fik 100%.

Rettelsesprompt:

Send ikke de rigtige svar til browseren. Tjek svarene på serveren efter indsendelse. Tillad én indsendelse pr. elevnavn pr. quiz, og vis læreren, hvis nogen forsøger igen.

Lærdom: browseren tilhører brugeren. Alt der ligger der, kan læses.

8. Et lille AI-værktøj

Hvem bygger det: marketingfolk, skribenter og grundlæggere, der vil have en fokuseret AI-hjælper.

Første prompt:

Byg et værktøj, der omdanner en produktbeskrivelse til fem opslag på sociale medier i forskellige tonelejer (venlig, ekspert, legesyg, kort, lang). Brug en AI-API. Jeg indsætter beskrivelsen, vælger en platform og får opslagene med kopiknapper.

Hvad gik galt: den første version kaldte AI-tjenesten direkte fra browseren med API-nøglen inde i siden, hvor enhver kunne kopiere den og løbe op i en stor regning.

Rettelsesprompt:

Flyt AI-kaldet til serveren. Gem API-nøglen som en hemmelighed, aldrig i frontend-koden. Begræns hver besøgende til 20 generationer om dagen.

Lærdom: nøgler hører hjemme i hemmeligheder på serveren. Se sådan holder du API-nøgler sikre og sådan tilføjer du AI-funktioner til din app.

9. Et arabisk og engelsk erhvervswebsted

Hvem bygger det: virksomheder i Golfen og den bredere arabiske verden, der betjener to sprog.

Første prompt:

Byg en hjemmeside til mit indretningsfirma på arabisk og engelsk, med et sprogskift. Sider: forside, ydelser, portefølje, om os og kontakt. Arabisk skal være fuldt højre-mod-venstre.

Hvad gik galt: den arabiske tekst var højrejusteret, men layoutet blev ikke spejlet: pile pegede stadig den forkerte vej, og menuen sad på den forkerte side. Telefonnumre blev også vist baglæns nogle steder.

Rettelsesprompt:

På arabisk skal hele layoutet spejlvendes: sæt sidens retning til højre-mod-venstre, placer menuen til højre, vend retningsikoner, og hold telefonnumre og e-mails venstre-mod-højre inde i den arabiske tekst.

Lærdom: højre-mod-venstre er et layout, ikke en justering. Mythex håndterer arabisk og andre højre-mod-venstre-layouts, og du kan skrive prompts direkte på arabisk.

10. Et værktøj der bliver til en telefonapp

Hvem bygger det: coaches, fitnesscentre og fællesskaber, hvis brugere lever på deres telefoner.

Første prompt:

Byg en træningslog til mine personlige træningskunder. Hver kunde logger ind, ser den plan jeg har tildelt for ugen, afkrydser øvelser og noterer vægte. Jeg ser hver kundes fremskridt på et diagram.

Hvad gik galt: webappen fungerede, men på telefoner var knapperne for små at trykke på midt i en træning, og diagrammet var ulæseligt.

Rettelsesprompt:

Design det til brug med én hånd på en telefon: store trykflader nederst på skærmen, én øvelse pr. skærm med store Næste- og Færdig-knapper, og et simpelt ugentligt fremskridtsdiagram.

Lærdom: hvis folk vil bruge det på en telefon, så design til telefonen først. På Mythex Pro kan den publicerede app derefter blive til en Android-app til Google Play og en iPhone-app sendt til TestFlight; telefonappen åbner din publicerede app, så hver publicering opdaterer den. Se siden om mobilapp-builderen.

Mønstrene bag eksemplerne

På tværs af alle ti falder fejlene i nogle få grupper:

Ingen af disse kræver, at du læser kode. De kræver, at du tester som en nysgerrig, lidt fjendtlig bruger, og at du beskriver præcist, hvad du ser.

Prøv selv én

Vælg eksemplet tættest på din idé, kopier dens første prompt, og ændr detaljerne. Brug derefter rettelsesprompten som en tjekliste, før du deler den. Vores cheat sheet med vibe coding-prompts har 30 flere, og sådan bygger du en app med vibe coding gennemgår ét projekt fra idé til publiceret app. Når du er klar, så start det i AI-appbyggeren, eller gennemse skabeloner for et forspring.

Spørgsmål