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.

Kullanım: Restoran sahibinin cebinden menüyü, kategorileri, stok durumunu (86) ve fiyatları yönettiği ana kontrol merkezi.

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.

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.

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.

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.

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.

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ü.

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.

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ı.

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).

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.

11 KiB

Raw Blame History

menul.io — UI/UX Tasarım Promptları (Stitch & AI UI Engine) 🎨

🎨 Tasarım Dili & Tasarım Sistemi Standartları (Tüm Ekranlar İçin Ortak)

1. 📱 Mobil Menü Editörü Ana Ekranı (Mobile Menu Management Screen)

2. 📸 AI Menü Tarayıcı & Canlı OCR Analiz Ekranı (AI Menu Scanner & Live Processing)

3. ✨ AI Review & Akıllı Onaylama Ekranı (AI Extracted Review & Bulk Approval)

4. 🎨 5 Farklı Menü Şablonu Seçici Çekmecesi (Theme Selector Bottom Sheet)

5. 🍽️ Müşteri Tarafı Canlı Web QR Menüsü (5 Theme Public Web Menu)

6. 🖨️ Masa QR Standı & Yüksek Çözünürlük Baskı Üretici (QR Stand Print Generator)

7. 🌐 Özel Alan Adı (Custom Domain: `menu.restoran.com`) Yönetim Ekranı

8. 🚀 menul.io SaaS Landing Page (Desktop & Mobile Web)

11 KiB Raw Blame History Unescape Escape

menul.io — UI/UX Tasarım Promptları (Stitch & AI UI Engine) 🎨

🎨 Tasarım Dili & Tasarım Sistemi Standartları (Tüm Ekranlar İçin Ortak)

1. 📱 Mobil Menü Editörü Ana Ekranı (Mobile Menu Management Screen)

2. 📸 AI Menü Tarayıcı & Canlı OCR Analiz Ekranı (AI Menu Scanner & Live Processing)

3. ✨ AI Review & Akıllı Onaylama Ekranı (AI Extracted Review & Bulk Approval)

4. 🎨 5 Farklı Menü Şablonu Seçici Çekmecesi (Theme Selector Bottom Sheet)

5. 🍽️ Müşteri Tarafı Canlı Web QR Menüsü (5 Theme Public Web Menu)

6. 🖨️ Masa QR Standı & Yüksek Çözünürlük Baskı Üretici (QR Stand Print Generator)

7. 🌐 Özel Alan Adı (Custom Domain: menu.restoran.com) Yönetim Ekranı

8. 🚀 menul.io SaaS Landing Page (Desktop & Mobile Web)

11 KiB

Raw Blame History

7. 🌐 Özel Alan Adı (Custom Domain: `menu.restoran.com`) Yönetim Ekranı