Приклади вайб-кодингу: 10 типів застосунків, промпти і що пішло не так

Найпоширеніші приклади вайб-кодингу — це невеликі корисні веб-застосунки: трекери, сторінки бронювання, внутрішні інструменти, клієнтські портали, лендинги, вікторини, дашборди та прості інструменти на основі ШІ. Нижче десять таких. Для кожного ви побачите, хто його створює, перший промпт, що зазвичай іде не так, і промпт для виправлення.

Це узагальнення проєктів, які люди найчастіше приносять до конструкторів на основі ШІ, а не кейси однієї людини. Промпти можна скопіювати. Збої — ті, що повторюються знову й знову, тож саме вони найкорисніші. Якщо сам вайб-кодинг для вас новий, почніть із що таке вайб-кодинг.

1. Персональний трекер бюджету

Хто створює: люди, які спробували таблиці й здалися.

Перший промпт:

Побудуй трекер місячного бюджету. Я додаю витрати з сумою, категорією (їжа, оренда, транспорт, розваги, інше), датою і коментарем. Покажи загальну суму за цей місяць по категоріях у вигляді стовпчастої діаграми та список останніх витрат. Я можу задати бюджет для кожної категорії і бачити, скільки лишилося.

Що пішло не так: діаграма враховувала кожну витрату, коли-небудь внесену, а не лише цього місяця, тож до другого місяця всі категорії виглядали перевитраченими. Крім того, суми, введені з комою («1,200»), зберігалися як 1.

Промпт для виправлення:

Діаграма й підсумки мають враховувати лише витрати вибраного місяця. Додай вибір місяця вгорі, за замовчуванням поточний. Також приймай суми, введені з комами чи пробілами, і зберігай їх як числа.

Урок: «цей місяць» — це правило. Проговорюйте правила вголос.

2. Сторінка бронювання для невеликого салону

Хто створює: власники малого бізнесу, яким набридло бронювати через телефон і в директ.

Перший промпт:

Побудуй сторінку бронювання для мого салону. Клієнти обирають послугу, дату і вільний час, потім вводять ім'я та телефон. Є приватна сторінка адміністратора за входом, яка показує бронювання за днями.

Що пішло не так: два клієнти забронювали один і той самий слот о 10:00 з різницею в хвилину, бо сторінка перевіряла доступність лише під час першого завантаження. Також бронювання фарбування на 90 хвилин не блокувало наступні слоти.

Промпт для виправлення:

Коли клієнт надсилає бронювання, перевір на сервері, що кожен слот, який воно займає, досі вільний, і відхили його з повідомленням «Цей час щойно зайняли», якщо ні. Послуга блокує весь свій час, тож бронювання на 90 хвилин о 10:00 блокує 10:00, 10:30 і 11:00.

Урок: усе, що двоє людей можуть зробити одночасно, потребує перевірки на сервері. Повну версію дивіться в як створити застосунок для бронювання.

3. Меню ресторану з QR-кодом

Хто створює: власники кав'ярень і ресторанів, які друкують меню занадто часто.

Перший промпт:

Побудуй мобільний вебсайт меню для моєї кав'ярні. Розділи для сніданку, обіду, напоїв і десертів, кожна страва з назвою, ціною, коротким описом і дієтичними позначками (веганське, без глютену). Мені потрібна сторінка адміністратора, щоб редагувати страви й позначати їх як розпродані. Покажи QR-код, який я можу надрукувати і який веде до меню.

Що пішло не так: нічого не зламалося, але меню працювало повільно через кав'ярневий Wi-Fi, бо для кожної страви завантажувалися повнорозмірні фото з телефона.

Промпт для виправлення:

Фото в меню занадто важкі. Зменш завантажені зображення до максимум 800 пікселів завширшки, стисни їх і завантажуй поступово, коли відвідувач прокручує сторінку.

Урок: тестуйте на повільному з'єднанні, а не лише в офісі.

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

Хто створює: люди з операційного відділу, які замінюють спільну таблицю.

Перший промпт:

Побудуй інструмент обліку для нашої складської команди. Товари мають назву, артикул (SKU), кількість, місце зберігання і мінімальний рівень. Персонал входить і може додавати запаси, списувати їх із причиною та бачити список товарів нижче мінімуму, виділених червоним. Веди історію кожної зміни і того, хто її вніс.

Що пішло не так: в історії було написано «користувач 3» замість імен, а списання більшої кількості, ніж було в наявності, робило кількість від'ємною.

Промпт для виправлення:

Показуй в історії ім'я людини, а не її ідентифікатор. Не дозволяй списання, яке зробить кількість меншою за нуль; натомість показуй «На складі лише 4».

Урок: описуйте, що має бути неможливим, а не лише що має бути можливим. Наш посібник про створення застосунку для обліку запасів охоплює решту.

5. Клієнтський портал для фрілансера або студії

Хто створює: дизайнери, бухгалтери, консультанти та агенції.

Перший промпт:

Побудуй клієнтський портал. Я запрошую клієнтів електронною поштою. Кожен клієнт входить і бачить лише свої проєкти, файли та рахунки і може залишати коментарі. Я входжу як адміністратор і бачу все.

Що пішло не так: це найважливіша проблема зі списку. Сторінки показували кожному клієнтові лише його проєкти, але сервер повертав будь-який проєкт, якщо змінити номер в адресному рядку. Клацання як один клієнт цього ніколи не виявляло.

Промпт для виправлення:

Перевір кожен серверний маршрут, який повертає проєкти, файли, коментарі чи рахунки. Кожен має підтвердити, що записом володіє клієнт, який увійшов, і інакше повертати «не знайдено». Потім протестуй: увійди як клієнт A і спробуй відкрити проєкт клієнта B за його ідентифікатором.

Урок: приховати щось на екрані — не те саме, що захистити. Детальніше в чи безпечний вайб-кодинг?.

6. Лендинг зі списком очікування

Хто створює: засновники, які перевіряють ідею до того, як її будувати.

Перший промпт:

Побудуй лендинг для застосунку, який допомагає репетиторам планувати уроки й приймати оплату. Головний заголовок, підзаголовок, реєстрація електронною поштою, три переваги, розділ «як це працює» і FAQ. Зберігай реєстрації в базі даних з датою, і дай мені завантажити їх як CSV зі сторінки для приватного доступу.

Що пішло не так: протягом кількох днів список заповнився сміттєвими реєстраціями від ботів, а сторінка не мала заголовка чи опису, тож посилання при поширенні показувало порожній попередній перегляд.

Промпт для виправлення:

Додай базовий захист від ботів до форми реєстрації (приховане поле-пастка і ліміт 5 реєстрацій з однієї IP-адреси на годину). Додай заголовок сторінки, мета-опис і зображення для поширення в соцмережах.

Урок: публічну форму знаходять. Див. як створити сторінку списку очікування.

7. Застосунок-вікторина для вчителя

Хто створює: вчителі та тренери, які хочуть щось легше за LMS.

Перший промпт:

Побудуй застосунок-вікторину для мого класу. Я створюю тести з питаннями з варіантами відповідей, у кожному одна правильна. Учні приєднуються за кодом і своїм ім'ям, відповідають на питання й бачать результат наприкінці. Я бачу таблицю результатів для кожного тесту.

Що пішло не так: правильні відповіді надсилалися в браузер разом із питаннями, тож цікавий учень міг прочитати їх у коді сторінки. Учні також могли надсилати відповіді знову, доки не отримають 100%.

Промпт для виправлення:

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

Урок: браузер належить користувачу. Усе, що там є, можна прочитати.

8. Невеликий інструмент на основі ШІ

Хто створює: маркетологи, копірайтери та засновники, які хочуть сфокусованого помічника на основі ШІ.

Перший промпт:

Побудуй інструмент, який перетворює опис продукту на п'ять дописів для соцмереж різними тонами (дружній, експертний, грайливий, короткий, розлогий). Використовуй API ШІ. Я вставляю опис, обираю платформу і отримую дописи з кнопками копіювання.

Що пішло не так: перша версія викликала сервіс ШІ безпосередньо з браузера, а API-ключ був у самій сторінці, де його міг скопіювати будь-хто й витратити ваш бюджет.

Промпт для виправлення:

Перенеси виклик ШІ на сервер. Зберігай API-ключ як секрет, ніколи в коді фронтенду. Обмеж кожного відвідувача 20 генераціями на день.

Урок: ключі мають бути в секретах на сервері. Див. як тримати API-ключі в безпеці і як додати функції ШІ до застосунку.

9. Сайт бізнесу арабською та англійською

Хто створює: бізнеси в країнах Затоки та ширшому арабському світі, які обслуговують дві мови.

Перший промпт:

Побудуй сайт для моєї компанії з дизайну інтер'єрів арабською та англійською з перемикачем мови. Сторінки: головна, послуги, портфоліо, про нас і контакти. Арабська має бути повністю справа наліво.

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

Промпт для виправлення:

В арабській версії віддзеркаль весь макет: встанови напрямок сторінки справа наліво, постав меню праворуч, переверни напрямні іконки і залиш номери телефонів та електронні адреси зліва направо всередині арабського тексту.

Урок: напрямок справа наліво — це макет, а не вирівнювання. Mythex підтримує арабську та інші макети справа наліво, і можна писати промпти арабською безпосередньо.

10. Трекер, який стає застосунком для телефону

Хто створює: тренери, спортзали та спільноти, чиї користувачі живуть у телефонах.

Перший промпт:

Побудуй журнал тренувань для моїх клієнтів персонального тренінгу. Кожен клієнт входить, бачить план на тиждень, який я призначив, відмічає вправи й записує ваги. Я бачу прогрес кожного клієнта на графіку.

Що пішло не так: веб-застосунок працював, але на телефонах кнопки були занадто маленькі, щоб натиснути під час тренування, а графік був нечитабельним.

Промпт для виправлення:

Зроби це для використання однією рукою на телефоні: великі зони натискання внизу екрана, одна вправа на екран із великими кнопками «Далі» і «Готово», і простий тижневий графік прогресу.

Урок: якщо люди користуватимуться застосунком на телефоні, проєктуйте спочатку для телефону. На Mythex Pro опублікований застосунок потім може стати застосунком для Android у Google Play і застосунком для iPhone, надісланим у TestFlight; застосунок для телефону відкриває ваш опублікований застосунок, тож кожна публікація його оновлює. Див. сторінку конструктора мобільних застосунків.

Закономірності за цими прикладами

У всіх десяти збої належать до кількох груп:

Жоден із цих випадків не вимагає читати код. Потрібно тестувати як цікавий, трохи ворожий користувач і точно описувати побачене.

Спробуйте самі

Оберіть приклад, найближчий до вашої ідеї, скопіюйте його перший промпт і змініть деталі. Потім використовуйте промпт для виправлення як чекліст перед тим, як ділитися. У нашій шпаргалці з промптів для вайб-кодингу є ще 30, а як створити застосунок вайб-кодингом веде один проєкт від ідеї до опублікованого застосунку. Коли будете готові, почніть у конструкторі застосунків ШІ або перегляньте шаблони, щоб почати швидше.

Запитання