Görsel tasarım tokenlerini AI'ye hazır DESIGN.md dosyalarına çıkarın
DESIGN.md çıkarıcı, Vitor M. M. tarafından ibe.IA ile işbirliği içinde oluşturulmuş bir Chrome uzantısıdır. Bu uzantı, bir sitenin görsel kimliğini AI destekli UI kodu için standartlaştırılmış bir DESIGN.md referansına dönüştürür. Sayfaları inceler ve renk, tipografi, boşluk ve diğer tokenleştirilmiş kuralları yakalayarak makine tarafından okunabilir bir belge oluşturur. Uzantı, hızlı çıkarım için kompakt bir yan panel kullanır ve tutarlı görsel rehberliğe ihtiyaç duyan frontend geliştiricileri, UI/UX tasarımcıları ve prompt mühendislerini hedef alır.
Sayfa içi stilleri yapılandırılmış bir tasarım token dosyasına dönüştürür
Uzantı, herhangi bir aktif sekmeden somut stil verilerini çıkarır ve bunları bir DESIGN.md dosyasına yazar. Çıkarıcı, renkleri, tipografi ölçeklerini, boşluk birimlerini, kenar stillerini ve gölgeleri tanımlar ve bunları bir token referansı olarak biçimlendirir. Çıktı, W3C Tasarım Tokenleri Topluluk Grubu (DTCG) spesifikasyonunu izler, böylece ekipler standartlaştırılmış bir token modeli alır, rastgele bir renk listesi yerine. Bu, aşağıdaki araçların tokenleri güvenilir bir şekilde yorumlamasına yardımcı olur.
Sayfayı terk etmeden tarayıcıya entegre olur
Çıkarma, Chrome Yan Panel API'si üzerine inşa edilmiş bir yan panelden çalışır, kullanıcıların canlı siteyi görüntülerken bir tıklama ile yakalamayı başlatmasına olanak tanır. Panel tasarımı, iş akışını kompakt ve rahatsız etmeyen bir şekilde tutar, böylece tasarımcılar bileşenleri inceleyebilir ve ayrı bir pencere açmadan çıkarımları tetikleyebilir. Çok sayfalı yakalamalar, gezilen sayfalar arasındaki tokenleri tek bir referans dosyasında birleştirerek proje düzeyinde tutarlılık sağlar.
Gizlilik için işlemleri tarayıcıda yerel olarak tutar
Tüm analiz, kullanıcının tarayıcısında gerçekleşir; uzantı, verileri harici olarak iletmediğini veya saklamadığını ve bir hesap gerektirmediğini belgeler. Bu yalnızca yerel işleme, sıkı gizlilik kurallarına sahip profesyonel ortamlara uygundur, çünkü çıkarılan tokenler ve üretilen DESIGN.md, istemci ortamında kalır ve dahili kullanım için doğrudan dışa aktarılabilir.
AI editörleri ve programatik kullanım için token dosyaları hazırlar
Bu araç, AI'ya hazır eserler üretir ve programatik alım için uygun YAML ön bilgisi ile dışa aktarılabilir bir Markdown dosyası içeren bir AI Konsolidasyon İsteği üretir. İstek, Claude ve Cursor gibi LLM'lerin token setini uygulamasına yardımcı olmak için sunulur, Markdown çıktısı ise geliştirici boru hatlarına entegrasyon için biçimlendirilmiştir. Uzantı, API bağımlılığı nedeniyle Chrome ve diğer Chromium tabanlı tarayıcılarda çalışır.
AI destekli kod için tekrarlanabilir tasarım rehberliği isteyen ekipler için en uygun
Uzantı, LLM tarafından üretilen UI'daki görsel kaymayı azaltmak için tekrarlanabilir, makine tarafından okunabilir bir tasarım referansına ihtiyaç duyan frontend ekipleri ve prompt mühendisleri için pratik bir seçenektir. Bir ticaret-off, benimsemenin mevcut inşa veya inceleme süreçleri içinde token dosyalarını içe aktarmak ve sürümlemek için küçük bir iş akışı değişikliği gerektirmesidir. Tasarım sadakatini zorunlu kılan projeler için uzantı, görsel kuralları kodlamak için odaklanmış, gizliliğe duyarlı bir yol sunar.
