Tasarım sistemini agent’ların okuyup uygulayabileceği hale getiren ekiplerin kendi anlatımları: skill, AGENTS.md, token dosyaları ve Code Connect.
Edge Delta tasarım felsefesini ve Figma variable’larını tek bir skill’de topladı. Intent kuralları AGENTS.md ile verdi ve kodu doğruluk kaynağı yaptı. Trendyol Figma’yı Code Connect ile koda bağladı, tasarım sisteminin kurallarını skill olarak yazmayı deniyor. Üçünde de başlangıç Figma’daki sistem; fark, sonrasında neyin kaynak kaldığı.
Edge Delta’da şirketin farklı ekipleri AI ile prototip üretirken ilgisiz renkler ve ilgisiz tasarım kararlarıyla sonuçlar alıyordu. Ekibin tasarımcısı önce ürünün tasarım felsefesini yazıya döktü; bunun için üründen bir iki ekran görüntüsünü AI’a verip felsefeyi tanımlamasını istedi. Sonra Figma variable’larını bir plugin ile JSON olarak dışa aktardı ve bunu design tokens.md adlı referans dosyasına çevirdi. İkisini Frontend Design Skill’de birleştirdi: navigasyon ve input kuralları ile light ve dark mode token karşılıkları bu dosyalarda duruyor. Metinleri AI yazdı, tasarımcı okuyup düzeltti. Skill’i şirketteki herkesin kullanmasını teşvik etti; prototipler ürüne daha yakın çıkıyor ve ekip çözüm üzerinde daha hızlı anlaşıyor.
Tasarım sistemleri ürün değiştikçe geride kalıyor ve artık var olmayan bir ürünü anlatır hale geliyor. Intent ekibi web sitesinin tasarım sistemini, agent’ların her değişiklikte okuduğu bir yönlendirme katmanı olarak kurdu. AGENTS.md dosyası agent’a renk, tipografi ya da grid değerlerini çoğaltmak yerine sitenin tema sınıflarını ve CSS değişkenlerini kullanmasını söylüyor. Global stylesheet renkleri, fontları, yazı boyutlarını, responsive grid’i, açık ve koyu temayı ortak design token olarak tanımlıyor; canlı bir tasarım sistemi sayfası da bileşenleri agent’ın inceleyebileceği örnekler olarak gösteriyor. Sistem Figma’daki spec’lerin Figma MCP ile koda çevrilmesiyle başladı, sonra kod doğruluk kaynağı oldu; yeni gövde fontu, responsive düzen ve dark mode kodda eklendi. Agent’lar değişiklikleri Figma dosyalarına geri de yazdı, ama yazar pratikte buna gerek kalmadığını söylüyor.
Trendyol iki tasarım sisteminde AI ile tasarımdan koda giden akışı denedi. Bir ekip Figma’nın Code Connect özelliğini GitHub’la buluşturdu, çıktıyı MD dosyalarıyla Cursor’a verdi. Konuşmacıya göre ekip bir ve üç story point’lik işleri neredeyse %90 oranında tasarımdan doğrudan koda yansıtıyor ve bu akışı kısa süre önce tamamıyla kullanmaya başladı. Akış, kuralları ve akışları belli olan sade ekranlarda iyi çalışıyor. Ekip açık kaynak tasarım sistemi Baklava için de sistemdeki her başlığı ve kuralı skill olarak yazmayı deniyor. Sıradaki hedef, satıcı panellerindeki daha karmaşık ekranlar.
AI ile prototip ve kod üreten ekiplerde çıktı çoğu zaman ürüne benzemiyor: renkler ve tasarım kararları tasarım sisteminden gelmiyor. Sistem agent’ın okuyabileceği bir yerde durmadıkça bu değişmiyor.
Bu sayfada tasarım sistemini agent’a kendi eliyle taşımış ekiplerin cevaplarını topluyoruz. Neyi yazıya döktüklerini, token’ları nereye koyduklarını ve Figma ile kod arasında hangisini kaynak saydıklarını yan yana koyuyoruz.
Tasarım, ürün ve yapay zekadan seçtiğimiz en iyi okumalar, iki haftada bir çarşamba posta kutunda.
