Vibe coding жишээнүүд: 10 бодит app төрөл, prompt-ууд ба юу буруу болсон бэ

Хамгийн түгээмэл vibe coding жишээнүүд нь жижиг, хэрэгтэй вэбапп-ууд юм: трекер, захиалгын хуудас, дотоод хэрэгсэл, харилцагчийн портал, landing page, квиз, dashboard, энгийн AI хэрэгсэл. Доор тэдгээрийн арвыг нь авч үзлээ. Тус бүрийн хувьд хэн бүтээдэг, эхний prompt, юу буруу болдог, мөн засах дараагийн prompt-ийг харах болно.

Эдгээр нь хүмүүсийн AI app builder-т ихэвчлэн авчирдаг төслүүдийн нэгтгэл бөгөөд нэг хүний тохиолдлын судалгаа биш. Prompt-ууд нь хуулбарлахад бэлэн. Алдаанууд нь дахин дахин гардаг тул хамгийн ашигтай хэсэг нь энэ юм. Хэрэв vibe coding өөрөө танд шинэ бол эхлээд vibe coding гэж юу вэ гэдгийг уншаарай.

1. Хувийн төсвийн трекер

Хэн бүтээдэг вэ: спредшийтээр оролдоод орхисон хувь хүмүүс.

Эхний prompt:

Сарын төсвийн трекер бүтээ. Би дүн, ангилал (хоол, түрээс, тээвэр, зугаа, бусад), огноо, тэмдэглэл бүхий зардлуудыг нэмнэ. Энэ сарын нийт ангиллын дүнг баганан диаграмаар, сүүлийн зардлуудын жагсаалтыг харуулаарай. Ангилал бүрт төсөв тогтоож, үлдсэн мөнгийг харуулаарай.

Юу буруу болсон бэ: диаграм бүх зардлыг, зөвхөн энэ сарынхыг биш, тооцсон тул хоёр дахь сарад ангилал бүр хэтрэлттэй харагдсан. Үүнээс гадна "1,200" гэж таслалтай бичсэн дүнг 1 гэж хадгалсан.

Засах prompt:

Диаграм болон нийт дүн зөвхөн сонгосон сарын зардлуудыг оруулах ёстой. Дээр сар сонгогч нэм, анхдагчаар одоогийн сарыг сонго. Мөн таслал эсвэл зайтай бичсэн дүнг хүлээн авч, тоо болгон хадгалаарай.

Сургамж: "энэ сар" гэдэг нь дүрэм юм. Дүрмээ дуугарч хэл.

2. Жижиг гоо засалтын газрын захиалгын хуудас

Хэн бүтээдэг вэ: утсаар болон DM-ээр захиалга авахаас залхсан жижиг бизнесийн эзэд.

Эхний prompt:

Миний үсчний газарт зориулсан захиалгын хуудас бүтээ. Харилцагч үйлчилгээ, огноо, сул цагийн цонх сонгож, нэр, утасны дугаараа оруулна. Нэвтрэлтийн ард хувийн админ хуудас байж, захиалгуудыг өдрөөр харуулна.

Юу буруу болсон бэ: хоёр харилцагч нэг минутын зөрүүтэй 10:00 цагийн цонхыг захиалсан, учир нь хуудас зөвхөн анх ачаалахдаа боломжтой эсэхийг шалгадаг байсан. Мөн 90 минутын өнгө будгийн захиалга дараагийн цонхнуудыг хаадаггүй байсан.

Засах prompt:

Харилцагч захиалга илгээхэд сервер дээр тухайн захиалгын бүх цонх сул эсэхийг шалгаж, сул биш бол "Энэ цаг дөнгөж аль хэдийн авагдлаа" гэсэн мессежтэйгээр татгалзаарай. Үйлчилгээ нь бүтэн урттайгаа эзэлдэг тул 10:00-д эхэлсэн 90 минутын захиалга 10:00, 10:30, 11:00-ыг хаана.

Сургамж: хоёр хүн зэрэг хийж болох бүх зүйлд серверийн талд шалгалт хэрэгтэй. Бүрэн хувилбарыг захиалгын app яаж бүтээх вэ хэсгээс харна уу.

3. QR кодтой рестораны цэс

Хэн бүтээдэг вэ: цэсээ хэт олон удаа дахин хэвлүүлдэг кафе, рестораны эзэд.

Эхний prompt:

Миний кафед зориулсан гар утсанд ээлтэй цэсний вэбсайт бүтээ. Өглөөний цай, үдийн хоол, ундаа, амттан гэсэн хэсгүүд, зүйл бүрт нэр, үнэ, товч тайлбар, хоолны шошго (веган, глютенгүй). Зүйлсийг засах, "дууссан" гэж тэмдэглэх админ хуудас хэрэгтэй. Цэс рүү холбох, хэвлэх боломжтой QR код харуулаарай.

Юу буруу болсон бэ: юу ч эвдэрсэнгүй, гэхдээ кафены Wi-Fi дээр цэс удаан байсан, учир нь зүйл бүрт утасны бүтэн хэмжээтэй зургууд ачаалагдаж байсан.

Засах prompt:

Цэсний зургууд хэт хүнд байна. Байршуулсан зургуудыг хамгийн ихдээ 800px өргөнтэй болгож, шахаж, зочин гүйлгэх тусам ачаална уу.

Сургамж: зөвхөн өөрийн оффисоосоо биш, удаан холболт дээр туршаарай.

4. Багт зориулсан тоног төхөөрөмж эсвэл нөөцийн трекер

Хэн бүтээдэг вэ: хуваалцсан спредшийтийг сольж буй үйл ажиллагааны ажилчид.

Эхний prompt:

Манай агуулахын багт зориулсан нөөцийн хэрэгсэл бүтээ. Зүйл бүр нэр, SKU, тоо ширхэг, байршил, хамгийн бага түвшинтэй. Ажилчид нэвтэрч нөөц нэмж, шалтгаантай хасч, доор хэмжээтэй зүйлсийг улаанаар тодруулсан жагсаалтыг харах боломжтой. Өөрчлөлт бүрийн түүх, хэн хийсэн гэдгийг хадгалаарай.

Юу буруу болсон бэ: түүхэнд нэрийн оронд "хэрэглэгч 3" гэж харагдаж байсан, мөн байгаагаасаа илүү нөөц хасахад тоо сөрөг болсон.

Засах prompt:

Түүхэнд ID биш, хүний нэрийг харуул. Байгаа нөөцөөс илүү хасах боломжгүй болгож, оронд нь "Нөөцөд зөвхөн 4 байна" гэж харуулаарай.

Сургамж: юу боломжтой байхыг л биш, юу боломжгүй байх ёстойг тодорхойл. Нөөцийн app бүтээх гарын авлага үлдсэнийг тайлбарласан.

5. Фрилансер эсвэл студид зориулсан харилцагчийн портал

Хэн бүтээдэг вэ: дизайнер, нягтлагч, зөвлөхүүд болон агентлагууд.

Эхний prompt:

Харилцагчийн портал бүтээ. Би харилцагчдаа имэйлээр урина. Харилцагч бүр нэвтэрч зөвхөн өөрийн төслүүд, файлууд, нэхэмжлэхийг харж, сэтгэгдэл үлдээж чадна. Би админаар нэвтэрч бүгдийг харна.

Юу буруу болсон бэ: энэ бол жагсаалтын хамгийн чухал алдаа. Хуудсууд харилцагч бүрт зөвхөн өөрийн төслийг харуулдаг байсан ч сервер хаягийн мөрөнд дугаарыг нь солиход өөр төслийг буцаадаг байсан. Нэг харилцагчаар дэлгэц дээр дарж үзэхэд энэ нь ил гардаггүй байсан.

Засах prompt:

Төсөл, файл, сэтгэгдэл эсвэл нэхэмжлэх буцаадаг сервер бүрийн замыг шалга. Тус бүр нь нэвтэрсэн харилцагч тухайн бичлэгийн эзэн мөн эсэхийг баталж, үгүй бол "олдсонгүй" гэж буцаах ёстой. Дараа нь туршаарай: харилцагч А-аар нэвтэрч, харилцагч Б-ийн төслийг ID-аар нь нээж үз.

Сургамж: дэлгэц дээр нуусан зүйл хамгаалагдсан гэсэн үг биш. Үүний талаар vibe coding аюулгүй юу хуудсанд илүү дэлгэрэнгүй байна.

6. Жагсаалт цуглуулдаг launch page

Хэн бүтээдэг вэ: бүтээхээс өмнө санаагаа туршдаг үүсгэн байгуулагчид.

Эхний prompt:

Багш нарт хичээлийн цаг товлож, төлбөр авахад туслах app-ийн landing page бүтээ. Гол толгой, дэд гарчиг, имэйл бүртгэл, гурван давуу тал, хэрхэн ажилладаг хэсэг, FAQ. Бүртгэлийг огноотой нь мэдээллийн санд хадгалж, хувийн хуудаснаас CSV-ээр татах боломжтой болго.

Юу буруу болсон бэ: хэдхэн хоногт бүртгэлийн жагсаалт ботуудын хэрэггүй бүртгэлээр дүүрсэн, мөн хуудсанд гарчиг, тайлбар байгаагүй тул хуваалцсан холбоос хоосон харагдаж байсан.

Засах prompt:

Бүртгэлийн маягтад энгийн ботоос хамгаалалт нэм (далд honeypot талбар, IP тус бүрээс цагт 5 бүртгэлийн хязгаар). Хуудсанд гарчиг, meta тайлбар, нийгмийн сүлжээнд хуваалцах зураг нэм.

Сургамж: нийтэд нээлттэй маягтыг хэн нэгэн олдог. Хүлээлтийн жагсаалтын хуудас яаж бүтээх вэ гэдгийг харна уу.

7. Багшид зориулсан квиз app

Хэн бүтээдэг вэ: LMS-ээс илүү энгийн зүйл хүсдэг багш, сургагч нар.

Эхний prompt:

Миний ангид зориулсан квиз app бүтээ. Би олон сонголттой асуултуудтай квиз үүсгэж, асуулт бүрт нэг зөв хариулттай. Сурагчид кодоор нэгдэж, нэрээ оруулаад хариулт өгч, төгсгөлд оноогоо харна. Би квиз бүрийн үр дүнгийн хүснэгтийг харна.

Юу буруу болсон бэ: зөв хариултуудыг асуултуудтай хамт браузерт илгээж байсан тул сонирхолтой сурагч хуудасны эх кодоос уншиж болдог байсан. Мөн сурагчид 100% авах хүртэл дахин илгээж болдог байсан.

Засах prompt:

Зөв хариултыг браузерт битгий илгээ. Илгээсний дараа хариултуудыг серверт шалга. Квиз бүрт сурагчийн нэрээр нэг л илгээлт зөвшөөрч, хэн нэгэн дахин оролдвол багшид харуулаарай.

Сургамж: браузер хэрэглэгчийнх. Тэнд байгаа юу ч уншигдаж болно.

8. Жижиг AI хэрэгсэл

Хэн бүтээдэг вэ: маркетологууд, зохиолчид болон төвлөрсөн AI туслах хүсдэг үүсгэн байгуулагчид.

Эхний prompt:

Бүтээгдэхүүний тайлбарыг өөр өөр өнгө аясаар (найрсаг, мэргэжлийн, тоглоомтой, богино, урт) таван социал медиа постонд хөрвүүл. AI API ашигла. Би тайлбарыг буулгаж, платформ сонгоод, хуулах товчтой постуудыг авна.

Юу буруу болсон бэ: эхний хувилбар AI үйлчилгээг браузераас шууд дууддаг байсан, API түлхүүр хуудсан дотор байсан тул хэн ч хуулж, зардлыг нэмэгдүүлж болдог байсан.

Засах prompt:

AI дуудлагыг серверт шилжүүл. API түлхүүрийг нууц утгаар хадгал, фронтенд кодонд хэзээ ч бүү байрлуул. Зочин бүрт өдөрт 20 үүсгэлтээр хязгаарла.

Сургамж: түлхүүрүүд серверийн нууцад байх ёстой. API түлхүүрээ хэрхэн хамгаалах вэ болон app-дээрээ AI функц нэмэх нь хэсгийг харна уу.

9. Араб ба англи хэлтэй бизнесийн вэбсайт

Хэн бүтээдэг вэ: Персийн булангийн болон арабын ертөнцийн хоёр хэлээр үйлчилдэг бизнесүүд.

Эхний prompt:

Миний дотоод засалтын компанид зориулсан араб ба англи хэлтэй вэбсайт бүтээ, хэл солих товчтой. Хуудсууд: нүүр, үйлчилгээ, бүтээлийн цуглуулга, бидний тухай, холбоо барих. Араб хэл бүрэн баруунаас зүүн рүү чиглэсэн байх ёстой.

Юу буруу болсон бэ: араб текст баруун талд зохицсон ч layout нь толиор эргээгүй: сумнууд буруу чиглэж, цэс буруу талд байсан. Утасны дугаарууд зарим газарт буруугаар харагдсан.

Засах prompt:

Араб хэлний үед бүх layout-ийг толиор эргүүл: хуудасны чиглэлийг баруунаас зүүн рүү тавь, цэсийг баруун талд байрлуул, чиглэлтэй дүрсүүдийг эргүүл, араб текстийн дотор утасны дугаар болон имэйлийг зүүнээс баруун талд байлга.

Сургамж: баруунаас зүүн рүү чиглэх нь зөвхөн тэгшлэлт биш, layout юм. Mythex нь араб болон бусад баруунаас зүүн рүү чиглэсэн layout-ийг дэмждэг бөгөөд та араб хэлээр шууд prompt бичиж болно.

10. Гар утасны app болох трекер

Хэн бүтээдэг вэ: хэрэглэгчид нь утсан дээр амьдардаг дасгалжуулагч, фитнес төв, олон нийтийн бүлгүүд.

Эхний prompt:

Миний хувийн бэлтгэлийн үйлчлүүлэгчдэд зориулсан дасгалын бүртгэл бүтээ. Үйлчлүүлэгч бүр нэвтэрч, долоо хоногийн төлөвлөгөөгөө харж, дасгалуудыг тэмдэглэн, жингээ бүртгэнэ. Би үйлчлүүлэгч бүрийн явцыг диаграмаар харна.

Юу буруу болсон бэ: веб app ажилладаг байсан ч утсан дээр дасгалын үеэр товчлуурууд жижиг байж дарахад хэцүү, диаграм уншигдахааргүй байсан.

Засах prompt:

Утсан дээр нэг гараар ашиглахад зориулж бүтээ: дэлгэцийн доод хэсэгт том товчлуурууд, дэлгэц бүрт нэг дасгал, том Дараах болон Дууссан товчтой, долоо хоногийн энгийн явцын диаграмтай.

Сургамж: хэрэв хүмүүс утсан дээр ашиглах бол эхлээд утсанд зориулж зохиож. Mythex Pro дээр published app-аа Google Play-ийн Android app, TestFlight-д илгээх iPhone app болгож болно; гар утасны app нь таны published app-ийг нээдэг тул Publish бүр түүнийг шинэчилнэ. Гар утасны app builder хуудсыг үзнэ үү.

Эдгээр жишээнүүдийн ард байгаа хэв маяг

Арван жишээ бүгдэд алдаа хэдхэн бүлэгт хуваагддаг:

Эдгээрийн аль нь ч кодыг унших шаардлагагүй. Тэд танаас сониуч, бага зэрэг дайсагнасан хэрэглэгч шиг туршиж, юу харснаа нарийн тодорхойлохыг шаарддаг.

Өөрөө нэгийг туршаарай

Таны санаанд хамгийн ойр жишээг сонго, эхний prompt-ийг нь хуулж, дэлгэрэнгүйг нь өөрчил. Дараа нь засах prompt-ийг хуваалцахынхаа өмнөх хяналтын жагсаалт болгон ашигла. Бидний vibe coding prompt-ийн товч лавлах дээр 30 нэмэлт prompt байгаа, мөн vibe coding-оор app бүтээх хуудас нэг төслийг санаанаас нийтлэгдсэн app хүртэл дагуулдаг. Бэлэн болмогц AI app builder дээр эхлүүлээрэй эсвэл эхлэлд зориулж загваруудыг үзээрэй.

Асуултууд