PageDNA
PageDNA - Zamień Dowolną Stronę w Wizualne DNA
Generatywna wizualizacja struktury, stylu i zachowania strony.
Aplikacja webowa Online
About
PageDNA zamienia dowolną stronę w wizualne DNA. Analizuje ją wzdłuż trzech osi - struktury (DOM), stylu (CSS, układ, typografia, kolor) i zachowania (interaktywność, animacja, sieć) - i pokazuje wynik jako generatywną wizualizację, a nie kolejny dashboard.
Frontend działa w całości w przeglądarce, więc stronę załadowaną przez użytkownika można analizować bez wysyłania czegokolwiek. Tryb URL obsługuje mały backend Node.js + Playwright, który ładuje stronę docelową w prawdziwej przeglądarce, zbiera jej strukturę, styl i zachowanie, a następnie odsyła dane do silnika wizualnego.
Eksperymentowane wizualizacje to m.in. DOM City (struktura jako budynki), CSS Portrait (styl jako paleta i faktura), Layout DNA (kształt kompozycji), Interaction Map (topologia zdarzeń) oraz Code Galaxy (struktura plików i modułów). Każda z nich pojawia się dopiero po faktycznym wdrożeniu.
Key Features
Analiza struktury (DOM)
Obchodzi drzewo DOM, liczy i klasyfikuje elementy i zamienia strukturę dokumentu w coś wizualnego zamiast surowego konspektu.
Analiza stylu (CSS, layout, kolor, typografia)
Wyciąga paletę, skalę typograficzną i język układu strony - dzięki temu decyzje projektowe są czytelne na pierwszy rzut oka.
Analiza zachowania / interaktywności
Rejestruje interakcje, animacje i wywołania sieciowe - zachowanie strony pojawia się obok jej statycznej struktury.
Frontend w przeglądarce
Silnik wizualizacji działa w całości w przeglądarce użytkownika - dla stron ładowanych lokalnie nic nie trzeba wysyłać.
Tryb URL z Playwright
Tryb URL używa małego backendu Node.js z Playwright - ładuje wskazaną stronę w prawdziwej przeglądarce i przekazuje dane do silnika wizualizacji.
Wizualizacje generatywne
DOM City, CSS Portrait, Layout DNA, Interaction Map i Code Galaxy zamieniają analizę w obrazy, a nie w pulpit menedżerski.
Do projektowania i audytu
Przydatne, żeby zrozumieć stronę konkurencji, sprofilować własną lub zrobić wizualny portret istniejącej strony.
Analiza struktury (DOM)
Obchodzi drzewo DOM, liczy i klasyfikuje elementy i zamienia strukturę dokumentu w coś wizualnego zamiast surowego konspektu.
Analiza stylu (CSS, layout, kolor, typografia)
Wyciąga paletę, skalę typograficzną i język układu strony - dzięki temu decyzje projektowe są czytelne na pierwszy rzut oka.
Analiza zachowania / interaktywności
Rejestruje interakcje, animacje i wywołania sieciowe - zachowanie strony pojawia się obok jej statycznej struktury.
Frontend w przeglądarce
Silnik wizualizacji działa w całości w przeglądarce użytkownika - dla stron ładowanych lokalnie nic nie trzeba wysyłać.
Tryb URL z Playwright
Tryb URL używa małego backendu Node.js z Playwright - ładuje wskazaną stronę w prawdziwej przeglądarce i przekazuje dane do silnika wizualizacji.
Wizualizacje generatywne
DOM City, CSS Portrait, Layout DNA, Interaction Map i Code Galaxy zamieniają analizę w obrazy, a nie w pulpit menedżerski.
Do projektowania i audytu
Przydatne, żeby zrozumieć stronę konkurencji, sprofilować własną lub zrobić wizualny portret istniejącej strony.
Privacy & Security
Your data stays on your device. Always.
