Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Giriş — Bu yazıda ne öğreneceksin?
Eskiden iyi bir arayüz (UI) yapmak için ya tasarım bilmek ya da Figma gibi araçlara hakim olmak gerekiyordu. Ama şimdi işler değişiyor. Bu yazıda Google Stitch adlı yeni nesil tasarım aracının nasıl çalıştığını, neden klasik UI/UX süreçlerini sarsabileceğini ve geliştirici olarak senin iş yapış şeklini nasıl değiştirebileceğini öğreneceksin.
Tasarım Süreci Neden Değişiyor?
Eskiden bir web sayfası ya da uygulama tasarlamak ciddi emek istiyordu. Özellikle Adobe Dreamweaver dönemlerinde, CSS yazmak başlı başına bir işti.
Şimdi şöyle bir düşün:
Bir tasarım yapmak için saatlerce margin, padding, flex gibi detaylarla uğraşıyorsun.
CSS (Cascading Style Sheets)
Yani şöyle düşün:
Bir web sitesinin görünüşünü (renk, boşluk, hizalama) kontrol eden dil.
Sonra Tailwind CSS gibi araçlar geldi ve bu süreci hızlandırdı.
Tailwind CSS
Bunu şöyle hayal edebilirsin:
Hazır Lego parçaları gibi. bg-blue-500, flex, gap-4 gibi küçük sınıflarla hızlıca tasarım kuruyorsun.
Ama burada kritik bir fark var:
Tailwind tasarım yapmaz, sadece tasarımı uygulamayı hızlandırır.
Google Stitch: “Wireframe” Yerine “Vibe” ile Tasarım
Asıl kırılma noktası burada.
Google Stitch sana şunu söylüyor:
“Tasarım çizmekle uğraşma, bana ne hissettirmek istediğini söyle.”
Stitch (Infinite Canvas Tool)
Yani şöyle düşün:
Boş bir tuval var ve sen sadece “modern, sade bir dashboard istiyorum” diyorsun.
Gerisini araç kendi oluşturuyor.
Artık süreç şöyle ilerliyor:
- Wireframe çizmek yok
- Piksel ayarlamak yok
- Renk seçmek yok
Sadece şunu diyorsun:
“Modern bir SaaS dashboard yap.”
Ve sistem sana direkt tasarım veriyor.
AI ile Tasarım Nasıl Üretiliyor?
Stitch sadece metinle çalışmıyor. Şunları da kullanabiliyorsun:
- Bir web sitesinin URL’si
- Bir ekran görüntüsü
- Sesli komut (örneğin Gemini ile konuşarak)
Gemini (Google AI modeli)
Bunu şöyle hayal edebilirsin:
Yanında oturan bir tasarımcı gibi. Ona konuşuyorsun, o da tasarım yapıyor.
Örneğin:
“Grindr tarzı modern bir chat ekranı yap”
Ve birkaç saniye içinde sana çalışan bir UI veriyor.
Statik Tasarım Değil: Direkt Çalışan Prototype
En önemli farklardan biri şu:
Bu araç sadece görsel üretmiyor.
Interactive Prototype
Yani şöyle düşün:
Butona tıklıyorsun, sayfa değişiyor, akış çalışıyor.
Yani:
- UI çiziliyor
- Kullanıcı akışı simüle ediliyor
- Her şey çalışıyormuş gibi davranıyor
Ve bunu tek tıkla yapıyor.
Design System’i Kopyalamak: Yeni Süper Güç
Şimdi şöyle bir düşün:
Beğendiğin bir site var, mesela fireship.dev
Eskiden ne yapardın?
- Renkleri analiz et
- Fontları tahmin et
- Component yapısını çıkar
Şimdi ne yapıyorsun?
URL’yi Stitch’e veriyorsun → sana komple design system çıkarıyor.
Design System
Bunu şöyle hayal edebilirsin:
Bir uygulamanın tüm stil kuralları (renkler, fontlar, butonlar, spacing) tek pakette.
Ve bunu:
- başka projelerde kullanabiliyorsun
- tekrar tekrar üretmek zorunda kalmıyorsun
Tasarımdan Koda Geçiş: Markdown Dosyası Oyunu Değiştiriyor
Stitch’in en kritik özelliklerinden biri:
Design Markdown File
Yani şöyle düşün:
Tasarımın sadece görsel değil, metin tabanlı bir dosya olarak export ediliyor.
Bunu:
- bir text editor’de açabiliyorsun
- başka projelere ekleyebiliyorsun
- AI modellerle entegre edebiliyorsun
Örneğin:
- Claude
- OpenAI Codex
Bu ne demek?
Aynı tasarım dilini farklı projelerde tutarlı şekilde yeniden kullanabiliyorsun.
Figma ve Tailwind Neden Zorlanıyor?
Burada kritik bir paradigma değişimi var:
- Figma → tasarım üretmek için
- Tailwind CSS → tasarımı uygulamak için
Ama Stitch:
👉 Tasarım + prototip + sistem = hepsini birlikte yapıyor
Bu yüzden:
- Premium template satmak zorlaşıyor
- Utility class ezberlemek anlamsızlaşıyor
Artık kimse şunu yazmak istemiyor:flex bg-blue-500 gap-4
Onun yerine:
“Temiz, modern bir dashboard yap” demek yeterli.
Ama Her Şeyi Yapabiliyor mu?
Hayır.
Stitch güçlü ama eksik olduğu yerler var.
Özellikle:
- authentication (kullanıcı girişi)
- authorization (yetkilendirme)
- billing (ödeme sistemi)
Bu noktada devreye başka araçlar giriyor.
Clerk
Yani şöyle düşün:
Kullanıcı sistemi kurmak için hazır bir altyapı.
- login / signup
- organizasyon yönetimi
- rol & yetki sistemi
- abonelik (subscription)
Bunları sıfırdan yazmak yerine direkt ekliyorsun.
Özet
Eskiden UI geliştirmek demek; tasarım öğrenmek, CSS yazmak ve araçlara hakim olmak demekti. Sonra Tailwind gibi araçlar geldi ve uygulama sürecini hızlandırdı ama tasarım hala insan işiydi. Şimdi Google Stitch ile bu denge tamamen değişiyor. Artık tasarım çizmek yerine “nasıl hissettirmesi gerektiğini” söylüyorsun ve sistem hem tasarımı hem prototipi hem de design system’i oluşturuyor. Üstelik bunu başka projelerde tekrar kullanabileceğin bir yapıya dönüştürüyor. Ancak tüm backend ve enterprise özellikleri hâlâ geliştirici tarafında kalıyor. Yani gelecek şu yönde ilerliyor: AI tasarımı yapıyor, geliştirici sistemi kuruyor.
Bu yazı Google just changed the future of UI/UX design… videosundan ilham alınarak yazılmıştır.
