Vibe coding näited: 10 päris rakenduse tüüpi, promptid ja mis valesti läks

Kõige levinumad vibe coding näited on väikesed kasulikud veebirakendused: jälgijad, broneerimislehed, sisemised tööriistad, kliendiportaalid, maandumislehed, viktoriinid, juhtpaneelid ja lihtsad AI-tööriistad. Allpool on kümme neist. Igaühe juures näed, kes seda ehitab, esimest prompti, mis tavaliselt valesti läheb, ja järgmist prompti, mis selle parandab.

Need on liitnäited projektidest, mida inimesed kõige sagedamini AI-rakenduste loojatele toovad, mitte ühe inimese juhtumiuuringud. Promptid on kopeeritavad. Vead on need, mis tulevad uuesti ja uuesti esile, ja just need on kasulik osa. Kui vibe coding ise on sulle uus, alusta mis on vibe coding lehest.

1. Isiklik eelarvejälgija

Kes seda ehitab: üksikisikud, kes on tabelitega proovinud ja alla andnud.

Esimene prompt:

Ehita igakuine eelarvejälgija. Lisan kulud summa, kategooria (toit, üür, transport, lõbu, muu), kuupäeva ja märkmega. Näita selle kuu summasid kategooriate kaupa tulpdiagrammina ning viimaste kulude nimekirja. Saan määrata eelarve kategooriate kaupa ja näha, kui palju on jäänud.

Mis valesti läks: diagramm arvestas iga kunagi sisestatud kulu, mitte ainult seda kuud, nii et teises kuus paistsid kõik kategooriad ületatuna. Lisaks salvestati koma sisaldavad summad („1,200“) väärtusega 1.

Parandusprompt:

Diagrammi ja summad peaksid arvestama ainult valitud kuu kulusid. Lisa ülaossa kuuvalija, mis on vaikimisi praegune kuu. Võta vastu ka komadega või tühikutega kirjutatud summad ja salvesta need numbritena.

Õppetund: „see kuu“ on reegel. Ütle reeglid valjusti välja.

2. Broneerimisleht väikesele ilusalongile

Kes seda ehitab: väikeste ettevõtete omanikud, kes on väsinud broneeringutest telefoni ja sõnumite kaudu.

Esimene prompt:

Ehita mu salongi jaoks broneerimisleht. Kliendid valivad teenuse, kuupäeva ja vaba aja, seejärel sisestavad nime ja telefoninumbri. Mul on privaatne administraatorileht, mis on sisselogimise taga ja mis näitab broneeringuid päeva kaupa.

Mis valesti läks: kaks klienti broneerisid sama kella 10:00 aja minuti vahega, sest leht kontrollis vabu aegu ainult esmakordsel laadimisel. Ka 90-minutiline värvimisbroneering ei blokeerinud sellele järgnevaid aegu.

Parandusprompt:

Kui klient broneeringu esitab, kontrolli serveris, et iga aeg, mida see katab, on endiselt vaba, ja lükka tagasi teatega „See aeg on just hõivatud“, kui ei ole. Teenus blokeerib kogu oma pikkuse, nii et 90-minutiline broneering kell 10:00 blokeerib 10:00, 10:30 ja 11:00.

Õppetund: kõik, mida kaks inimest saavad korraga teha, vajab serveripoolset kontrolli. Täieliku versiooni leiad lehelt kuidas ehitada broneerimisrakendust.

3. Restorani menüü QR-koodiga

Kes seda ehitab: kohvikute ja restoranide omanikud, kes trükivad menüüd liiga sageli uuesti.

Esimene prompt:

Ehita mu kohviku jaoks mobiilne menüüveebisait. Lõigud hommikusöögile, lõunale, jookidele ja magustoitudele, iga toidu juures nimi, hind, lühikirjeldus ja toitumismärgised (vegan, gluteenivaba). Vajan administraatorilehte toidukaartide muutmiseks ja „otsas“ märkimiseks. Kuva prinditav QR-kood, mis viib menüüni.

Mis valesti läks: midagi ei purunenud, kuid menüü oli kohviku Wi-Fi juures aeglane, sest iga toidu juures laaditi täissuuruses telefonipilte.

Parandusprompt:

Menüü pildid on liiga rasked. Muuda üleslaaditud pildid laiuselt maksimaalselt 800 pikslini, surugi need kokku ja laadi need külastaja kerimisel hilinemisega.

Õppetund: testi aeglases ühenduses, mitte ainult oma kontoris.

4. Meeskonna seadmete või laojäägi jälgija

Kes seda ehitab: operatiivtöötajad, kes asendavad jagatud tabelit.

Esimene prompt:

Ehita laotiimile sisemine tööriist. Esemetel on nimi, SKU, kogus, asukoht ja miinimumtase. Töötajad logivad sisse, saavad lisada laovaru, eemaldada laovaru põhjusega ning näha punasena tõstetud nimekirja esemetest, mis on miinimumist allpool. Hoia alles iga muudatuse ajalugu ja selle tegija.

Mis valesti läks: ajaloos kuvati „kasutaja 3“ nime asemel ja kui eemaldati rohkem laovaru, kui saadaval oli, läks kogus miinusesse.

Parandusprompt:

Näita ajaloos inimese nime, mitte ID-d. Ära luba eemaldamist, mis viiks koguse alla nulli; näita selle asemel „Laos on ainult 4“.

Õppetund: kirjelda, mis peaks olema võimatu, mitte ainult seda, mis peaks olema võimalik. Meie juhend laohaldusrakenduse ehitamisest käsitleb ülejäänut.

5. Kliendiportaal freelancerile või stuudiole

Kes seda ehitab: disainerid, raamatupidajad, konsultandid ja agentuurid.

Esimene prompt:

Ehita kliendiportaal. Kutsun kliente e-posti teel. Iga klient logib sisse ja näeb ainult oma projekte, faile ja arveid ning saab jätta kommentaare. Administraatorina login sisse ja näen kõike.

Mis valesti läks: see on nimekirja kõige olulisem viga. Lehed näitasid igale kliendile ainult tema projekte, kuid server tagastas mis tahes projekti, kui aadressiribal muudeti numbrit. Ühe kliendina ringi klõpsates seda ei avastatud.

Parandusprompt:

Kontrolli iga serveri marsruuti, mis tagastab projekte, faile, kommentaare või arveid. Igaüks neist peab kinnitama, et sisselogitud klient omab kirjet, ja vastasel juhul tagastama „ei leitud“. Testi seejärel: logi sisse kliendina A ja proovi avada kliendi B projekt selle ID järgi.

Õppetund: ekraanil midagi peitmine ei ole sama, mis selle kaitsmine. Sellest rohkem lehel kas vibe coding on ohutu?.

6. Maandumisleht ootenimekirjaga

Kes seda ehitab: asutajad, kes testivad ideed enne selle ehitamist.

Esimene prompt:

Ehita maandumisleht rakendusele, mis aitab juhendajatel planeerida õppetunde ja koguda makseid. Pealkiri, alapealkiri, e-posti registreerimine, kolm eelist, kuidas see töötab ja KKK. Salvesta registreerumised andmebaasi kuupäevaga ja lase mul need privaatselt lehelt CSV-na alla laadida.

Mis valesti läks: mõne päevaga täitus nimekiri robotite prügiregistreerimistega ja lehel ei olnud pealkirja ega kirjeldust, nii et jagatud lingid näitasid tühja eelvaadet.

Parandusprompt:

Lisa registreerimisvormile põhiline robotikaitse (peidetud mesilasväli ja piirang 5 registreerumist IP-aadressi kohta tunnis). Lisa lehe pealkiri, meta-kirjeldus ja sotsiaalmeedia jagamise pilt.

Õppetund: avalik vorm leitakse üles. Vaata kuidas ehitada ootenimekirja lehte.

7. Viktoriinirakendus õpetajale

Kes seda ehitab: õpetajad ja treenerid, kes tahavad midagi kergemat kui LMS.

Esimene prompt:

Ehita mu klassile viktoriinirakendus. Loon viktoriine valikvastustega küsimustega, igal küsimusel üks õige vastus. Õpilased liituvad koodi ja oma eesnimega, vastavad küsimustele ning näevad lõpus oma skoori. Mul on igas viktoriinis tulemuste tabel.

Mis valesti läks: õiged vastused saadeti brauserisse koos küsimustega, nii et uudishimulik õpilane sai need lehe lähtekoodist lugeda. Õpilased said ka korduvalt esitada, kuni jõudsid 100%.

Parandusprompt:

Ära saada õigeid vastuseid brauserisse. Kontrolli vastuseid serveris pärast esitamist. Luba üks esitus õpilase nime kohta viktoriini kohta ja näita õpetajale, kui keegi proovib uuesti.

Õppetund: brauser kuulub kasutajale. Kõike, mis seal on, saab lugeda.

8. Väike AI-tööriist

Kes seda ehitab: turundajad, kirjutajad ja asutajad, kes tahavad kitsast AI-abilist.

Esimene prompt:

Ehita tööriist, mis teeb tootekirjeldusest viis sotsiaalmeedia postitust erinevates toonides (sõbralik, ekspertlik, mängulik, lühike, pikk). Kasuta AI API-t. Kleepin kirjelduse, valin platvormi ja saan postitused koos kopeerimisnuppudega.

Mis valesti läks: esimene versioon kutsus AI-teenust otse brauserist, API-võti oli lehel, kust igaüks sai selle kopeerida ja tekitada suure arve.

Parandusprompt:

Liiguta AI-kõne serverisse. Hoia API-võtit saladusena, mitte kunagi esikülje koodis. Piira iga külastaja 20 genereerimisega päevas.

Õppetund: võtmed kuuluvad serveri saladustesse. Vaata lehte kuidas hoida API-võtmeid turvaliselt ja kuidas lisada AI-funktsioone oma rakendusse.

9. Araabia- ja inglisekeelne ettevõtte veebisait

Kes seda ehitab: ettevõtted Pärsia lahe piirkonnas ja laiemas araabia maailmas, kes teenindavad kahte keelt.

Esimene prompt:

Ehita mu sisekujunduse ettevõttele veebisait araabia ja inglise keeles keelevahetusega. Lehed: avaleht, teenused, portfell, meist ja kontakt. Araabia keel peab olema täielikult paremalt vasakule.

Mis valesti läks: araabiakeelne tekst oli paremale joondatud, kuid paigutust ei peegeldatud: nooled näitasid valesti ja menüü oli vales kohas. Ka telefoninumbrid kuvati mõnes kohas tagurpidi.

Parandusprompt:

Araabia keeles peegelda kogu paigutus: sea lehe suund paremalt vasakule, pane menüü paremale, pööra suunda näitavad ikoonid ja hoia telefoninumbrid ning e-posti aadressid araabia teksti sees vasakult paremale.

Õppetund: paremalt vasakule on paigutus, mitte joondus. Mythex käsitleb araabia ja teisi paremalt vasakule paigutusi ning sa saad prompti kirjutada otse araabia keeles.

10. Jälgija, mis muutub telefonirakenduseks

Kes seda ehitab: treenerid, jõusaalid ja kogukonnagrupid, kelle kasutajad elavad oma telefonides.

Esimene prompt:

Ehita mu isiklike treeningklientide jaoks treeninglogi. Iga klient logib sisse, näeb nädala plaani, mille ma talle määrasin, märgib ära harjutused ja salvestab raskused. Mina näen iga kliendi edusamme diagrammil.

Mis valesti läks: veebirakendus töötas, kuid telefonidel olid nupud treeningu ajal liiga väikesed, et neid puudutada, ja diagramm polnud loetav.

Parandusprompt:

Kujunda see kasutamiseks ühe käega telefonil: suured puutealad ekraani allosas, üks harjutus ekraani kohta suurte nuppudega „Järgmine“ ja „Valmis“ ning lihtne nädala edusammude diagramm.

Õppetund: kui inimesed kasutavad seda telefonil, kujunda esmalt telefoni jaoks. Mythex Pro-paketis saab avaldatud rakenduse muuta seejärel Android-rakenduseks Google Playle ja iPhone'i rakenduseks, mis saadetakse TestFlighti; telefonirakendus avab sinu avaldatud rakenduse, seega uuendab iga avaldamine seda. Vaata lehte mobiilirakenduse looja.

Näidete taga olevad mustrid

Kõik kümme näidet jagunevad mõne rühma vahel:

Neist ükski ei eelda, et loeksid koodi. Need eeldavad, et testid nagu uudishimulik ja pisut vaenulik kasutaja ning kirjeldad täpselt, mida näed.

Proovi ise

Valige näide, mis on su ideele kõige lähedasem, kopeeri selle esimene prompt ja muuda detaile. Seejärel kasuta parandusprompti kontrollnimekirjana enne jagamist. Meie vibe coding promptide spikker sisaldab veel 30, ja kuidas ehitada rakendus vibe codingu abil käib ühe projekti läbi ideest avaldatud rakenduseni. Kui oled valmis, alusta AI-rakenduse loojas või vaata malle, et saada alguse.

Küsimused