Chrome için SnipCode: Canlı UI'yi çerçeveye hazır koda yakalayın
SnipCode, Micah tarafından oluşturulan, geliştiriciler ve tasarımcılar için canlı web sayfalarını kişisel bir bileşen kütüphanesine dönüştüren bir Chrome uzantısıdır. Uzantı, sayfa öğelerini seçer ve temiz, çerçeveye özgü kod veya yapılandırılmış JSON üretir, öğeleri orijinal stilini koruyarak yeniden inşa eder. Ana yetenekler arasında öğe yakalama, HTML'ye, Tailwind, React veya Vue'ya dışa aktarma ve renkler, yazı tipleri ve SVG'ler için otomatik varlık çıkarımı bulunmaktadır. Bu araç, mevcut sitelerden yeniden kullanılabilir, incelenebilir bileşenlere ihtiyaç duyan ön uç mühendisleri, UI tasarımcıları ve AI geliştiricilerini hedef alır.
Bu uzantı ne için kullanılır?
Uzantı, canlı sayfa öğelerini kullanıma hazır koda dönüştürür. Bir düğmeye, karta veya bölüme işaret edin ve uzantı, geliştiriciler için uygun temiz bir çıktı olarak yeniden inşa eder. Dışa aktarımlar HTML, Tailwind, React ve Vue içerir ve araç ayrıca bir bileşen şemasını temsil etmek için yapılandırılmış JSON da üretebilir. Bu, belirli bir UI bileşenini çoğaltırken veya bir sitenin tasarım sisteminin parçalarını yeniden kullanmak için çıkartırken faydalıdır.
Kesme ve kod üretimi ne kadar özel?
İşleme tarayıcıda yerel olarak gerçekleşir, bu nedenle kesitler ve çıkarılan varlıklar cihazda kalır. Uzantı bir hesap gerektirmez ve geliştirici izleme olmadığını belirtir. AI destekli kod üretimi için kullanıcılar kendi LLM API anahtarlarını sağlar, kendi anahtarını getir modeli izleyerek. Bu tasarım, kullanıcı verilerini tarayıcıda tutarken, bir anahtar sağlandığında uzantının AI destekli çıktılar üretmesine olanak tanır.
Araç tasarım varlıklarını ve sistem şemalarını çıkarabilir mi?
Evet; uzantı, yeniden kullanım için sayfalardan renkleri, yazı tiplerini, görüntüleri, simgeleri ve SVG'leri alır. Araç, bir sayfanın tasarım sistemini AI modellerinin tüketebileceği yapılandırılmış bir JSON belgesi olarak dışa aktarabilir ve bileşenleri yeniden inşa ederken orijinal stilin korunmaya çalışılmasını sağlar. Bu yetenekler, tasarımcıların ve mühendislerin prototipleme için tutarlı paletler ve varlıklar çıkarmasına veya canlı sitelerden doğrudan türetilen bileşen kütüphanelerini beslemesine olanak tanır.
Ön uç ekiplerinin denetlenebilir araçları tercih ettiği açık, tarayıcı tabanlı bir seçenek
SnipCode, UI parçalarını yakalamak için denetlenebilir, tarayıcı tabanlı bir yol isteyen ön uç profesyonellerine uygundur, çünkü proje açık kaynaklıdır ve yerel işleme ve denetlenebilirlik için tasarlanmıştır. Çıktıları projelere entegre etmeden önce bir tarayıcı uzantısı iş akışı ve kısa bir kurulum adımı bekleyin. Pratik bir ipucu: kesilmiş varlıkları ve ayarları günlük taramadan ayrı tutmak için deney yapmak üzere özel bir tarayıcı profili kullanın.
