Strukturanalyse (DOM)
Durchläuft den DOM-Baum, zählt und klassifiziert Elemente und macht die Dokumentstruktur visuell statt zu einer rohen Gliederung.
PageDNA
Verwandeln Sie jede Website in visuelle DNA
Generative Visualisierung der Struktur, des Stils und des Verhaltens einer Website.
Webanwendung
Live
Offizielle Produktseite
Herausgeber:
POLPROG
Offizielle Produktseite
3
Analysedimensionen
5
Erkundete Visualisierungen
2
Modi (Datei / URL)
1
Playwright-Backend
01 / PageDNA
Ü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.
02 / Hauptfunktionen
Hauptfunktionen
Die wichtigsten Funktionen praxisnah erklärt.
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.
03 / Herunterladen
Produktzugang
Ein klarer Weg von der offiziellen Quelle bis zum ersten erfolgreichen Einsatz.
Passende Plattform wählen
Nutzen Sie einen der offiziellen Links für Ihr Gerät oder Ihren Browser.
Installieren oder öffnen
Folgen Sie den Store-Anweisungen oder öffnen Sie die Webanwendung. Keine Drittanbieter-Installer.
Konfigurieren und starten
Prüfen Sie die Optionen, wählen Sie Ihre Einstellungen und beginnen Sie mit dem zentralen Workflow.
Offizielle Zugangsoptionen
04 / Technologie
Technologie des Produkts
Ein transparenter Blick auf die Kerntechnologien für Entwicklung und Wartung dieses Produkts.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Sicherheit
Datenschutz & Sicherheit
Ihre Daten bleiben auf Ihrem Gerät. Immer.