30 промпта за vibe coding, които можеш да копираш (шпаргала)

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

Работят във всеки AI конструктор на приложения или агент за програмиране. Ако искаш обосновката зад тях, по-дългото ни ръководство за как да пишеш промптове за AI конструктори на приложения обяснява принципите. Тази страница е шпаргалката.

Как да използваш шпаргалката

• Започни с един промпт за първото построяване, после използвай останалите по един.
• Тествай след всеки промпт. Прегледай промяната, преди да изпратиш следващата.
• Запазвай това, което работи. Повечето последващи промптове тук завършват с „запази всичко останало същото“ не без причина.
• Поставяй точния текст. Съобщенията за грешки, етикетите на бутоните и думите на екрана са по-добри от описанията, винаги.

Промпти за първо построяване

Те задават формата на приложението. Всеки назовава потребителите, действията, данните и вида.

1. Прост тракер

Направи ми тракер на [навик]. Мога да добавя [навик] с име и цвят, да го отбелязвам веднъж на ден и да виждам таблица за 30 дни и текущата си серия. Запази всичко, така че да е там и след презареждане. Чист, минималистичен дизайн, който работи на телефон.

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

Направи страница за резервации за моя [фризьорски салон]. Клиентите избират услуга ([подстригване 30 мин, боядисване 90 мин]), дата и свободен час между [9:00 и 18:00], после въвеждат име, телефон и имейл. Двама души не могат да резервират един и същи час. Искам частна административна страница зад вход, която показва предстоящите резервации по дни.

3. Вътрешен инструмент

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

4. Целева страница със списък на чакащите

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

5. Клиентски портал

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

6. Калкулатор или инструмент за оферти

Направи калкулатор на оферти за моя [бизнес за почистване]. Входни данни: брой спални, бани, допълнителни услуги (фурна, прозорци, хладилник) и честота (еднократно, седмично, месечно). Показвай цената, докато променям опциите, с разбивка. Цени: [постави ценовата си листа]. Добави бутон, който изпраща заявката за оферта на мен по имейл.

Промпти за планиране

Използвай ги преди голяма функция или когато не си сигурен как да опишеш нещо.

7. Планирай преди да строиш

Преди да напишеш какъвто и да е код, опиши с прости думи екраните, които ще направиш, данните, които ще съхраняваш, и решенията, които ти трябват от мен. Изчакай моето „ОК“.

8. Превърни объркана идея в първа версия

Ето моята идея: [постави бележки]. Предложи най-малката първа версия, която все още е полезна, в 5–8 точки. Изброй какво ще оставиш за по-късно и защо.

9. Попитай какво липсва

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

10. Провери първо голяма промяна

Искам да добавя [акаунти за екипи, при които няколко души споделят едно работно пространство]. Обясни какво трябва да се промени в данните, екраните и правата и какво може да се счупи. Още нищо не променяй.

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

11. Задай ясен стил

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

12. Копирай усещането на референция

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

13. Поправи оформлението на телефон

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

14. Празни, зареждащи и грешни състояния

Добави подходящи състояния към [списъка с проекти]: приятелско празно състояние с бутон за добавяне на първия проект, скелетон при зареждане и ясно съобщение с бутон за опит отново, ако зареждането се провали.

15. Поддръжка на отдясно наляво

Добави арабска версия на интерфейса с пълно оформление отдясно наляво. Иконите, които сочат посока, да се обръщат; числата и датите да използват формата на локала. Английският да остане по подразбиране.

Промпти за данни и функции

16. Запази данните

Сега данните ми изчезват при презареждане. Съхрани ги в истинска база данни и запази текущите екрани да работят по същия начин.

17. Добави вход

Добави регистрация и вход с имейл и парола. Всеки потребител да вижда и редактира само своите [записи]. Покажи имейла на потребителя в горната лента с бутон за изход.

18. Добави роли

Добави две роли: администратор и член. Администраторите могат да добавят, редактират и изтриват [продукти]; членовете могат само да ги виждат. Прилагай това на сървъра, не само като скриваш бутони.

19. Добави търсене и филтри

Добави търсачка над [списъка с контакти], която съвпада с име, компания или имейл докато пиша, и филтър за [статус]. Запази текущия ред на сортиране.

20. Добави качване на файлове

Позволи на потребителите да прикачват до [5] снимки към всяка [обява], максимум [5 MB] всяка. Покажи миниатюри в обявата и по-голям изглед при клик. Само собственикът може да изтрива снимките си.

21. Импорт от таблица

Добави бутон Импорт, който приема CSV с колони [име, имейл, телефон, бележки], показва преглед на първите 10 реда и ми позволява да потвърдя, преди да запиша. Пропускай редове без имейл и ми кажи колко са пропуснати.

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

22. Опиши грешката ясно

Когато [натисна Запази във формуляра за редакция], виждам „[точният текст на грешката]“ и промяната не се запазва. Очаквано: промяната се запазва и се връщам към списъка. Намери причината, обясни я с едно-две изречения и после я поправи.

23. Спри цикъл от поправки

Опитахме да оправим това три пъти и все още не работи. Спри да променяш кода. Изброй трите най-вероятни причини, как да проверя всяка и коя мислиш, че е.

24. Отмени страничните ефекти

Последната ти промяна оправи избора на дата, но [страничното меню] изчезна. Върни страничното меню точно каквото беше и запази поправката на избора на дата.

25. Обясни преди да промениш

Обясни как [общата сума при плащане] се изчислява в момента, стъпка по стъпка, като посочиш файловете, които участват. Не променяй нищо.

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

26. Гранични случаи

Изброй 10 начина, по които реален потребител може да счупи [формуляра за резервации]: празни полета, много дълъг текст, двойни кликове, двама души едновременно, грешни часови зони. Тествай всеки и поправи това, което не работи. Докладвай какво си променил.

27. Обобщи скорошните промени

Обобщи с прости думи всяка промяна, която си направил в последните [пет] стъпки, и отбележи всичко, което може да засегне съществуващите данни.

Промпти за сигурност

Комбинирай ги със страницата ни дали vibe coding е безопасен.

28. Провери достъпа до данни

Провери сървърния код: може ли влязъл потребител да чете или променя [записите] на друг потребител, като промени ID в заявката? Покажи къде се проверява достъпът и поправи всяка празнина.

29. Провери за изложени секрети

Изброй всеки API ключ, парола или токен, който това приложение използва, и къде се съхранява всеки. Увери се, че никой от тях не е в код, който се изпълнява в браузъра, или не е записан във файлове. Ако са, премести ги в секрети.

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

30. Проверка преди пускане

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

Промптове, които да избягваш

Някои промптове последователно дават по-лоши резултати:

• „Направи го по-добро.“ По-добро как? Назови екрана и промяната.
• „Поправи всичко.“ AI ще промени много неща и няма да знаеш какво се е преместило.
• „Използвай [библиотека] и [рамка] и [шаблон].“ Освен ако нямаш причина, опиши поведението и остави инструмента да избере стека.
• „Ето моят API ключ: …“ Никога не поставяй секрети в чат. Използвай настройките за секрети на инструмента.
• Десет функции в едно съобщение. Раздели ги.

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

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

Ако си заседнал на първия промпт, безплатният генератор на промпти за приложения превръща едноредова идея в по-пълен начален промпт. А за да видиш какво дават тези промптове на практика, прочети нашите примери за vibe coding или постави промпт 1 в AI конструктора на приложения и смени скобите с твоята идея.

Въпроси