Вместе SEO · Инструмент
Из чего собран дизайн любого сайта
Цвета, шрифты, отступы и скругления — точными значениями из кода, а не пипеткой по скриншоту. И готовый промпт, чтобы нейросеть сверстала блок в том же стиле.
Пример разбора
Чтобы не просить верить на слово, разобрали собственный сайт: он открыт у вас прямо сейчас, и результат можно сверить глазами. Разбор от 28 августа 2026 года — тем же кодом, что отработает по вашему адресу.
- Фон#ffffff
- Текст#000000
- Акцент#6366f1
- Шрифтptcsans
- Скругление20px
- Отступ16px
Это не скриншот. Страницу в браузере мы не открывали: блок собран заново из значений, найденных в CSS. Раскладка и слова наши, всё остальное — с сайта. Похож — значит разбор верен; не похож — значит оформление рисуется скриптами, и в стилях его нет.
Шрифт ptcsans мы не загружаем — ни с сайта, ни со стороннего сервиса: это был бы запрос из вашего браузера туда, куда вы не просили. Если шрифта нет у вас, текст показан запасным.
Что собрано в отчёте
- 27цветов по ролям: фон, текст, акцент, границы
- 6шрифтов в стилях, из них 2 подключены файлами
- 4pxшаг шкалы отступов: все значения сайта кратны ему
- 8брейкпоинтов, вёрстка мобайл-ферст
- 9собственных переменных CSS — с именами, которые придумал автор
- 8сочетаний «текст на фоне» проверено на контраст: 1 не проходит AA
- 11 492объявления CSS из 14 таблиц стилей
Фрагмент промпта
## Характер оформления
- Сильные скругления (20px) — мягкое, дружелюбное оформление.
- Тени используются активно: интерфейс многослойный, с выраженной глубиной.
- Плотность средняя: типичный отступ около 14px.
- Отступы подчинены шкале, кратной 4px — у сайта есть система, а не случайные значения.
- Используются фирменные шрифты (ptcsans, robotoFlex), подключённые файлами, — не системные.
- Размеры текста плавно меняются с шириной экрана через clamp().
- Основной акцентный цвет — #6366f1. Им выделены кнопки и ссылки.
- У сайта есть собственные CSS-переменные — оформление построено на дизайн-токенах.
- Сайт свёрстан мобайл-ферст: базовые правила для телефона, расширения через min-width.
- Раскладка построена преимущественно на Flexbox.Один раздел из девяти. Целиком — 9 КБ: палитра с ролями, шрифты со стеками, шкалы, сетка, токены сайта и прямой запрет дописывать значения от себя.
Что делает этот инструмент
Оформление сайта описано в его таблицах стилей: там лежат все цвета, шрифты, размеры и отступы. Сервис читает эти файлы и восстанавливает дизайн-систему — не список из сорока оттенков, а разбор по ролям: что здесь фон, что текст, а что фирменный акцент. Из разбора собирается промпт: файл с точными значениями, который понимает нейросеть. С ним она верстает блок в стиле сайта, а не «в среднем по интернету».
Когда это нужно
Понравился чужой сайт
Хотите так же, но не знаете, из чего это собрано. Разбор показывает палитру, шрифты и пропорции — можно повторить решение осознанно, а не на глаз пипеткой.
Нейросеть верстает не то
«Сделай в стиле сайта такого-то» не работает: модель этот сайт не видела и придумывает правдоподобное. Отдайте ей промпт с точными значениями — и результат совпадёт с задумкой.
Нужно продолжить чужую вёрстку
Достался проект без макетов и документации. Разбор восстанавливает шкалы и токены, чтобы новые блоки не выбивались из существующих.
Свой сайт разъехался
Двенадцать оттенков серого и пять радиусов вместо одного — обычный итог года правок разными руками. Разбор показывает разнобой числами.
Как это работает
Открываем страницу
Читаем разметку — так же, как её видит поисковый робот.
Собираем стили
Находим таблицы стилей и встроенные блоки, включая внутреннюю страницу сайта.
Разбираем правила
Раскладываем CSS на объявления и смотрим, где какое значение применяется.
Выводим систему
Считаем роли цветов, шкалы и пропорции, собираем промпт для нейросети.
Чего инструмент не делает
- Не запускает скрипты. Мы читаем исходный CSS, как поисковый робот. Стили, которые сайт рисует скриптами уже в браузере, в разбор не попадут — и мы честно скажем об этом в отчёте.
- Не измеряет площадь на экране. Заметность цвета мы оцениваем по типу селектора: фон у body весит больше, чем цвет значка. Это хорошая оценка, но не измерение.
- Не копирует сайт. Инструмент разбирает оформление, а не выгружает вёрстку. Дизайн-система — это не объект авторского права, а вот прямое копирование страницы им может быть.
- Не даёт оценок. Мы не ставим дизайну баллов: «плохо» и «хорошо» здесь зависят от задачи. Показываем, как устроено.
Частые вопросы
Откуда берутся цвета — это пипетка по скриншоту?
Нет. Мы читаем исходный CSS страницы и берём значения оттуда — то есть ровно те, что написал разработчик. Пипетка по картинке дала бы цвет с учётом сжатия и наложений, а здесь значения точные.
Почему цветов мало? Я вижу на сайте больше
Мы не перечисляем всё подряд, а ранжируем по заметности и склеиваем почти одинаковые оттенки. Пятьдесят оттенков серого в списке не помогают: важно знать, что здесь фон, что текст и что акцент. Полный список значений есть в промпте.
Сработает ли на сайте, собранном на React или Vue?
Обычно да. Если сайт отдаёт готовую страницу с сервера (Next.js, Nuxt) или использует обычные файлы стилей — разбор полный. Не увидим только те стили, которые создаются скриптами прямо в браузере: их нет в исходном коде, и поисковый робот при первом заходе тоже их не видит.
Можно разбирать чужие сайты?
Да. Мы читаем только то, что и так открыто любому посетителю: браузер каждого человека скачивает эти же файлы стилей, чтобы показать страницу. Ничего закрытого сервис не запрашивает и не обходит.
Что делать с промптом дальше?
Скопируйте или скачайте файл и отправьте его в Claude, ChatGPT, DeepSeek или GigaChat целиком, а следом напишите задачу: «сделай блок с отзывами», «собери страницу услуги». Модель получит точные цвета, шрифты и отступы вместо догадок. Формат ответа можно выбрать заранее — чистый HTML, React с Tailwind или CSS-модули.
Это бесплатно?
Да, без регистрации и без почты. Ограничение одно: не больше восьми разборов подряд с одного адреса — оно защищает чужие серверы от лишней нагрузки и снимается само через несколько минут.