Tarayıcıda kaydet
Sayfayı gerçek Chromium içinde açar; yerleşmiş DOM'u, computed stilleri, fontları, medyayı ve çalışma zamanı davranışını kaydeder.
Tarayıcı kanıtından çalışan projeye
Web yüzeyini çalışan bir projeye çevir.
Wibar bir sayfayı gerçek tarayıcı içinde kaydeder; gördüğü DOM, stil, asset ve davranışı bağımsız, düzenlenebilir bir frontend başlangıcına dönüştürür.
Kaynak yüzey1440 × 1000
Mobil kanıt390 × 844
01 / YAKLAŞIM
Screenshot değil.
Çalışan yüzey.
Ekran görüntüsü yalnız sonucu gösterir. Wibar sonucu oluşturan tarayıcı ağacını, stilleri, yerel assetleri ve davranış kanıtını birlikte taşır.
02 / SÜREÇ
Tek capture.
Üç açık adım.
Kanıtı düzenle
Tekrarlanan yapıları bileşenlere ayırır, assetleri yerelleştirir ve yakalanan yüzeyi okunabilir bir proje yapısına taşır.
Çıktıyı doğrula
Kaynak ve yerel çıktıyı farklı viewport'larda tekrar açar; görsel sapmaları ve davranış boşluklarını raporlar.
03 / KANIT PAKETİ
Her kararın izi diskte kalır.
Capture yalnız son HTML'i vermez. Kaynak kopyayı, temiz projeyi, tasarım modelini ve viewport ekran görüntülerini aynı kayıt altında tutar.
OUTPUT
raw-clone/Çalışma zamanı kopyası
clean-project/Düzenlenebilir proje
metadata/design-tokens.jsonTipografi, renk, boşluk
metadata/page-structure.jsonBölüm ve bileşen haritası
screenshots/Viewport kanıtları
clean-project/EDITABLE
src/
components/
site-header/
feature-panel/
call-to-action/
sections/
home/
styles/
tokens.css
layout.css
public/
assets/Semantik bölümler, ortak bileşenler ve yerelleştirilmiş assetler.
04 / CLI + MCP
Arayüzden ya da ajanın içinden.
Aynı capture engine'ini panelden, terminalden veya Wibar MCP ile çalıştır. Kayıtlı bölgelere geri dön, gerçek PNG kesitini ve computed style bağlamını incele.
$ wibar capture https://example.com
Opening Chromium...
Recording DOM, styles, assets and motion
✓ capture written to ./captures/example
05 / PLANLAR
Capture hacmine göre.
Ücretsiz dene; düzenli üretim başladığında ihtiyacın olan hacme geç.
Starter
$0sonsuza dek
Wibar'ı ilk gerçek HTML export ile denemek için.
Ücretsiz başla →Professional
$15aylık
Düzenli responsive arayüz çıktısı üreten geliştiriciler için.
Professional seç →Team / Agency
$39aylık
Modüler kod ve doğrulama çıktısı teslim eden ekipler için.
Team seç →Enterprise
Özelteklif
Özel API, yüksek hacim ve öncelikli destek ihtiyacı için.
Görüşmeyi başlat →06 / BAŞLA