30 промптів для вайб-кодингу, які можна скопіювати (шпаргалка)

Найкращі промпти для вайб-кодингу короткі, конкретні й стосуються поведінки: хто користується застосунком, що він може робити, що зберігає і як виглядає. Нижче 30 промптів, які можна скопіювати й вставити, згрупованих за етапом, на якому ви перебуваєте, від першої збірки до публікації. Замініть частини в [квадратних дужках] своїми деталями.

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

Як користуватися цією шпаргалкою

• Почніть з одного промпту для першої збірки, потім використовуйте решту по одному.
• Тестуйте після кожного промпту. Перевірте зміну, перш ніж надсилати наступну.
• Зберігайте те, що працює. Більшість наступних промптів тут закінчуються словами «решту залиш без змін» не просто так.
• Вставляйте точний текст. Тексти помилок, написи на кнопках і слова на екрані кращі за описи щоразу.

Промпти для першої збірки

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

1. Простий трекер

Побудуй для мене трекер [звички]. Я можу додати [звичку] з назвою і кольором, позначити її раз на день і бачити сітку на 30 днів та свою поточну серію. Зберігай усе, щоб воно лишалося після оновлення сторінки. Чистий, мінімалістичний дизайн, зручний на телефоні.

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

Побудуй сторінку бронювання для мого [перукарського салону]. Клієнти обирають послугу ([стрижка 30 хв, фарбування 90 хв]), дату і вільний час між [9:00 та 18:00], потім вводять ім'я, телефон і email. Двоє людей не можуть забронювати один і той самий слот. Мені потрібна приватна сторінка адміністратора за входом, яка показує майбутні бронювання за днями.

3. Внутрішній інструмент

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

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

Побудуй односторінковий сайт для [мого продукту: застосунку планування харчування для зайнятих батьків]. Герой із заголовком, однореченнєвим підзаголовком і реєстрацією email. Потім три переваги, короткий розділ «як це працює» і FAQ. Зберігай email реєстрацій у базі даних і покажи мені список на приватній сторінці адміністратора.

5. Клієнтський портал

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

6. Калькулятор або інструмент розцінок

Побудуй калькулятор розцінок для мого [клінінгового бізнесу]. Вхідні дані: кількість спалень, санвузлів, додаткові послуги (духовка, вікна, холодильник) і частота (разово, щотижня, щомісяця). Показуй ціну, коли змінюються опції, з розбивкою. Ціни: [вставте ваш прайс]. Додай кнопку, щоб надіслати запит на розцінку мені на email.

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

Використовуйте їх перед великою функцією або коли не впевнені, як щось описати.

7. Планувати перед збіркою

Перш ніж писати будь-який код, простими словами опиши екрани, які зробиш, дані, які збережеш, і рішення, які треба від мене. Зачекай на моє «ОК».

8. Перетворити хаотичну ідею на першу версію

Ось моя ідея: [вставте нотатки]. Запропонуй найменшу першу версію, яка все ще корисна, у 5–8 пунктах. Перелічи, що відкладеш на потім, і чому.

9. Запитати, чого не вистачає

Які питання поставив би розробник перед тим, як будувати це? Постав їх по одному, потім підсумуй мої відповіді у короткій специфікації.

10. Перевірити велику зміну заздалегідь

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

Промпти для дизайну

11. Задати чіткий стиль

Переоформи застосунок: теплий білувато-сірий фон, темний текст, один акцентний колір [#1F6F50], заокруглені кути, просторі відступи і сучасний шрифт без засічок. Збережи макет і кожну функцію такими, як вони є.

12. Перенести відчуття з референсу

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

13. Виправити макет для телефону

На телефоні шириною 375 px таблиця на [сторінці замовлень] прокручується вбік, а кнопки накладаються одна на одну. Перетвори кожен рядок на картку, складену вертикально, на малих екранах. Не змінюй настільний макет.

14. Порожній, завантажувальний і стан помилки

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

15. Підтримка напрямку справа наліво

Додай арабську версію інтерфейсу з повним макетом справа наліво. Іконки, які вказують напрямок, мають перевертатися; числа й дати мають використовувати формат локалі. Англійська лишається за замовчуванням.

Промпти для даних і функцій

16. Зробити дані постійними

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

17. Додати вхід

Додай реєстрацію й вхід за email і паролем. Кожен користувач бачить і редагує лише свої [записи]. Покажи email користувача у верхній панелі з кнопкою виходу.

18. Додати ролі

Додай дві ролі: адміністратор і учасник. Адміністратори можуть додавати, редагувати й видаляти [товари]; учасники лише переглядають їх. Застосовуй це на сервері, а не лише приховуючи кнопки.

19. Додати пошук і фільтри

Додай рядок пошуку над [списком контактів], який шукає збіг за іменем, компанією або email, поки я друкую, і фільтр за [статусом]. Збережи поточний порядок сортування.

20. Додати завантаження файлів

Дозволь користувачам прикріплювати до кожного [оголошення] до [5] зображень, максимум [5 МБ] кожне. Показуй мініатюри в оголошенні та більший перегляд після натискання. Лише власник може видаляти свої зображення.

21. Імпорт з таблиці

Додай кнопку Імпорт, яка приймає CSV зі стовпцями [ім'я, email, телефон, нотатки], показує попередній перегляд перших 10 рядків і дає мені підтвердити перед збереженням. Пропускай рядки без email і скажи мені, скільки пропущено.

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

22. Чітко описати помилку

Коли я [натискаю Зберегти у формі редагування], бачу «[точний текст помилки]», і зміна не зберігається. Очікую: зміна зберігається і я повертаюся до списку. Знайди причину, поясни її одним-двома реченнями, потім виправ.

23. Зупинити цикл виправлень

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

24. Прибрати побічні ефекти

Твоя остання зміна виправила вибір дати, але [бічна панель] зникла. Поверни бічну панель точно такою, якою вона була, і збережи виправлення вибору дати.

25. Пояснити перед зміною

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

Промпти для тестування та перегляду

26. Граничні випадки

Перелічи 10 способів, якими реальний користувач міг би зламати [форму бронювання]: порожні поля, дуже довгий текст, подвійні кліки, двоє людей одночасно, неправильні часові пояси. Перевір кожен і виправ те, що не працює. Звітуй, що змінив.

27. Підсумувати останні зміни

Підсумуй простими словами кожну зміну, яку ти зробив за останні [п'ять] кроків, і познач усе, що може вплинути на наявні дані.

Промпти для безпеки

Поєднуйте їх із нашою сторінкою про чи безпечний вайб-кодинг.

28. Перевірити доступ до даних

Перевір серверний код: чи може залогінений користувач прочитати або змінити [записи] іншого користувача, змінивши ідентифікатор у запиті? Покажи, де перевіряється доступ, і виправ прогалини.

29. Перевірити секрети, які можуть бути відкриті

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

Промпти для публікації

30. Передзапускова перевірка

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

Промпти, яких краще уникати

Деякі промпти стабільно дають гірші результати:

• «Зроби краще». Краще як? Назвіть екран і зміну.
• «Виправ усе». ШІ змінить багато, і ви не знатимете, що зрушилося.
• «Використай [бібліотеку], [фреймворк] і [патерн]». Якщо немає причини, опишіть поведінку й дозвольте інструменту обрати стек.
• «Ось мій API-ключ: …». Ніколи не вставляйте секрети в чат. Користуйтеся налаштуваннями секретів інструмента.
• Десять функцій в одному повідомленні. Розбивайте їх.

Перетворити промпти на звичку

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

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

Запитання