Разбери любой сайт на атомы
Вставь ссылку, скриншот или запись экрана. Через минуту получишь: из чего сайт собран, сколько такая работа стоит на рынке, где взять точно такие же ресурсы и по каким урокам это повторить своими руками.
Четыре шага от «красиво» до «я сделал сам»
Порядок важен: каждый следующий шаг работает на результате предыдущего.
Загрузи референс
Ссылка на сайт, скриншот, мокап или видеозапись экрана — для анимаций и скролл-эффектов, которые скриншот не поймает.
Выбери движок ИИ
Gemini, ChatGPT, Claude или Grok. Ключ хранится только в твоём браузере и уходит напрямую к провайдеру, минуя чужие серверы.
Получи разбор и смету
Индекс сложности по 100 балльной шкале, разбивка по десяти слоям, найденные шрифты и библиотеки, часы работы и стоимость по ставке твоего рынка.
Собери проект
Список ассетов со ссылками на бесплатные аналоги и платные оригиналы, подборка уроков и софта под каждый найденный эффект.
Разбор без ответа «а дальше что» бесполезен
Где взять
Шрифты, фото, видео, 3D модели, иконки, звук. Для каждого платного варианта — бесплатный аналог того же качества.
Чем сделать
Программы, браузерные редакторы и ИИ агенты: 3D, моушн, видео, генерация картинок, сборка сайта без кода.
Как научиться
Бесплатные курсы, каналы и мастер классы под конкретный эффект — на русском, украинском и английском.
Профессия, которую можно освоить из дома
Новичок с нуля
Учишься на разборе живых сайтов, а не на абстрактных примерах.
Фрилансер
Показываешь клиенту детальный разбор — и смета перестаёт быть предметом спора.
Дизайнер
Быстрый сбор ассетов и понимание технических ограничений до начала макета.
Студия
Оценка входящих заявок за минуту вместо часа переписки.
Инструмент делается прежде всего для тех, кому тяжело выйти из дома: ветеранов, людей с инвалидностью, тех, кто начинает жизнь заново. Веб-дизайн — одна из немногих профессий, где работа находится по портфолио, а не по прописке и физической форме. Поэтому в базе ресурсов всегда указан бесплатный путь, а весь текст на экране можно прослушать вслух.
Свои ключи — свои правила
Базовый — бесплатно
Один движок ИИ на выбор, общая оценка сложности, полный доступ к базе ресурсов и обучению.
- Разбор по ссылке и скриншоту
- Индекс сложности и часы
- Вся база ресурсов и уроков
Pro
Все движки одновременно, разбор видео, детальная смета с ценами ассетов и выгрузка отчёта.
- Консилиум из четырёх моделей
- Покадровый разбор записи экрана
- Смета по ставкам четырёх рынков
- Отчёт в HTML для клиента
Есть ссылка — вставь её. Нет ссылки или сайт закрыт от ботов — просто добавь файлы ниже.
Картинки PNG, JPG, WEBP и видео MP4, MOV, WEBM
Видео сам порежу на кадры, чтобы поймать анимацию
Оставь прочерк — и денег в отчёте не будет, только часы и баллы сложности. Впиши свою цифру — появится смета.
Выбери способ ввода слева и нажми «Сделать рентген».
Без ключа API работает демо режим — он показывает структуру отчёта на условных данных.
Сними стиль сайта до последнего пикселя
Дашборд разбирает технику: из чего собран сайт. Эта страница снимает другое — вкус и атмосферу: размеры букв, вес шрифтов, палитру, воздух, есть ли рамки и тени, как двигаются блоки. На выходе — готовый промт для Lovable, чтобы новый сайт дышал в том же ритме, но со своим содержанием и своим брендом.
Из кода вытащим настоящие шрифты и цвета — это факт, а не догадка.
Gemini подключается ключом в настройках ⚙ — он хорошо читает картинки.
Вставь ссылку и добавь хотя бы один скриншот первого экрана.
Чем больше кадров — тем точнее калька: шапка, первый экран, блок услуг, подвал.
Разобрал сайт — забери промты и собери свой
Рентген показывает, из чего сделан чужой сайт. Здесь это превращается в текст задания: страница за страницей, блок за блоком. Копируешь промт, открываешь Lovable, вставляешь — и получаешь сайт того же уровня сложности, но со своим содержанием.
Место для твоих собственных заготовок: впиши промт, он сохранится в этом браузере и будет всегда под рукой рядом с остальными.
Всё, из чего собираются сайты
Фото, видео, шрифты, 3D, моушн, звук, ИИ агенты, конструкторы и софт. У каждой платной позиции есть бесплатная замена — она помечена зелёным.
Путь с нуля до первого заказа
Порядок проверенный: сначала вёрстка, потом дизайн-инструменты, потом эффекты. Всё бесплатно, кроме отмеченного.
Уроки под конкретный эффект
Нажми — откроется поиск по YouTube с готовым запросом на нужном языке.
Каналы и площадки
Получи код любого сайта
Вставь адрес — вернём полный HTML страницы с подсветкой и нумерацией строк, как в «view page source», плюс списки подключённых скриптов, стилей, шрифтов и картинок. Любой из этих файлов тоже открывается одной кнопкой.
Сайты под жёсткой защитой (Cloudflare и подобные) код не отдают — это ограничение самого сайта, а не инструмента.
WEB ANATOMY
Разбери любой сайт на атомы.
Инструмент, который не просто «смотрит» на чужой сайт, а раскладывает его на технику, стиль и готовые задания для сборки. Один адрес на входе — рентген, оценка сложности и пакет промтов на выходе.
Проект создан командой PHOENIX UA и изначально задуман как доступный инструмент для людей с инвалидностью и ветеранов: чтобы разобраться в дизайне и веб-разработке можно было быстро, без профильного образования и без дорогих курсов.
1. Что делает продукт
| 1 | Пользователь вставляет ссылку на любой сайт-референс |
| 2 | Сервер скачивает исходный код страницы (обход CORS, без внешних прокси) |
| 3 | Код разбирается по 45+ сигнатурам: библиотеки, шрифты, CMS, медиа, анимации |
| 4 | Страница делится на секции, у каждой — роль, элементы, вес в баллах |
| 5 | Выдаётся оценка сложности по 100-балльной шкале и ранг E–S |
| 6 | Формируется пакет промтов: страница за страницей, блок за блоком |
| 7 | Отдельно снимается стиль: палитра, типографика, ритм, тени, движение |
| 8 | Всё сохраняется в архив, экспортируется в PDF и JSON |
2. Полный перечень функций
Дашборд — технический рентген
- Загрузка исходного HTML анализируемого сайта силами собственного сервера.
- Определение подключённых библиотек по 45+ сигнатурам: GSAP, ScrollTrigger, Lenis, Swiper, Three.js, Spline, Rive, Lottie, Barba, Locomotive, Framer Motion, React, Vue, Next и другие.
- Извлечение реальных шрифтов страницы (Google Fonts, @font-face, локальные семейства).
- Определение CMS и платформы (WordPress, Shopify, Webflow, Tilda, Squarespace, кастом).
- Инвентаризация медиа: количество изображений, видео, canvas, svg, iframe.
- Разбор по секциям: номер, роль (hero, услуги, галерея, отзывы, цены, футер), найденные элементы с человеческими названиями — карусель, flip-карточки, parallax, sticky-scroll, marquee, горизонтальный скролл, аккордеон, модальные окна, видео-фон, WebGL/3D, счётчики, кастомный курсор, split-текст.
- Вес каждой секции в общей сложности (в баллах).
- Оценка по 100-балльной шкале с рангом E, D, C, B, A, S — язык, понятный заказчику («этот сайт 68/100, лендинг за вечер — это 15–25»).
- Сравнение «дешёвый лендинг / этот сайт»: число элементов, анимаций, наличие 3D, вес медиа.
- Ставка мастера — свободное поле; пока ставка не введена, стоит прочерк, деньги не считаются.
- Разделение выводов на три честных уровня: найдено в коде, оценено моделью, рекомендация для твоего сайта.
Стиль (IMPRINT) — съём визуального языка
- Анализ по одной ссылке; скриншоты необязательны, но повышают точность.
- Извлечение фактов из кода: точные hex-цвета, шрифты и их вес, размеры в px, скругления, тени, длительности переходов, ширина полотна, шкала отступов.
- Замер палитры и пропорций кадра через Canvas.
- Описание характера: воздух, контраст, ритм, наличие рамок, поведение при наведении и скролле.
- Готовый длинный промт стиля (от 1500 знаков) — без имён брендов референса, только язык формы.
Промты — реинжиниринг под сборку
- Автоматическая генерация пакета промтов по разобранному сайту: каркас + промт на каждый блок.
- Пошаговый порядок работы: сначала каркас, затем блоки по одному.
- Библиотека из 20 готовых примеров-промтов по типовым задачам (лендинг, кофейня, ремонт квартир, ювелирный дом и другие) с делением по уровню сложности.
- Кнопка переноса промта в конструктор и копирование в один клик.
Ресурсы — библиотека решений
- Каталог инструментов и ассетов с ценой и пометкой бесплатной замены (зелёным).
- Категории: фото, видео, шрифты, 3D, моушн, звук, ИИ-агенты, конструкторы, софт.
- У каждого найденного элемента — три пути: купить готовый модуль, взять бесплатно, научиться (конкретные YouTube-запросы и каналы).
- Источники: ThemeForest, CodeCanyon, CodePen, LottieFiles, Sketchfab, Poly Haven, Quixel, Unsplash, Pexels, Pixabay, Coverr, Mixkit, Freepik и другие.
Архив и экспорт
- Локальный архив прогонов (до 40 записей): дата, домен, баллы, ранг, секции.
- Повторное открытие любого разбора и сравнение двух сайтов.
- Экспорт в PDF (отчёт для заказчика) и JSON (машинные данные).
- Просмотр и копирование исходного кода любой проанализированной страницы.
Технические и пользовательские возможности
- Встроенный ИИ без ключа: серверный прокси, пользователю ничего настраивать не нужно.
- Поддержка собственных ключей: Google Gemini, OpenAI, Anthropic Claude, xAI Grok — запрос идёт через наш сервер, поэтому ключ работает и на телефоне, и в любой сети.
- Передача ключа тестировщику через параметр адреса с сохранением в браузере.
- Две темы оформления: «Стекло» (по умолчанию) и «Латунь», переключение в один клик.
- Аристократичная антиква в заголовках, контурные акцентные кнопки.
- Полная адаптивность: телефон, планшет, компьютер.
- Всё на русском языке, формулировки без технического жаргона.
3. Конкурентные преимущества
Ближайшие аналоги в мире: websitetoprompt.com, step1.dev, uiextractor.com, ui.rip, copyweb.net. Все они делают одно — «вот промт, клонируй страницу».
| Возможность | Аналоги | WEB ANATOMY |
|---|---|---|
| Промт по ссылке | да | да |
| Разбор по секциям с ролями и элементами | нет | да |
| Вес каждой секции в баллах | нет | да |
| Оценка сложности 100 баллов и ранг E–S | нет | да |
| Отдельный съём стиля (палитра, ритм, движение) | нет | да |
| Ссылки «купить / бесплатно / научиться» у каждого элемента | нет | да |
| Пакет промтов по блокам, а не один общий | нет | да |
| Архив прогонов, сравнение сайтов, PDF и JSON | нет | да |
| Язык отчёта, понятный заказчику | нет | да |
| Работа без своего API-ключа | редко | да |
| Русский интерфейс и упор на доступность | нет | да |
В чём отличие по существу
- Аналоги разбирают — мы учим собирать. На выходе не копия чужого сайта, а понятный план и промты для своего, со своим содержанием и брендом.
- Две независимые оптики. Техника (дашборд) и вкус (стиль) снимаются отдельно, и их можно комбинировать: техника одного референса + характер другого.
- Честность как принцип. Факты из кода отделены от оценок модели. Там, где инструмент бессилен (жёсткий Cloudflare, сайт целиком в WebGL, шрифт по скриншоту), об этом сказано прямо, а не замаскировано уверенным тоном.
- Доказательство для заказчика. Балл, ранг и перечень элементов превращают спор «дорого/недорого» в измеримый разговор.
- Экономика проекта. Возле каждого элемента — платный и бесплатный путь, поэтому собрать сайт уровня A можно с нулевым бюджетом на ассеты.
- Социальная миссия. Инструмент изначально проектировался под людей с инвалидностью и ветеранов: минимум кликов, крупные надписи, работа с телефона, никакой настройки ключей.
4. Кому это нужно
- Фрилансеру и студии — обосновать смету и показать, из чего состоит работа.
- Заказчику — понять, за что он платит, и сравнить предложения.
- Новичку — получить пошаговый маршрут вместо абстрактных курсов.
- Дизайнеру — снять визуальный язык референса и собрать мудборд с точными значениями.
5. Стек и архитектура
- TanStack Start (React 19, SSR) + Vite 7, Tailwind CSS v4.
- Весь интерфейс — единый самодостаточный файл
webanatomy.html. - Серверные маршруты:
/api/public/fetch— загрузка HTML референсов,/api/public/ai— прокси к ИИ (встроенный движок и ключи пользователя). - Хранение архива и настроек — локально в браузере пользователя, без внешней базы данных.
- Развёртывание на edge-рантайме; внешних зависимостей платформы нет.
WEB ANATOMY — PHOENIX UA.