Ben bunu “tasarımcı artık geliştirici oldu” diye okumuyorum.

Bence daha doğru okuma şu:

Tasarımcı artık fikri, akışı ve arayüzü daha hızlı çalışan bir prototipe çevirebiliyor.

Bu küçük bir değişim değil.

Çünkü UI/UX tarafında yıllardır birçok fikir sadece Figma ekranı olarak kalıyordu.

Güzel görünüyordu ama davranışı yoktu.

Butona basınca ne oluyor?

Form hata verince ne gösteriliyor?

Kullanıcı yanlış seçim yapınca sistem nasıl tepki veriyor?

Bu sorular çoğu zaman geç aşamada netleşiyordu.

Vibe coding tarafındaki asıl kırılma bence burada başlıyor.

Vibe coding nedir?

Vibe coding en basit haliyle, doğal dil kullanarak çalışan arayüzler, prototipler veya küçük ürün parçaları üretmek demek.

Yani sadece “kod yaz” demek değil.

Bir fikri anlatıyorsun.

Akışı tarif ediyorsun.

Hangi ekranlar olacak söylüyorsun.

Bazen tasarım referansı, metin, görsel veya mevcut ekran veriyorsun.

Sonra AI aracı bunu çalışan bir yapıya çevirmeye çalışıyor.

Bugün Figma Make, v0, Lovable, Bolt ve Replit AI gibi araçlar bu yüzden çok konuşuluyor.

Hepsinin yaklaşımı farklı ama ortak nokta aynı:

Fikirden çalışan prototipe geçiş daha hızlı hale geliyor.

Tasarımcı için asıl değişen şey ne?

Eskiden tasarımcı çoğu zaman ekranı hazırlardı.

Sonra prototip yapılırdı.

Sonra geliştiriciye aktarılırdı.

Sonra gerçek davranış ortaya çıkardı.

Bu süreçte bazı problemler geç fark edilirdi.

Vibe coding ile tasarımcı daha erken test edebilir.

Bir akış gerçekten mantıklı mı?

Kullanıcı bir sonraki adımı anlıyor mu?

Form çok mu uzun?

Dashboard’daki bilgi sırası doğru mu?

Mobilde bu yapı çalışıyor mu?

Bunları sadece statik ekranla değil, çalışan bir prototip hissiyle görmek mümkün oluyor.

Benim için değerli tarafı bu.

Bu iş tasarımcıyı yazılımcı yapar mı?

Bence hayır.

En azından herkes için böyle değil.

Vibe coding tasarımcıyı bir gecede yazılımcı yapmaz.

Ama tasarımcının ürün düşüncesini güçlendirebilir.

Çünkü çalışan bir prototip gördüğünde sadece görsel kaliteye bakmıyorsun.

Akışa bakıyorsun.

State’lere bakıyorsun.

Responsive davranışa bakıyorsun.

Kullanıcı metinlerine bakıyorsun.

İş kuralının arayüze nasıl yansıdığına bakıyorsun.

Bu da tasarım kararını daha somut hale getiriyor.

Prompt tek başına yeterli değil

Burada önemli bir konu var.

“Bana modern bir SaaS dashboard yap” demek kolay.

Ama bu iyi ürün tasarımı anlamına gelmez.

AI aracı bir şey üretir.

Belki ilk bakışta güzel de görünür.

Ama hazırlık zayıfsa sonuç da zayıf olur.

Vibe coding kullanırken önce şunları netleştirmek lazım:

• Bu ürün kimin için?
• Kullanıcı hangi işi bitirmek istiyor?
• İlk ekranın amacı ne?
• Hangi bilgiler öncelikli?
• Hangi componentler tekrar kullanılacak?
• Boş, hata ve loading durumları var mı?
• Mobil ve desktop davranışı nasıl olmalı?

Bu hazırlık yapılmadan girilen prompt genelde sadece görüntü üretir.

Ürün üretmez.

Benzer konuyu daha önce AI Design Needs Human Prep, Not Just Prompts yazısında da anlatmıştım.

Design system tarafı daha önemli oluyor

Vibe coding hızlı prototip için çok güçlü olabilir.

Ama her hızlı çıktı, sağlıklı sistem demek değildir.

Bir ekranda güzel görünen buton, diğer ekranda tutarsız kalabilir.

Spacing bozulabilir.

Component mantığı dağılabilir.

Renkler ve tipografi kısa sürede karışabilir.

Bu yüzden tasarımcının design system mantığını bilmesi daha da önemli hale geliyor.

Atomik düşünmek burada işe yarıyor.

Önce temel parçalar:

• Renkler
• Tipografi
• Spacing
• Butonlar
• Inputlar
• Kartlar
• Navigation yapısı

Sonra bu parçalarla daha büyük yapılar kurulabilir.

AI ile çalışırken bu sistem netse, çıkan prototip de daha tutarlı olur.

Bu konuda temel bir giriş için Design Systems for Beginners yazısına bakılabilir.

UI/UX tarafında avantaj nerede?

Vibe coding’in UI/UX tarafındaki en büyük avantajı hız değil.

Bence en büyük avantaj erken fark etmek.

Çünkü statik ekran bazen bizi kandırır.

Ekran güzel görünür ama akış çalışmaz.

Buton vardır ama sonraki adım belirsizdir.

Form vardır ama hata senaryosu düşünülmemiştir.

Dashboard vardır ama kullanıcı hangi kararı verecek belli değildir.

Çalışan prototip bu boşlukları daha erken gösterir.

Tasarımcı için bu çok değerli.

Risk nerede?

Risk şu:

Hızlı üretilen prototip gerçek ürün sanılabilir.

AI çıktısı düzgün görünür ama erişilebilirlik zayıf olabilir.

Kod tarafı karışık olabilir.

State mantığı eksik olabilir.

Mobil davranış hatalı olabilir.

Güvenlik, performans veya veri yapısı hiç düşünülmemiş olabilir.

Bu yüzden vibe coding “bitti, yayınla” mantığıyla kullanılmamalı.

Daha çok fikir test etmek, akış görmek, hızlı demo çıkarmak ve ürün kararını netleştirmek için kullanılmalı.

Özellikle ciddi ürünlerde hâlâ insan kontrolü, teknik değerlendirme ve iyi QA gerekir.

Yeni başlayan tasarımcılar nasıl kullanmalı?

Yeni başlayanlar için vibe coding iyi bir öğrenme alanı olabilir.

Ama temel tasarım bilgisinin yerine geçmemeli.

Önce UX akışını anlamak lazım.

Sonra ekran hiyerarşisini kurmak lazım.

Sonra component mantığı oturmalı.

Sonra AI araçlarıyla bu fikirler test edilebilir.

Ben olsam şu sırayla giderdim:

1. Basit bir problem seç.
2. Kullanıcı akışını yaz.
3. 3-5 ana ekranı belirle.
4. Component listesini çıkar.
5. AI aracına bunu parça parça üret.
6. Çıkan sonucu tasarım gözüyle eleştir.
7. Eksikleri tekrar promptla düzelt.
8. Son halini Figma veya portfolio içine düzenli aktar.

Yeni başlayanlar için daha genel bir temel arıyorsan UX Tasarıma Yeni Başlayanlar İçin Basit Bir Yol Haritası yazısı iyi başlangıç olabilir.

Benim çıkarımım

Vibe coding tasarımcı için güzel bir fırsat.

Ama yanlış beklentiyle yaklaşılırsa vakit de kaybettirir.

Çünkü AI ile üretmek kolay.

Doğru ürünü üretmek hâlâ zor.

Burada tasarımcının değeri azalmaz.

Tam tersine daha görünür olur.

Çünkü iyi tasarımcı artık sadece ekranı değil, çalışan fikri de daha erken sorgulayabilir.

Benim için yeni dönemin tasarımcısı şu kişiye dönüşüyor:

Fikri anlayan, akışı sadeleştiren, sistemi kuran, AI çıktısını eleştiren ve ürünü daha net hale getiren kişi.

Yani mesele sadece vibe coding yapmak değil.

Mesele neyi, neden ve hangi kullanıcı için yaptığını bilmek.

AI ve tasarım araçlarıyla ilgili daha fazla içerik için AI, UI/UX, Product Design, Tools ve Growth kategorilerine bakabilirsin.

Kaynak Sinyalleri

• Figma Make
• Figma AI Prototype Generator
• v0 by Vercel
• Vercel – Announcing v0 Generative UI
• Lovable
• Bolt
• Replit AI

The post Vibe Coding Tasarımcılar İçin Ne Anlama Geliyor? first appeared on Burak Poryaz - Web ve Mobil Arayüz Tasarımı - UX Ui Tasarım.