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: тяните направляющие, смотрите координаты, выбирайте цвет линий под дизайн сайта. Магнит примагничивает линии к краям и центру элементов, а режим «липкие» закрепляет их на месте экрана при прокрутке. 📸 Скриншоты с разметкой. Снимок окна, выделенной области или всей страницы целиком. Снимок окна умеет скрывать полосу прокрутки, фиксированное меню и куки-баннеры с виджетами. Скриншот области — точная подгонка границ за маркеры (кроп) перед съёмкой. Снимок всей страницы прокручивает и склеивает кадры, с заморозкой анимаций. Встроенный редактор: рамки, овалы, линии, стрелки, кисть, маркер, текст, нумерованные метки, размытие, кадрирование, выбор цвета, фон для соцсетей, сохранение в PNG, JPEG или WebP (с выбором качества) или копирование в буфер. 🖼️ Картинки и SVG. Соберите все изображения страницы (включая фоновые и инлайновые SVG), посмотрите размер и исходный URL, уберите дубли и скачайте по одной, пачкой или одним ZIP-архивом. 📱 Превью на мобильных. Откройте сайт в рамке телефона или планшета, меняйте устройство и ориентацию. ↔️ Отступы (вручную). Проверка одинаковости вертикальных отступов между блоками: кликаете два блока — показывается зазор. Намерьте несколько отступов: совпадающие подсвечиваются зелёным, выпадающие — красным с разницей в пикселях. Эталон берётся автоматически (самый частый отступ) или назначается вручную — кликом по нужной полосе зазора. ⌨️ Все инструменты работают поверх страницы. Выход из любого — клавиша Esc. Кнопка «Открыть» в попапе показывает встроенную справку. Частые инструменты можно вызывать горячими клавишами: скриншот области — Ctrl/⌘+Shift+U, шрифты — Ctrl/⌘+Shift+F, линейка — Ctrl/⌘+Shift+L, направляющие — Ctrl/⌘+Shift+Y (настраиваются на chrome://extensions/shortcuts). 🔒 Расширение не собирает и не передаёт никаких данных: всё работает локально в браузере. 🎓 Бесплатный инструмент от Школы Тильды (tilda.school).