30 vibe coding промпты: көшіріп алуға дайын парақ

Ең жақсы vibe coding промпттары қысқа, нақты және әрекетке қатысты: қосымшаны kim пайдаланады, олар не істей алады, ол не сақтайды және қалай көрінеді. Төменде сіз қай кезеңде тұрғаныңызға қарай, алғашқы құрастырудан жариялауға дейін көшіріп қоюға болатын 30 промпт берілген. [Жақшаға] алынған бөліктерді өз мәліметтеріңізбен ауыстырыңыз.

Олар кез келген AI қосымша құрастырушысында немесе кодтау агентінде жұмыс істейді. Олардың артындағы ойды қаласаңыз, AI қосымша құрастырушыларына арналған промпттарды қалай жазу керек туралы ұзын мақала принциптерді түсіндіреді. Бұл бет — парақ.

Бұл парақты қалай пайдалану керек

• Бір алғашқы құрастыру промптынан бастаңыз, содан кейін басқаларын бір-бірлеп қолданыңыз.
• Әр промпттан кейін сынаңыз. Келесісін жібермес бұрын өзгерісті басып өтіңіз.
• Жақсысын сақтаңыз. Бұл жерде көптеген кейінгі промпттар «қалғанын бірдей қалдырыңыз» деп аяқталады, оның себебі бар.
• Мәтінді дәл көшіріңіз. Қате хабарламалары, түйме жазулары және экрандағы сөздер сипаттамадан әрқашан артық.

Алғашқы құрастыру промпттары

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

1. Қарапайым трекер

Маған [әдет] трекерін құрастырыңыз. Мен [әдетті] атауы мен түсімен қоса аламын, оны күнде бір рет белгілей аламын және 30 күндік торды және ағымдағы қатарымды көре аламын. Бәрін сақтаңыз, бет жаңартылғаннан кейін де тұрсын. Таза, минималды дизайн, телефонда жұмыс істейтін.

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

[Шаш үлгерушісі] салонына арналған брондау бетін құрастырыңыз. Клиенттер қызметті ([30 минуттық қиылу, 90 минуттық бояу]), күнді және [9:00-ден 18:00-ге дейінгі] бос уақыт слотын таңдайды, содан кейін атын, телефонын және поштасын енгізеді. Екі адам бір слотты брондай алмайды. Логин арқылы жабық жеке әкімші беті керек, ол күн бойынша алдағы брондауларды тізеді.

3. Ішкі құрал

Командам үшін [жабдық беру] бақылайтын ішкі құрал құрастырыңыз. Әр элементтің атауы, коды және күйі (бос, берілген, бұзық) бар. Қызметкерлер кіріп, элементті өздеріне беріп, қайтара алады. Күй бойынша сүзгісі бар кесте және әр элементті кім алғанының тарихы көрсетілсін.

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

[Менің өнімім: бос ата-аналарға арналған тамақ жоспарлау қосымшасы] үшін бір беттік веб-сайт құрастырыңыз. Басты тақырып, бір сөйлемдік қосымша жол және электрондық пошта арқылы тіркелу. Содан кейін үш артықшылық, қысқа қалай жұмыс істейтіні бөлімі және FAQ. Тіркелу поштасын дерекқорға сақтаңыз және тізімді жеке әкімші бетінде көрсетіңіз.

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

[Дизайн студиясы] үшін клиент порталын құрастырыңыз. Әр клиент кіріп, тек өз жобаларын көреді: күйі, мен жүктеген файлдар және пікірлер тізбегі бар. Мен әкімші ретінде кіріп, барлық клиенттерді көремін. Клиенттер бір-бірінің деректерін ешқашан көрмеуі керек.

6. Есептегіш немесе баға құралы

[Тазалау бизнесі] үшін баға калькуляторын құрастырыңыз. Енгізулер: бөлмелер саны, ванналар саны, қосымша қызметтер (пеш, терезелер, тоңазытқыш) және жиілік (бір рет, апта сайын, ай сайын). Опциялар өзгерген сайын бағаны ажыратылымымен көрсетіңіз. Баға тізімі: [баға тізіміңізді қойыңыз]. Баға сұрауын маған поштамен жіберетін түйме қосыңыз.

Жоспарлау промпттары

Бұларды үлкен мүмкіндіктің алдында немесе бір нәрсені қалай сипаттауды білмегенде қолданыңыз.

7. Құрастырмас бұрын жоспарлаңыз

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

8. Ойдағы идеяны бірінші нұсқаға айналдырыңыз

Менің идеям мынада: [жазбаларды қойыңыз]. Пайдалы болатын ең кішкентай бірінші нұсқаны 5–8 тізбек нүктесімен ұсыныңыз. Кейінге қалдыратын нәрселеріңізді және неге екенін тізіңіз.

9. Не жетіспейтінін сұраңыз

Осыны құрастырмас бұрын әзірлеуші маған қандай сұрақтар қояды? Оларды бірер-бірлеп қойыңыз, содан кейін жауаптарымды қысқа спецификацияға түйіндеңіз.

10. Үлкен өзгерісті алдын ала тексеріңіз

Мен [бір жұмыс кеңістігін бірнеше адам бөлісетін команда аккаунттарын] қосқым келеді. Деректерде, экрандарда және рұқсаттарда нені өзгерту керек екенін және не бұзылуы мүмкін екенін түсіндіріңіз. Әзірге ештеңені өзгертпеңіз.

Дизайн промпттары

11. Анық стиль орнатыңыз

Қосымшаны қайта безендіріңіз: жылы сүт түсті фон, қара мәтін, бір акцент түсі [#1F6F50], дөңгеленген бұрыштар, кең аралық және заманауи sans-serif қаріп. Макетті және әр функцияны дәл қалпында қалдырыңыз.

12. Анықтаманың сезімін көшіріңіз

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

13. Телефон макетін түзетіңіз

375 px ені бар телефонда [Тапсырыстар бетіндегі] кесте жанға қарай айналады және түймелер бір-бірінің үстіне шығады. Шағын экрандарда әр жолды тізбектелген карточкаға айналдырыңыз. Жұмыс үстеліндегі макетті өзгертпеңіз.

14. Бос, жүктелу және қате күйлері

[Жобалар тізіміне] дұрыс күйлер қосыңыз: бірінші жобаны қосу түймесі бар достық бос күй, деректер жүктелгенде жүктелу қаңқасы, ал жүктеу сәтсіз болса, қайта көру түймесі бар анық хабарлама.

15. Оңнан солға қолдау

Интерфейстің араб нұсқасын толық оңнан солға орналасумен қосыңыз. Бағытты көрсететін белгішелер аударылсын; сандар мен күндер жергілікті форматта болсын. Әдепкі ретінде ағылшын тілін қалдырыңыз.

Деректер және функция промпттары

16. Деректі сақтаңыз

Қазір беттерді жаңартқанда деректерім жоғалып кетеді. Оның орнына нақты дерекқорда сақтаңыз, ал ағымдағы экрандар бұрынғыдай жұмыс істесін.

17. Кіруді қосыңыз

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

18. Рөлдерді қосыңыз

Екі рөл қосыңыз: әкімші және мүше. Әкімшілер [өнімдерді] қоса, өңдей және жоя алады; мүшелер тек көре алады. Мұны серверде орындаңыз, тек түймелерді жасыру арқылы емес.

19. Іздеу мен сүзгілерді қосыңыз

[Контактілер тізімінің] үстіне іздеу өрісін қосыңыз: мен теріп жатқанда атына, компаниясына немесе поштасына сәйкес келсін, сондай-ақ [күй] бойынша сүзгі қосыңыз. Ағымдағы сұрыптау ретін сақтаңыз.

20. Файл жүктеуді қосыңыз

Пайдаланушыларға әр [тізімге] [5] суретке дейін тіркеуге рұқсат етіңіз, әрқайсысы [5 МБ] дейін. Тізімде кішкентай суреттерді және басқанда үлкен көріністі көрсетіңіз. Суреттерін тек иесі жоя алсын.

21. Электрондық кестеден импорттау

[атауы, пошта, телефон, ескертпе] бағандары бар CSV алатын Импорттау түймесін қосыңыз; алғашқы 10 жолдың алдын ала көрінісін көрсетіп, сақтамас бұрын растауыма мүмкіндік беріңіз. Поштасы жоқ жолдарды өткізіп жіберіңіз және неше жол өткізілгенін айтыңыз.

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

22. Қатені анық хабарлаңыз

[Өңдеу формасындағы Сақтау түймесін басқанда] «[қатенің дәл мәтіні]» хабарламасы шығады және өзгеріс сақталмайды. Күтілген нәтиже: өзгеріс сақталады және тізімге оралам. Себебін табыңыз, оны бір-екі сөйлеммен түсіндіріңіз, содан кейін түзетіңіз.

23. Түзету циклін тоқтатыңыз

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

24. Жанама әсерлерді түзетіңіз

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

25. Өзгерте алдын ала түсіндіріңіз

[Төлем соммасы] қазір қалай есептелетінін қадам-қадам түсіндіріңіз, қатысатын файлдарды көрсетіңіз. Ештеңені өзгертпеңіз.

Сынау және шолу промпттары

26. Шекаралық жағдайлар

Нақты пайдаланушы [брондау формасын] қалай бұзуы мүмкін 10 жолды тізіңіз: бос өрістер, өте ұзын мәтін, екі рет басу, бір уақытта екі адам, қате уақыт белдеулері. Әрқайсысын сынаңыз және сәтсіз болғанын түзетіңіз. Не өзгерткеніңізді хабарлаңыз.

27. Соңғы өзгерістерді қорытыңыз

Соңғы [бес] қадамда жасаған әр өзгерісті қарапайым сөзбен қорытыңыз және қолданыстағы деректерге әсер етуі мүмкін нәрсені белгілеңіз.

Қауіпсіздік промпттары

Бұларды vibe coding қауіпсіз бе? деген бетімізбен қатар қолданыңыз.

28. Деректерге кіруді тексеріңіз

Сервер кодын тексеріңіз: кірген пайдаланушы сұраудағы ID-ді өзгерту арқылы басқа пайдаланушының [жазбаларын] оқи алама немесе өзгерте алама? Кіруге тексеру қай жерде жасалатынын көрсетіңіз және кез келген олқылықты түзетіңіз.

29. Ашылған құпияларды тексеріңіз

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

Жариялау промпттары

30. Іске қосар алдындағы өтім

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

Қолдануға болмайтын промпттар

Кейбір промпттар нәтижені нашарлатады:

• «Жақсартыңыз.» Қалай жақсарту керек? Экранды және өзгерісті атаңыз.
• «Барлығын түзетіңіз.» AI көп нәрсені өзгертеді, ал не қозғалғанын білмейсіз.
• «[Кітапхана] және [фреймворк] және [тәсіл] пайдаланыңыз.» Нақты себебіңіз болмаса, мінез-құлықты сипаттаңыз да, стекті құралдың өзі таңдасын.
• «Менің API кілтім мынау: …» Чатқа ешқашан құпияны қоймаңыз. Құралдың құпиялар баптауларын қолданыңыз.
• Бір хабарламада он функция. Оларды бөліңіз.

Промпттарды әдетке айналдыру

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

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

Сұрақтар