AI Kod Yazarken Design System Neden Daha da Önemli?

AI hızlı üretir ama sizin kurallarınızı bilmez

Bir AI aracından “bir giriş ekranı” istediğinizde, internetin ortalamasından beslenen bir sonuç alırsınız. Hangi buton stilini kullandığınızı, ürününüzde hangi boşluk değerlerine izin verildiğini ya da arayüzünüzde hangi rengin “hata” anlamına geldiğini bilmez.

Ortaya çalışan ama size ait olmayan bir ekran çıkar. Her prompt, sessizce yeni bir istisnaya dönüşür.

Design system, AI’ın okuyabildiği bir sözleşmedir

AI, ürününüzde nelerin zaten var olduğunu bildiğinde icat etmeyi bırakır, birleştirmeye başlar. Bu bağlam doğrudan design system’den gelir:

• Token’lar: renk, boşluk ve tipografi için tek doğru kaynak.
• Bileşen adları ve API’leri: AI yeni bir buton yazmak yerine Button’ı kullanır.
• Kullanım kuralları: hangi bileşen, ne zaman kullanılır.
• Gerçek örnekler: AI’ın taklit edebileceği referans ekranlar.

Bu olmadan ne olur?

Bir sistem olmadan AI sadece teslimi hızlandırmaz, tutarsızlığı da hızlandırır.

• Her ekran bir öncekinden biraz farklı olur.
• Code review, “neredeyse aynı” olan şeyleri avlamaya döner.
• Teknik borç, ekibin ödeyebileceğinden hızlı büyür.
• Tasarımcılar ve geliştiriciler ortak dile olan güvenini kaybeder.

AI hızınızı artırır. Design system yoksa tutarsızlığınızı da aynı hızla artırır.

Nasıl yapılır? Beş adım

Kusursuz bir sisteme değil, AI’ın takip edebileceği bir sisteme ihtiyacınız var. Şu sırayla ilerleyin:

1. Token’ları anlamlarına göre adlandırın

AI’ın “#0A84FF” gibi ham bir renk koduyla değil, anlamla çalışmasını istersiniz. Token’ları iki katmanda tutun:

• Temel (primitive) token’lar değerin kendisini taşır: “blue-500 = #0A84FF”, “space-4 = 16px”.
• Anlamsal (semantic) token’lar değerin ne işe yaradığını söyler: “color-action-primary = blue-500”, “space-card-padding = space-4”.

Kural basit: ekran kodu yalnızca anlamsal token’ları kullanır. Marka rengi değiştiğinde tek satır değişir, AI’ın ürettiği her şey de buna uyar.

2. Her bileşen için kısa bir kullanım kartı yazın

AI bileşenin adını bilir ama ne zaman kullanılacağını bilmez. Bileşen başına beş satır yeter:

• Ne işe yarar: “Sayfadaki ana eylem için buton.”
• Ne zaman kullanılır: “Bir ekranda en fazla bir tane primary buton.”
• Ne zaman kullanılmaz: “Silme gibi geri alınamaz eylemler için destructive varyantı kullanılır.”
• Zorunlu alanlar: “Yalnızca ikonu varsa erişilebilirlik etiketi zorunlu.”
• Bir örnek: doğru kullanımı gösteren tek bir kod parçası.

3. Bu bağlamı AI’a proje talimat dosyasıyla verin

Claude Code ve Cursor gibi araçlar, projenizin kökündeki talimat dosyalarını (örneğin CLAUDE.md ya da Cursor kuralları) her oturumda okur. Dosyaya şunları yazın:

• Bileşenlerin nerede durduğu ve nasıl import edildiği.
• “Ham renk kodu, ham piksel değeri ve satır içi stil yazma. Yalnızca anlamsal token kullan.”
• “Yeni bir bileşen yazmadan önce mevcut bileşenlere bak, uygun olan varsa onu kullan.”
• Bir referans ekranın yolu: “Yeni ekranlar buna benzesin.”
• Sistemde karşılığı olmayan bir ihtiyaç çıkarsa AI’ın sessizce icat etmek yerine bunu belirtmesi.

Dosyayı kısa tutun. Asıl ayrıntı kullanım kartlarında durur.

4. Kuralları insana bırakmayın, otomatikleştirin

Talimat dosyası AI’ı yönlendirir ama garanti vermez. Garantiyi araçlar verir:

• Lint kuralı: koda ham renk kodu ya da sabit piksel girerse derleme uyarı versin.
• Bileşen kataloğu: Storybook gibi bir araç bileşenleri canlı ve test edilebilir tutar.
• Görsel regresyon testleri: bir bileşen istemeden değişirse fark yakalanır.
• Pull request kontrol listesi: “Bu ekran sistemdeki bileşenlerle mi yazıldı?”

5. Küçük başlayın ve ölçün

İlk haftada tüm ürünü taşımayın. Kayıt ekranı gibi tek bir akışı bu düzene alın. Sonra iki sayıyı takip edin:

• Ekranlarınızda hâlâ kaç ham renk ve boşluk değeri var.
• Her sprintte kaç “yeni bileşen” talebi geliyor.

İlk sayı düşüyorsa ve ikinci sayı sağlam gerekçelerle geliyorsa, sistem AI ile birlikte iyi çalışıyor demektir.

Sonuç

AI’dan gerçek fayda gören ekipleri ayıran şey kullandıkları model değil, ona verdikleri bağlamdır.

Design system, ürününüzün hem insanlar hem AI için yazılmış kullanım kılavuzudur. Sistemi olmayan ekip hızlı üretir ve hızlı dağılır. Sistemi olan ekip hızlı üretir ve tutarlı kalır.

Kodu AI yazar. Ürünün neye benzeyeceğine ise design system karar verir.