Примери за vibe coding: 10 реални типа приложения, промпти и какво се обърка

Най-честите примери за vibe coding са малки, полезни уеб приложения: тракери, страници за резервации, вътрешни инструменти, клиентски портали, целеви страници, викторини, табла и прости AI инструменти. По-долу са десет от тях. За всеки ще видиш кой го строи, първия промпт, какво обикновено се обърква и промпта за корекция, който го оправя.

Това са съставни примери от проектите, които хората най-често носят към AI конструктори, а не разглеждане на случай от един човек. Промптите са за копиране. Грешките са тези, които се повтарят отново и отново, затова са най-полезната част. Ако vibe coding ти е непознат, започни с какво е vibe coding.

1. Личен бюджетен тракер

Кой го строи: хора, които са опитали таблици и са се отказали.

Първи промпт:

Направи ми месечен бюджетен тракер. Добавям разходи със сума, категория (храна, наем, транспорт, забавления, други), дата и бележка. Покажи общата сума за този месец по категории като стълбовидна диаграма и списък с последните разходи. Мога да задавам бюджет за всяка категория и да виждам колко е останало.

Какво се обърка: диаграмата броеше всеки разход, въведен някога, а не само този месец, така че след втория месец всички категории изглеждаха превишени. Освен това суми, написани със запетая („1,200“), се записваха като 1.

Промпт за корекция:

Диаграмата и сумите да включват само разходите от избрания месец. Добави избор на месец отгоре, по подразбиране текущия. Приемай и суми с запетаи или интервали и ги записвай като числа.

Урок: „този месец“ е правило. Казвай правилата на глас.

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

Кой го строи: собственици на малки бизнеси, уморени да резервират по телефона и в съобщения.

Първи промпт:

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

Какво се обърка: двама клиенти резервираха един и същи час 10:00 в рамките на минута един от друг, защото страницата проверяваше наличността само при първото зареждане. Резервация за оцветяване от 90 минути също не блокираше следващите часове.

Промпт за корекция:

Когато клиент изпрати резервация, провери на сървъра, че всеки час, който тя покрива, още е свободен, и отхвърли с „Този час току-що беше зает“, ако не е. Услугата блокира цялата си продължителност, така че резервация от 90 минути в 10:00 блокира 10:00, 10:30 и 11:00.

Урок: всичко, което двама души могат да правят едновременно, изисква проверка на сървъра. Виж как да построиш приложение за резервации за пълната версия.

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

Кой го строи: собственици на кафенета и ресторанти, които препечатват менютата твърде често.

Първи промпт:

Направи мобилен уебсайт с меню за кафенето ми. Секции за закуска, обяд, напитки и десерти, всяко ястие с име, цена, кратко описание и етикети за хранене (веган, без глутен). Трябва ми административна страница за редактиране на ястията и отбелязване като изчерпани. Покажи QR код, който мога да отпечатам и който води към менюто.

Какво се обърка: нищо не се счупи, но менюто беше бавно в Wi-Fi на кафенето, защото за всяко ястие се зареждаха снимки от телефон в пълен размер.

Промпт за корекция:

Снимките в менюто са твърде тежки. Преоразмери качените изображения до максимум 800 px ширина, компресирай ги и ги зареждай постепенно, докато посетителят скролва.

Урок: тествай при бавна връзка, не само в офиса си.

4. Тракер за оборудване или склад за екип

Кой го строи: хора от операциите, които заменят споделена таблица.

Първи промпт:

Направи инструмент за инвентар за нашия складов екип. Артикулите имат име, SKU, количество, локация и минимално ниво. Служителите влизат и могат да добавят наличност, да махат наличност с причина и да виждат списък с артикулите под минимума, маркирани в червено. Пази история на всяка промяна и кой я е направил.

Какво се обърка: историята показваше „потребител 3“ вместо имена, а премахването на повече наличност, отколкото има, правеше количеството отрицателно.

Промпт за корекция:

Показвай в историята името на човека, не неговия ID. Не позволявай премахване, което би свалило количеството под нула; показвай „Налични са само 4“.

Урок: опиши какво трябва да е невъзможно, не само какво трябва да е възможно. Нашето ръководство за изграждане на приложение за инвентар покрива останалото.

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

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

Първи промпт:

Направи клиентски портал. Каня клиенти по имейл. Всеки клиент влиза и вижда само своите проекти, файлове и фактури и може да оставя коментари. Аз влизам като администратор и виждам всичко.

Какво се обърка: това е най-важната грешка в списъка. Страниците показваха на всеки клиент само неговите проекти, но сървърът връщаше всеки проект, ако промениш номера в адресната лента. Кликането като един клиент никога не го разкриваше.

Промпт за корекция:

Провери всеки сървърен маршрут, който връща проекти, файлове, коментари или фактури. Всеки трябва да потвърждава, че влезлият клиент притежава записа, и да връща „не е намерено“ иначе. После го тествай: влез като клиент A и опитай да отвориш проекта на клиент B по неговия ID.

Урок: скриването на нещо на екрана не е същото като защитата му. Още за това в безопасен ли е vibe coding?.

6. Целева страница с листа на чакащите

Кой го строи: основатели, които тестват идея, преди да я построят.

Първи промпт:

Направи целева страница за приложение, което помага на преподаватели да планират уроци и да събират плащания. Заглавие, подзаглавие, регистрация с имейл, три предимства, секция „как работи“ и ЧЗВ. Записвай регистрациите в база данни с датата и ми позволи да ги изтегля като CSV от частна страница.

Какво се обърка: за няколко дни списъкът се напълни със спам регистрации от ботове, а страницата нямаше заглавие или описание, така че споделените линкове показваха празен преглед.

Промпт за корекция:

Добави основна защита от ботове към формата за регистрация (скрито поле honeypot и ограничение от 5 регистрации на IP на час). Добави заглавие на страницата, мета описание и изображение за споделяне в социалните мрежи.

Урок: публичната форма ще бъде намерена. Виж как да построиш страница за листа на чакащите.

7. Приложение за викторина за учител

Кой го строи: учители и обучители, които искат нещо по-леко от LMS.

Първи промпт:

Направи приложение за викторина за класа ми. Създавам викторини с въпроси с избор и един верен отговор. Учениците се присъединяват с код и собственото си име, отговарят на въпросите и в края виждат резултата си. Виждам таблица с резултатите за всяка викторина.

Какво се обърка: верните отговори се изпращаха в браузъра заедно с въпросите, така че любопитен ученик можеше да ги прочете в сорс кода на страницата. Учениците също можеха да подават отново, докато получат 100%.

Промпт за корекция:

Не изпращай верните отговори в браузъра. Проверявай отговорите на сървъра след изпращане. Позволи едно изпращане на име на ученик за всяка викторина и показвай на учителя, ако някой опита отново.

Урок: браузърът принадлежи на потребителя. Всичко там може да бъде прочетено.

8. Малък AI инструмент

Кой го строи: маркетолози, автори и основатели, които искат фокусиран AI помощник.

Първи промпт:

Направи инструмент, който превръща описание на продукт в пет публикации за социални мрежи в различен тон (приятелски, експертен, игрив, кратък, дълъг). Използвай AI API. Поставям описанието, избирам платформа и получавам публикациите с бутони за копиране.

Какво се обърка: първата версия извикваше AI услугата директно от браузъра, с API ключа в страницата, откъдето всеки можеше да го копира и да натрупа сметка.

Промпт за корекция:

Премести AI извикването на сървъра. Съхранявай API ключа като секрет, никога в кода на фронтенда. Ограничи всеки посетител до 20 генерирания на ден.

Урок: ключовете трябва да са в секрети на сървъра. Виж как да пазиш API ключовете в безопасност и как да добавиш AI функции към приложението си.

9. Арабски и английски сайт за бизнес

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

Първи промпт:

Направи сайт за моята компания за интериорен дизайн на арабски и английски, с превключвател на езика. Страници: начало, услуги, портфолио, за нас и контакт. Арабският трябва да е напълно отдясно наляво.

Какво се обърка: арабският текст беше подравнен вдясно, но оформлението не беше огледално: стрелките все още сочеха в грешна посока и менюто беше от грешната страна. Телефонните номера също понякога се показваха обърнати.

Промпт за корекция:

На арабски огледално обърни цялото оформление: задай посока на страницата отдясно наляво, постави менюто вдясно, обърни посочващите икони и дръж телефонните номера и имейлите отляво надясно в арабския текст.

Урок: оформлението отдясно наляво е структура, не подравняване. Mythex поддържа арабски и други оформления отдясно наляво, а можеш да пишеш промптове и на арабски директно.

10. Тракер, който става приложение за телефон

Кой го строи: треньори, фитнес зали и общности, чиито потребители живеят в телефоните си.

Първи промпт:

Направи дневник за тренировки за личните си клиенти. Всеки клиент влиза, вижда плана, който съм му задал за седмицата, отбелязва упражненията и записва тежестите. Виждам напредъка на всеки клиент в диаграма.

Какво се обърка: уеб приложението работеше, но на телефони бутоните бяха твърде малки, за да се натискат по време на тренировка, а диаграмата не се четеше.

Промпт за корекция:

Проектирай го за използване с една ръка на телефон: големи зони за докосване в долната част на екрана, едно упражнение на екран с големи бутони „Напред“ и „Готово“ и проста седмична диаграма на напредъка.

Урок: ако хората ще го ползват на телефон, проектирай първо за телефона. В Mythex Pro публикуваното приложение може после да стане Android приложение за Google Play и iPhone приложение, изпратено в TestFlight; мобилното приложение отваря публикуваното ти приложение, така че всяко Publish го обновява. Виж страницата конструктор за мобилни приложения.

Модели зад тези примери

Във всичките десет грешките попадат в няколко групи:

Нито едно от тези не изисква да четеш код. Изисква да тестваш като любопитен, леко враждебен потребител и да описваш точно какво виждаш.

Опитай сам

Избери примера, най-близък до идеята ти, копирай първия му промпт и смени детайлите. После използвай промпта за корекция като контролен списък, преди да го споделиш. Нашата шпаргала с промпти за vibe coding има още 30, а как да построиш приложение с vibe coding проследява един проект от идея до публикувано приложение. Когато си готов, стартирай го в AI конструктора на приложения или разгледай шаблоните за по-бърз старт.

Въпроси