MASTER VIBE CODER AKADEMİSİ · USTA ÖZELLİKLERİ
Biz Kod Yazmıyoruz,
Biz Türkçe Prompt Veriyoruz!
Müşterinin masada QR kodu okuttuğunda karşılaştığı Wi-Fi Şifre Kopyalayıcı, Google Haritalar 5 Yıldız Yorum Butonu, Akıllı Alerjen Rozetleri ve Günün Sürpriz İkram Penceresi ile donatılmış usta QR menü:
Flat White Latte Art
Çırak Türkçe Sipariş Verdi, AI Asistanı Usta Özelliklerini Çizdi!
1. Kağıt Menüyü "Akıllı Gözlük" İle Okutuyoruz
Müşteri buruşuk kağıt menünün fotoğrafını atınca yapay zekâya akıllı gözlük taktırıp tüm yazıları okutuyoruz.
Fotoğraftan Yazıları Okuma
Benzetme: Tıpkı bir insanın akıllı gözlük takıp kağıttaki yazıları okuyup zihnine yazması gibi. AI resmi inceler; kategorileri, yemek adlarını ve fiyatları okur.
"TL veya ₺ İkonu Basmak Yasaktır!"
Benzetme: Mutfak kapısına asılan yasak tabelasıdır. Müşteri *"TL ikonu olmasın"* dediğinde garsonun fiyatın yanına TL yazmasını engelleriz.
2. NB2 Ressam Robotumuzun Çizdiği Gerçek Görseller
Biz sadece Türkçe prompt siparişini verdik; AI asistanımız Google Cloud Vertex AI ressam robotuyla görselleri çizdi ve WebP yaptı:
Flat White Rosetta
`imgs/156.webp` (47 KB)
Caramel Latte
`imgs/157.webp` (40 KB)
San Sebastian Cheesecake
`imgs/163.webp` (70 KB)
Cezveli Türk Kahvesi
`imgs/164.webp` (60 KB)
Berry Hibiscus Mocktail
`imgs/159.webp` (65 KB)
Tost & Patates Tabağı
`imgs/171.webp` (53 KB)Biz Kod Yazmıyoruz, Asistan Arka Planda Robot Kollarını Çalıştırıyor!
Vibe Coder olarak sen siyah ekranda kod yazmazsın. Sen sadece aşağıdaki Türkçe siparişi verirsin. AI asistanın senin verdiğin bu siparişi anlayıp repodaki ressam robot kolunu (generate_craft_drinks.py) arka planda otomatik tetikler:
🗣️ 1. ÇIRAK (SENİN VERDİĞİN PROMPT)
"Asistanım, ressam robotumuzu (NB2) çalıştır. Craft Kafe menüsündeki Flat White, San Sebastian Cheesecake ve Hibiscus için dumanı tüten nefis görseller üret, hepsini vakumlayıp WebP yap."
🤖 2. AI ASİSTANIN ARKA PLANDAKİ HAREKETİ
AI asistanın senin siparişini alır. Arka planda `generate_craft_drinks.py` robot kolunu çalıştırır. Resimleri Vertex AI ile çizer, WebP'ye dönüştürür ve menüdeki yerine şıp diye yerleştirir.
Bir QR Menüde Neler Olmalı? (Usta Özellikler Kataloğu)
Müşterinin masada QR kodu okuttuğunda karşısına çıkan usta bileşenlerin görsel kartları:
Kafenin amblem logosu, dumanı tüten latte art kapak resmi, sloganı ve tek tıkla "Yol tarifi al →" butonu.
Müşteri garsonu çağırmadan Wi-Fi butonuna tıklar; şifre panoya kopyalanır ve Wi-Fi'ye şıp diye bağlanır.
Restoran sahibinin Google puanını uçuran harika kart: Müşteri 5 yıldız verip yorum yapınca ikramını alır.
Hassasiyeti olan müşterilere güven veren rozetler. Yemek kartında gluten, laktoz veya vegan bilgisi şıp diye görünür.
QR menü açıldığında müşteriye tatlı bir karşılama sürprizi sunan, siparişi iştahlandıran hediye penceresi.
Sayfa aşağı kaydırıldıkça ekranın en üstüne kilitlenen ve bulunulan kategoriyi parlatan yapışkan şerit.
Günün öne çıkan şef spesiyallerinin ve indirimli kahve menülerinin yan yana dizildiği albüm slider'ı.
Vakumlanmış dumanı tüten WebP resim, kremsi açıklama, TL ikonsuz net fiyat (160) ve kalp (favori) düğmesi.
5. Craft Cafe Gerçek Admin Paneli Nasıl Kurgulanır?
Restoran sahibinin garson çağırmadan fiyat ezmesi, stok kapatması ve istatistik izlemesi için Türkçe sipariş şablonları:
Patron Giriş Kapısı
Benzetme: Kafenin anahtar gerektiren kasa dairesidir.
En Çok Hangi Yemek Görüntülendi?
Benzetme: Patronun gün sonunda kasadaki sayaçları incelemesidir.
Zam veya İndirimi Anında Yansıtma
Benzetme: Fiyat etiketinin üzerine yenisini yapıştırmaktır.
Biten Yemeği Tek Tıkla Kapatma
Benzetme: Mutfak tahtasında yemeğin üzerini çizmektir.
6. Animasyonları Görsel İkonlar İle Anlıyoruz
Ekrandaki tatlı hareketlerin görsel önizlemeleri ve sevimli benzetmeleri:
| GÖRSEL ÖNİZLEME | TEKNİK ADI | BEBEK MODU BENZETMESİ | EKRANDA NE OLUR? | HİSSİYATI (UX) |
|---|---|---|---|---|
|
|
Staggered Entrance | 🎭 Tiyatro Oyuncuları Sırası | Menü kartları sahneye teker teker, 0.1 saniye arayla arkası arkasına süzülerek çıkar. | Sayfa pat diye değil, çok zarif ve akıcı açılır. |
|
📌 STICKY BAR
|
Sticky Shift & Glow | 📌 Seni Takip Eden Parlayan Bant | Sayfayı kaydırdıkça en üstteki menü şeridi ekrana yapışır ve bulunduğun kategori parlar. | Kullanıcı menüde nerede olduğunu asla kaybetmez. |
|
|
Horizontal Slider | 🎠 Sevimli Atlıkarınca / Albüm | Günün kampanyaları yan yana dizilir, parmağınla atlıkarınca gibi kaydırırsın. | Fırsatlar müşterinin gözüne şıp diye çarpar. |
|
|
Micro Scale Zoom | 🔍 Nefis Yakınlaşma / "Beni Ye" | Parmağını/fareni yemeğin resmine yaklaştırınca resim %5 hafifçe sana doğru kabarır. | "Beni sipariş et" iştah duygusu uyandırır. |
7. Ne Neden Oldu? (Teknik & Görsel Teşhis Tablosu)
Yapılan her değişikliğin arkasındaki sebep-sonuç ilişkisi ve görsel kartı:
| GÖRSEL KART | YAPILAN İŞLEM (NE YAPTIK?) | NEDEN OLDU? (GEREKÇE & SEBEP) | SONUÇ (EKRANDA NE DEĞİŞTİ?) |
|---|---|---|---|
|
|
Koyu Orman Yeşili Seçimi | Zincir kahveci görünümünü kırıp sıcak, kaliteli mahalle kafesi hissi vermek için. | Sayfa anında lüks ve sakin bir ortama dönüştü. |
|
Yol tarifi al →
|
3 Butondan 2'sinin Silinmesi | Çok fazla buton ziyaretçinin kafasını karıştırır ve aksiyon almasını engeller. | Kullanıcı sadece "Yol tarifi al" butonuna odaklandı. |
|
📱 390px (100% Buton)
|
Mobilde Buton %100 Yapıldı | Telefonda yürürken tek elle butona tıklamayı kolaylaştırmak için (Thumb Zone). | 390px ekranlarda buton parmakla şıp diye tıklanır oldu. |
|
85 KB
|
WebP Formatına Dönüştürme | NB2 ham görselleri 8 MB'tı; 4G'de site 4 sn bekletiyordu. | Görsel boyutu 85 KB'a düştü, sayfa 0.3 saniyede açıldı. |
📱 iPhone 17 Pro Dynamic Island Canlı Test Alanı
Aşağıdaki iPhone 17 Pro maketinin ekranını parmağınla/farenle aşağı kaydırarak (scroll ederek) menünün ve yapışkan barların mükemmel akışını dene:
Kendine ait bir masa bul.
Latte art rosetta
Akışkan merkez
Soğuk nane
Mobil QA Testi & Furkan Usta Kalkanı 🛡️
Sayfamız bittiğinde telefon boyutunda (390x844) test ederiz: Fiyatlarda TL yasak tabelasına uyulmuş mu? Görseller vakumlu valizden geçmiş mi? Ve en önemlisi **Furkan Usta Onayı** alınmış mı?