Vibe Coding Örnekleri: 10 Gerçek Uygulama Türü, Promptlar ve Ne Ters Gitti

En yaygın vibe coding örnekleri küçük ve kullanışlı web uygulamalarıdır: takip araçları, randevu sayfaları, dahili araçlar, müşteri portalları, açılış sayfaları, testler, panolar ve basit yapay zeka araçları. Aşağıda bunlardan on tanesi var. Her biri için kimin yaptığını, ilk promptu, genellikle neyin ters gittiğini ve bunu düzelten takip promptunu göreceksiniz.

Bunlar, insanların yapay zeka uygulama oluşturucularına en sık getirdiği projelerin birleşik örnekleridir; tek bir kişinin vaka çalışması değil. Promptlar kopyalanabilir. Hatalar ise tekrar tekrar ortaya çıkanlardır ve bu yüzden en faydalı kısım onlardır. Vibe coding'in kendisi sizin için yeniyse vibe coding nedir sayfasıyla başlayın.

1. Kişisel bütçe takipçisi

Kimin yaptığı: elektronik tabloları denemiş ve pes etmiş bireyler.

İlk prompt:

Aylık bir bütçe takipçisi yap. Harcamaları tutarla, kategoriyle (yemek, kira, ulaşım, eğlence, diğer), tarihle ve bir notla ekliyorum. Bu ayın kategori bazındaki toplamını bir çubuk grafikte ve son harcamaların listesini göster. Kategori başına bir bütçe belirleyebilir ve ne kadar kaldığını görebilirim.

Ne ters gitti: grafik bu ayki harcamaları değil, şimdiye kadar girilen her harcamayı saydı; bu yüzden ikinci aya gelindiğinde her kategori bütçeyi aşmış gibi göründü. Ayrıca virgüllü girilen tutarlar ("1,200") 1 olarak kaydedildi.

Düzeltme promptu:

Grafik ve toplamlar yalnızca seçilen aydaki harcamaları içermeli. Üstte bir ay seçici ekle, varsayılan olarak içinde bulunulan ay olsun. Ayrıca virgül ya da boşlukla yazılmış tutarları kabul et ve sayı olarak kaydet.

Ders: "bu ay" bir kuraldır. Kuralları yüksek sesle söyleyin.

2. Küçük bir kuaför için randevu sayfası

Kimin yaptığı: telefonla ve DM'lerle randevu almaktan bıkmış küçük işletme sahipleri.

İlk prompt:

Kuaförüm için bir randevu sayfası yap. Müşteriler bir hizmet, bir tarih ve boş bir saat dilimi seçsin, sonra ad ve telefon girsin. Gün bazında randevuları gösteren, girişin arkasında özel bir yönetici sayfam olsun.

Ne ters gitti: iki müşteri, birbirinden bir dakika arayla aynı 10:00 saatini rezerve etti; çünkü sayfa uygunluğu yalnızca ilk yüklendiğinde kontrol ediyordu. 90 dakikalık bir renk boyama randevusu da kendisinden sonraki saatleri bloke etmedi.

Düzeltme promptu:

Bir müşteri randevu gönderdiğinde, kapsadığı her saat diliminin hâlâ boş olduğunu sunucuda kontrol et; boş değilse "Bu saat az önce doldu" mesajıyla reddet. Bir hizmet tam süresini bloke eder; yani 10:00'daki 90 dakikalık bir randevu 10:00, 10:30 ve 11:00'ı bloke eder.

Ders: iki kişinin aynı anda yapabileceği her şey sunucu tarafında bir kontrol gerektirir. Tam sürümü için randevu uygulaması nasıl yapılır sayfasına bakın.

3. QR kodlu bir restoran menüsü

Kimin yaptığı: menüleri çok sık yeniden bastıran kafe ve restoran sahipleri.

İlk prompt:

Kafem için mobil uyumlu bir menü sitesi yap. Kahvaltı, öğle yemeği, içecekler ve tatlılar için bölümler olsun; her ürünün adı, fiyatı, kısa açıklaması ve diyet etiketleri (vegan, glütensiz) olsun. Ürünleri düzenleyip tükendi olarak işaretleyebileceğim bir yönetici sayfası istiyorum. Menüye bağlanan, yazdırabileceğim bir QR kod göster.

Ne ters gitti: bir şey bozulmadı, ama menü kafe Wi-Fi'ında yavaştı; çünkü her ürün için tam boyutlu telefon fotoğrafları yükleniyordu.

Düzeltme promptu:

Menü fotoğrafları çok ağır. Yüklenen görselleri en fazla 800 piksel genişliğe küçült, sıkıştır ve ziyaretçi kaydırdıkça tembel yükleme (lazy load) ile getir.

Ders: yalnızca ofisinizde değil, yavaş bir bağlantıda test edin.

4. Bir ekip için ekipman veya stok takipçisi

Kimin yaptığı: paylaşılan bir elektronik tabloyu değiştiren operasyon ekipleri.

İlk prompt:

Depo ekibimiz için bir envanter aracı yap. Ürünlerin adı, SKU'su, miktarı, konumu ve minimum seviyesi olsun. Personel giriş yapıp stok ekleyebilsin, bir nedenle stok çıkarabilsin ve minimum seviyenin altındaki ürünler kırmızıyla vurgulanmış bir listede görünsün. Her değişikliğin ve kimin yaptığının geçmişini tut.

Ne ters gitti: geçmişte isimler yerine "kullanıcı 3" görünüyordu ve mevcut olandan fazla stok çıkarmak miktarı eksiye düşürdü.

Düzeltme promptu:

Geçmişte kişinin ID'si yerine adı göster. Miktarı sıfırın altına düşürecek bir çıkarmaya izin verme; bunun yerine "Stokta yalnızca 4 var" göster.

Ders: yalnızca neyin mümkün olması gerektiğini değil, neyin imkânsız olması gerektiğini de tarif edin. Envanter uygulaması nasıl yapılır rehberimiz geri kalanını anlatır.

5. Bir serbest çalışan veya stüdyo için müşteri portalı

Kimin yaptığı: tasarımcılar, muhasebeciler, danışmanlar ve ajanslar.

İlk prompt:

Bir müşteri portalı yap. Müşterilerimi e-postayla davet ediyorum. Her müşteri giriş yapınca yalnızca kendi projelerini, dosyalarını ve faturalarını görsün ve yorum bırakabilsin. Yönetici olarak giriş yaptığımda her şeyi göreyim.

Ne ters gitti: listedeki en önemli hata buydu. Sayfalar her müşteriye yalnızca kendi projelerini gösteriyordu, ama adres çubuğundaki numarayı değiştirdiğinde sunucu herhangi bir projeyi döndürüyordu. Bir müşteri olarak gezinmek bunu hiç ortaya çıkarmadı.

Düzeltme promptu:

Proje, dosya, yorum veya fatura döndüren her sunucu rotasını kontrol et. Her biri giriş yapmış müşterinin kaydın sahibi olduğunu doğrulamalı, aksi halde "bulunamadı" döndürmeli. Sonra test et: müşteri A olarak giriş yap ve müşteri B'nin projesini ID'siyle açmaya çalış.

Ders: ekranda bir şeyi gizlemek onu korumakla aynı şey değildir. Bu konuda daha fazlası için vibe coding güvenli mi sayfasına bakın.

6. Bekleme listeli bir tanıtım sayfası

Kimin yaptığı: bir fikri inşa etmeden önce test eden kurucular.

İlk prompt:

Öğretmenlerin ders planlayıp ödeme toplamasına yardımcı olan bir uygulama için açılış sayfası yap. Ana başlık, alt başlık, e-posta kaydı, üç fayda, nasıl çalıştığı bölümü ve bir SSS olsun. Kayıtları tarihleriyle birlikte bir veritabanına kaydet ve özel bir sayfadan CSV olarak indirebileyim.

Ne ters gitti: birkaç gün içinde liste botlardan gelen çöp kayıtlarla doldu ve sayfanın başlığı ya da açıklaması yoktu; bu yüzden paylaşılan bağlantılar boş bir önizleme gösterdi.

Düzeltme promptu:

Kayıt formuna temel bot koruması ekle (gizli bir tuzak alanı ve IP başına saatte en fazla 5 kayıt sınırı). Bir sayfa başlığı, meta açıklaması ve sosyal paylaşım görseli ekle.

Ders: herkese açık bir form bulunur. Bekleme listesi sayfası nasıl yapılır sayfasına bakın.

7. Bir öğretmen için test uygulaması

Kimin yaptığı: bir LMS'ten daha hafif bir şey isteyen öğretmenler ve eğitmenler.

İlk prompt:

Sınıfım için bir test uygulaması yap. Her biri tek doğru cevaplı çoktan seçmeli sorularla testler oluşturuyorum. Öğrenciler bir kodla ve ilk adlarıyla katılsın, soruları cevaplasın ve sonunda puanlarını görsün. Her test için bir sonuç tablosu göreyim.

Ne ters gitti: doğru cevaplar sorularla birlikte tarayıcıya gönderiliyordu; bu yüzden meraklı bir öğrenci sayfa kaynağında bunları okuyabiliyordu. Öğrenciler ayrıca %100 alana kadar tekrar gönderebiliyordu.

Düzeltme promptu:

Doğru cevapları tarayıcıya gönderme. Cevapları gönderimden sonra sunucuda kontrol et. Test başına öğrenci adı başına yalnızca bir gönderime izin ver ve biri tekrar denediğinde öğretmene göster.

Ders: tarayıcı kullanıcıya aittir. Orada olan her şey okunabilir.

8. Küçük bir yapay zeka aracı

Kimin yaptığı: odaklı bir yapay zeka yardımcısı isteyen pazarlamacılar, yazarlar ve kurucular.

İlk prompt:

Bir ürün açıklamasını farklı tonlarda (samimi, uzman, eğlenceli, kısa, uzun) beş sosyal medya gönderisine dönüştüren bir araç yap. Bir yapay zeka API'si kullan. Açıklamayı yapıştırıyorum, bir platform seçiyorum ve kopyala düğmeleriyle gönderileri alıyorum.

Ne ters gitti: ilk sürüm, API anahtarı sayfanın içindeyken yapay zeka servisini doğrudan tarayıcıdan çağırıyordu; herkes anahtarı kopyalayıp faturayı şişirebilirdi.

Düzeltme promptu:

Yapay zeka çağrısını sunucuya taşı. API anahtarını bir gizli bilgi olarak sakla, asla ön yüz kodunda tutma. Her ziyaretçiyi günde en fazla 20 üretimle sınırla.

Ders: anahtarlar sunucudaki gizli bilgilerde durmalıdır. API anahtarları nasıl güvende tutulur ve uygulamanıza yapay zeka özellikleri nasıl eklenir sayfalarına bakın.

9. Arapça ve İngilizce bir işletme sitesi

Kimin yaptığı: Körfez ve daha geniş Arap dünyasında iki dile hizmet veren işletmeler.

İlk prompt:

İç mimarlık şirketim için dil değiştirmeli, Arapça ve İngilizce bir site yap. Sayfalar: ana sayfa, hizmetler, portfolyo, hakkımızda ve iletişim. Arapça tamamen sağdan sola olmalı.

Ne ters gitti: Arapça metin sağa hizalıydı ama yerleşim aynalanmamıştı: oklar hâlâ yanlış yöne bakıyordu ve menü yanlış tarafta duruyordu. Telefon numaraları da bazı yerlerde ters görünüyordu.

Düzeltme promptu:

Arapça'da tüm yerleşimi aynala: sayfa yönünü sağdan sola yap, menüyü sağa koy, yön belirten simgeleri çevir ve Arapça metnin içinde telefon numaralarını ve e-postaları soldan sağa tut.

Ders: sağdan sola bir hizalama değil, bir yerleşimdir. Mythex Arapça ve diğer sağdan sola yerleşimleri destekler ve doğrudan Arapça prompt verebilirsiniz.

10. Telefon uygulamasına dönüşen bir takipçi

Kimin yaptığı: kullanıcıları telefonlarında olan koçlar, spor salonları ve topluluk grupları.

İlk prompt:

Kişisel antrenman müşterilerim için bir antrenman günlüğü yap. Her müşteri giriş yapsın, benim o hafta için atadığım planı görsün, egzersizleri işaretlesin ve ağırlıkları kaydetsin. Her müşterinin ilerlemesini bir grafikte göreyim.

Ne ters gitti: web uygulaması çalışıyordu, ama telefonlarda düğmeler antrenman sırasında dokunmak için çok küçüktü ve grafik okunamıyordu.

Düzeltme promptu:

Bunu telefonda tek elle kullanım için tasarla: ekranın altında büyük dokunma alanları, ekran başına bir egzersiz ve büyük İleri ve Bitti düğmeleri, sade bir haftalık ilerleme grafiği.

Ders: insanlar telefonda kullanacaksa önce telefon için tasarlayın. Mythex Pro'da yayınlanmış uygulama, Google Play için bir Android uygulamasına ve TestFlight'a gönderilen bir iPhone uygulamasına dönüşebilir; telefon uygulaması yayınlanmış uygulamanızı açar, bu yüzden her Yayınlama onu günceller. Mobil uygulama oluşturucu sayfasına bakın.

Bu örneklerin arkasındaki kalıplar

On örneğin tamamında hatalar birkaç gruba ayrılır:

Bunların hiçbiri kod okumanızı gerektirmez. Meraklı, biraz düşmanca bir kullanıcı gibi test etmenizi ve gördüğünüzü kesin olarak tarif etmenizi gerektirir.

Birini kendiniz deneyin

Fikrinize en yakın örneği seçin, ilk promptunu kopyalayın ve ayrıntıları değiştirin. Sonra paylaşmadan önce düzeltme promptunu bir kontrol listesi gibi kullanın. Vibe coding prompt kopya kâğıdımızda 30 tane daha var ve vibe coding ile uygulama nasıl yapılır rehberi bir projeyi fikirden yayınlanmış uygulamaya kadar anlatır. Hazır olduğunuzda yapay zeka uygulama oluşturucusunda başlatın ya da bir başlangıç için şablonlara göz atın.

Sorular