Vercel'in design.md dosyası, stylesheet ve eval döngüsüyle AI coding agent'larını marka sadakatinde tutuyor

Repo becerisinden herkese açık dosyaya

Vercel, şirketin kendi işleri gibi görünmesi ve hissettirmesi gereken sayfaları tasarlayıp inşa eden coding agent'ları çalıştırıyor — aynı tipografi, renk ve kompozisyon. Bir Vercel blog yazısına göre, product-design adlı dahili bir skill bu işi repolarının içinde yürütüyor: skill, yönettiği kodun yanında duruyor ve agent'ların Vercel'in tasarım sistemini nasıl bulup anlayacağını, ayrıca ne inşa ediyorlarsa onunla ilgili ürün yönergelerini açıklıyor.

Bu, repo dışında çöküyor. Raporlar, teklifler ve tek seferlik sayfalar da markayı taşımak zorunda, ama çoğu zaman bu dosyaları okuyamayan araçlarda üretiliyorlar. Vercel'in cevabı design.md oldu: herhangi bir agent'ın, nerede çalışırsa çalışsın yükleyebileceği, herkese açık bir URL'de yayımlanan tek bir dosya.

Neden birebir taşıma başarısız oldu

Vercel'in ilk denemesi, product-design skill'ini herkese açık bir prompt'a düzleştirmekti. Sonuçlar hayal kırıklığıydı: farklı modeller görsel dilin aynı açıklamasını okuyup birbirinden tamamen farklı sayfalar üretti. Şirkete göre sorunun bir kısmı, tasarım dilinin öznel olması — "temiz" bir düzen istemek neredeyse her şey olabilir. Daha derin sorun ise bağlamdı: bir repository'nin içinde skill, gerçek bileşenlerin ve anlattığı şeylerin gönderilmiş örneklerinin ortasında dururken, bağımsız bir prompt'un bunların hiçbiri yoktu ve her model stili yalnızca kelimelerden yeniden inşa etmek zorunda kalıyordu.

Bu yüzden Vercel baştan başladı: yeni bir dosyayı sıfırdan yazdı ve her değişikliği sabit bir eval prompt setine karşı test etti. Gerçek kullanım senaryolarından türetilmiş, mock girdilerle eşleştirilmiş yedi prompt yazdı: bir kullanım ve performans raporu, bir yenileme teklifi, bir benchmark raporu, etkileşimli bir planlama sayfası, bir yap-al mı satın al mı brifi, bir güvenlik yönetişim brifi ve bir sunum destesi. Dosya değişirken prompt'lar dondurulmuş kaldı, böylece çıktıdaki her fark doğrudan yönlendirmeye bağlanabiliyordu.

İlk ölçülen sonuç

İlk testte Vercel, yenileme teklifi eval'ini aynı ortamda ve aynı modelle iki kez çalıştırdı — bir kez design.md olmadan, bir kez onunla — prompt'u, veriyi ve viewport'u aynı tutarak, her sürümü bir kez üreterek ve yeniden deneme yapmadan. Dosya olmadan model jenerik bir SaaS tarzı dashboard üretti. Dosyayla ise sayfa yenileme önerisinin kendisiyle açıldı, ticari kanıtları tek bir grid'de topladı, akran değerleri gerçekten karşılaştırılabilsinler diye tek bir ölçeğe yerleştirdi ve destekleyici detayı görünür kıldı ama özetle yarışmasına izin vermedi. Vercel, dosyanın sayfanın yalnızca stilini değil, yapısını ve hiyerarşisini de şekillendirdiği sonucuna vardı.

Üç katman: yönlendirme, stylesheet, eval

Biten sistemin üç parçası var:

• design.md'nin kendisi: agent'lara bir sayfayı hem hızlı bir yönetici okuması hem de ayrıntılı bir inceleme için nasıl şekillendireceklerini, somut iddialar ve dürüst uyarılarla metin yazmayı, hiyerarşi, tipografi ve renkü kanıtla metnin birbirini desteklemesi için nasıl bir araya getireceklerini ve wordmark ile üçgen logo için asset kurallarına kadar Vercel olarak yayımlamayı anlatır. Ayrıca Vercel'in asla görmek istemediği tekrarlayan üretilmiş tasarım kalıplarını adlandırır; bu kalıplara isim vermek, agent'ları onları tanıma ve kaçınma konusunda çok daha güvenilir kıldı.
• Herkese açık bir stylesheet. Agent'lar kendi tipografi, boşluk ve düzen kararlarını icat etmeye devam ettiği için Vercel bu kararları tamamen modelin elinden aldı. Stylesheet, tasarım sistemi primitiflerini — header'lar, tablolar, stat şeritleri, grafik stilleri — herkese açık bir URL'den sunulan CSS olarak paketlerken, design.md class adlarını ve token'ları belgeliyor ki agent'lar bunları doğrudan HTML'de kullansın. Agent stylesheet'i hiç okumaz: sayfa tarayıcıda render edildiğinde yüklenir, böylece o kodun hiçbiri modelin bağlamına girmez ve yönlendirme için daha fazla yer kalır.
• Bir değerlendirme döngüsü. Deterministik kontroller mekanik hataları yakalar — örneğin bir tablonun kendisine sunulan genişliği yok sayması — insanlar ise otomatikleştirilemeyen öznel kısımları yargılar: hiyerarşi, kompozisyon ve sayfanın okuyucuya gerçekten geldiği şeyi verip vermediği.

Kurallar dosyaya nasıl girdi

Vercel'e göre hiçbir şey bu döngü dışında design.md'ye girmedi. Sayfalar sabit senaryolardan üretildi, incelendi ve kabul edilen düzeltmeler dosyaya geri kodlandı, sonra her değişikliğin tutup tutmadığı doğrulandı — çünkü bir artefakta yardımcı olan bir düzeltme bir başkasına sessizce zarar verebilirdi. Tam bir tur, dosyanın güncel sürümüne karşı yedi sayfanın tamamını hem Claude Opus 4.8 hem de GPT-5.5'li Codex üzerinde üretiyor; yalnızca tabloları etkileyen bir kural gibi hedefli değişiklikler için ise daha dar yeniden çalıştırmalar yapılıyor. Yedi çıktıyı yan yana karşılaştırmak ayrıca dosyanın her şeyi tek bir şablona itmediğini gösterdi: etkileşimli planlama sayfası kontrolleriyle açılırken, yenileme teklifi öneriyle açılıyordu.

Neden önemli

Bu, agent odaklı UI çalışması için en net kamuya açık planlardan biri. Ana dersi şu: salt düzyazı, bir marka ile bir model arasındaki zayıf bir arayüzdür, çünkü öznel talimatları okuyan her model onları farklı yorumlar. Çözüm, modeli deterministik olarak kısıtlamak — adlandırılmış class ve token'lara sahip bir stylesheet — ve insan tasarım yargısını bir eval döngüsüne dönüştürmektir; bu da el yazımı prompt'lardan test edilmiş, iteratif yönlendirmeye doğru broader AI mühendisliğindeki kaygışı yansıtır. Bu pattern Vercel'in ötesine genellenir: agent'ları kullanıcıya dönük sayfalar üreten her ekip bir yönlendirme dosyası artı bir stylesheet yayımlayıp dondurulmuş senaryolara karşı iterasyon yapabilir; tarayıcının modelin okuması gerekmeyeni yüklemesine izin vermek ise bağlam verimliliği için ucuz bir kazançtır.