Tilda School Helper

Шрифты, линейка, отступы, пипетка, скриншоты с разметкой, стайлгайд сайта, картинки и SVG, превью экранов — для вёрстки.

✨ Tilda School Helper — набор из десяти инструментов для разбора и копирования вёрстки прямо на странице. Удобно при работе с Tilda и любыми сайтами. 🧰 ИНСТРУМЕНТЫ 🔤 Шрифты. Наведите на текст — увидите шрифт, размер, начертание, высоту строки и цвет. Клик копирует font-family. В строке «Лицензия» подскажу источник: зелёным — бесплатный (системный, Google Fonts или свободный веб-шрифт), оранжевым — платный. Известные коммерческие шрифты (Adderley, Circular, Gilroy, Proxima Nova, Futura, Gotham и др.) распознаются прямо по имени, для них предложу близкий бесплатный аналог из Google Fonts. Alt+клик (на Mac — ⌥ Option+клик) открывает страницу Google Fonts, Shift+клик копирует прямую ссылку на файл шрифта, если он доступен. 📏 Линейка. Три режима: «Рамка» — габариты элемента; «Свободный» — рамка-рулетка перетаскиванием без привязки к элементам; «Якорь → цель» — расстояние между двумя элементами. 🎨 Пипетка и цвета. Возьмите цвет любого пикселя или соберите палитру реально используемых на странице цветов. Клик копирует HEX. 📐 Направляющие. Линейки сверху и слева, как в Figma: тяните направляющие, смотрите координаты, выбирайте цвет линий под дизайн сайта. Магнит примагничивает линии к краям и центру элементов, а режим «липкие» закрепляет их на месте экрана при прокрутке. 🧱 Каркас. Показывает структуру страницы без «шума»: обводит элементы контурами по типам (контейнеры, текст, медиа, контролы), умеет обесцветить страницу в ч/б и заменить картинки серыми плашками — чтобы оценить сетку, ритм и иерархию, не отвлекаясь на цвет и содержимое. Охват контуров переключается: все элементы, только блоки Tilda или выкл. В разметку страницы ничего не вносится. 📸 Скриншоты с разметкой. Снимок окна, выделенной области или всей страницы целиком. Снимок окна умеет скрывать полосу прокрутки, фиксированное меню и куки-баннеры с виджетами. Скриншот области — точная подгонка границ за маркеры (кроп) перед съёмкой. Снимок всей страницы прокручивает и склеивает кадры, с заморозкой анимаций. Встроенный редактор: рамки, овалы, линии, стрелки, кисть, маркер, текст, нумерованные метки, размытие, кадрирование, выбор цвета, фон для соцсетей, сохранение в PNG, JPEG или WebP (с выбором качества) или копирование в буфер. 🖼️ Картинки и SVG. Соберите все изображения страницы (включая фоновые и инлайновые SVG), посмотрите размер и исходный URL, уберите дубли. Фильтры по типу, по размеру в пикселях и ползунок веса — отсеять мелочь вроде иконок и трекинг-пикселей. Скачайте по одной, пачкой или одним ZIP-архивом. 📖 Стайлгайд сайта. Один клик — и перед вами дизайн-система открытой страницы: палитра с ролями (фон, текст, рамки) и группировкой оттенков, проверка контраста по WCAG 2.1, градиенты, живые образцы кнопок с их настоящими стилями, типографика с определением лицензии шрифтов и живыми образцами, шкала отступов, фирменные скругления и тени, CSS-переменные самого сайта. Клик по шрифту, кнопке, контрастной паре, отступу или скруглению подсветит все места с этим значением прямо на странице (стрелки листают находки) — легко найти выбившееся; Alt+клик копирует значение, остальное копируется просто кликом. Экспорт: CSS-переменные (:root с токенами), Figma Tokens (Tokens Studio), фрагмент Tailwind-конфига, JSON, PNG-карточка для шеринга, файл стилей .tildastyles для импорта в Tilda (с выбором, какие цвета, шрифты и кнопки в него войдут) и печать в PDF. История хранит последние 10 разборов, а режим сравнения показывает общее и различия двух сайтов. Идеально для разбора референсов. 📱💻 Превью экранов. Откройте сайт в рамке устройства — мобильные (iPhone, Pixel, iPad) и десктоп (1366, 1440, 1680, Full HD 1920, 2K 2560). Десктопный холст рендерится в реальную ширину и ужимается под окно, если оно меньше, — на ноутбуке видно, как сайт выглядит на большом мониторе. Режим «Адаптив» — свободно тяните размер вьюпорта за края и угол или задайте точные ширину и высоту, чтобы ловить «ломкие» ширины. Кнопка «Направляющие» включает линейки и направляющие прямо в превью — проверить сетку и отступы, как в Figma. ↔️ Отступы (вручную). Проверка одинаковости вертикальных отступов между блоками: кликаете два блока — показывается зазор. Намерьте несколько отступов: совпадающие подсвечиваются зелёным, выпадающие — красным с разницей в пикселях. Эталон берётся автоматически (самый частый отступ) или назначается вручную — кликом по нужной полосе зазора. ⌨️ Все инструменты работают поверх страницы. Выход из любого — клавиша Esc. Яркая кнопка «?» в шапке попапа показывает встроенную справку, а кнопка «↻» очищает кэш и перезагружает страницу — полная перезагрузка без устаревшего кэша, когда свежие правки вёрстки не подхватываются. Частые инструменты можно вызывать горячими клавишами: скриншот области — Ctrl/⌘+Shift+U, шрифты — Ctrl/⌘+Shift+F, линейка — Ctrl/⌘+Shift+L, направляющие — Ctrl/⌘+Shift+Y (настраиваются на chrome://extensions/shortcuts). 🔒 Расширение не собирает и не передаёт никаких данных: всё работает локально в браузере. 🎓 Бесплатный инструмент от Школы Тильды (tilda.school).