Mga Halimbawa ng Vibe Coding: 10 Totoong Uri ng App, Prompt at Mga Nagkamali

Ang pinakakaraniwang halimbawa ng vibe coding ay maliliit at kapaki-pakinabang na web app: mga tracker, booking page, internal tool, client portal, landing page, quiz, dashboard at simpleng AI tool. Narito ang sampu sa mga ito. Para sa bawat isa, makikita mo kung sino ang gumagawa, ang unang prompt, ano ang kadalasang nagkakamali, at ang follow-up prompt na nag-aayos nito.

Pinagsama-samang halimbawa ang mga ito ng mga proyektong madalas dalhin ng mga tao sa AI app builder, hindi case study ng iisang tao. Puwedeng kopyahin ang mga prompt. Ang mga pagkabigo ay ang mga paulit-ulit na lumilitaw, kaya sila ang pinakakapaki-pakinabang na bahagi. Kung bago pa sa iyo ang vibe coding mismo, magsimula sa ano ang vibe coding.

1. Personal na budget tracker

Sino ang gumagawa nito: mga indibidwal na sumubok ng spreadsheet at sumuko.

Unang prompt:

Gumawa ng buwanang budget tracker. Nagdaragdag ako ng mga gastos na may halaga, kategorya (pagkain, upa, transport, saya, iba pa), petsa at tala. Ipakita ang kabuuan ng buwang ito bawat kategorya bilang bar chart at listahan ng mga kamakailang gastos. Puwede akong magtakda ng budget bawat kategorya at makita kung magkano pa ang natitira.

Ano ang nagkamali: binilang ng chart ang bawat gastos na nailagay kailanman, hindi lang ng buwang ito, kaya pagdating ng ikalawang buwan, mukhang sobra ang gastos ng bawat kategorya. Bukod pa rito, ang halagang tinype na may kuwit ("1,200") ay na-save bilang 1.

Follow-up prompt para ayusin:

Ang chart at mga kabuuan ay dapat kasama lang ang mga gastos ng piniling buwan. Maglagay ng month picker sa itaas, na nakatakda sa kasalukuyang buwan. Tanggapin din ang halagang may kuwit o espasyo at i-save ito bilang numero.

Aral: ang "buwang ito" ay isang patakaran. Sabihin nang malakas ang mga patakaran.

2. Booking page para sa maliit na salon

Sino ang gumagawa nito: mga may-ari ng maliit na negosyo na pagod nang mag-book sa telepono at DM.

Unang prompt:

Gumawa ng booking page para sa salon ko. Pipili ang customer ng serbisyo, petsa at libreng time slot, tapos ilalagay ang pangalan at numero ng telepono. May pribadong admin page ako, sa likod ng login, na nagpapakita ng mga booking bawat araw.

Ano ang nagkamali: dalawang customer ang nag-book ng parehong 10:00 slot sa loob ng isang minuto, dahil tiningnan lang ng page ang availability noong unang na-load ito. Hindi rin hinarang ng 90-minutong colour booking ang mga slot na kasunod nito.

Follow-up prompt para ayusin:

Kapag nagsumite ng booking ang customer, suriin sa server na malaya pa ang bawat slot na sakop nito, at tanggihan ito na may mensaheng "Kakaubos lang ng oras na iyan" kung hindi. Hinaharangan ng serbisyo ang buong haba nito, kaya ang 90-minutong booking sa 10:00 ay humaharang sa 10:00, 10:30 at 11:00.

Aral: anumang bagay na puwedeng gawin ng dalawang tao nang sabay ay nangangailangan ng server-side na pagsusuri. Tingnan ang paano gumawa ng booking app para sa buong bersyon.

3. Menu ng restaurant na may QR code

Sino ang gumagawa nito: mga may-ari ng café at restaurant na madalas mag-imprenta ng menu.

Unang prompt:

Gumawa ng mobile menu website para sa café ko. Mga seksyon para sa almusal, tanghalian, inumin at dessert, bawat item ay may pangalan, presyo, maikling deskripsyon at dietary tags (vegan, gluten-free). Kailangan ko ng admin page para i-edit ang mga item at markahan ang mga nauubos na. Ipakita ang QR code na puwede kong i-print at tumuturo sa menu.

Ano ang nagkamali: walang nasira, pero mabagal ang menu sa Wi-Fi ng café dahil full-size na larawan mula sa telepono ang nilo-load para sa bawat item.

Follow-up prompt para ayusin:

Masyadong mabigat ang mga larawan ng menu. I-resize ang na-upload na larawan sa pinakamataas na 800px ang lapad, i-compress ang mga ito at i-load nang lazy habang nag-i-scroll ang bisita.

Aral: subukan sa mabagal na koneksyon, hindi lang sa opisina mo.

4. Tracker ng kagamitan o stock para sa team

Sino ang gumagawa nito: mga tao sa operations na pumapalit sa shared na spreadsheet.

Unang prompt:

Gumawa ng inventory tool para sa warehouse team namin. May pangalan, SKU, dami, lokasyon at minimum na level ang mga item. Nag-log in ang staff at puwedeng magdagdag ng stock, magbawas ng stock na may dahilan, at makita ang listahan ng mga item na mas mababa sa minimum na naka-highlight sa pula. Panatilihin ang kasaysayan ng bawat pagbabago at kung sino ang gumawa nito.

Ano ang nagkamali: ang kasaysayan ay nagpakita ng "user 3" sa halip na mga pangalan, at ang pagbawas ng mas maraming stock kaysa available ay nagpababa ng dami sa negatibo.

Follow-up prompt para ayusin:

Ipakita ang pangalan ng tao sa kasaysayan, hindi ang ID niya. Huwag payagan ang pagbabawas na magpapababa ng dami sa ibaba ng zero; ipakita ang "4 na lang ang stock" sa halip.

Aral: ilarawan kung ano ang hindi dapat mangyari, hindi lang kung ano ang dapat mangyari. Sakop ng aming gabay sa paggawa ng inventory app ang iba pa.

5. Client portal para sa freelancer o studio

Sino ang gumagawa nito: mga designer, accountant, consultant at agency.

Unang prompt:

Gumawa ng client portal. Nag-iimbita ako ng mga client sa pamamagitan ng email. Nag-log in ang bawat client at nakikita lang ang sarili nilang mga proyekto, file at invoice, at puwedeng mag-iwan ng komento. Mag-log in ako bilang admin at makita ang lahat.

Ano ang nagkamali: ito ang pinakamahalagang pagkabigo sa listahan. Ang mga page ay nagpapakita lang ng sariling proyekto ng bawat client, pero ibinabalik ng server ang anumang proyekto kapag binago ang numero sa address bar. Hindi ito nalantad sa pag-click-click bilang isang client.

Follow-up prompt para ayusin:

Suriin ang bawat server route na nagbabalik ng mga proyekto, file, komento o invoice. Dapat kumpirmahin ng bawat isa na pag-aari ng naka-log in na client ang record, at ibalik ang "not found" kung hindi. Pagkatapos, subukan: mag-log in bilang client A at subukang buksan ang proyekto ng client B gamit ang ID nito.

Aral: ang pagtatago ng isang bagay sa screen ay hindi katulad ng pagprotekta nito. Higit pa rito sa ligtas ba ang vibe coding?.

6. Launch page na may waitlist

Sino ang gumagawa nito: mga founder na sumusubok ng ideya bago ito buuin.

Unang prompt:

Gumawa ng landing page para sa app na tumutulong sa mga tutor na mag-iskedyul ng aralin at mangolekta ng bayad. Hero headline, subheading, email sign-up, tatlong benepisyo, seksyong paano ito gumagana at FAQ. I-save ang mga sign-up sa database kasama ang petsa, at hayaan akong i-download ang mga ito bilang CSV mula sa pribadong page.

Ano ang nagkamali: sa loob ng ilang araw, napuno ang listahan ng mga basurang sign-up mula sa bot, at walang title o deskripsyon ang page, kaya blangko ang preview ng mga naibahaging link.

Follow-up prompt para ayusin:

Maglagay ng pangunahing proteksyon laban sa bot sa sign-up form (isang nakatagong honeypot field at limitasyon na 5 sign-up bawat IP bawat oras). Magdagdag ng page title, meta description at larawan para sa social sharing.

Aral: may makakahanap sa pampublikong form. Tingnan ang paano gumawa ng waitlist page.

7. Quiz app para sa guro

Sino ang gumagawa nito: mga guro at trainer na gusto ng mas magaan kaysa sa LMS.

Unang prompt:

Gumawa ng quiz app para sa klase ko. Gumagawa ako ng quiz na may multiple-choice na tanong at isang tamang sagot bawat isa. Sumasali ang mga estudyante gamit ang code at unang pangalan nila, sumasagot sa mga tanong, at nakikita ang iskor sa dulo. Nakikita ko ang talahanayan ng resulta bawat quiz.

Ano ang nagkamali: ipinadala ang mga tamang sagot sa browser kasabay ng mga tanong, kaya nababasa ito ng sinumang mausisang estudyante sa page source. Puwede ring magsumite ulit ang mga estudyante hanggang makakuha sila ng 100%.

Follow-up prompt para ayusin:

Huwag ipadala ang mga tamang sagot sa browser. Suriin ang mga sagot sa server pagkatapos ng pagsusumite. Isang pagsusumite lang bawat pangalan ng estudyante bawat quiz ang payagan, at ipakita sa guro kung may sumubok ulit.

Aral: pag-aari ng user ang browser. Anumang nasa loob nito ay maaaring mabasa.

8. Maliit na AI tool

Sino ang gumagawa nito: mga marketer, manunulat at founder na gustong ng nakatutok na AI na katulong.

Unang prompt:

Gumawa ng tool na nagko-convert ng deskripsyon ng produkto sa limang social media post sa iba't ibang tono (palakaibigan, eksperto, masaya, maikli, mahaba). Gumamit ng AI API. Idi-paste ko ang deskripsyon, pipili ng platform, at makukuha ko ang mga post na may copy button.

Ano ang nagkamali: tinawag ng unang bersyon ang AI service nang direkta mula sa browser, at nasa loob ng page ang API key, kaya kahit sino ay puwedeng kopyahin ito at palakihin ang bill.

Follow-up prompt para ayusin:

Ilipat ang AI call sa server. I-save ang API key bilang secret, hindi kailanman sa frontend code. Limitahan ang bawat bisita sa 20 generation bawat araw.

Aral: dapat nasa secrets sa server ang mga key. Tingnan ang paano panatilihing ligtas ang API keys at paano magdagdag ng AI features sa app mo.

9. Website ng negosyo sa Arabic at English

Sino ang gumagawa nito: mga negosyo sa Gulf at sa mas malawak na mundong Arabo na naglilingkod sa dalawang wika.

Unang prompt:

Gumawa ng website para sa interior design company ko sa Arabic at English, na may language switch. Mga page: home, serbisyo, portfolio, tungkol at contact. Dapat ganap na right-to-left ang Arabic.

Ano ang nagkamali: nakahanay sa kanan ang Arabic na teksto, pero hindi na-mirror ang layout: nakaturo pa rin sa maling direksyon ang mga arrow at nasa maling panig ang menu. May ilang numero ng telepono ding lumabas nang paatras.

Follow-up prompt para ayusin:

Sa Arabic, i-mirror ang buong layout: itakda ang direksyon ng page sa right-to-left, ilagay ang menu sa kanan, i-flip ang mga directional icon, at panatilihing kaliwa-papuntang-kanan ang mga numero ng telepono at email sa loob ng Arabic na teksto.

Aral: ang right-to-left ay layout, hindi pag-align lang. Kayang hawakan ng Mythex ang Arabic at iba pang right-to-left na layout, at puwede kang mag-prompt nang direkta sa Arabic.

10. Tracker na nagiging phone app

Sino ang gumagawa nito: mga coach, gym at community group na nasa telepono ang mga user.

Unang prompt:

Gumawa ng workout log para sa mga personal training client ko. Nag-log in ang bawat client, nakikita ang planong itinakda ko para sa linggo, minamarkahan ang mga ehersisyo at itinatala ang mga timbang. Nakikita ko ang progreso ng bawat client sa chart.

Ano ang nagkamali: gumana ang web app, pero sa telepono ay napakaliit ng mga button para pindutin habang nag-eehersisyo at hindi mabasa ang chart.

Follow-up prompt para ayusin:

Idisenyo ito para sa paggamit ng isang kamay sa telepono: malalaking tap target sa ibabang bahagi ng screen, isang ehersisyo bawat screen na may malalaking Next at Done na button, at simpleng weekly progress chart.

Aral: kung gagamitin ito ng mga tao sa telepono, idisenyo muna para sa telepono. Sa Mythex Pro, ang na-publish na app ay puwedeng maging Android app para sa Google Play at iPhone app na ipinapadala sa TestFlight; binubuksan ng phone app ang na-publish mong app, kaya ina-update ito ng bawat Publish. Tingnan ang mobile app builder na page.

Ang mga pattern sa likod ng mga halimbawang ito

Sa sampung ito, ang mga pagkabigo ay nahahati sa ilang grupo:

Wala sa mga ito ang nangangailangan na magbasa ka ng code. Kailangan lang nilang subukan mo tulad ng isang mausisa at medyo mapanuring user, at ilarawan nang tumpak ang nakikita mo.

Subukan ang isa

Piliin ang halimbawang pinakamalapit sa ideya mo, kopyahin ang unang prompt nito, at baguhin ang mga detalye. Pagkatapos, gamitin ang fix prompt bilang checklist bago mo ito ibahagi. May 30 pa ang aming cheat sheet ng vibe coding prompts, at dinadala ka ng paano gumawa ng app gamit ang vibe coding mula sa ideya hanggang sa na-publish na app. Kapag handa ka na, simulan ito sa AI app builder o tumingin ng templates para sa panimulang tulong.

Mga tanong