Vibe coding мысалдары: 10 нақты қосымша түрі, промпттар және қателер

Ең жиі кездесетін vibe coding мысалдары — шағын, пайдалы веб-қосымшалар: трекерлер, брондау беттері, ішкі құралдар, клиент порталдары, лендингтер, викториналар, дашбордтар және қарапайым AI құралдары. Төменде солардың он мысалы берілген. Әрқайсысы үшін кім құрастыратынын, алғашқы промптты, жиі не дұрыс болмайтынын және оны түзететін келесі промптты көресіз.

Бұлар адамдар AI құрастырушыларына жиі әкелетін жобалардың композиттері, бір адамның жобасынан алынған кейс емес. Промпттарды көшіруге болады. Қателер — қайта-қайта қайталанатындары, сондықтан пайдалы бөлік сол. Егер vibe coding өзі сізге жаңа болса, алдымен vibe coding дегеніміз не деген мақаламен танысыңыз.

1. Жеке бюджет трекері

Кім құрастырады: электрондық кестемен жұмыс істеп, одан бас тартқан жеке адамдар.

Алғашқы промпт:

Айлық бюджет трекерін құрастырыңыз. Шығындарды сомасы, санаты (тамақ, пәтер, көлік, көңіл көтеру, басқа), күні және ескертпесімен енгіземін. Таңдалған айдағы әр санат бойынша жалпы соманы тік диаграмма ретінде және соңғы шығындар тізімін көрсетіңіз. Санат бойынша бюджет қоя аламын және қанша қалғанын көремін.

Не дұрыс болмады: диаграмма енгізілген барлық шығынды санады, тек осы айдікін емес, сондықтан екінші айға қарай әр санат артық жұмсалғандай көрінді. Сонымен қатар үтірмен жазылған сомалар («1,200») 1 ретінде сақталды.

Түзету промпты:

Диаграмма мен жиындар тек таңдалған айдағы шығындарды қамтуы керек. Жоғарыда ай таңдағышын қосыңыз, әдепкі ағымдағы ай болсын. Сонымен қатар үтірмен немесе бос орынмен жазылған сомаларды қабылдап, оларды сан ретінде сақтаңыз.

Сабақ: «осы ай» — бұл ереже. Ережелерді айтып айтыңыз.

2. Шағын салонға арналған брондау беті

Кім құрастырады: телефон мен DM арқылы брондаудан шаршаған шағын бизнес иелері.

Алғашқы промпт:

Салоным үшін брондау бетін құрастырыңыз. Клиенттер қызметті, күнді және бос уақыт слотын таңдайды, содан кейін атын және телефонын енгізеді. Менде логин арқылы жабық жеке әкімші беті бар, ол брондауларды күн бойынша көрсетеді.

Не дұрыс болмады: екі клиент бір минут аралығында 10:00 слотын брондады, себебі бет қолжетімділікті тек алғаш жүктелгенде тексерді. 90 минуттық бояу брондауы кейінгі слоттарды да бөгемеді.

Түзету промпты:

Клиент брондауын жібергенде, оның қамтитын әр слоты әлі бос екенін серверде тексеріңіз, егер бос болмаса «Бұл уақыт дәл қазір алынды» деп қабылдамаңыз. Қызмет толық ұзақтығын бөгейді, сондықтан 10:00-дегі 90 минуттық брондау 10:00, 10:30 және 11:00 слоттарын бөгейді.

Сабақ: екі адам бір уақытта жасай алатын әрекетке серверде тексеру керек. Толық нұсқасы үшін брондау қосымшасын қалай құрастыру керек нұсқаулығын қараңыз.

3. QR коды бар мәзір

Кім құрастырады: мәзірді тым жиі қайта басатын кафе мен мейрамхана иелері.

Алғашқы промпт:

Кафем үшін мобильді мәзір веб-сайтын құрастырыңыз. Таңғы ас, түскі ас, сусындар және десерттер бөлімдері, әр тағамда атауы, бағасы, қысқа сипаттамасы және диеталық белгілері (веган, глютенсіз). Элементтерді өңдеп, «сатылып бітті» деп белгілеу үшін әкімші беті керек. Мәзірге сілтейтін басып шығаруға болатын QR кодын көрсетіңіз.

Не дұрыс болмады: ештеңе бұзылмады, бірақ мәзір кафенің Wi-Fi-ында баяу жүктелді, себебі әр тағамға толық өлшемді телефон суреттері жүктелді.

Түзету промпты:

Мәзір суреттері тым ауыр. Жүктелген суреттерді ені ең көбі 800 px-ке дейін өлшемін өзгертіңіз, сығыңыз және келуші төмен айналдырған сайын оларды біртіндеп жүктеңіз.

Сабақ: сынауды тек кеңсеңізде емес, баяу байланыста жасаңыз.

4. Команда үшін жабдық немесе қойма трекері

Кім құрастырады: ортақ кестені ауыстырғысы келетін операция қызметкерлері.

Алғашқы промпт:

Қойма командамыз үшін инвентарь құралын құрастырыңыз. Элементтерде атауы, SKU, саны, орны және минималды деңгейі бар. Қызметкерлер кіріп, қор қоса алады, себебін көрсетіп қорды алып тастай алады және минималды деңгейден төмен элементтерді қызыл түспен көрсететін тізімді көреді. Әр өзгерістің және оны кім жасағанының тарихын сақтаңыз.

Не дұрыс болмады: тарихта атының орнына «user 3» көрсетілді, ал қолда барынан көп қорды алып тастау санды теріс мәнге түсірді.

Түзету промпты:

Тарихта адамның атын көрсетіңіз, ID емес. Қорды алып тастау санын нөлден төмен түсіретін болса, рұқсат етпеңіз; оның орнына «Қоймада тек 4 бар» деген хабарлама көрсетіңіз.

Сабақ: тек не мүмкін екенін емес, не мүмкін болмауы керек екенін сипаттаңыз. Инвентарь қосымшасын құрастыру туралы нұсқаулық қалғанын қамтиды.

5. Фрилансер немесе студияға арналған клиент порталы

Кім құрастырады: дизайнерлер, бухгалтерлер, кеңесшілер және агенттіктер.

Алғашқы промпт:

Клиент порталын құрастырыңыз. Клиенттерді электрондық пошта арқылы шақырамын. Әр клиент кіріп, тек өз жобаларын, файлдарын және шоттарын көреді және пікір қалдыра алады. Мен әкімші ретінде кіріп, барлығын көремін.

Не дұрыс болмады: бұл тізімдегі ең маңызды қате. Беттер клиентке тек өз жобаларын көрсетті, бірақ адрес жолағындағы нөмірді өзгерткенде сервер кез келген жобаны қайтарды. Бір клиент ретінде шарлау бұл мәселені ешқашан көрсеткен жоқ.

Түзету промпты:

Жобаларды, файлдарды, пікірлерді немесе шоттарды қайтаратын әр серверлік маршрутты тексеріңіз. Әр маршрут кірген клиенттің жазбаға иелік ететінін растауы керек, әйтпесе «табылмады» деп жауап беруі керек. Содан кейін тексеріңіз: клиент A ретінде кіріп, клиент B жобасын ID бойынша ашуға тырысыңыз.

Сабақ: экранда бір нәрсені жасыру оны қорғау емес. Бұл туралы көбірек: vibe coding қауіпсіз ме?.

6. Күту тізімі бар лендинг беті

Кім құрастырады: құрастырмас бұрын идеясын сынайтын негізін салушылар.

Алғашқы промпт:

Оқытушыларға сабақтарды жоспарлауға және төлем жинауға көмектесетін қосымша үшін бір беттік лендинг құрастырыңыз. Басты тақырып, қосымша жол, электрондық пошта арқылы тіркелу, үш артықшылық, қалай жұмыс істейтіні бөлімі және FAQ. Тіркелулерді күнімен дерекқорға сақтаңыз және маған жеке беттен CSV ретінде жүктеуге рұқсат етіңіз.

Не дұрыс болмады: бірнеше күннің ішінде тізім боттардан келген жалған тіркелулермен толды, ал бетте атауы да, сипаттамасы да болмады, сондықтан бөлісілген сілтемелер бос алдын ала қарауды көрсетті.

Түзету промпты:

Тіркелу формасына негізгі бот қорғанысын қосыңыз (жасырын honeypot өрісі және IP-ға сағатына 5 тіркелу шегі). Бет атауын, meta сипаттамасын және әлеуметтік бөлісу суретін қосыңыз.

Сабақ: ашық форманы табады. Күту тізімі бетін қалай құрастыру керек туралы қараңыз.

7. Мұғалімге арналған викторина қосымшасы

Кім құрастырады: LMS-тен жеңілірек нәрсе қалайтын мұғалімдер мен оқытушылар.

Алғашқы промпт:

Сыныбым үшін викторина қосымшасын құрастырыңыз. Мен әр сұрақтың бір дұрыс жауабы бар көп таңдауды сұрақтармен викториналар жасаймын. Студенттер кодпен және атымен кіреді, сұрақтарға жауап береді және соңында ұпайын көреді. Мен әр викторина бойынша нәтижелер кестесін көремін.

Не дұрыс болмады: дұрыс жауаптар сұрақтармен бірге браузерге жіберілді, сондықтан қызығушылық танытқан студент бет кодынан оларды оқи алды. Студенттер 100%-ға жеткенше қайта жібере алды.

Түзету промпты:

Дұрыс жауаптарды браузерге жібермеңіз. Жауаптарды жіберуден кейін серверде тексеріңіз. Әр викторинада әр студент атына бір рет жіберуге рұқсат етіңіз және біреу қайталап әрекет жасаса, мұғалімге көрсетіңіз.

Сабақ: браузер пайдаланушыға тиесілі. Онда бар нәрсені оқуға болады.

8. Шағын AI құралы

Кім құрастырады: маркетологтар, жазушылар және негізін салушылар — нақты AI көмекшісін қалайтындар.

Алғашқы промпт:

Өнім сипаттамасын әр түрлі тонда (достық, сарапшы, ойнақы, қысқа, ұзын) бес әлеуметтік желі постына айналдыратын құрал құрастырыңыз. AI API қолданыңыз. Сипаттаманы қоямын, платформаны таңдаймын және көшіру түймелері бар постарды аламын.

Не дұрыс болмады: бірінші нұсқа AI қызметін браузерден тікелей шақырды, API кілті бетте болды, оны кез келген адам көшіріп, шотты көбейте алатын еді.

Түзету промпты:

AI шақыруын серверге жылжытыңыз. API кілтін құпия ретінде сақтаңыз, фронтенд кодында ешқашан емес. Әр келушіге күніне 20 генерациядан шек қойыңыз.

Сабақ: кілттер серверде, құпиялар ішінде тұруы керек. API кілттерін қалай қауіпсіз ұстау керек және қосымшаңызға AI мүмкіндіктерін қалай қосу керек туралы нұсқаулықтарды қараңыз.

9. Араб және ағылшын тіліндегі бизнес веб-сайты

Кім құрастырады: Парсы шығанағы елдеріндегі және араб әлемінің кең аймағындағы екі тілде қызмет көрсететін бизнестер.

Алғашқы промпт:

Интерьер дизайн компаниям үшін араб және ағылшын тілдерінде, тіл ауыстырғышы бар веб-сайт құрастырыңыз. Беттер: басты, қызметтер, портфолио, біз туралы және байланыс. Араб тілі толық оңнан солға (RTL) болуы керек.

Не дұрыс болмады: араб мәтіні оңға тураланған, бірақ орналасу айналдырылмаған: көрсеткілер қате бағытта қалды, мәзір қате жақта болды. Кейбір жерлерде телефон нөмірлері кері көрсетілді.

Түзету промпты:

Араб тілінде бүкіл орналасуды айналдырыңыз: бет бағытын оңнан солға орнатыңыз, мәзірді оң жаққа қойыңыз, бағытты көрсететін белгішелерді айналдырыңыз және араб мәтін ішінде телефон нөмірлері мен электрондық поштаны солдан оңға қалдырыңыз.

Сабақ: оңнан солға — бұл туралау емес, орналасу. Mythex араб және басқа оңнан солға орналасуларды қолдайды, және арабша промпт беруге болады.

10. Телефон қосымшасына айналатын трекер

Кім құрастырады: пайдаланушылары телефонда өмір сүретін жаттықтырушылар, спорт залдары және қоғамдастық топтары.

Алғашқы промпт:

Жеке жаттығу клиенттеріме арналған жаттығу журналын құрастырыңыз. Әр клиент кіріп, мен апта үшін тағайындаған жоспарды көреді, жаттығуларды белгілейді және салмақтарды жазады. Мен әр клиенттің прогресін диаграммада көремін.

Не дұрыс болмады: веб-қосымша жұмыс істеді, бірақ телефонда түймелер жаттығу кезінде басуға тым кішкентай болды, ал диаграмма оқылмады.

Түзету промпты:

Телефонда бір қолмен пайдалануға арнап жасаңыз: экранның төменгі жағында үлкен басу аймақтары, әр экранда бір жаттығу және үлкен «Келесі» және «Дайын» түймелері, сондай-ақ қарапайым апталық прогресс диаграммасы.

Сабақ: адамдар телефонда пайдаланса, алдымен телефон үшін жобалаңыз. Mythex Pro-да жарияланған қосымшаны Google Play үшін Android қосымшасына және TestFlight-ке жіберілетін iPhone қосымшасына айналдыруға болады; телефон қосымшасы жарияланған қосымшаны ашады, сондықтан әр Publish оны жаңартады. Мобильді қосымша құрастырушысы бетін қараңыз.

Осы он мысалдың астарындағы заңдылықтар

Барлық он мысалда қателер бірнеше топқа бөлінеді:

Мұның ешқайсысына кодты оқу қажет емес. Олар қызығушы, сәл дұшпан пайдаланушы сияқты сынауды және көргеніңізді дәл сипаттауды талап етеді.

Өзіңіз біреуін сынаңыз

Идеяңызға ең жақын мысалды таңдап, оның алғашқы промптын көшіріңіз де, мәліметтерін өзгертіңіз. Содан кейін бөліспес бұрын түзету промптын тексеру тізімі ретінде пайдаланыңыз. Біздің vibe coding промпттар парағында тағы 30 промпт бар, ал vibe coding көмегімен қосымша құрастыру бір жобаны идеядан жарияланған қосымшаға дейін жеткізеді. Дайын болғанда, AI құрастырушысында бастаңыз немесе дайын бастау үшін шаблондарды қараңыз.

Сұрақтар