Bir kodlama ajanı diyagram çizdiğinde sonuç genellikle aynı olur: yuvarlatılmış kutular, rastgele renkler, hiyerarşi yok. Geliştirici cathrynlavery'nin diagram-design adlı projesi tam bu noktaya editoryal bir tasarım sistemiyle saldırıyor — ve bu sayede GitHub'da trend repo haline geldi.
Beceri 39 diyagram tipi getiriyor: mimari, sekans ve durum makinelerinden kadran, swimlane ve Wardley haritalarına, oradan Sankey, treemap, balık kılçığı, kanban ve veritabanı şeması gibi yeni yerleşim gramerlerine kadar. Her tip üç statik varyantta geliyor — minimal açık, minimal koyu ve tam editoryal — ve gömülü SVG içeren kendi kendine yeten HTML olarak üretiliyor: derleme adımı yok, JavaScript yok, harici görsel bağımlılığı yok. Claude Code, Codex, Factory Droid, Pi ve Agent Skills uyumlu diğer istemciler için eklenti olarak kuruluyor.
Asıl argüman marka uyumu. "onboard diagram-design to https://yoursite.com" komutu ana sayfayı çekiyor, baskın paleti ve yazı tipi yığınını çıkarıyor ve bunları anlamsal rollere eşliyor: kâğıt, mürekkep, vurgu, soluk, bağlantı. Kullanıcı önerilen diff'i onaylıyor ve token'lar becerinin stil kılavuzuna yazılıyor. Marka eşleştirme ayrıca bir "sadakat makbuzu" üretiyor: örneklenen URL'ler, tam renk rolleri, yazı tipi aileleri ve ağırlıkları, yazı tipi kaynak adresleri ve varsa yedekler. İlk çalıştırma kapısı, varsayılan görünümün markalı bir projeye sessizce sızmasını engelliyor.
Projenin tasarım disiplinine dair kodladıkları da bir o kadar ilginç. Tek bir vurgu rengi, diyagram başına bir-iki odak öğesi, 1px kıl payı çizgiler, gölge yok, en fazla 10px köşe yuvarlaklığı — ve tüm koordinat, genişlik ve boşluklar 4'e bölünebilir. Üç yazı tipi rolü sabit: başlıklar için serif, düğüm adları için sans, teknik alt etiketler için mono. Gerekçe estetik değil: yapay zekâ üretimi grafikleri ele veren görünümden kaçınmak.
Kalite güvencesi alışılmadık ölçüde ayık. Projenin kendi CI süreci her şablonu headless Chromium'da render ediyor ve kesilmeyi geometriyle değil piksel farkıyla ölçüyor; çünkü getBoundingClientRect() çizgi kalınlığını, işaretleyicileri ve clip-path'i hesaba katmıyor. Alana dayalı grafik tiplerinin kendi kapıları var: treemap'ler hücrenin kapladığı alan içine yazılan değerle uyuşmazsa, şelale grafikleri başlangıç, deltalar ve bitiş tutmazsa, Sankey'ler miktarlar korunmazsa başarısız oluyor. İçe aktarma yolları .drawio, Mermaid ve Excalidraw dosyalarını kabul ediyor — ve kaynak geometriyi devralmak yerine seçilen format, boyut, ayrıntı düzeyi ve hedef kitleye göre yeniden çizmeyi tercih ediyor.
Bunun niş bir proje olarak mı kalacağı yoksa ajanların dokümantasyonu nasıl resimlediğini değiştirip değiştirmeyeceği açık. Ancak beceri ekonomisinin artık ne kadar ileri gittiğini gösteriyor: tek tek prompt'lar değil, bakımı yapılan tasarım ve test standartları, yarım düzine araca paket olarak kurulabiliyor.
