PageDNA
PageDNA - Trasforma qualsiasi sito web in DNA visivo
Visualizzazione generativa della struttura, dello stile e del comportamento di un sito web.
Applicazione web Online
Informazioni
PageDNA trasforma qualsiasi sito web in DNA visivo. Analizza la pagina lungo tre assi - struttura (DOM), stile (CSS, layout, tipografia, colore) e comportamento (interattività, animazione, rete) - e rende il risultato come una visualizzazione generativa piuttosto che una dashboard.
Il frontend funziona interamente nel browser, così una pagina caricata dall'utente può essere analizzata senza caricare nulla. La modalità URL è alimentata da un piccolo backend Node.js + Playwright, che carica la pagina di destinazione in un browser reale, ne cattura struttura, stile e comportamento, e rispedisce i dati al motore visivo.
Le possibili visualizzazioni esplorate dal progetto includono DOM City (la struttura come edifici), CSS Portrait (lo stile come palette e texture), Layout DNA (la forma compositiva), Interaction Map (la topologia degli eventi) e Code Galaxy (la struttura di file e moduli). Ciascuna viene esposta solo una volta che è effettivamente implementata.
Funzionalità principali
Analisi della struttura (DOM)
Percorre l'albero DOM, conta e classifica gli elementi e trasforma la struttura del documento in qualcosa di visivo invece di una struttura grezza.
Analisi dello stile (CSS, layout, colore, tipografia)
Estrae la palette, la scala tipografica e il linguaggio di layout di una pagina così che le decisioni di design diventino leggibili a colpo d'occhio.
Analisi del comportamento / interattività
Cattura interazioni, animazioni e chiamate di rete così che il comportamento della pagina appaia accanto alla sua struttura statica.
Frontend nel browser
Il motore di visualizzazione funziona interamente nel browser dell'utente - nessun upload richiesto per le pagine caricate localmente.
Modalità URL basata su Playwright
La modalità URL usa un piccolo backend Node.js + Playwright che carica la pagina di destinazione in un browser reale e rispedisce i dati al motore di visualizzazione.
Visualizzazioni generative
DOM City, CSS Portrait, Layout DNA, Interaction Map e Code Galaxy trasformano l'analisi in opere d'arte piuttosto che in dashboard.
Riutilizzabile per design e audit
Utile per capire il sito di un concorrente, profilare il proprio o produrre un ritratto visivo di una pagina esistente.
Analisi della struttura (DOM)
Percorre l'albero DOM, conta e classifica gli elementi e trasforma la struttura del documento in qualcosa di visivo invece di una struttura grezza.
Analisi dello stile (CSS, layout, colore, tipografia)
Estrae la palette, la scala tipografica e il linguaggio di layout di una pagina così che le decisioni di design diventino leggibili a colpo d'occhio.
Analisi del comportamento / interattività
Cattura interazioni, animazioni e chiamate di rete così che il comportamento della pagina appaia accanto alla sua struttura statica.
Frontend nel browser
Il motore di visualizzazione funziona interamente nel browser dell'utente - nessun upload richiesto per le pagine caricate localmente.
Modalità URL basata su Playwright
La modalità URL usa un piccolo backend Node.js + Playwright che carica la pagina di destinazione in un browser reale e rispedisce i dati al motore di visualizzazione.
Visualizzazioni generative
DOM City, CSS Portrait, Layout DNA, Interaction Map e Code Galaxy trasformano l'analisi in opere d'arte piuttosto che in dashboard.
Riutilizzabile per design e audit
Utile per capire il sito di un concorrente, profilare il proprio o produrre un ritratto visivo di una pagina esistente.
Privacy e sicurezza
I tuoi dati restano sul tuo dispositivo. Sempre.
