Yeni Kullanıcı Karşılama Ekranı Tasarımı - Detaylı AI Kodu

Sen Figma AI aracısın. Aşağıdaki talimata göre mobil uygulama için bir hoş geldin ekranı (onboarding welcome screen) tasarla ve her bileşeni Figma'nın auto-layout kurallarına göre yapılandır. UYGULAMA BİLGİLERİ: Uygulama adı: #uygulama_adi Hedef platform: #ios_android_her_ikisi Marka ana rengi: #ana_renk_hex Marka ikincil rengi: #ikincil_renk_hex Tipografi stili: #modern_klasik_playful Hedef kitle: #hedef_kitle EKRAN YAPISI — aşağıdaki katman sırasına göre oluştur: 1. FRAME - Frame adı: "Welcome Screen - #uygulama_adi" - Boyut: iPhone 14 Pro (393x852px) ve Android (360x800px) için ayrı frame oluştur - Arka plan: #ana_renk_hex %8 opaklıkta gradient veya düz beyaz 2. HERO GÖRSEL ALANI (üst %45) - Yüksek kaliteli bir illustrasyon placeholder (image fill) ekle - Köşe yarıçapı: 24px - Margin: 24px yatay, 48px üst - Figma AI komutu: "Generate a warm, welcoming hero illustration for #uygulama_adi app, #hedef_kitle audience, #tipografi_stili style" 3. METİN BLOĞU (orta %30) - Başlık: "Hoş Geldin, #kullanici_adi!" Font weight: Bold, Boyut: 28px, Renk: #1A1A2E - Alt başlık (hoş geldin e-postasıyla aynı mesajı yansıt): "#karsilama_mesaji" Font weight: Regular, Boyut: 16px, Renk: #6B7280, Line height: 24px - Metin bloğu hizalaması: Center - Auto-layout: Vertical, Gap: 12px, Padding: 0 32px 4. ÖZELLİK NOKTALARI (opsiyonel, 3 madde) - Her madde için: ikon (16px) + kısa metin (14px) kombinasyonu - Layout: Horizontal auto-layout, Gap: 8px - 3 maddeyi dikey olarak listele, Gap: 16px - Figma AI komutu: "Generate 3 feature highlight rows with icons for #uygulama_adi, matching #ana_renk_hex brand color" 5. CTA BUTON ALANI (alt %25) - Birincil buton: "Hemen Başla" Renk: #ana_renk_hex, Metin: Beyaz, Height: 56px, Corner radius: 16px, Full width (margin: 24px yatay) - İkincil bağlantı: "Zaten hesabım var, giriş yap" Renk: #ana_renk_hex, Underline, Font size: 14px - Butonlar arası gap: 16px - Alt güvenlik notu: "Kredi kartı gerekmez · İstediğin zaman iptal et" (12px, #9CA3AF) 6. COMPONENT AYARLARI - Tüm metin katmanlarını "Text Style" olarak kaydet - Butonları "Button/Primary" ve "Button/Ghost" component olarak tanımla - Renkleri "Color Style" olarak Figma kütüphanesine ekle - Her bileşene açıklayıcı layer adı ver (İngilizce, kebab-case) 7. PROTOTIP AKIŞI - "Hemen Başla" butonuna tıklandığında → Ana ekrana (Home) yönlendir - Transition: Smart Animate, Easing: Ease Out, Duration: 300ms - "Giriş yap" bağlantısına tıklandığında → Login ekranına yönlendir 8. DEVELOPER HANDOFF NOTLARI - Her bileşen için inspect panelinde spacing token değerlerini göster - Renk değerlerini HEX ve RGB formatında belirt - Export ayarı: PNG @2x ve @3x, SVG ikonlar için KALİTE KONTROLÜ: Tasarımı tamamladıktan sonra şunları kontrol et: - Kontrast oranı WCAG AA standardını karşılıyor mu? (metin/arka plan) - Tüm dokunma hedefleri minimum 44x44px boyutunda mı? - Auto-layout kırılıyor mu? Farklı içerik uzunluklarında test et. - Hoş geldin e-postasındaki marka sesi ve görsel kimlikle tutarlı mı?