PageDNA
PageDNA - Verwandeln Sie jede Website in visuelle DNA
Generative Visualisierung der Struktur, des Stils und des Verhaltens einer Website.
Webanwendung Live
Über
PageDNA verwandelt jede Website in visuelle DNA. Es analysiert die Seite über drei Achsen - Struktur (DOM), Stil (CSS, Layout, Typografie, Farbe) und Verhalten (Interaktivität, Animation, Netzwerk) - und rendert das Ergebnis als generative Visualisierung statt als Dashboard.
Das Frontend läuft vollständig im Browser, sodass eine vom Nutzer geladene Seite analysiert werden kann, ohne etwas hochzuladen. Der URL-Modus wird von einem kleinen Node.js- + Playwright-Backend angetrieben, das die Zielseite in einem echten Browser lädt, ihre Struktur, ihren Stil und ihr Verhalten erfasst und die Daten an die visuelle Engine zurücksendet.
Mögliche vom Projekt erkundete Visualisierungen umfassen DOM City (Struktur als Gebäude), CSS Portrait (Stil als Palette und Textur), Layout DNA (kompositorische Form), Interaction Map (Ereignis-Topologie) und Code Galaxy (Datei- und Modulstruktur). Jede wird erst sichtbar, sobald sie tatsächlich umgesetzt ist.
Hauptfunktionen
Strukturanalyse (DOM)
Durchläuft den DOM-Baum, zählt und klassifiziert Elemente und macht die Dokumentstruktur visuell statt zu einer rohen Gliederung.
Stilanalyse (CSS, Layout, Farbe, Typografie)
Extrahiert Palette, typografische Skala und Layout-Sprache einer Seite, sodass die Designentscheidungen auf einen Blick lesbar werden.
Verhaltens-/Interaktivitätsanalyse
Erfasst Interaktionen, Animationen und Netzwerkaufrufe, sodass das Verhalten der Seite neben ihrer statischen Struktur sichtbar wird.
In-Browser-Frontend
Die Visualisierungs-Engine läuft vollständig im Browser des Nutzers - kein Upload für lokal geladene Seiten erforderlich.
Playwright-gestützter URL-Modus
Der URL-Modus nutzt ein kleines Node.js- + Playwright-Backend, das die Zielseite in einem echten Browser lädt und die Daten an die Visualisierungs-Engine zurückspeist.
Generative Visualisierungen
DOM City, CSS Portrait, Layout DNA, Interaction Map und Code Galaxy verwandeln die Analyse in Kunstwerke statt in Dashboards.
Wiederverwendbar für Design & Audit
Nützlich, um die Seite eines Wettbewerbers zu verstehen, die eigene zu profilieren oder ein visuelles Porträt einer bestehenden Seite zu erzeugen.
Strukturanalyse (DOM)
Durchläuft den DOM-Baum, zählt und klassifiziert Elemente und macht die Dokumentstruktur visuell statt zu einer rohen Gliederung.
Stilanalyse (CSS, Layout, Farbe, Typografie)
Extrahiert Palette, typografische Skala und Layout-Sprache einer Seite, sodass die Designentscheidungen auf einen Blick lesbar werden.
Verhaltens-/Interaktivitätsanalyse
Erfasst Interaktionen, Animationen und Netzwerkaufrufe, sodass das Verhalten der Seite neben ihrer statischen Struktur sichtbar wird.
In-Browser-Frontend
Die Visualisierungs-Engine läuft vollständig im Browser des Nutzers - kein Upload für lokal geladene Seiten erforderlich.
Playwright-gestützter URL-Modus
Der URL-Modus nutzt ein kleines Node.js- + Playwright-Backend, das die Zielseite in einem echten Browser lädt und die Daten an die Visualisierungs-Engine zurückspeist.
Generative Visualisierungen
DOM City, CSS Portrait, Layout DNA, Interaction Map und Code Galaxy verwandeln die Analyse in Kunstwerke statt in Dashboards.
Wiederverwendbar für Design & Audit
Nützlich, um die Seite eines Wettbewerbers zu verstehen, die eigene zu profilieren oder ein visuelles Porträt einer bestehenden Seite zu erzeugen.
Datenschutz & Sicherheit
Ihre Daten bleiben auf Ihrem Gerät. Immer.
