Mirrorframe: Web sayfalarını piksel doğrulamayla React'e klonlar

Mirrorframe, canlı bir web sayfasını kendi kendine yeten bir React uygulamasına dönüştüren açık kaynaklı bir araç. Playwright ile çalışan headless bir tarayıcı sayfayı gezerek her DOM düğümünün hesaplanmış stillerini, hareket ve etkileşim sinyallerini kaydediyor; bu veriden tasarım tokenlarını, hareket DNA'sını ve etkileşim durum makinelerini içeren bir 'Design Genome' çıkarılıyor. Ardından bu genomdan deterministik olarak React bileşenleri ve CSS üretiliyor, geri kazanılan durum makineleri gerçek event listener ve animasyonlara dönüştürülüyor.

Aracın öne çıkan yanı, sonucu üretim sürecine hiçbir büyük dil modeli katmadan tamamen mevcut web teknolojileriyle (WAAPI, MutationObserver, esbuild, pixelmatch) inşa etmesi. Klonlanan sayfa, orijinaliyle aynı görüntü noktasında yeniden render edilip düğüm bazında ve etkileşim durumu bazında piksel farkı ile doğrulanıyor; sapma tespit edilirse otomatik düzeltme uygulanıyor. Fare hareketiyle tetiklenen paralaks, 3D eğim kartları gibi 'pointer choreography' efektleri bile 3x3 ızgara örneklemesiyle matematiksel olarak modelleniyor ve gerçek fare hareketleriyle tekrar test ediliyor.

Proje ayrıca video, canvas, iframe gibi zaman içinde değişen içerikleri dürüstçe işaretliyor: bu tür düğümler mekanizma olarak yeniden üretiliyor ama piksel karşılaştırmasından hariç tutulup açıkça etiketleniyor, gizlenmiyor. Her atlanan öğe sabit bir neden koduyla raporlanıyor ve düzen boşluğunu korumak için yer tutucu olarak bırakılıyor. Mühendisler için bu, web arayüzü klonlama, tasarım sistemi çıkarma veya regresyon testi otomasyonu arayanlara şeffaf, tekrarlanabilir ve denetlenebilir bir alternatif sunuyor; 0.x sürüm numarası API'nin henüz kararlı olmadığını, ama sonuçların güvenilir olduğunu vurguluyor.