---
name: zzafergok/stitch-ui-design-skill
source: https://app.decimal.ai/s/zzafergok-stitch-ui-design-skill@1/SKILL.md
source_sha256: e3ee2f484fff
---

# Google Stitch UI Design Skill

Google Stitch'te etkili prompt yazarak yüksek kaliteli UI tasarımları üretme rehberi.

## What is Google Stitch?

Google Labs tarafından Gemini 2.5 Flash ile güçlendirilen AI tabanlı UI tasarım aracı. Destekledikleri:

- Metin promptu → UI tasarımı
- Görsel (sketch, wireframe, screenshot) → UI
- Çoklu ekran uygulama akışları
- HTML/CSS, Figma ve kod export
- Annotate ile iteratif düzenleme

---

## 1. Temel Prompt Prensipleri

### Spesifik ve Detaylı Ol

```
❌ Zayıf: "Dashboard oluştur"

✅ Güçlü: "Üye dashboard'u — ders modülleri grid'i, ilerleme takip çubuğu,
community feed sidebar. Mor tema, kart tabanlı layout."
```

**Neden**: Komponent'leri (modüller, ilerleme, feed), layout'u (grid, sidebar), görsel stili (mor, kartlar) ve bağlamı (üye dashboard'u) belirt.

### Her Zaman Görsel Stil Tanımla

- Renk paleti (primary, accent)
- Tasarım stili (minimalist, modern, glassmorphic, playful)
- Yoğunluk (compact, spacious, balanced)

### Çok Ekranlı Akışları Bullet ile Listele

```
Fitness takip uygulaması:
- Hedef seçimli onboarding ekranı
- Günlük istatistik ve aktivite halkaları ile home dashboard
- Kategori filtreli egzersiz kütüphanesi
- Başarılar ve ayarlar ile profil ekranı
```

---

## 2. Prompt Şablonu

```
[Ekran/Komponent Tipi] — [Kullanıcı/Bağlam]

Ana Özellikler:
- [Özellik 1 — detaylı]
- [Özellik 2 — detaylı]
- [Özellik 3 — detaylı]

Görsel Stil:
- [Renk şeması]
- [Tasarım estetiği]
- [Layout yaklaşımı]

Platform: [Mobil / Web / Responsive]
```

**Örnek**:

```
SaaS analitik platformu admin dashboard'u

Ana Özellikler:
- MRR, aktif kullanıcı, churn oranı gösteren üst metrik kartları
- Son 30 gün gelir trendi için çizgi grafiği
- Kullanıcı aksiyonları ile son aktivite beslemesi
- Rapor ve export için hızlı aksiyon butonları

Görsel Stil:
- Dark mode, mavi/mor gradient aksan
- Modern glassmorphic kartlar, hafif gölgeler
- Erişilebilir renklerle temiz veri görselleştirme

Platform: Desktop web (1440px öncelikli)
```

---

## 3. Yaygın Kullanım Senaryoları

### Landing Page

```
[Ürün adı] için SaaS landing page

Bölümler:
- Başlık, alt başlık, CTA ve ürün ekranı ile hero
- Müşteri logoları ile sosyal kanıt
- İkonlu özellikler grid'i (3 sütun)
- Referanslar carousel
- Fiyatlandırma tablosu (3 katman)
- SSS accordion
- Bülten kaydı ile footer

Stil: Modern, profesyonel, güven inşa eden
Renkler: Navy mavi primary, açık mavi aksan
```

### Mobil Uygulama

```
Yemek teslimat uygulaması ana ekranı

Komponentler:
- Konum seçici ile arama çubuğu
- Kategori chipsleri (Pizza, Burger, Sushi vb.)
- Resim, ad, rating, teslimat süresi ve fiyat aralıklı restoran kartları
- Alt navigasyon (Ana Sayfa, Ara, Siparişler, Profil)

Stil: Canlı, iştah açıcı, kolay taranabilir
Platform: iOS mobil (375px)
```

### Form / Checkout

```
B2B platform çok adımlı kayıt formu

Adımlar:
1. Hesap bilgileri (şirket adı, email, şifre)
2. Şirket bilgileri (sektör, boyut, rol)
3. Takım kurulumu (üye davet)
4. Onay mesajlı doğrulama

Özellikler:
- Üstte ilerleme göstergesi
- Inline hatalar ile alan doğrulama
- İleri/Geri navigasyon
- 3. adım için atla seçeneği

Stil: Minimal, odaklı, düşük sürtünme
```

---

## 4. İterasyon Stratejileri

### Annotation ile Düzenleme

```
1. Prompttan başlangıç tasarımı oluştur
2. Değiştirilmesi gereken öğeleri annotate et
3. Değişikliği doğal dille açıkla
4. Stitch yalnızca annotated alanı günceller
```

### Variant Oluşturma

```
Bu hero section'ın 3 varyantını oluştur:
1. Minimal metinli görsel odaklı
2. Destekleyici grafikli metin ağırlıklı
3. Overlay içerikli video arka plan
```

### Aşamalı İyileştirme

```
İlk: "E-ticaret ana sayfası"
→ "Hover efektli 4 sütunlu ürünler bölümü ekle"
→ "Toprak tonları (terracotta, adaçayı, krem) ve üstte promosyon banner güncelle"
```

---

## 5. Design to Code İş Akışı

### Stitch → Figma → Kod

1. Stitch'te detaylı promptla UI oluştur
2. Figma'ya export et (design system entegrasyonu)
3. Design spec'leriyle geliştiriciye handoff
4. Production-ready kodla implement et

### Stitch → HTML → Framework

1. Stitch'te oluştur ve iyileştir
2. HTML/CSS kodunu export et
3. React/Vue component'lerine dönüştür
4. Uygulama codebase'ine entegre et

---

## 6. Kaçınılacaklar

```
❌ Zayıf: "Güzel bir web sitesi yap"
✅ Güçlü: Spesifik bölümler, renkler, hedef kitle

❌ Zayıf: "Login sayfası oluştur"
✅ Güçlü: "Sağlık portalı login — email/şifre, 'beni hatırla',
'şifremi unuttum', SSO seçenekleri (Google, Microsoft).
Mavi medikal tema, profesyonel ve güven verici."

❌ Görsel yön yok: "Görev yönetim uygulaması tasarla"
✅ Net yön: "Kanban board, drag-and-drop, öncelik etiketleri,
bitiş tarihi göstergeleri. Mor/teal gradient, dark mode desteği."
```

---

## 7. Etkili Kullanım İpuçları

1. **Referans görseller kullan** — Sketch, wireframe veya screenshot ekle
2. **Tasarım terminolojisi kullan** — "hero section", "card layout", "glassmorphic", "bento grid"
3. **Etkileşimleri belirt** — Hover state, tıklama aksiyonları, geçişler
4. **Component'ler halinde düşün** — Header, card, form parçalara ayır
5. **Küçük adımlarla iterate et** — Tam tasarım yerine odaklı değişiklikler
6. **Responsive test et** — Mobil, tablet, desktop breakpoint'leri kontrol et
7. **Accessibility belirt** — Kontrast, font boyutu, touch target

---

## 8. Export Sonrası Yapılacaklar

Stitch bir başlangıç noktasıdır, son ürün değil:

- [ ] Semantic HTML tag'lerini düzenle
- [ ] ARIA label ve alt text ekle
- [ ] Görselleri optimize et
- [ ] Animasyon ve micro-interaction ekle
- [ ] Production kod standartlarına refactor et
- [ ] Responsive breakpoint'leri doğrula
- [ ] Erişilebilirlik kontrol listesini tamamla