← Radar

Konu: Web3 dk okuma

Yapay zekâ iyi tasarım yapabilir mi? DESIGN.md ve Open Design

Bu neden önemli?

Ajanla arayüz yapıyorsan sonuç ya herkesinkine benzeyecek ya da senin kurallarına uyacak. Fark, ajana ne verdiğinde. Tasarım kurallarını dosyaya yazmak ucuz, ama sınırlarını bilmek gerekiyor.

Herkes aynı siteyi yapıyor

Wes Bos bölüme bir gözlemle başladı. Kendisine tanıtım e-postası atan yeni girişimlerin sitelerinde hep aynı müşteri yorumlarını görüyordu: “Sarah Chen” adlı biri, yanında da “Marcus Rodriguez”. Önce bir dolandırıcılık ağı sandı. Sonra birkaç sohbet modelinden “beş müşteri yorumu yaz” diye istedi. Çoğu, listeye yine Sarah Chen’le başladı.

Bunun bir açıklaması var. Dil modeli bir sonraki kelimeyi tahmin ederken en olası seçeneğe yöneliyor. Yaratıcılık ise çoğu zaman olası olmayanı seçmek demek. O yüzden “bana güzel bir site yap” dediğinde aldığın şey, gördüğü binlerce sitenin ortalaması oluyor. Scott Tolinski, bir tasarımın hangi modelle yapıldığını artık tahmin edebildiğini söylüyor.

Bir de tükenme sorunu var. Wes’e göre yapay zekânın bir tıkla ürettiği abartılı YouTube küçük resimleri gibi, herkesin elinde olan bir kalıp kısa sürede fark yaratmayı bırakıyor.

Kurallar verirsen ne olur?

İkisinin vardığı nokta şu: Yapay zekâ, oturmuş kalıpları genişletmekte iyi. Renk, yazı tipi, boşluk ve bileşen kurallarını sen verirsen, o kurallara uyan yeni ekranlar çıkarabiliyor. Bu da aslında bir tasarım sistemi demek.

Google’ın Stitch ekibi bunu bir dosya biçimine dönüştürdü: DESIGN.md. Nisan 2026’da açık kaynak yapılan biçim iki katmandan oluşuyor:

  • Üst kısım (YAML): Renkler, yazı tipi ölçekleri, köşe yuvarlaklığı ve boşluklar gibi kesin değerler. Bunlara tasarım token’ı deniyor.
  • Gövde (Markdown): Bu değerlerin neden seçildiği, hangisinin nerede kullanılacağı.

Yanındaki komut satırı aracı dosyayı denetliyor: Bozuk referansları ve yetersiz renk kontrastını buluyor, iki sürüm arasındaki farkı çıkarıyor, token’ları Tailwind ayarına çevirebiliyor. Mantık, kodlama ajanlarının okuduğu talimat dosyalarıyla aynı. Bunu AGENTS.md yazımızda anlatmıştık.

Scott’ın itirazı da yerinde: Bu değerler zaten CSS değişkenlerinde duruyor. Aynı bilgiyi iki yerde tutarsan, zamanla birbirinden kopar. Bu dosyanın asıl faydası, Figma’dan Tailwind’e farklı araçlar arasında ortak bir dil olması olabilir.

Open Design: Aynı fikir, kendi bilgisayarında

Anthropic, Nisan’da Claude Design’ı tanıttı: Sohbet ederek prototip, sunum ve tek sayfalık tasarım hazırlayan, ücretli abonelere açık bir araç. Kısa süre sonra açık kaynak bir alternatifi çıktı: Open Design.

Better Stack videosuna göre Open Design, bilgisayarında zaten kurulu olan kodlama ajanını (Claude Code, Codex, OpenCode gibi) kullanıyor ve projeler senin makinende kalıyor. Kalitenin sırrı yine aynı: Hazır tasarım sistemleri ve her çıktı türü için ayrı beceriler. Prototipler DESIGN.md dosyasını okuyor. Videoda daha zayıf sayılan bir modelle bile derli toplu bir sonuç çıktı. Yine de araç, tasarım sistemini baştan seçmeni istediği için biraz tasarım bilgisi olanlara daha uygun.

Yapay zekâ nerede gerçekten iyi?

Bölümün en net cevabı kullanıcı deneyimi (UX) konusunda. Bir randevu ya da kiralama akışında kullanıcının neye takıldığını anlamak, işin kendisini bilmeyi gerektiriyor. Model butonları ve kartları yerleştirebiliyor, ama boş kalan bir saatte kullanıcıya alternatif önermeyi kendiliğinden düşünmüyor.

Wes’in iyi bulduğu kullanım ise sıkıcı işler: Bir resimdeki 12 ikonu ayırmak, arka planı silmek, kırpmak ve her birine anlamlı bir ad vermek. Photoshop’ta yirmi dakikalık iş, birkaç cümlelik istek oldu.

Sonra ne oldu?

DESIGN.md hâlâ “alpha” sürümünde, ama gelişmeye devam ediyor: Temmuz’da 0.4.0 sürümü çıktı. Open Design ise GitHub’da 100 bine yakın yıldıza ulaştı, adını OpenDesign olarak yazmaya başladı ve açık kaynak uygulamanın yanına ücretli bir bulut planı ekledi. Ajanın tasarım sistemine uymasını sağlamanın bir başka yolunu da shadcn/lint yazımızda anlattık: Kuralı yazmak yerine linter’la denetlemek.

Düşün

  • Projendeki renk ve boşluk kuralları bugün nerede yazılı? Bir ajan onları bulabilir mi?
  • Herkes aynı araçla tasarım yapınca, “iyi tasarım” ortalamaya mı yaklaşır, yoksa farklı olan daha mı değerli hâle gelir?

Videoyu izle

Tıklayınca video YouTube'dan yüklenir; o ana kadar bu sayfa YouTube'a hiçbir istek göndermez.
Kaynaklar (6, İngilizce)

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.

Konu: Web3 dkVideo: Syntax

Remotion: Videoyu React ile kodlamak, artık ajana yazdırmak

Remotion, videoyu bir React bileşeni olarak yazmanı sağlayan kütüphane. Ajanlar için hazır beceriler çıkınca günlük indirme sayısı birkaç ayda kabaca altıya katlandı. Syntax'ta yaratıcısı Jonny Burger, bunun nasıl çalıştığını ve tarayıcının video tarafında neyin değiştiğini anlattı.

Konu: Web2 dkVideo: Better Stack

Bun.Image: Resim işleme artık çalışma ortamının içinde

Bun 1.3.14 ile gelen Bun.Image, resimleri yeniden boyutlandırmayı, döndürmeyi ve JPEG, PNG, WebP gibi biçimler arasında çevirmeyi ek paket kurmadan yapıyor. Bun'ın kendi ölçümlerinde popüler sharp kütüphanesinden biraz daha hızlı.