Analiza struktury (DOM)
Obchodzi drzewo DOM, liczy i klasyfikuje elementy i zamienia strukturę dokumentu w coś wizualnego zamiast surowego konspektu.
PageDNA
Zamień Dowolną Stronę w Wizualne DNA
Generatywna wizualizacja struktury, stylu i zachowania strony.
Aplikacja webowa
Online
Oficjalna strona produktu
Wydawca:
POLPROG
Oficjalna strona produktu
3
Wymiarów analizy
5
Eksplorowanych wizualizacji
2
Tryby (Plik / URL)
1
Backend Playwright
01 / PageDNA
O produkcie
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.
02 / Kluczowe funkcje
Kluczowe funkcje
Najważniejsze możliwości opisane w praktyczny sposób.
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.
03 / Pobierz
Dostęp do produktu
Prosta droga od oficjalnego źródła do pierwszego udanego użycia.
Wybierz właściwą platformę
Skorzystaj z jednego z oficjalnych odnośników dostępnych dla Twojego urządzenia lub przeglądarki.
Zainstaluj lub otwórz
Postępuj zgodnie z instrukcjami sklepu lub otwórz aplikację internetową. Bez zewnętrznych instalatorów.
Skonfiguruj i zacznij
Sprawdź dostępne opcje, wybierz preferencje i rozpocznij od podstawowego zastosowania.
Oficjalne opcje dostępu
04 / Technologia
Technologia produktu
Przejrzysty opis głównych technologii użytych do budowy i utrzymania produktu.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Bezpieczeństwo
Prywatność i bezpieczeństwo
Twoje dane pozostają na Twoim urządzeniu. Zawsze.