PageDNA
PageDNA - перетворіть будь-який сайт на візуальну ДНК
Генеративна візуалізація структури, стилю та поведінки сайту.
Веб-застосунок Онлайн
Про застосунок
PageDNA перетворює будь-який сайт на візуальну ДНК. Він аналізує сторінку за трьома осями - структура (DOM), стиль (CSS, розкладка, типографіка, колір) і поведінка (інтерактивність, анімація, мережа) - і рендерить результат як генеративну візуалізацію, а не дашборд.
Фронтенд працює повністю в браузері, тож сторінку, завантажену користувачем, можна проаналізувати, нічого не вивантажуючи. Режим URL працює на невеликому бекенді Node.js + Playwright, що завантажує цільову сторінку в реальному браузері, фіксує її структуру, стиль і поведінку та надсилає дані назад до візуального рушія.
Можливі візуалізації, які досліджує проєкт, охоплюють DOM City (структура як будівлі), CSS Portrait (стиль як палітра й текстура), Layout DNA (композиційна форма), Interaction Map (топологія подій) та Code Galaxy (структура файлів і модулів). Кожна з'являється лише після фактичної реалізації.
Ключові можливості
Аналіз структури (DOM)
Проходить дерево DOM, підраховує та класифікує елементи й перетворює структуру документа на щось візуальне замість сирого контуру.
Аналіз стилю (CSS, розкладка, колір, типографіка)
Витягує палітру, типографічну шкалу та мову розкладки сторінки, тож дизайнерські рішення стають читабельними з першого погляду.
Аналіз поведінки / інтерактивності
Фіксує взаємодії, анімації та мережеві виклики, тож поведінка сторінки з'являється поряд з її статичною структурою.
Фронтенд у браузері
Рушій візуалізації працює повністю в браузері користувача - для локально завантажених сторінок вивантаження не потрібне.
Режим URL на базі Playwright
Режим URL використовує невеликий бекенд Node.js + Playwright, що завантажує цільову сторінку в реальному браузері й передає дані назад до рушія візуалізації.
Генеративні візуалізації
DOM City, CSS Portrait, Layout DNA, Interaction Map та Code Galaxy перетворюють аналіз на витвори мистецтва, а не дашборди.
Придатний для дизайну та аудиту
Корисний для розуміння сайту конкурента, профілювання власного чи створення візуального портрета наявної сторінки.
Аналіз структури (DOM)
Проходить дерево DOM, підраховує та класифікує елементи й перетворює структуру документа на щось візуальне замість сирого контуру.
Аналіз стилю (CSS, розкладка, колір, типографіка)
Витягує палітру, типографічну шкалу та мову розкладки сторінки, тож дизайнерські рішення стають читабельними з першого погляду.
Аналіз поведінки / інтерактивності
Фіксує взаємодії, анімації та мережеві виклики, тож поведінка сторінки з'являється поряд з її статичною структурою.
Фронтенд у браузері
Рушій візуалізації працює повністю в браузері користувача - для локально завантажених сторінок вивантаження не потрібне.
Режим URL на базі Playwright
Режим URL використовує невеликий бекенд Node.js + Playwright, що завантажує цільову сторінку в реальному браузері й передає дані назад до рушія візуалізації.
Генеративні візуалізації
DOM City, CSS Portrait, Layout DNA, Interaction Map та Code Galaxy перетворюють аналіз на витвори мистецтва, а не дашборди.
Придатний для дизайну та аудиту
Корисний для розуміння сайту конкурента, профілювання власного чи створення візуального портрета наявної сторінки.
Конфіденційність і безпека
Ваші дані завжди залишаються на вашому пристрої.
