PageDNA
PageDNA - premeňte akúkoľvek webovú stránku na vizuálnu DNA
Generatívna vizualizácia štruktúry, štýlu a správania webovej stránky.
Webová aplikácia Online
O projekte
PageDNA premieňa akúkoľvek webovú stránku na vizuálnu DNA. Analyzuje stránku naprieč tromi osami - štruktúra (DOM), štýl (CSS, rozloženie, typografia, farba) a správanie (interaktivita, animácia, sieť) - a vykresľuje výsledok ako generatívnu vizualizáciu namiesto dashboardu.
Frontend beží výhradne v prehliadači, takže stránku načítanú používateľom je možné analyzovať bez nahrávania čohokoľvek. Režim URL poháňa malý backend Node.js + Playwright, ktorý načíta cieľovú stránku v skutočnom prehliadači, zachytí jej štruktúru, štýl a správanie a odošle dáta späť do vizuálneho enginu.
Možné vizualizácie skúmané projektom zahŕňajú DOM City (štruktúra ako budovy), CSS Portrait (štýl ako paleta a textúra), Layout DNA (kompozičný tvar), Interaction Map (topológia udalostí) a Code Galaxy (štruktúra súborov a modulov). Každá z nich sa sprístupní, až keď je skutočne implementovaná.
Kľúčové funkcie
Analýza štruktúry (DOM)
Prechádza strom DOM, počíta a klasifikuje prvky a premieňa štruktúru dokumentu na niečo vizuálne namiesto surovej osnovy.
Analýza štýlu (CSS, rozloženie, farba, typografia)
Extrahuje paletu, typografickú škálu a jazyk rozloženia stránky, takže dizajnové rozhodnutia sa stávajú čitateľnými na prvý pohľad.
Analýza správania / interaktivity
Zachytáva interakcie, animácie a sieťové volania, takže správanie stránky sa objaví vedľa jej statickej štruktúry.
Frontend v prehliadači
Vizualizačný engine beží výhradne v prehliadači používateľa - pre lokálne načítané stránky sa nevyžaduje žiadne nahrávanie.
Režim URL poháňaný Playwright
Režim URL používa malý backend Node.js + Playwright, ktorý načíta cieľovú stránku v skutočnom prehliadači a posiela dáta späť do vizualizačného enginu.
Generatívne vizualizácie
DOM City, CSS Portrait, Layout DNA, Interaction Map a Code Galaxy premieňajú analýzu na umelecké diela namiesto dashboardov.
Znovupoužiteľné pre dizajn a audit
Užitočné na pochopenie stránky konkurencie, profilovanie vašej vlastnej alebo vytvorenie vizuálneho portrétu existujúcej stránky.
Analýza štruktúry (DOM)
Prechádza strom DOM, počíta a klasifikuje prvky a premieňa štruktúru dokumentu na niečo vizuálne namiesto surovej osnovy.
Analýza štýlu (CSS, rozloženie, farba, typografia)
Extrahuje paletu, typografickú škálu a jazyk rozloženia stránky, takže dizajnové rozhodnutia sa stávajú čitateľnými na prvý pohľad.
Analýza správania / interaktivity
Zachytáva interakcie, animácie a sieťové volania, takže správanie stránky sa objaví vedľa jej statickej štruktúry.
Frontend v prehliadači
Vizualizačný engine beží výhradne v prehliadači používateľa - pre lokálne načítané stránky sa nevyžaduje žiadne nahrávanie.
Režim URL poháňaný Playwright
Režim URL používa malý backend Node.js + Playwright, ktorý načíta cieľovú stránku v skutočnom prehliadači a posiela dáta späť do vizualizačného enginu.
Generatívne vizualizácie
DOM City, CSS Portrait, Layout DNA, Interaction Map a Code Galaxy premieňajú analýzu na umelecké diela namiesto dashboardov.
Znovupoužiteľné pre dizajn a audit
Užitočné na pochopenie stránky konkurencie, profilovanie vašej vlastnej alebo vytvorenie vizuálneho portrétu existujúcej stránky.
Súkromie a bezpečnosť
Vaše údaje zostávajú vo vašom zariadení. Vždy.
