Примери за vibe coding: 10 вистински типови апликации, упатства и што тргна наопаку

Најчестите примери за vibe coding се мали, корисни веб-апликации: следилки, страници за резервации, внатрешни алатки, клиентски портали, целни страници, квизови, табли и едноставни AI алатки. Подолу се десет од нив. За секоја ќе видите кој ја гради, првото упатство, што обично оди наопаку и упатството за поправка.

Тоа се составени примери од проектите што луѓето најчесто ги носат кон AI градители, а не студии на случај за еден човек. Упатствата може да се копираат. Неуспесите се оние што се враќаат повторно и повторно, и затоа се корисниот дел. Ако самиот vibe coding ви е нов, почнете со што е vibe coding.

1. Лична буџет-следилка

Кој ја гради: поединци кои пробале табели и се откажале.

Прво упатство:

Изгради месечна буџет-следилка. Додавам трошоци со износ, категорија (храна, станарина, превоз, забава, друго), датум и белешка. Прикажи го вкупното за овој месец по категорија како столбест дијаграм и листа на последните трошоци. Може да поставам буџет по категорија и да видам колку останало.

Што тргна наопаку: дијаграмот ги броеше сите трошоци што некогаш биле внесени, а не само овој месец, па до вториот месец секоја категорија изгледаше пречекорена. Исто така, износите напишани со запирка („1,200“) се зачувуваа како 1.

Упатство за поправка:

Дијаграмот и вкупните износи треба да ги содржат само трошоците од избраниот месец. Додај избирач на месец на врвот, со стандардно тековниот месец. Исто така прифаќај износи напишани со запирки или празнини и зачувувај ги како броеви.

Лекција: „овој месец“ е правило. Кажувајте ги правилата наглас.

2. Страница за резервации за мал салон

Кој ја гради: сопственици на мали бизниси уморни од резервации по телефон и DM-порака.

Прво упатство:

Изгради страница за резервации за мојот салон. Клиентите избираат услуга, датум и слободен термин, па внесуваат име и телефон. Имам приватна админ страница, зад најава, која ги прикажува резервациите по ден.

Што тргна наопаку: двајца клиенти ја резервираа истата 10:00 рупа во рок од една минута, бидејќи страницата ја проверуваше достапноста само при првото вчитување. Резервација за боење од 90 минути пак не ги блокираше термините после неа.

Упатство за поправка:

Кога клиент ќе испрати резервација, на серверот провери дали сите термини што ги опфаќа се уште слободни, и одбиј ја со „Тој термин штотуку беше зафатен“ ако не се. Услугата го блокира целото свое траење, па резервација од 90 минути во 10:00 ги блокира 10:00, 10:30 и 11:00.

Лекција: сè што можат да го направат двајца луѓе истовремено бара проверка на серверот. Видете како да направите апликација за резервации за целата верзија.

3. Ресторанско мени со QR код

Кој го гради: сопственици на кафулиња и ресторани кои менијата ги печатат премногу често.

Прво упатство:

Изгради мобилна веб-страница со мени за мојата кафуле. Делови за појадок, ручек, пијалоци и десерти, а секоја ставка со име, цена, кратак опис и дијететски ознаки (веган, без глутен). Ми треба админ страница за уредување на ставките и означување дека се распродадени. Прикажи печатлив QR код што води до менито.

Што тргна наопаку: ништо не се расипа, но менито беше бавно на Wi-Fi во кафулето, бидејќи за секоја ставка се вчитуваа фотографии од телефон во полна големина.

Упатство за поправка:

Фотографиите на менито се преоптоварени. Прилагоди качените слики на најмногу 800 пиксели широчина, компресирај ги и вчитувај ги мрзливо додека посетителот скролува.

Лекција: тестирајте на бавна врска, а не само во канцеларијата.

4. Следилка за опрема или залиха за тим

Кој ја гради: луѓе од оперативата што заменуваат заедничка табела.

Прво упатство:

Изгради алатка за инвентар за нашиот магацински тим. Предметите имаат име, SKU, количина, локација и минимално ниво. Персоналот се најавува и може да додава залиха, да одзема залиха со причина и да гледа листа на предмети под минимумот, означени црвено. Чувај историја на секоја промена и кој ја направил.

Што тргна наопаку: историјата покажуваше „корисник 3“ наместо имиња, а одземањето повеќе залиха отколку што имало ја направи количината негативна.

Упатство за поправка:

Во историјата прикажи го името на лицето, а не неговиот ID. Не дозволувај одземање што би ја спуштило количината под нула; прикажи „Само 4 на залиха“.

Лекција: опишете што треба да биде невозможно, а не само што треба да биде можно. Нашиот водич за изградба на апликација за инвентар ги опфаќа останатите делови.

5. Клиентски портал за фрилансер или студио

Кој го гради: дизајнери, сметководители, консултанти и агенции.

Прво упатство:

Изгради клиентски портал. Клиентите ги поканувам преку е-пошта. Секој клиент се најавува и ги гледа само своите проекти, датотеки и фактури, и може да остави коментари. Јас се најавувам како админ и ги гледам сите.

Што тргна наопаку: ова е најголемата грешка на списокот. Страниците му ги прикажуваа на секој клиент само неговите проекти, но серверот враќаше кој било проект ако го промените бројот во адресната лента. Кликнувањето низ порталот како еден клиент никогаш не го открило тоа.

Упатство за поправка:

Провери ја секоја серверска рута што враќа проекти, датотеки, коментари или фактури. Секоја мора да потврди дека најавениот клиент е сопственик на записот, а инаку да врати „не е пронајдено“. Потоа тестирај: најави се како клиент A и обиди се да го отвориш проектот на клиент B преку неговиот ID.

Лекција: да скриете нешто на екранот не е исто што и да го заштитите. Повеќе за ова во дали vibe coding е безбедно?.

6. Целна страница со листа на чекање

Кој ја гради: основачи кои проверуваат идеја пред да ја изградат.

Прво упатство:

Изгради целна страница за апликација што им помага на предавачите да закажуваат часови и да наплаќаат. Главен наслов, поднаслов, пријава со е-пошта, три предности, дел „како функционира“ и ЧПП. Зачувувај ги пријавите во база со датумот и овозможи ми да ги преземам како CSV од приватна страница.

Што тргна наопаку: за неколку дена списокот се наполни со ѓубре од бот-пријави, а страницата немаше наслов или опис, па споделените линкови покажуваа празен преглед.

Упатство за поправка:

Додај основна заштита од ботови на формата за пријава (скриено поле како замка и ограничување од 5 пријави по IP адреса на час). Додај наслов на страницата, meta опис и слика за социјално споделување.

Лекција: јавната форма ќе биде пронајдена. Видете како да направите страница со листа на чекање.

7. Апликација за квиз за наставник

Кој ја гради: наставници и тренери кои сакаат нешто полесно од LMS.

Прво упатство:

Изгради апликација за квиз за мојата класа. Создавам квизови со прашања со повеќе одговори и по еден точен одговор. Учениците се приклучуваат со код и со своето име, одговараат на прашањата и на крајот го гледаат својот резултат. Јас гледам табела со резултати по квиз.

Што тргна наопаку: точните одговори се испраќаа во прелистувачот заедно со прашањата, па љубопитен ученик можеше да ги прочита во изворниот код на страницата. Учениците исто така можеа да испраќаат повторно додека не добијат 100%.

Упатство за поправка:

Не испраќај точни одговори до прелистувачот. Провери ги одговорите на серверот по испраќањето. Дозволи едно испраќање по име на ученик по квиз и покажи му на наставникот ако некој се обиде повторно.

Лекција: прелистувачот му припаѓа на корисникот. Сè што е таму може да се прочита.

8. Мала AI алатка

Кој ја гради: маркетери, писатели и основачи кои сакаат фокусиран AI помошник.

Прво упатство:

Изгради алатка што опис на производ го претвора во пет објави за социјални мрежи во различни тонови (пријателски, експертски, играчки, кратки, долги). Користи AI API. Го залепувам описот, избирам платформа и добивам објавите со копчиња за копирање.

Што тргна наопаку: првата верзија го повикуваше AI-сервисот директно од прелистувачот со API клучот внатре во страницата, каде што секој можеше да го копира и да ја зголеми сметката.

Упатство за поправка:

Префрли го AI повикот на серверот. Чувај го API клучот како тајна, никогаш во кодот на фронтендот. Ограничи секој посетител на 20 генерации дневно.

Лекција: клучевите припаѓаат на тајни места на серверот. Видете како да ги чувате API клучевите безбедни и како да додадете AI функции во вашата апликација.

9. Деловна веб-страница на арапски и англиски

Кој ја гради: бизниси во Заливот и во поширокиот арапски свет што опслужуваат два јазика.

Прво упатство:

Изгради веб-страница за мојата компанија за внатрешен дизајн на арапски и англиски, со префрлање на јазикот. Страници: почетна, услуги, портфолио, за нас и контакт. Арапскиот треба да биде целосно десно-кон-лево.

Што тргна наопаку: арапскиот текст беше порамнет десно, но распоредот не беше огледален: стрелките уште покажуваа погрешно, а менито беше од погрешната страна. Телефонските броеви на места се прикажуваа наопаку.

Упатство за поправка:

На арапски, огледалај го целиот распоред: постави ја насоката на страницата на десно-кон-лево, стави го менито од десно, преврти ги насочените икони и телефонските броеви и е-поштите држи ги лево-кон-десно во арапскиот текст.

Лекција: десно-кон-лево е распоред, а не порамнување. Mythex поддржува арапски и други десно-кон-лево распореди, а упатства можете да пишувате директно на арапски.

10. Следилка што станува телефонска апликација

Кој ја гради: тренери, теретани и заедници чии корисници живеат на телефоните.

Прво упатство:

Изгради дневник за вежбање за моите клиенти за личен тренинг. Секој клиент се најавува, го гледа планот што сум му го доделил за неделата, штика вежби и бележи тежини. Јас ја гледам напредокот на секој клиент на дијаграм.

Што тргна наопаку: веб-апликацијата функционираше, но на телефоните копчињата беа премали за допир во средина на тренингот, а дијаграмот беше нечитлив.

Упатство за поправка:

Дизајнирај го за користење со една рака на телефон: големи површини за допир на дното на екранот, една вежба по екран со големи копчиња Next и Done и едноставен дијаграм на неделен напредок.

Лекција: ако луѓето ќе го користат на телефон, дизајнирајте прво за телефонот. На Mythex Pro, објавената апликација потоа може да стане Android апликација за Google Play и iPhone апликација испратена во TestFlight; телефонската апликација го отвора вашата објавена апликација, па секое објавување ја ажурира. Видете ја страницата градител на мобилни апликации.

Шаблоните зад овие примери

Во сите десет, неуспесите се групираат во неколку категории:

Ни едно од ова не бара да читате код. Бара да тестирате како љубопитен, малку непријателски корисник и прецизно да опишувате што гледате.

Пробајте сами

Изберете го примерот најблизок до вашата идеја, копирајте го неговото прво упатство и променете ги деталите. Потоа користете го упатството за поправка како листа за проверка пред да го споделите. Нашиот список на упатства за vibe coding има уште 30, а како да изградите апликација со vibe coding води еден проект од идеја до објавена апликација. Кога ќе бидете подготвени, започнете го во AI градителот на апликации или прегледајте ги шаблоните за почеток.

Прашања