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.
PageDNA
Trasforma qualsiasi sito web in DNA visivo
Visualizzazione generativa della struttura, dello stile e del comportamento di un sito web.
Applicazione web
Online
Pagina ufficiale del prodotto
Editore:
POLPROG
Pagina ufficiale del prodotto
3
Dimensioni di analisi
5
Visualizzazioni esplorate
2
Modalità (File / URL)
1
Backend Playwright
01 / PageDNA
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.
02 / Funzionalità principali
Funzionalità principali
Le funzionalità più importanti spiegate in modo pratico.
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.
03 / Scarica
Accesso al prodotto
Un percorso chiaro dalla fonte ufficiale al primo utilizzo riuscito.
Scegli la piattaforma giusta
Usa uno dei link ufficiali disponibili per il tuo dispositivo o browser.
Installa o apri
Segui le istruzioni dello store o apri l'applicazione web. Nessun programma di installazione di terze parti.
Configura e inizia
Controlla le opzioni, scegli le preferenze e inizia dal flusso principale.
Opzioni di accesso ufficiali
04 / Tecnologia
Tecnologia del prodotto
Una panoramica trasparente delle tecnologie principali usate per creare e mantenere questo prodotto.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Sicurezza
Privacy e sicurezza
I tuoi dati restano sul tuo dispositivo. Sempre.