Kopyalayabileceğiniz 30 vibe coding promptu (kopya kâğıdı)

En iyi vibe coding promptları kısa, belirli ve davranış odaklıdır: uygulamayı kim kullanır, neler yapabilir, neyi tutar ve nasıl görünür. Aşağıda, ilk yapımdan yayınlamaya kadar bulunduğunuz aşamaya göre gruplandırılmış, kopyalayıp yapıştırabileceğiniz 30 prompt var. Köşeli parantezler [içindeki] kısımları kendi ayrıntılarınızla değiştirin.

Bunlar herhangi bir yapay zeka uygulama oluşturucusunda ya da kodlama ajanında çalışır. Arkasındaki mantığı istiyorsanız, yapay zeka uygulama oluşturucuları için prompt nasıl yazılır rehberimiz ilkeleri açıklar. Bu sayfa ise kopya kâğıdıdır.

Bu kopya kâğıdı nasıl kullanılır

• Bir ilk yapım promptuyla başlayın, sonra diğerlerini birer birer kullanın.
• Her prompttan sonra test edin. Bir sonrakini göndermeden önce değişikliği tıklayarak deneyin.
• İşe yarayanı koruyun. Buradaki takip promptlarının çoğu bir nedenle "geri kalan her şeyi aynı tut" ifadesiyle biter.
• Tam metni yapıştırın. Hata mesajları, düğme etiketleri ve ekrandaki kelimeler her zaman açıklamalardan daha iyidir.

İlk yapım promptları

Bunlar uygulamanın şeklini belirler. Her biri kullanıcıları, eylemleri, verileri ve görünümü adlandırır.

1. Basit bir takipçi

Benim için bir [alışkanlık] takipçisi yap. Bir [alışkanlığı] adı ve rengiyle ekleyebileyim, günde bir kez işaretleyebileyim ve 30 günlük bir ızgarayı ile mevcut serimi görebileyim. Yenilemeden sonra da her şey kalsın diye kaydet. Temiz, sade bir tasarım ve telefonda çalışsın.

2. Küçük bir işletme için randevu sayfası

[Kuaförüm] için bir randevu sayfası yap. Müşteriler bir hizmet ([30 dakika kesim, 90 dakika boya]), bir tarih ve [9:00 ile 18:00] arasında boş bir saat dilimi seçsin, sonra ad, telefon ve e-posta girsin. İki kişi aynı saati rezerve edemesin. Girişin arkasında, gün bazında yaklaşan randevuları listeleyen özel bir yönetici sayfası istiyorum.

3. Dahili bir araç

Ekibim için [ekipman ödünçlerini] takip eden dahili bir araç yap. Her ürünün bir adı, bir kodu ve bir durumu olsun (müsait, ödünçte, bozuk). Personel giriş yapıp bir ürünü kendine ödünç alabilsin ve geri iade edebilsin. Duruma göre filtreli bir tablo ve her ürünün kimde olduğunun geçmişini göster.

4. Bekleme listeli bir açılış sayfası

[Ürünüm için: meşgul ebeveynler için bir yemek planlama uygulaması] tek sayfalık bir site yap. Başlık, tek cümlelik alt başlık ve bir e-posta kaydı içeren bir üst bölüm. Ardından üç fayda, kısa bir nasıl çalışır bölümü ve bir SSS. Kayıt e-postalarını bir veritabanına kaydet ve listeyi özel bir yönetici sayfasında göster.

5. Bir müşteri portalı

[Tasarım stüdyom] için bir müşteri portalı yap. Her müşteri giriş yapınca yalnızca kendi projelerini görsün; durum, benim yüklediğim dosyalar ve bir yorum dizisi olsun. Yönetici olarak giriş yaptığımda tüm müşterileri göreyim. Müşteriler birbirinin verilerini asla görmemeli.

6. Bir hesaplayıcı ya da teklif aracı

[Temizlik işim] için bir teklif hesaplayıcı yap. Girdiler: yatak odası sayısı, banyo sayısı, ek hizmetler (fırın, pencereler, buzdolabı) ve sıklık (tek seferlik, haftalık, aylık). Seçenekler değiştikçe fiyatı bir dökümle birlikte göster. Fiyatlar: [fiyat listeni yapıştır]. Teklif isteğini bana e-postayla gönderecek bir düğme ekle.

Planlama promptları

Bunları büyük bir özellikten önce ya da bir şeyi nasıl tarif edeceğinizden emin olmadığınızda kullanın.

7. İnşa etmeden önce planlayın

Herhangi bir kod yazmadan önce, oluşturacağın ekranları, saklayacağın verileri ve benden ihtiyaç duyduğun kararları sade sözlerle anlat. Benim onayımı bekle.

8. Dağınık bir fikri ilk sürüme dönüştürün

Fikrim şu: [notlarını yapıştır]. Hâlâ yararlı olan en küçük ilk sürümü 5–8 madde işaretiyle öner. Sonraya bıraktıklarını ve nedenlerini listele.

9. Neyin eksik olduğunu sorun

Bunu inşa etmeden önce bir geliştirici bana hangi soruları sorardı? Onları birer birer sor, sonra cevaplarımı kısa bir spesifikasyon olarak özetle.

10. Büyük bir değişikliği önce kontrol edin

[Birden fazla kişinin tek bir çalışma alanını paylaştığı ekip hesapları] eklemek istiyorum. Verilerde, ekranlarda ve izinlerde neyin değişmesi gerektiğini ve neyin bozulabileceğini açıkla. Henüz hiçbir şeyi değiştirme.

Tasarım promptları

11. Net bir stil belirleyin

Uygulamanın stilini yenile: sıcak kırık beyaz arka plan, koyu metin, tek bir vurgu rengi [#1F6F50], yuvarlatılmış köşeler, geniş boşluklar ve modern bir sans-serif yazı tipi. Yerleşimi ve her özelliği tam olarak olduğu gibi tut.

12. Bir referansın hissini kopyalayın

Panoyu sakin bir finans uygulaması gibi hissettir: bol beyaz alan, büyük ve kalın sayılar, küçük ve gri etiketler, en üstte tek basit bir grafik. Hiçbir markanın logosunu ya da metnini kopyalama.

13. Telefon yerleşimini düzeltin

375 piksel genişliğindeki bir telefonda [Siparişler sayfasındaki] tablo yana kayıyor ve düğmeler üst üste biniyor. Küçük ekranlarda her satırı üst üste duran bir karta dönüştür. Masaüstü yerleşimini değiştirme.

14. Boş, yükleniyor ve hata durumları

[Projeler listesine] düzgün durumlar ekle: ilk projeyi eklemek için bir düğmesi olan samimi bir boş durum, veri yüklenirken bir yükleme iskeleti ve yükleme başarısız olursa yeniden deneme düğmeli açık bir mesaj.

15. Sağdan sola destek

Arayüzün tam sağdan sola yerleşimli bir Arapça sürümünü ekle. Yön belirten simgeler çevrilmeli; sayılar ve tarihler yerel biçimi kullanmalı. Varsayılan olarak İngilizce kalsın.

Veri ve özellik promptları

16. Verileri kalıcı yapın

Şu anda sayfayı yenilediğimde verilerim kayboluyor. Bunun yerine gerçek bir veritabanına kaydet ve mevcut ekranlar aynı şekilde çalışmaya devam etsin.

17. Giriş ekle

E-posta ve parolayla kayıt ve giriş ekle. Her kullanıcı yalnızca kendi [kayıtlarını] görsün ve düzenleyebilsin. Kullanıcının e-postasını üst çubukta bir çıkış düğmesiyle göster.

18. Roller ekle

İki rol ekle: yönetici ve üye. Yöneticiler [ürünleri] ekleyebilsin, düzenleyebilsin ve silebilsin; üyeler yalnızca görüntüleyebilsin. Bunu yalnızca düğmeleri gizleyerek değil, sunucuda uygula.

19. Arama ve filtre ekle

[Kişiler listesinin] üstüne, ben yazdıkça adı, şirketi ya da e-postayı eşleyen bir arama kutusu ve [duruma] göre bir filtre ekle. Mevcut sıralama düzenini koru.

20. Dosya yüklemeleri ekle

Kullanıcılar her [ilana] en fazla [5] görsel ekleyebilsin, her biri en fazla [5 MB]. İlanda küçük resimler ve tıklayınca daha büyük bir görünüm göster. Görselleri yalnızca sahibi silebilsin.

21. Bir elektronik tablodan içe aktar

[ad, e-posta, telefon, notlar] sütunları olan bir CSV alan bir İçe Aktar düğmesi ekle; ilk 10 satırın önizlemesini göstersin ve kaydetmeden önce onaylamama izin versin. E-postası olmayan satırları atla ve kaç satırın atlandığını bana söyle.

Düzeltme promptları

22. Bir hatayı net bildirin

[Düzenleme formunda Kaydet'e tıkladığımda] "[tam hata metni]" yazısını görüyorum ve değişiklik kaydedilmiyor. Beklenen: değişiklik kaydedilir ve listeye dönerim. Nedenini bul, bir ya da iki cümleyle açıkla, sonra düzelt.

23. Bir düzeltme döngüsünü durdurun

Bunu üç kez düzeltmeye çalıştık ve hâlâ başarısız oluyor. Kod değiştirmeyi bırak. En olası üç nedeni, her birini nasıl kontrol edeceğini ve hangisini düşündüğünü listele.

24. Yan etkileri geri alın

Son değişikliğin tarih seçiciyi düzeltti ama [kenar çubuğu] kayboldu. Kenar çubuğunu tam olduğu gibi geri getir ve tarih seçici düzeltmesini koru.

25. Değiştirmeden önce açıklayın

[Ödeme toplamının] şu anda nasıl hesaplandığını adım adım açıkla ve ilgili dosyalara işaret et. Hiçbir şeyi değiştirme.

Test ve inceleme promptları

26. Uç durumlar

Gerçek bir kullanıcının [randevu formunu] bozabileceği 10 yolu listele: boş alanlar, çok uzun metin, çift tıklamalar, aynı anda iki kişi, yanlış saat dilimleri. Her birini test et ve başarısız olanları düzelt. Neyi değiştirdiğini bildir.

27. Son değişiklikleri özetleyin

Son [beş] adımda yaptığın her değişikliği sade sözlerle özetle ve mevcut verileri etkileyebilecek her şeyi işaretle.

Güvenlik promptları

Bunları vibe coding güvenli mi sayfamızla birlikte kullanın.

28. Veri erişimini kontrol edin

Sunucu kodunu kontrol et: giriş yapmış bir kullanıcı, bir istekteki ID'yi değiştirerek başka bir kullanıcının [kayıtlarını] okuyabilir ya da değiştirebilir mi? Erişimin nerede kontrol edildiğini göster ve boşlukları düzelt.

29. Açığa çıkmış gizli bilgileri kontrol edin

Bu uygulamanın kullandığı her API anahtarını, parolayı ya da belirteci ve her birinin nerede saklandığını listele. Hiçbirinin tarayıcıda çalışan kodda ya da dosyalara işlenmiş halde olmadığından emin ol. Varsa onları gizli bilgilere taşı.

Yayınlama promptları

30. Yayın öncesi geçiş

Bunu gerçek kullanıcılar için yayınlamak üzereyim. Bir inceleyici gibi gözden geçir: bozuk bağlantılar, eksik sayfa başlıkları ve açıklamalar, doğrulamasız formlar, yavaş sayfalar, konsol hataları ve telefonda bitmemiş görünen her şey. Önem sırasına göre bir liste ver, sonra ilk beşini düzelt.

Kaçınılması gereken promptlar

Bazı promptlar güvenilir biçimde daha kötü sonuç üretir:

• "Daha iyi yap." Nasıl daha iyi? Ekranı ve değişikliği adlandırın.
• "Her şeyi düzelt." Yapay zeka çok şey değiştirir ve neyin hareket ettiğini bilemezsiniz.
• "[Kütüphane] ve [çerçeve] ve [desen] kullan." Bir nedeniniz yoksa davranışı tarif edin ve yığını aracın seçmesine izin verin.
• "İşte API anahtarım: …" Gizli bilgileri asla bir sohbete yapıştırmayın. Aracın gizli bilgi ayarlarını kullanın.
• Tek bir mesajda on özellik. Bunları bölün.

Promptları bir alışkanlığa dönüştürmek

Birkaç projeden sonra bunların kendi versiyonlarınız olacak. Bunları bir notta tutun ve işe yarayanları yeniden kullanın. Mythex ayrıca projeler arasında kim olduğunuzu ve nasıl çalıştığınızı hatırlar; bu yüzden tekrar ettiğiniz tercihler, örneğin olağan stiliniz ya da yığınınız, her seferinde yeniden yazmanıza gerek kalmadan taşınır.

İlk prompt konusunda takılırsanız, ücretsiz uygulama prompt oluşturucu tek satırlık bir fikri daha kapsamlı bir başlangıç promptuna çevirir. Bu promptların pratikte ne ürettiğini görmek için vibe coding örneklerimize bakın ya da 1 numaralı promptu yapay zeka uygulama oluşturucusuna yapıştırıp köşeli parantezleri kendi fikrinizle değiştirin.

Sorular