Salva nuove baseline — Cattura screenshot di ogni pagina su tutti i dispositivi selezionati (iPhone, Pixel, iPad, Desktop...) e li salva come riferimento.
Fai modifiche al CSS o al codice del sito.
Lancia test completo — Ricattura e confronta pixel per pixel con le baseline. Le differenze appaiono in rosso.
2. Le tre viste:
Dashboard — Stato di tutte le pagine con miniature baseline/attuale/diff per ogni dispositivo. Filtra per dispositivo, browser, stato e problemi layout.
Vista Confronto — Una pagina alla volta, tutti i dispositivi affiancati. Raggruppamento per tipo (Desktop/Phone/Tablet) o per browser. Bottone Cross-Browser per confrontare il rendering tra browser alla stessa risoluzione.
Cross-Progetto — Confronta pagine tra progetti diversi (es. il tuo sito vs un competitor, oppure staging vs produzione). Abbina le pagine, scegli il dispositivo e vedi le differenze.
3. Gestione progetti e dispositivi:
Selettore progetto (dropdown nell'header) — Cambia progetto al volo.
Ingranaggio — Apre la gestione progetti: crea, modifica, elimina. Configura URL, pagine e dispositivi abilitati per progetto.
Aggiorna Sitemap (nel modal progetto) — Scarica automaticamente la sitemap.xml dal sito e popola le pagine.
Dispositivi — 22 dispositivi reali (iPhone SE, iPhone 14 Pro Max, Pixel 7, Galaxy S24, iPad, Desktop HD/FHD/QHD...) con portrait e landscape. Selezionabili per progetto.
4. Analisi layout automatica:
Ogni cattura analizza automaticamente la pagina per: overflow, testo troppo piccolo, touch target piccoli, elementi sovrapposti, contenuto tagliato, spaziatura bordi.
Badge E/W (errori/warning) sulle card. Clicca per i dettagli.
Filtro Layout nella toolbar per mostrare solo le pagine con problemi.
5. Condivisione e scaricamento:
Scarica — Download del PNG dal lightbox o dalla card.
Condividi con Claude — Crea un riferimento con ID univoco. In chat scrivi l'ID e Claude analizza lo screenshot.
Prova a cambiare i filtri oppure lancia un test per generare gli screenshot.
Riferimenti condivisi con Claude (0)
▶
PaginaMostra
Raggruppa per
🔄
Confronto tra progetti — Seleziona Progetto A e Progetto B, poi abbina le pagine da confrontare (es. homepage ↔ homepage). Scegli il dispositivo e la fonte (baseline o attuale), poi clicca Confronta. Ideale per: il tuo sito vs competitor, staging vs produzione, prima vs dopo un redesign.
Progetto AProgetto BDispositivoFonte
Abbinamenti pagine
Report
Nessun dato disponibile
Cattura almeno una pagina (Testa o Baseline) per generare il report con analisi layout e performance.
aggiornato
Condividi con Claude
Crea un riferimento a questo screenshot. Potrai chiedere a Claude di analizzarlo citando l'ID.
Operazione in corso...
Gestione Progetti
Nuovo progetto
Formato: nome /percorso — una per riga. Se lasci vuoto viene creata solo la homepage.
Seleziona i dispositivi su cui catturare gli screenshot. Portrait (P) e Landscape (L) sono separati.