Yeni Kullanıcı Karşılama Ekranı Tasarımı

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 İKİSİ]
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ı?

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 İKİSİ]
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ı?