Аналіз структури (DOM)
Проходить дерево DOM, підраховує та класифікує елементи й перетворює структуру документа на щось візуальне замість сирого контуру.
PageDNA
Перетворіть будь-який сайт на візуальну ДНК
Генеративна візуалізація структури, стилю та поведінки сайту.
Веб-застосунок
Онлайн
Офіційна сторінка продукту
Видавець:
POLPROG
Офіційна сторінка продукту
3
Виміри аналізу
5
Досліджуваних візуалізацій
2
Режими (Файл / URL)
1
Бекенд Playwright
01 / PageDNA
Про застосунок
PageDNA перетворює будь-який сайт на візуальну ДНК. Він аналізує сторінку за трьома осями - структура (DOM), стиль (CSS, розкладка, типографіка, колір) і поведінка (інтерактивність, анімація, мережа) - і рендерить результат як генеративну візуалізацію, а не дашборд.
Фронтенд працює повністю в браузері, тож сторінку, завантажену користувачем, можна проаналізувати, нічого не вивантажуючи. Режим URL працює на невеликому бекенді Node.js + Playwright, що завантажує цільову сторінку в реальному браузері, фіксує її структуру, стиль і поведінку та надсилає дані назад до візуального рушія.
Можливі візуалізації, які досліджує проєкт, охоплюють DOM City (структура як будівлі), CSS Portrait (стиль як палітра й текстура), Layout DNA (композиційна форма), Interaction Map (топологія подій) та Code Galaxy (структура файлів і модулів). Кожна з'являється лише після фактичної реалізації.
02 / Ключові можливості
Ключові можливості
Найважливіші можливості з практичними поясненнями.
Аналіз стилю (CSS, розкладка, колір, типографіка)
Витягує палітру, типографічну шкалу та мову розкладки сторінки, тож дизайнерські рішення стають читабельними з першого погляду.
Аналіз поведінки / інтерактивності
Фіксує взаємодії, анімації та мережеві виклики, тож поведінка сторінки з'являється поряд з її статичною структурою.
Фронтенд у браузері
Рушій візуалізації працює повністю в браузері користувача - для локально завантажених сторінок вивантаження не потрібне.
Режим URL на базі Playwright
Режим URL використовує невеликий бекенд Node.js + Playwright, що завантажує цільову сторінку в реальному браузері й передає дані назад до рушія візуалізації.
Генеративні візуалізації
DOM City, CSS Portrait, Layout DNA, Interaction Map та Code Galaxy перетворюють аналіз на витвори мистецтва, а не дашборди.
Придатний для дизайну та аудиту
Корисний для розуміння сайту конкурента, профілювання власного чи створення візуального портрета наявної сторінки.
03 / Завантажити
Доступ до продукту
Зрозумілий шлях від офіційного джерела до першого успішного використання.
Виберіть потрібну платформу
Скористайтеся одним з офіційних посилань для свого пристрою або браузера.
Установіть або відкрийте
Дотримуйтеся інструкцій магазину або відкрийте вебзастосунок. Без сторонніх інсталяторів.
Налаштуйте та почніть
Перегляньте параметри, виберіть уподобання та почніть з основного робочого процесу.
Офіційні варіанти доступу
04 / Технології
Технології продукту
Прозорий огляд основних технологій, використаних для створення та підтримки продукту.
Next.js
React
TypeScript
Tailwind CSS
Docker
05 / Безпека
Конфіденційність і безпека
Ваші дані завжди залишаються на вашому пристрої.