Herhangi bir web sitesinin tüm tasarım sistemini tek komutla çıkarın.
design-extract, kurulumu kolay ve güven sinyalleri güçlü bir araç. En iyi sonuç için uyumlu agent ve kullanım senaryosu eşleşmesini kontrol et.
Repository başlangıç yönlendirmesi
gh repo view Manavarya09/design-extract --webResmi repo veya web sitesini aç.
README'deki package manager, auth ve platform gereksinimlerini kontrol et.
Kendi agent/workflow içinde küçük bir test görevinde dene.
Design-extract, canlı bir web sitesini analiz eden ve ondan eksiksiz bir tasarım sistemi oluşturan bir araçtır. Tasarım token'ları, Tailwind yapılandırması, Figma değişkenleri ve daha fazlasını çıktı olarak verir. Bir sitenin tasarımını klonlamak veya erişilebilirliğini kontrol etmek için kullanabilirsiniz.
Design-extract (designlang olarak da bilinir), Playwright kullanarak herhangi bir URL'yi tarayan ve tam tasarım dilini çıkaran güçlü bir CLI aracıdır. W3C DTCG token'ları (ilkel, anlamsal, bileşik), Tailwind CSS yapılandırması, shadcn/ui teması, Figma değişkenleri, hareket token'ları, yazılı bileşen anatomisi, marka sesi yönergeleri ve sayfa amacı etiketleri dahil olmak üzere 17'den fazla çıktı dosyası üretir. Basit renk çıkarmanın ötesine geçerek düzen desenlerini, 4 kırılma noktasında duyarlı davranışı, fareyle üzerine gelme/odaklanma/aktif durumları, WCAG kontrast puanlamasını, çok sayfalı tutarlılığı, canlı bir referans kaynağına karşı kayma kontrollerini, görsel farkları ve paylaşılabilir dereceli bir rapor kartını analiz eder. Ayrıca Claude Code, Cursor ve Windsurf ile entegrasyon için bir MCP sunucusu içerir ve bir ajan becerisi olarak kullanılabilir. Araç, iOS SwiftUI, Android Compose, Flutter ve WordPress dahil olmak üzere birden çok platform çıktısını destekler. MIT lisansı altındadır ve Node 20+ gerektirir.
Güven sinyalleri güçlü; yine de production kullanımından önce README ve izinleri kontrol et.
Son commit yaklaşık 51 gün önce.
3074 GitHub yıldızı topluluk ilgisini gösteriyor.
22 açık issue bakım yükü hakkında sinyal verir.
MIT lisansı görünüyor.
Rakip bir web sitesinden ilham almak için tasarım token'larını çıkarma
Bir web sitesinin tasarım sistemini çalışan bir Next.js başlangıcına klonlama
Canlı herhangi bir siteden marka kılavuzu kitabı oluşturma
WCAG kontrast puanlarını kontrol etme ve iyileştirme önerileri alma
İki tasarımı birleştirme (birinden görseller, diğerinden ses)
Araç, hedef URL'ye başsız bir tarayıcı gönderir; bu, bazı siteler tarafından bot olarak algılanabilir.
Çıkarılan tasarım token'ları, orijinal web sitesi sahibinin telif hakkına veya ticari markasına tabi olabilir.
Aynı alan adındaki birçok sayfada çalıştırmak, hız sınırlamasına veya IP engellemesine neden olabilir.
3,074
Yıldız
279
Fork
22
Açık Sorun
MIT
Lisans
AI'nin doğrudan Figma tuvaline UI çizmesini ve tasarımları yapılandırılmış veri olarak okumasını sağlayan çift yönlü MCP köprüsü.
Argos, ekiplerin kaliteyi korumasına yardımcı olan, istenmeyen UI değişikliklerini tespit eden açık kaynaklı bir görsel test platformudur.
UI bileşenleriniz için tasarım sistemi dokümantasyonunu doğrudan AI ajanınızdan oluşturun, Figma veya taşınabilir .md dosyalarına dönüştürün.
Herhangi bir web sitesinin tüm tasarım sistemini tek komutla çıkarın.
Tasarım sistemlerini tersine mühendislik yapması gereken ön yüz geliştiricileri, Token kütüphaneleri oluşturan ve yöneten tasarım sistemi mühendisleri, WCAG uyumluluğunu kontrol eden erişilebilirlik denetçileri
Kurulum bölümü repository düzeyinde başlangıç yönlendirmesi sunar; bağımsız bir kurulum testi garantisi değildir. Resmi README ve sürüm notlarını kontrol edin.
Araç, hedef URL'ye başsız bir tarayıcı gönderir; bu, bazı siteler tarafından bot olarak algılanabilir. Çıkarılan tasarım token'ları, orijinal web sitesi sahibinin telif hakkına veya ticari markasına tabi olabilir.
Değerlendirilebilecek benzer veya tamamlayıcı araçlar: figma-ui-mcp, Argos, uSpec.
7 Haz 2026
3 güvenlik/güven notu kayıtlı.
Kurulum zorluğu 2/5.