188 lines
11 KiB
Markdown
188 lines
11 KiB
Markdown
# menul.io — UI/UX Tasarım Promptları (Stitch & AI UI Engine) 🎨
|
||
|
||
Bu dokümanda **menul.io** platformunun tüm mobil ve web ekranları için **Stitch (Google Stitch)**, Figma AI, Midjourney UI ve UI Generation araçlarında kullanılabilecek **kapsamlı ve detaylı tasarım promptları** yer almaktadır.
|
||
|
||
---
|
||
|
||
## 🎨 Tasarım Dili & Tasarım Sistemi Standartları (Tüm Ekranlar İçin Ortak)
|
||
* **Marka:** `menul.io` (AI Destekli Yeni Nesil QR Menü SaaS)
|
||
* **Renk Paleti:**
|
||
* Ana Renk: Şampanya Altını (`#C8A96B` / `#D4AF37`) & Amber (`#F59E0B`)
|
||
* Arka Plan: Koyu Lüks Mod (`#0F0F12` / `#18181B`) ve İpeksi Krem Açık Mod (`#FAF8F5`)
|
||
* Vurgu & Durum: Canlı Zümrüt Yeşili (`#10B981` / Yayında), Canlı Kırmızı (`#EF4444` / Tükendi - 86)
|
||
* **Tipografi:** Modern Serif başlıklar (Playfair Display / Serif), gövde metinleri için kristal netliğinde sans-serif (Inter / Plus Jakarta Sans).
|
||
* **Tasarım Hissi:** Apple HIG ergonomisi, yumuşak cam efektleri (Glassmorphism), derin gölgeler (Soft ambient shadows), 16-24px rounded border radius.
|
||
|
||
---
|
||
|
||
## 1. 📱 Mobil Menü Editörü Ana Ekranı (Mobile Menu Management Screen)
|
||
> **Kullanım:** Restoran sahibinin cebinden menüyü, kategorileri, stok durumunu (86) ve fiyatları yönettiği ana kontrol merkezi.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
Design a luxury mobile app screen for "menul.io" restaurant menu editor in iOS 18 style.
|
||
Header: Modern white navigation bar with restaurant title "Gusto & Co. Brasserie", live subdomain indicator "localhost:3000/menu/gusto", active green status badge "Yayında", a golden palette icon for template selection, a QR icon, and a profile avatar.
|
||
Subheader: Floating horizontal category pill bar with rounded chips ("Başlangıçlar", "Ana Yemekler", "Makarnalar", "Tatlılar", "İçecekler"), active pill highlighted in champagne gold (#C8A96B) with item count badge.
|
||
Body: Scrollable list of sleek gourmet menu item cards. Each card features:
|
||
- A rounded 64x64 food thumbnail image (e.g. Truffle Burrata, Wagyu Burger, Ribeye Steak)
|
||
- Dish title in bold charcoal typography, description in muted stone gray, and golden price tag "380 ₺"
|
||
- Quick stock availability toggle switch (Active green vs Tükendi red badge)
|
||
- "Düzenle" chevron button.
|
||
Floating Actions:
|
||
- Prominent dashed card at the top "✨ AI ile Menü Tara (Fotoğraf Çek)".
|
||
Bottom Bar: Pinned sticky floating action bar with blurred glassmorphism:
|
||
- Left: "👁️ Önizle" button in champagne gold border.
|
||
- Right: Large primary dark button "Değişiklikleri Yayınla" with a subtle cloud-sync icon.
|
||
Clean, intuitive mobile ergonomics, luxury hospitality SaaS aesthetics.
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 📸 AI Menü Tarayıcı & Canlı OCR Analiz Ekranı (AI Menu Scanner & Live Processing)
|
||
> **Kullanım:** Restoran sahibinin basılı kağıt menünün fotoğrafını çektiği ve AI'ın görseli analiz ettiği sihirli an.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
Mobile camera viewfinder and AI extraction screen for "menul.io" on iPhone 17 Pro frame.
|
||
Screen State: Full-screen camera interface scanning an open luxury restaurant paper menu laying on a dark wooden table.
|
||
Overlays & Augmented Reality Effects:
|
||
- Glowing laser scanning beam sweeping vertically across the menu with glowing golden particle effects.
|
||
- Dynamic bounding boxes snapping around detected menu categories ("SOĞUK BAŞLANGIÇLAR", "ÖZEL ETLER") and prices ("240 ₺", "680 ₺") with confidence tags (98%, 95%).
|
||
Bottom Sheet: Translucent frosted glass card sliding up with an animated step-by-step progress checklist:
|
||
1. "Görsel işleniyor ve kontrast optimize ediliyor" (Completed with green checkmark)
|
||
2. "Menulio Vision AI kategorileri ve lezzetleri ayrıştırıyor" (Active with spinning golden loader)
|
||
3. "Fiyatlar ve porsiyon notları dijitalleştiriliyor" (Pending gray)
|
||
Controls: Large circular shutter button with pulsing golden ring, gallery upload shortcut, and flash toggle.
|
||
Futuristic food-tech UI, sleek, ultra-modern, high-tech AI feel.
|
||
```
|
||
|
||
---
|
||
|
||
## 3. ✨ AI Review & Akıllı Onaylama Ekranı (AI Extracted Review & Bulk Approval)
|
||
> **Kullanım:** AI tarafından çıkarılan ürünlerin listelendiği, düşük güven skorlu öğelerin uyarıldığı ve tek tıkla menüye aktarıldığı ekran.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
Mobile UI review screen for AI-extracted menu items before publishing on "menul.io".
|
||
Header: "AI Taraması Tamamlandı 🎉", subtext "24 Ürün ve 4 Kategori Başarıyla Ayrıştırıldı", confidence meter showing 96% accuracy.
|
||
Body Content:
|
||
- Category group accordion card "Ana Yemekler (8 Ürün)".
|
||
- Editable row items with inline price and title fields.
|
||
- Special attention card for low-confidence item: highlighted with soft amber background and caution badge "⚠️ Düşük Güven (Fiyatı Kontrol Edin: 180 ₺ mi 280 ₺ mi?)".
|
||
- Action to re-take photo or add missing item.
|
||
Bottom Sticky Bar:
|
||
- Secondary button: "Yeniden Tara".
|
||
- Primary large button: "✓ Menüyü Onayla ve Menüme Ekle" in deep charcoal with golden shimmer border.
|
||
Professional, trust-inspiring fintech/foodtech review workflow layout.
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 🎨 5 Farklı Menü Şablonu Seçici Çekmecesi (Theme Selector Bottom Sheet)
|
||
> **Kullanım:** Restoran sahibinin menü konseptine en uygun 5 özel temayı canlı inceleyip tek dokunuşla seçtiği çekmece.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
iOS modal bottom sheet showcasing 5 distinct restaurant theme presets for "menul.io".
|
||
Header: "Menü Şablonunu Seçin" with drag handle bar and close button.
|
||
Theme Cards (Vertical scrollable stack with radio selectors and live mini color swatches):
|
||
1. "🌟 Elegant Gold" - Fine dining & lüks restoranlar (Altın & Krem paleti, serif tipografi) - Selected active state with glowing border.
|
||
2. "💎 Modern Sapphire" - Kafe & Fast Casual (Mavi safir & beyaz, 2'li grid layout).
|
||
3. "🌙 Luxury Dark" - Gece kulübü, Kokteyl bar & Lounge (Obsidian siyahı & Kehribar vurgu).
|
||
4. "❄️ Nordic Minimal" - Butik kahveci & Fırın (Sade monokrom liste, ferah negatif alan).
|
||
5. "🍷 Classic Bistro" - Meyhane & Trattoria (Toskana bordo & rustik doku).
|
||
Each card includes theme name, recommended cuisine badge, one-line atmosphere description, and active checkmark.
|
||
Bottom Button: "Şablonu Menüme Uygula".
|
||
Rich UI, card shadows, tactile micro-interactions.
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 🍽️ Müşteri Tarafı Canlı Web QR Menüsü (5 Theme Public Web Menu)
|
||
> **Kullanım:** Müşterinin masadaki QR kodu okuttuğunda telefon tarayıcısında açılan ultra hızlı ve lüks web menüsü.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
Responsive mobile web application interface for a public digital QR restaurant menu ("Gusto & Co. Brasserie").
|
||
Header:
|
||
- High-resolution restaurant circular logo, restaurant name in serif font, table badge "Masa #12", language selector (TR / EN).
|
||
- Live interactive search bar "Yemek, içecek veya tatlı ara...".
|
||
Navigation: Sticky horizontal category navigation bar with smooth active pill indicator.
|
||
Menu Content Grid:
|
||
- Category Banner: "Şefin İmzaları" with Italian subtitle.
|
||
- Large gourmet food cards with full-width mouth-watering food photography, dietary badges (🌱 Vegan, 🌾 Glutensiz, 🌶️ Acı), item name, detailed ingredients list, and price in bold primary theme color.
|
||
Floating Sticky Footer:
|
||
- Floating pill widget: "🔔 Garson Çağır" and "💳 Hesap İste (Nakit / Kredi Kartı)" buttons.
|
||
- "Powered by menul.io" subtle luxury footer credit.
|
||
Ultra clean mobile-first web interface, blazing fast feel, Michelin-guide aesthetics.
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 🖨️ Masa QR Standı & Yüksek Çözünürlük Baskı Üretici (QR Stand Print Generator)
|
||
> **Kullanım:** Restoran sahibinin masalara koyacağı ahşap/pleksi QR standı veya A4/A5 masa kartını PDF/PNG olarak indirdiği ekran.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
Mobile screen for generating table QR codes and print-ready tent cards in "menul.io".
|
||
Visual Centerpiece: A realistic 3D mockup of a luxury acrylic table tent card with a dark wood base standing on a restaurant marble tabletop.
|
||
The card displays:
|
||
- Gold engraved restaurant logo at top.
|
||
- "Masadan Temassız Menüyü İnceleyin" heading.
|
||
- Crisp vector QR code in the center pointing to "menu.restoran.com".
|
||
- "Kameranızı QR koda tutmanız yeterlidir" micro-copy.
|
||
- "Masa No: 08" customizer box.
|
||
Controls below:
|
||
- Size switcher pills: "Masa Pleksi (10x15cm)", "A5 Menü Kartı", "A4 Stand".
|
||
- Color style presets: "Lüks Altın & Siyah", "Klasik Beyaz & Ahşap", "Minimalist Şeffaf".
|
||
- Download Buttons: "📥 PDF Baskı Dosyasını İndir (300 DPI Vector)" and "📤 Paylaş".
|
||
Print-ready SaaS export screen, high fidelity 3D product mockup.
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 🌐 Özel Alan Adı (Custom Domain: `menu.restoran.com`) Yönetim Ekranı
|
||
> **Kullanım:** Restoranın menüsünü kendi web sitesinin alt alan adına (`menu.kebapciahmet.com`) bağladığı ve DNS CNAME durumunu kontrol ettiği ayarlar ekranı.
|
||
|
||
```text
|
||
Stitch prompt:
|
||
Settings screen for "Custom Domain / Özel Alan Adı" inside "menul.io" mobile app.
|
||
Card 1: "Aktif Menü Adresiniz": Shows default link "localhost:3000/menu/kebapci-ahmet" with a "Kopyala" and "Tarayıcıda Aç" button.
|
||
Card 2: "Kendi Alan Adınızı Bağlayın (Custom Domain)":
|
||
- Input textfield with placeholder "menu.restoraniniz.com".
|
||
- "Bağla" button.
|
||
- Domain status card: `menu.kebapciahmet.com` with yellow pulsing status badge "DNS Doğrulaması Bekleniyor".
|
||
- Step-by-step DNS instruction box:
|
||
- Kayıt Türü: CNAME
|
||
- Host / Alt Alan: menu
|
||
- Yönlendirilecek Hedef: cname.menul.io
|
||
- "⚡ DNS Kaydını Doğrula" primary button.
|
||
- Help tooltip: "Cloudflare, GoDaddy, Natro vb. panellerinizden kolayca ekleyebilirsiniz."
|
||
Clean developer-grade yet accessible business SaaS interface.
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 🚀 menul.io SaaS Landing Page (Desktop & Mobile Web)
|
||
> **Kullanım:** menul.io ana pazarlama ve satış sayfası (Hero, canlı simülatör, özellikler, şablon galerisi).
|
||
|
||
```text
|
||
Stitch prompt:
|
||
High-converting, ultra-premium dark mode SaaS landing page for "menul.io" (AI Restaurant QR Menu Platform).
|
||
Hero Section:
|
||
- Top badge: "✨ Yapay Zeka Destekli Yeni Nesil QR Menü Platformu".
|
||
- Headline: "Basılı Menünüzü 3 Dakikada Lüks Dijital QR Menüye Dönüştürün".
|
||
- Subheadline: "Menünüzün fotoğrafını çekin; AI saniyeler içinde tüm lezzetleri, fiyatları ve kategorileri dijitalleştirsin. PDF QR kodlara ve pahalı ajanslara son verin."
|
||
- CTA Group: Large glowing champagne gold button "Hemen Ücretsiz Başla (7 Gün Deneme)" + "📱 Canlı Menü Demosunu İncele".
|
||
Visual Feature:
|
||
- Split screen interactive mockup: On the left, a mobile phone taking a photo of a restaurant paper menu with neon AI laser grid; on the right, the resulting stunning 3D phone displaying the live interactive gold gourmet menu.
|
||
Features Bento Grid:
|
||
1. "Fotoğraftan Menüye (Vision AI Engine)"
|
||
2. "5 Lüks Tasarım Şablonu"
|
||
3. "Kendi Alan Adınız (menu.restoraniniz.com)"
|
||
4. "Masa QR & Canlı Stok (Tükendi / 86 Modu)"
|
||
5. "Canlı Arama & Garson Çağır Butonu"
|
||
Testimonials & Michelin-partner restaurant logos ribbon at bottom.
|
||
Sleek dark obsidian glassmorphism, Framer/Linear award-winning design taste.
|
||
```
|