Exemple de vibe coding: 10 tipuri reale de aplicații, prompturi și ce a mers prost

Cele mai comune exemple de vibe coding sunt aplicații web mici și utile: trackere, pagini de rezervări, instrumente interne, portaluri pentru clienți, pagini de lansare, quiz-uri, tablouri de bord și instrumente AI simple. Mai jos sunt zece dintre ele. Pentru fiecare vei vedea cine o construiește, primul prompt, ce se strică de obicei și promptul de corecție care o repară.

Sunt compozite ale proiectelor pe care oamenii le aduc cel mai des la constructorii de aplicații AI, nu studii de caz ale unei singure persoane. Prompturile pot fi copiate. Eșecurile sunt cele care revin mereu, de aceea sunt partea utilă. Dacă vibe coding-ul în sine îți este nou, începe cu ce este vibe coding-ul.

1. Un tracker de buget personal

Cine îl construiește: persoane care au încercat tabelele și au renunțat.

Primul prompt:

Construiește un tracker lunar de buget. Adaug cheltuieli cu sumă, categorie (mâncare, chirie, transport, distracție, altele), dată și o notiță. Arată totalul lunii curente pe categorie ca grafic cu bare și o listă cu cheltuielile recente. Pot seta un buget pe categorie și să văd cât mai rămâne.

Ce a mers prost: graficul număra fiecare cheltuială introdusă vreodată, nu doar pe cea din luna curentă, așa că la luna a doua orice categorie părea depășită. De asemenea, sumele scrise cu virgulă („1,200”) erau salvate ca 1.

Prompt de corecție:

Graficul și totalurile să includă doar cheltuielile din luna selectată. Adaugă în partea de sus un selector de lună, implicit luna curentă. Acceptă și sume scrise cu virgulă sau spațiu și salvează-le ca numere.

Lecția: „luna aceasta” este o regulă. Spune regulile cu voce tare.

2. O pagină de rezervări pentru un salon mic

Cine o construiește: proprietari de firme mici obosiți să primească rezervări prin telefon și mesaje.

Primul prompt:

Construiește o pagină de rezervări pentru salonul meu. Clienții aleg un serviciu, o dată și un interval liber, apoi își introduc numele și telefonul. Am o pagină privată de administrare, în spatele unei autentificări, care arată rezervările pe zile.

Ce a mers prost: două cliente au rezervat același interval de 10:00 la un minut distanță, pentru că pagina verifica disponibilitatea doar la încărcarea inițială. O rezervare de 90 de minute pentru vopsit nu bloca nici intervalele de după ea.

Prompt de corecție:

Când un client trimite o rezervare, verifică pe server că fiecare interval pe care îl acoperă este încă liber și respinge-o cu mesajul „Ora aceasta tocmai a fost ocupată” dacă nu. Un serviciu blochează toată durata lui, deci o rezervare de 90 de minute la 10:00 blochează 10:00, 10:30 și 11:00.

Lecția: orice pot face două persoane în același timp necesită o verificare pe server. Vezi cum să construiești o aplicație de rezervări pentru varianta completă.

3. Un meniu de restaurant cu cod QR

Cine îl construiește: proprietari de cafenele și restaurante care retipăresc meniurile prea des.

Primul prompt:

Construiește un site cu meniu pentru telefon pentru cafeneaua mea. Secțiuni pentru mic dejun, prânz, băuturi și deserturi, fiecare produs cu nume, preț, scurtă descriere și etichete alimentare (vegan, fără gluten). Am nevoie de o pagină de administrare ca să editez produsele și să le marchez epuizate. Arată un cod QR pe care îl pot imprima și care duce la meniu.

Ce a mers prost: nimic nu s-a stricat, dar meniul era lent pe Wi-Fi-ul cafenelei, pentru că se încărcau fotografii de telefon la dimensiune completă pentru fiecare produs.

Prompt de corecție:

Fotografiile din meniu sunt prea grele. Redimensionează imaginile încărcate la cel mult 800 px lățime, comprimă-le și încarcă-le pe măsură ce vizitatorul derulează.

Lecția: testează cu o conexiune lentă, nu doar la birou.

4. Un tracker de echipamente sau stocuri pentru o echipă

Cine îl construiește: oameni de operațiuni care înlocuiesc un tabel comun.

Primul prompt:

Construiește un instrument de inventar pentru echipa noastră din depozit. Articolele au nume, SKU, cantitate, locație și un nivel minim. Personalul se autentifică și poate adăuga stoc, scoate stoc cu un motiv și vede o listă cu articolele sub minim, evidențiate cu roșu. Păstrează un istoric al fiecărei modificări și al celui care a făcut-o.

Ce a mers prost: istoricul arăta „utilizator 3” în loc de nume, iar scoaterea unei cantități mai mari decât stocul disponibil făcea cantitatea negativă.

Prompt de corecție:

Arată în istoric numele persoanei, nu ID-ul. Nu permite o scoatere care ar duce cantitatea sub zero; afișează „Doar 4 în stoc” în schimb.

Lecția: descrie ce trebuie să fie imposibil, nu doar ce trebuie să fie posibil. Ghidul nostru despre cum construiești o aplicație de gestiune a inventarului acoperă restul.

5. Un portal pentru clienți al unui freelancer sau al unui studio

Cine îl construiește: designeri, contabili, consultanți și agenții.

Primul prompt:

Construiește un portal pentru clienți. Îi invit pe clienți prin email. Fiecare client se autentifică și vede doar proiectele, fișierele și facturile sale și poate lăsa comentarii. Eu mă autentific ca administrator și văd tot.

Ce a mers prost: acesta este cel mai important eșec din listă. Paginile arătau fiecărui client doar proiectele lui, dar serverul returna orice proiect dacă schimbai numărul din bara de adrese. Navigarea ca un singur client nu a arătat niciodată problema.

Prompt de corecție:

Verifică fiecare rută de server care returnează proiecte, fișiere, comentarii sau facturi. Fiecare trebuie să confirme că clientul autentificat este proprietarul înregistrării și să returneze „nu a fost găsit” în caz contrar. Apoi testează: autentifică-te ca clientul A și încearcă să deschizi proiectul clientului B după ID.

Lecția: a ascunde ceva pe ecran nu înseamnă a-l proteja. Mai multe despre asta în este vibe coding-ul sigur?.

6. O pagină de lansare cu listă de așteptare

Cine o construiește: fondatori care își testează o idee înainte să o construiască.

Primul prompt:

Construiește o pagină de lansare pentru o aplicație care ajută meditatorii să-și programeze lecțiile și să încaseze plăți. Titlu principal, subtitlu, înscriere prin email, trei beneficii, o secțiune cum funcționează și o secțiune FAQ. Salvează înscrierile într-o bază de date cu data și lasă-mă să le descarc ca CSV dintr-o pagină privată.

Ce a mers prost: în câteva zile lista s-a umplut cu înscrieri de gunoi făcute de boți, iar pagina nu avea titlu sau descriere, așa că linkurile partajate arătau o previzualizare goală.

Prompt de corecție:

Adaugă protecție de bază împotriva botilor la formularul de înscriere (un câmp ascuns de capcană și o limită de 5 înscrieri pe IP pe oră). Adaugă un titlu de pagină, o meta descriere și o imagine pentru partajarea pe rețele sociale.

Lecția: un formular public va fi găsit. Vezi cum construiești o pagină de listă de așteptare.

7. O aplicație de quiz pentru un profesor

Cine o construiește: profesori și formatori care vor ceva mai ușor decât un LMS.

Primul prompt:

Construiește o aplicație de quiz pentru clasa mea. Creez quiz-uri cu întrebări cu variante multiple și un singur răspuns corect. Elevii intră cu un cod și prenumele lor, răspund la întrebări și văd scorul la final. Văd un tabel cu rezultatele fiecărui quiz.

Ce a mers prost: răspunsurile corecte erau trimise în browser împreună cu întrebările, așa că un elev curios le putea citi în codul sursă al paginii. Elevii puteau, de asemenea, să retrimită până când ajungeau la 100%.

Prompt de corecție:

Nu trimite răspunsurile corecte în browser. Verifică răspunsurile pe server după trimitere. Permite o singură trimitere per nume de elev și per quiz și arată profesorului dacă cineva încearcă din nou.

Lecția: browserul aparține utilizatorului. Orice este acolo poate fi citit.

8. Un instrument AI mic

Cine îl construiește: marketeri, scriitori și fondatori care vor un ajutor AI concentrat.

Primul prompt:

Construiește un instrument care transformă o descriere de produs în cinci postări pentru rețele sociale, pe tonuri diferite (prietenos, expert, jucăuș, scurt, lung). Folosește un API AI. Lipesc descrierea, aleg o platformă și primesc postările cu butoane de copiere.

Ce a mers prost: prima versiune apela serviciul AI direct din browser, cu cheia API în pagină, unde oricine o putea copia și putea umfla factura.

Prompt de corecție:

Mută apelul AI pe server. Păstrează cheia API ca secret, niciodată în codul de frontend. Limitează fiecare vizitator la 20 de generări pe zi.

Lecția: cheile trebuie să stea în secrete pe server. Vezi cum păstrezi cheile API în siguranță și cum adaugi funcții AI în aplicația ta.

9. Un site de business în arabă și engleză

Cine îl construiește: firme din Golf și din lumea arabă mai largă care servesc două limbi.

Primul prompt:

Construiește un site pentru firma mea de design interior, în arabă și engleză, cu un comutator de limbă. Pagini: acasă, servicii, portofoliu, despre și contact. Araba trebuie să fie complet de la dreapta la stânga.

Ce a mers prost: textul arab era aliniat la dreapta, dar aspectul nu era oglindit: săgețile arătau în direcția greșită și meniul era pe partea greșită. Numerele de telefon apăreau și ele invers în unele locuri.

Prompt de corecție:

În arabă, oglindește întregul aspect: setează direcția paginii de la dreapta la stânga, pune meniul în dreapta, întoarce iconițele direcționale și păstrează numerele de telefon și adresele de email de la stânga la dreapta în textul arab.

Lecția: scrierea de la dreapta la stânga este un aspect, nu o aliniere. Mythex gestionează araba și alte aspecte de la dreapta la stânga, iar poți scrie prompturi direct în arabă.

10. Un tracker care devine aplicație de telefon

Cine o construiește: antrenori, săli de fitness și grupuri comunitare ai căror utilizatori stau pe telefon.

Primul prompt:

Construiește un jurnal de antrenament pentru clienții mei de fitness personal. Fiecare client se autentifică, vede planul pe săptămâna respectivă, bifează exercițiile și notează greutățile. Văd progresul fiecărui client pe un grafic.

Ce a mers prost: aplicația web funcționa, dar pe telefoane butoanele erau prea mici ca să le atingi în timpul antrenamentului, iar graficul era ilizibil.

Prompt de corecție:

Proiecteaz-o pentru utilizare cu o singură mână pe telefon: zone mari de atingere în partea de jos a ecranului, un exercițiu pe ecran, cu butoane mari Următorul și Gata, și un grafic simplu cu progresul săptămânal.

Lecția: dacă oamenii o vor folosi pe telefon, proiectează întâi pentru telefon. Pe Mythex Pro, aplicația publicată poate deveni apoi o aplicație Android pentru Google Play și o aplicație iPhone trimisă în TestFlight; aplicația de telefon deschide aplicația ta publicată, deci fiecare Publish o actualizează. Vezi pagina constructor de aplicații mobile.

Modelele din spatele acestor exemple

În toate cele zece, eșecurile intră în câteva grupe:

Nimic din toate acestea nu cere să citești cod. Cer să testezi ca un utilizator curios și ușor ostil și să descrii precis ce vezi.

Încearcă unul singur

Alege exemplul cel mai apropiat de ideea ta, copiază primul prompt și schimbă detaliile. Apoi folosește promptul de corecție ca listă de verificare înainte să o distribui. Cheat sheet-ul nostru cu prompturi de vibe coding are alte 30, iar cum construiești o aplicație cu vibe coding parcurge un proiect de la idee la aplicație publicată. Când ești gata, pornește-l în constructorul de aplicații AI sau caută șabloane pentru un punct de plecare.

Întrebări