Vibe coding -esimerkit: 10 oikeaa sovellustyyppiä, kehotteet ja mikä meni pieleen

Yleisimmät vibe coding -esimerkit ovat pieniä, hyödyllisiä verkkosovelluksia: seurantatyökaluja, varauslomakkeita, sisäisiä työkaluja, asiakasportaaleja, laskeutumissivuja, kyselyitä, kojelautoja ja yksinkertaisia tekoälytyökaluja. Alla on kymmenen niistä. Jokaisesta näet, kuka sen rakentaa, ensimmäisen kehotteen, mikä yleensä menee pieleen ja jatkokehotteen, joka korjaa ongelman.

Nämä ovat yhdistelmiä projekteista, joita ihmiset useimmin tuovat tekoälysovellusrakentajille, eivät yhden henkilön tapaustutkimuksia. Kehotteet ovat kopioitavissa. Virheet ovat niitä, jotka toistuvat yhä uudelleen, ja siksi ne ovat hyödyllisin osa. Jos vibe coding itsessään on sinulle uutta, aloita mitä vibe coding on.

1. Henkilökohtainen budjettiseuranta

Kuka sen rakentaa: yksityishenkilöt, jotka ovat yrittäneet taulukoita ja luovuttaneet.

Ensimmäinen kehote:

Rakenna kuukausittainen budjettiseuranta. Lisään kulut summalla, kategorialla (ruoka, vuokra, liikenne, vapaa-aika, muu), päivämäärällä ja muistiinpanolla. Näytä tämän kuukauden yhteissumma kategorioittain pylväskaaviona ja lista viimeisimmistä kuluista. Voin asettaa budjetin kategorioittain ja nähdä, paljonko on jäljellä.

Mikä meni pieleen: kaavio laski jokaisen koskaan syötetyn kulun, ei vain tämän kuukauden, joten toisen kuukauden jälkeen jokainen kategoria näytti ylitetyltä. Lisäksi pilkulla kirjoitetut summat ("1,200") tallennettiin arvona 1.

Korjauskehote:

Kaavion ja summien pitää sisältää vain valitun kuukauden kulut. Lisää kuukausivalitsin yläreunaan, oletuksena nykyinen kuukausi. Hyväksy myös pilkuilla tai välilyönneillä kirjoitetut summat ja tallenna ne numeroina.

Opetus: "tämä kuukausi" on sääntö. Sano säännöt ääneen.

2. Varauslomake pienelle kampaamolle

Kuka sen rakentaa: pienyrittäjät, jotka ovat kyllästyneet varaamaan puhelimitse ja viesteillä.

Ensimmäinen kehote:

Rakenna varauslomake kampaamolleni. Asiakas valitsee palvelun, päivämäärän ja vapaan aikavälin ja antaa sitten nimensä ja puhelinnumeronsa. Minulla on yksityinen ylläpitosivu kirjautumisen takana, joka näyttää varaukset päivittäin.

Mikä meni pieleen: kaksi asiakasta varasi saman klo 10:00 ajan minuutin välein, koska sivu tarkisti vapautta vain ladattaessa. 90 minuutin värjäysvaraus ei myöskään estänyt sitä seuraavia aikoja.

Korjauskehote:

Kun asiakas lähettää varauksen, tarkista palvelimella, että jokainen sen kattama aikaväli on yhä vapaa, ja hylkää varaus viestillä "Tuo aika varattiin juuri", jos ei ole. Palvelu varaa koko kestonsa, joten 90 minuutin varaus klo 10:00 varaa klo 10:00, 10:30 ja 11:00.

Opetus: kaikkeen, mitä kaksi ihmistä voi tehdä samaan aikaan, tarvitaan palvelinpuolen tarkistus. Katso miten rakennetaan varaussovellus täydellisen version vuoksi.

3. Ravintolan ruokalista QR-koodilla

Kuka sen rakentaa: kahvilan ja ravintolan omistajat, jotka tulostavat ruokalistat liian usein uudelleen.

Ensimmäinen kehote:

Rakenna mobiiliruokalistasivu kahvilalleni. Osiot aamupalalle, lounaalle, juomille ja jälkiruoille, jokaisessa kohteessa nimi, hinta, lyhyt kuvaus ja ruokavaliomerkinnät (vegaani, gluteeniton). Tarvitsen ylläpitosivun, jolla muokkaan kohteita ja merkitsen ne loppuneiksi. Näytä tulostettava QR-koodi, joka linkittää listaan.

Mikä meni pieleen: mitään ei hajonnut, mutta ruokalista oli hidas kahvilan Wi-Fi:llä, koska jokaiselle kohteelle ladattiin täysikokoisia puhelinkuvia.

Korjauskehote:

Ruokalistakuvat ovat liian raskaita. Muuta ladatut kuvat enintään 800 pikselin leveyksi, pakkaa ne ja lataa ne laiskasti vierityksen mukaan.

Opetus: testaa hitaalla yhteydellä, älä vain toimistossasi.

4. Laitteiden tai varaston seuranta tiimille

Kuka sen rakentaa: operatiivisen puolen ihmiset, jotka korvaavat yhteisen taulukon.

Ensimmäinen kehote:

Rakenna varastotyökalu varastotiimillemme. Tuotteilla on nimi, SKU, määrä, sijainti ja vähimmäismäärä. Henkilökunta kirjautuu sisään, voi lisätä varastoa, poistaa varastoa perusteella ja nähdä listan vähimmäismäärän alle jääneistä tuotteista punaisella. Säilytä historia jokaisesta muutoksesta ja siitä, kuka sen teki.

Mikä meni pieleen: historiassa lukee "käyttäjä 3" nimen sijaan, ja varaston poistaminen enemmän kuin oli saatavilla teki määrästä negatiivisen.

Korjauskehote:

Näytä historiassa henkilön nimi, ei hänen tunnustaan. Älä salli poistoa, joka veisi määrän nollan alle; näytä sen sijaan "Varastossa vain 4".

Opetus: kuvaa, mikä pitäisi olla mahdotonta, ei vain se, mikä pitäisi olla mahdollista. Oppaamme varastosovelluksen rakentamisesta kattaa loput.

5. Asiakasportaali freelancerille tai studiolle

Kuka sen rakentaa: suunnittelijat, kirjanpitäjät, konsultit ja toimistot.

Ensimmäinen kehote:

Rakenna asiakasportaali. Kutsun asiakkaat sähköpostilla. Jokainen asiakas kirjautuu sisään ja näkee vain omat projektinsa, tiedostonsa ja laskunsa ja voi jättää kommentteja. Kirjaudun ylläpitäjänä ja näen kaiken.

Mikä meni pieleen: tämä on listan tärkein virhe. Sivut näyttivät jokaiselle asiakkaalle vain hänen omat projektinsa, mutta palvelin palautti minkä tahansa projektin, jos osoiteriviin vaihtoi numeron. Asiakkaana klikkailtaessa tätä ei koskaan huomannut.

Korjauskehote:

Tarkista jokainen palvelimen reitti, joka palauttaa projekteja, tiedostoja, kommentteja tai laskuja. Jokaisen pitää varmistaa, että kirjautunut asiakas omistaa tietueen, ja muuten palauttaa "ei löytynyt". Testaa sitten: kirjaudu asiakkaana A ja yritä avata asiakkaan B projekti sen tunnuksella.

Opetus: jotain näytöllä piilottaminen ei ole sama asia kuin sen suojaaminen. Lisää tästä kohdassa onko vibe coding turvallista?.

6. Laskeutumissivu odotuslistalla

Kuka sen rakentaa: perustajat, jotka testaavat ideaa ennen sen rakentamista.

Ensimmäinen kehote:

Rakenna laskeutumissivu sovellukselle, joka auttaa opettajia aikatauluttamaan oppitunteja ja keräämään maksuja. Pääotsikko, alaotsikko, sähköpostirekisteröityminen, kolme hyötyä, osio siitä, miten se toimii, ja UKK. Tallenna rekisteröitymiset päivämäärineen tietokantaan, ja anna minun ladata ne CSV-tiedostona yksityiseltä sivulta.

Mikä meni pieleen: muutamassa päivässä listaan kertyi roskarekisteröitymisiä botteilta, ja sivulla ei ollut otsikkoa tai kuvausta, joten jaetut linkit näyttivät tyhjän esikatselun.

Korjauskehote:

Lisää rekisteröintilomakkeeseen perussuojaus botteja vastaan (piilotettu huijauskenttä ja raja 5 rekisteröitymistä IP-osoitetta kohden tunnissa). Lisää sivulle otsikko, meta-kuvaus ja kuva jaettavaksi sosiaalisessa mediassa.

Opetus: julkinen lomake löydetään. Katso miten rakennetaan odotuslistasivu.

7. Kyselysovellus opettajalle

Kuka sen rakentaa: opettajat ja kouluttajat, jotka haluavat jotain kevyempää kuin oppimisalustan.

Ensimmäinen kehote:

Rakenna kyselysovellus luokalleni. Luon kyselyt monivalintakysymyksillä, joissa on yksi oikea vastaus. Opiskelijat liittyvät koodilla ja etunimellään, vastaavat kysymyksiin ja näkevät lopuksi pisteensä. Näen tulostaulukon kyselyittäin.

Mikä meni pieleen: oikeat vastaukset lähetettiin selaimeen kysymysten mukana, joten utelias opiskelija pystyi lukemaan ne sivun lähdekoodista. Opiskelijat pystyivät myös lähettämään uudelleen, kunnes saivat 100 %.

Korjauskehote:

Älä lähetä oikeita vastauksia selaimeen. Tarkista vastaukset palvelimella lähetyksen jälkeen. Salli yksi lähetys opiskelijanimeä kohden kyselyä kohden, ja näytä opettajalle, jos joku yrittää uudelleen.

Opetus: selain kuuluu käyttäjälle. Kaikki siellä voidaan lukea.

8. Pieni tekoälytyökalu

Kuka sen rakentaa: markkinoijat, kirjoittajat ja perustajat, jotka haluavat keskittyneen tekoälyavustajan.

Ensimmäinen kehote:

Rakenna työkalu, joka muuttaa tuotekuvauksen viideksi somepostaukseksi eri sävyissä (ystävällinen, asiantunteva, leikkisä, lyhyt, pitkä). Käytä tekoäly-API:a. Liitän kuvauksen, valitsen alustan ja saan postaukset kopiointipainikkeilla.

Mikä meni pieleen: ensimmäinen versio kutsui tekoälypalvelua suoraan selaimesta, ja API-avain oli sivulla. Kuka tahansa pystyi kopioimaan sen ja ajamaan laskun kasvamaan.

Korjauskehote:

Siirrä tekoälykutsu palvelimelle. Tallenna API-avain salaisuutena, älä koskaan frontend-koodissa. Rajoita jokainen kävijä 20 generointiin päivässä.

Opetus: avaimet kuuluvat palvelimen salaisuuksiin. Katso miten pidät API-avaimet turvassa ja miten lisäät tekoälyominaisuuksia sovellukseesi.

9. Arabian- ja englanninkielinen yrityssivusto

Kuka sen rakentaa: Persianlahden alueen ja laajemman arabimaailman yritykset, jotka palvelevat kahta kieltä.

Ensimmäinen kehote:

Rakenna verkkosivusto sisustussuunnitteluyritykselleni arabiaksi ja englanniksi kielenvaihtajalla. Sivut: etusivu, palvelut, portfolio, tietoa meistä ja yhteystiedot. Arabian pitää olla täysin oikealta vasemmalle.

Mikä meni pieleen: arabian teksti oli kohdistettu oikealle, mutta asettelua ei peilattu: nuolet osoittivat väärään suuntaan ja valikko oli väärällä puolella. Puhelinnumerot näkyivät myös paikoin takaperin.

Korjauskehote:

Peilaa arabiankielinen asettelu kokonaan: aseta sivun suunta oikealta vasemmalle, siirrä valikko oikealle, käännä suuntanuolet ja pidä puhelinnumerot ja sähköpostit vasemmalta oikealle arabiankielisen tekstin sisällä.

Opetus: oikealta vasemmalle on asettelu, ei tasaus. Mythex hoitaa arabian ja muut oikealta vasemmalle kulkevat asettelut, ja voit kehottaa suoraan arabiaksi.

10. Seuranta, josta tulee puhelinsovellus

Kuka sen rakentaa: valmentajat, kuntosalit ja yhteisöryhmät, joiden käyttäjät elävät puhelimillaan.

Ensimmäinen kehote:

Rakenna treenipäiväkirja henkilökohtaisille valmennusasiakkailleni. Jokainen asiakas kirjautuu sisään, näkee viikolle määrätyn suunnitelman, rastittaa harjoitukset ja kirjaa painot. Näen jokaisen asiakkaan edistymisen kaaviona.

Mikä meni pieleen: verkkosovellus toimi, mutta puhelimilla painikkeet olivat liian pieniä napautettaviksi kesken treenin, eikä kaavio ollut luettavissa.

Korjauskehote:

Suunnittele tämä käytettäväksi yhdellä kädellä puhelimessa: isot napautusalueet ruudun alaosassa, yksi harjoitus per näyttö isoilla Seuraava- ja Valmis-painikkeilla sekä yksinkertainen viikoittainen edistymiskaavio.

Opetus: jos ihmiset käyttävät sitä puhelimella, suunnittele ensin puhelimelle. Mythex Pro -paketissa julkaistusta sovelluksesta voi tulla Android-sovellus Google Playhyn ja iPhone-sovellus, joka lähetetään TestFlightiin; puhelinsovellus avaa julkaistun sovelluksesi, joten jokainen julkaisu päivittää sen. Katso mobiilisovellusrakentaja.

Esimerkkien taustalla olevat kaavat

Kaikissa kymmenessä virheet jakautuvat muutamaan ryhmään:

Nämä eivät vaadi koodin lukemista. Ne vaativat testaamista kuin utelias, hieman vihamielinen käyttäjä, ja tarkkaa kuvaamista siitä, mitä näet.

Kokeile itse

Valitse esimerkki, joka on lähinnä ideaasi, kopioi sen ensimmäinen kehote ja muuta yksityiskohdat. Käytä sitten korjauskehotetta tarkistuslistana ennen kuin jaat sovelluksen. Vibe coding -kehotteiden taulukko sisältää 30 lisää, ja miten rakennetaan sovellus vibe codingilla käy yhden projektin läpi ideasta julkaistuun sovellukseen. Kun olet valmis, aloita tekoälysovellusrakentajalla tai selaa mallipohjia lähtökohdaksi.

Kysymykset