Tilda School Helper

Набор инструментов для разбора, копирования и съёмки вёрстки прямо на странице. Открой иконку расширения и выбери нужный инструмент. Выход из любого инструмента на странице — клавиша Esc. Часть инструментов можно вызывать горячими клавишами (указаны ниже у каждого) — посмотреть и переназначить их можно на странице chrome://extensions/shortcuts (скопируй адрес в строку браузера). В шапке попапа есть кнопка ↻ — «очистить кэш и обновить страницу» (полная перезагрузка со сбросом кэша, как Ctrl/⌘+Shift+R; пригодится, когда свежие правки на сайте не подхватываются), а яркая ? справа открывает эту справку.

Наводи на текст — покажу шрифт, размер, начертание, высоту строки и цвет. Клик копирует font-family. В строке «Шрифт» показываю настоящее имя шрифта из файла (как в Fonts Ninja) — например «Graphik LC Web Medium», а не служебный псевдоним вроде TS, который прописывает Tilda; сам псевдоним пишу рядом приглушённым. Для этого расширение подтягивает @font-face (в т.ч. из чужих стилей) и читает имя, зашитое в самом файле шрифта — берёт файл нужного начертания (ttf/otf/woff; woff2 не читается — тогда имя беру из имени файла). В строке «Лицензия» подсказываю источник: зелёным — бесплатный (системный, Google Fonts или свободный веб-шрифт вроде Fontshare), оранжевым — платный. Известные коммерческие шрифты (Adderley, Circular, Gilroy, Proxima Nova, TT Norms, Futura, Gotham и др.) распознаются прямо по имени и помечаются «коммерческий · платный»; для незнакомого self-hosted шрифта пишу «проверьте лицензию». Для коммерческих предложу близкий бесплатный аналог из Google Fonts. Alt+клик (на Mac — ⌥ Option+клик) открывает страницу Google Fonts (для бесплатного — самого шрифта, для платного — его аналога), а если доступен файл шрифта — Shift+клик копирует прямую ссылку на него. Горячая клавиша по умолчанию — Ctrl/⌘+Shift+F.

Линейка

Три режима (кнопка в панели сверху переключает по кругу): Рамка — габариты элемента (тяни рамку или кликни по элементу); Свободный — свободная рамка-рулетка перетаскиванием, без привязки к элементам; Якорь → цель — клик фиксирует первый элемент, наведение на второй показывает расстояние между ними. Горячая клавиша по умолчанию — Ctrl/⌘+Shift+L.

Пипетка и цвета

Кнопка «Взять цвет» берёт цвет любого пикселя на экране. Панель «Цвета на странице» собирает палитру реально используемых цветов. Клик по образцу копирует HEX.

Отступы (вручную)

Проверка, что вертикальные отступы между блоками одинаковые. Кликни по первому блоку (он станет якорем), затем по второму — покажу зазор между ними. Намерь несколько отступов: самый частый берётся за эталон, равные ему подсветятся зелёным, отличающиеся — красным с разницей. Хочешь сравнивать с конкретным отступом — кликни по самой подсвеченной полосе зазора, и она станет эталоном (★); «Сбросить эталон» вернёт авто-режим. Кнопка «Очистить» сбрасывает замеры.

Направляющие

Линейки сверху и слева, как в Figma. Потяни из верхней линейки вниз — появится горизонтальная направляющая, из левой вправо — вертикальная. Рядом показывается координата в пикселях. Линию можно перетащить за неё саму, убрать двойным кликом по ней или вернув обратно на линейку. «Очистить» убирает все. Галочка «Магнит» (включена по умолчанию) при перетаскивании примагничивает линию к краям и центру элемента под курсором — как алайнмент в Figma; цель подсвечивается рамкой. Галочка «Липкие» закрепляет направляющие на месте экрана: при прокрутке они остаются на своих позициях в окне (удобно как опорные линии), иначе прокручиваются вместе со страницей. Зажми Shift — между соседними параллельными линиями появятся плашки с расстоянием в пикселях (то же видно вживую, пока тянешь линию: сразу понятно, ровные ли отступы). А Shift+клик по линии делает её якорем (подсвечивается): наведи на любую другую параллельную линию — увидишь расстояние от якоря до неё, даже если они не соседние; повторный Shift+клик снимает якорь. Цветными кружками в панели можно выбрать цвет направляющих — удобно, когда оранжевый сливается с дизайном сайта (сами линейки сверху и слева всегда нейтрально-серые, чтобы не путаться с цветными линиями). Панель можно свернуть — полоской «−» в правом верхнем углу рядом с крестиком (в свёрнутом виде она превращается в «+», клик разворачивает обратно): направляющие и линейки остаются на месте, а панель перестаёт перекрывать нужный участок — особенно удобно в узком мобильном превью. Горячая клавиша по умолчанию — Ctrl/⌘+Shift+Y.

Показывает структуру страницы без «шума». Обводит элементы контурами по типам — контейнеры, текст, медиа (картинки/видео) и контролы (кнопки/поля) разными цветами. Кнопка «Контуры» переключает охват по кругу: все элементы → только блоки Tilda (.t-rec с сеткой контейнеров и колонок) → выкл. «Ч/б» обесцвечивает страницу, чтобы видеть композицию и иерархию, а не цвета. «Картинки → плашки» заменяет изображения и фоны серыми прямоугольниками — удобно оценить сетку и ритм, не отвлекаясь на содержимое. «Контраст» регулирует, насколько заметны контуры. В разметку страницы ничего не вносится — выход по Esc.

Снимок видимой области вкладки открывается во встроенном редакторе. Под пунктом — три галочки: «Скрыть полосу прокрутки» убирает скроллбар из кадра; «Не снимать фикс-меню» прячет все фиксированные и липкие элементы (шапку, меню, куки-баннеры, виджеты); «Скрыть куки/виджеты» прячет только куки-баннеры и виджеты, а верхнее меню оставляет.

Курсор становится крестиком, экран затемняется. Выдели прямоугольник мышью, затем точно подгони границы — тяни за угловые и боковые маркеры, а потянув внутри рамки, сдвинь её целиком. Кнопка «Снять» или Enter делает снимок (обрежется ровно по рамке и откроется в редакторе в оригинальном размере), «Заново» — перерисовать выделение. Галочка «Скрыть скролл» убирает полосу прокрутки из кадра. Горячая клавиша по умолчанию — Ctrl/⌘+Shift+U.

Снимает контент целиком, прокручивая его и склеивая кадры. Наведи и выбери, что снять — всю страницу или конкретный прокручиваемый блок (например, окно чата или ленту). Задай скорость (Быстро / Норма / Медленно): на «Медленно» успевают подгрузиться картинки и проиграться анимации появления. Фиксированное меню снимается только на первом экране, а ниже скрывается автоматически, чтобы не дублироваться на каждом кадре. Галочка «Прятать куки/виджеты» убирает баннеры и виджеты уже на первом экране (меню остаётся), «Скрыть скролл» — полосу прокрутки. Галочка «Без анимации» проигрывает анимации один раз и замораживает их, чтобы в кадр не попадали полупрозрачные элементы. Галочка «Показать скрытое» принудительно проявляет контент, который прячут scroll-анимации (например, пошаговые блоки Tilda) — помогает, когда карточки выходят пустыми. Не трогай вкладку, пока идёт съёмка.

Рамка, овал, линия, стрелка, кисть (свободное рисование), маркер, текст, нумерованные метки (каждый клик — следующее число), размытие (скрыть приватное) и кадрирование (кроп). Рядом — выбор цвета.

Наведи курсор на любой нарисованный элемент и перетащи его; меняй размер за угловые маркеры; смени цвет палитрой или удали клавишей Delete. Текст редактируется двойным кликом.

Кнопка «🎨 Фон» оборачивает снимок в красивый фон (градиенты или цвет) с настраиваемым отступом и скруглением углов. Подходит для постов и презентаций.

«⤓ Скачать» — файл на компьютер. Рядом с кнопкой можно выбрать формат: PNG (без потерь), JPEG или WebP с ползунком качества — JPEG и WebP заметно легче, удобно для чатов и документов. Имя файла формируется автоматически из адреса снятой страницы (домен и путь) и даты со временем — например example.com_about-2026-06-09-153012.png, чтобы снимки разных сайтов не путались. «⧉ Копировать» — готовое изображение в буфер обмена (всегда PNG; вставляй в чат, документ, Figma).

Почему копирование всегда в PNG, даже если выбран JPEG или WebP? Так устроен сам браузер: в буфер обмена картинка кладётся только в формате PNG — другие форматы Chrome для вставки не принимает. И это не мешает: сжатие (JPEG/WebP) нужно, чтобы файл меньше весил при скачивании и отправке, а при вставке из буфера приложение (чат, документ, Figma) всё равно пере-кодирует картинку по-своему — сжимать заранее смысла нет, только качество терять. Выбор формата PNG / JPEG / WebP действует на кнопку «Скачать». Если нужен именно лёгкий JPEG — сохрани файл в JPEG и отправь его файлом.

R рамка · O овал · L линия · A стрелка · P кисть · M маркер · T текст · N метки · B размытие · C кроп · Ctrl/⌘+Z отмена · Ctrl/⌘+Shift+Z вернуть · Delete удалить выбранное.

Собирает все <img>, фоновые картинки и инлайновые SVG. Показывает размер файла и исходный URL, убирает дубли по содержимому. Фильтры по типу (фото/SVG), по размеру в пикселях и ползунок веса — тяни вправо, чтобы отсеять мелочь (иконки, трекинг-пиксели весом в пару КБ): счётчик «показано» меняется на лету, а подпись показывает текущий порог «≥ N КБ». Скачивай по одной, выбранные пачкой или всё одним ZIP-архивом.

Один клик — и расширение разбирает дизайн-систему открытой страницы: палитра цветов с ролями (фон, текст, рамки), частотой и группировкой близких оттенков в семьи; проверка контраста текста и фона по WCAG 2.1 (реальные пары со страницы со значками AAA/AA/провал); градиенты; живые образцы кнопок сайта с их настоящими стилями; вся типографика (семейства с определением лицензии, шкала размеров, начертания, межстрочные — с живыми образцами); шкала отступов (частые margin/padding/gap); фирменные скругления и тени; CSS-переменные самого сайта с родными именами автора. Клик по шрифту, контрастной паре, кнопке, отступу или скруглению открывает саму страницу и подсвечивает на ней все места с этим значением — так легко найти выбившееся; стрелки на плашке листают находки, Esc убирает подсветку, Alt+клик копирует значение (font, цвета, CSS кнопки, px или border-radius). Остальное — цвета, градиенты, тени, переменные — копируется просто кликом.

«Копировать CSS-переменные» — готовый блок :root с токенами, «Figma Tokens» — JSON для плагина Tokens Studio, «Tailwind» — фрагмент конфига, «JSON» — все данные файлом, «PNG-карточка» — стайлгайд одной картинкой для шеринга, «.tildastyles» — файл стилей для импорта в Tilda (в окне выбора отметьте нужные цвета, шрифты и кнопки и задайте им имена), «Печать / PDF» — отчёт целиком. Последние 10 разборов хранятся в «Истории» — к референсу можно вернуться без повторного открытия сайта, а селект «⇄ Сравнить с…» покажет общие и различающиеся цвета, шрифты, скругления и отступы двух сайтов. Если что-то непонятно — у каждого раздела и у кнопок экспорта есть кружок «?» с подсказкой.

Открывает сайт в рамке устройства. В списке два раздела: «Мобильные» (iPhone, Pixel, iPad — подменяется мобильный User-Agent, Tilda отдаёт мобильную версию) и «Десктоп» (1366, 1440, 1680, Full HD 1920, 2K 2560 — настоящий десктопный User-Agent, обычная версия сайта). Десктопный «холст» рендерится в реальную ширину (например ровно 1920px — страница верстается именно как 1920), а если окно уже — превью пропорционально ужимается под окно, и рядом с размером показывается текущий масштаб (например «1920 × 1080 · 71%»). Так на узком ноутбуке (MacBook Air и т.п.) видно, как сайт выглядит на большом мониторе. Смена раздела мобильный↔десктоп перезагружает страницу под нужным User-Agent. Последний выбранный размер запоминается.

Меняй устройство, поворачивай экран («⟳ Повернуть»), вводи другой адрес. Отдельный режим «Адаптив (свободный размер)» — свободно тянущийся вьюпорт: тяни за правый край (ширина), нижний (высота) или за оранжевый уголок (сразу оба), либо впиши точные значения ширина × высота px в поля рядом. Удобно ловить «ломкие» ширины, на которых вёрстка перестраивается. Кнопка «📐 Направляющие» включает линейки и направляющие прямо в превью — тяни линии из линеек сверху и слева, как в Figma, чтобы проверить сетку и отступы (убрать — повторный клик или Esc). Кнопка «📸 Снимок» делает длинный скриншот всей страницы в выбранном размере (с выбором скорости); для десктопа на Retina-экране снимок получается в высоком разрешении. Фикс-меню снимается только на первом экране, ниже скрывается автоматически. Галочки: «Прятать куки/виджеты» убирает баннеры и виджеты (меню остаётся), «Скрыть скролл» убирает полосу прокрутки. Превью можно открывать горячей клавишей — назначь любое сочетание на chrome://extensions/shortcuts (по умолчанию не занято, чтобы не конфликтовать с другими клавишами расширения).