Бесплатное расширение для Chrome от Школы Тильды
Инструменты вёрстки поверх любой страницы
Шрифт с его лицензией, линейка, направляющие, пипетка, скриншоты с разметкой, стайлгайд чужого сайта и превью экранов. Кликнул иконку — инструмент уже работает на открытой странице.
15 инструментов
5,0 в Chrome Web Store
1000+ пользователей
Бесплатно, без регистрации
Заголовок первого экрана
Подзаголовок в две строки — тот самый текст, по которому обычно и хочется узнать шрифт, кегль и цвет.
Tilda School Helper Анализ страницы
Скриншоты
Экспорт и превью
Клик — копировать font-family · Alt+клик — бесплатный аналог
Демо
Попробуйте, ничего не устанавливая
Ниже — игрушечная страница и четыре инструмента расширения. Выберите инструмент и поводите мышью по странице: всё работает прямо здесь, в браузере.
Наведите курсор на любой текст — покажу шрифт, кегль, начертание и цвет.
На телефоне ведите по странице пальцем — инструменты работают так же.
Пион
Меню
Обжарка
Контакты
Обжарка каждое утро
Зерно приезжает в четверг, обжаривается в субботу и в тот же день уходит к вам. Забрать можно на Садовой, 12.
Заказать зерно
Эфиопия Иргачефф
Цветочный, с чёрным чаем и лимоном. Светлая обжарка.
Колумбия Уила
Карамель и красное яблоко. Хорош и в фильтре, и в эспрессо.
Бразилия Можиана
Орех и молочный шоколад. Основа для кофе с молоком.
Палитра
Это упрощённая копия. В расширении те же инструменты работают на любом сайте, а не на одной заготовленной странице.
В демо нет замера отступов между блоками, направляющих, скриншотов и стайлгайда — их пятнадцать, здесь показаны четыре.
Инструменты
Пятнадцать инструментов в одном меню
Всё работает поверх открытой страницы и ничего в неё не вносит. Выход из любого инструмента — клавиша Esc, часть вызывается горячими клавишами.
Шрифты
⌘⇧FНаведите на текст — шрифт, кегль, начертание, высота строки и цвет. В строке «Шрифт» стоит настоящее имя из файла, а не служебный псевдоним Тильды. Лицензия подсвечена: зелёная — бесплатный, оранжевая — платный, и к платному предложу аналог из Google Fonts.
Линейка
⌘⇧LТри режима: Рамка — габариты элемента, Свободный — рулетка перетаскиванием, Якорь → цель — расстояние между двумя элементами.
Пипетка и цвета
Возьмите цвет любого пикселя или соберите палитру цветов, которые реально используются на странице. Клик по образцу копирует HEX.
Направляющие
⌘⇧YЛинейки сверху и слева, как в Figma. Магнит примагничивает линию к краям и центру элемента, «липкие» держат её на месте экрана при прокрутке, а Shift показывает расстояние между линиями в пикселях.
Отступы
Клик по двум блокам — и виден зазор между ними. Намерьте несколько: совпадающие подсветятся зелёным, выпадающие — красным с разницей в пикселях.
Каркас
Страница без «шума»: контуры по типам элементов, ч/б-режим и картинки серыми плашками — чтобы увидеть сетку, ритм и иерархию. Контуры можно оставить только на блоках Тильды.
Размер окна
Живая плашка с шириной и высотой видимой области — той самой, которую видят медиа-запросы, — и с брейкпоинтом Тильды, в который она попадает: 320, 480, 640, 960 или 1200 и выше.
Элемент → CSS
betaКлик по элементу собирает его чистый CSS — без мусора и значений по умолчанию, — короткий селектор и Tilda-контекст: номер блока #rec, тип блока, атом Zero Block и колонку.
Наложение макета
betaPNG или JPG макета ложится поверх живой страницы: прозрачность, масштаб, сдвиг стрелками по пикселю. Режим «Разница» гасит совпавшие пиксели в чёрный — сразу видно, где вёрстка разошлась с дизайном.
Скриншоты с разметкой
⌘⇧UОкно, выделенная область или вся страница со склейкой кадров. Дальше — встроенный редактор: рамки, стрелки, текст, нумерованные метки, размытие, кроп. Сохранить в PNG, JPEG или WebP либо скопировать в буфер.
Запись экрана
betaВидео вкладки, выделенной области или всего экрана в MP4 или WebM. По галочкам — микрофон, звук вкладки и кружок камеры поверх страницы. Файл сохраняется на компьютер.
Картинки и SVG
Собирает все картинки страницы — включая фоновые и инлайновые SVG, — показывает размер, вес и исходный адрес, убирает дубли. Скачать можно по одной, пачкой или одним ZIP-архивом.
Оптимизация картинок
betaАудит веса страницы: где картинка отдаётся крупнее, чем показывается, где тяжёлый формат вместо WebP, где апскейл. По каждой — сколько килобайт можно сэкономить, сверху общая сводка.
Стайлгайд сайта
Дизайн-система открытой страницы за один клик: палитра с ролями, контраст по WCAG, кнопки, типографика, отступы, скругления, тени и CSS-переменные. С экспортом — вплоть до файла .tildastyles.
Превью экранов
Сайт в рамке устройства: iPhone, Pixel, iPad и десктоп до 2K. Режим «Адаптив» тянется за край — ловить ширины, на которых вёрстка ломается. Внутри превью работают направляющие и длинный снимок.
Выход из любого инструмента — клавиша Esc. Горячие клавиши переназначаются на странице chrome://extensions/shortcuts.
Меню — как удобнее: обычная выпадашка, плавающая панель прямо на странице или боковая панель Chrome.
Русский и английский — кнопка языка в шапке меню переключает всё расширение сразу, без перезагрузки.
Шрифты
Настоящее имя шрифта, а не псевдоним Тильды
В коде страницы у шрифта часто стоит служебное имя — по нему шрифт не найти ни в магазине, ни у клиента. Расширение читает подключённый файл и показывает то имя, под которым шрифт живёт на самом деле.
- Всё о тексте под курсором: семейство, кегль, начертание, высота строки и цвет — без инспектора и без вкладки Computed.
- Лицензия видна сразу. Зелёная плашка — шрифт свободный, оранжевая — платный. Полезно, когда сайт делается для клиента.
- Alt+клик — бесплатный аналог. К платному шрифту предложу пару близких по рисунку из Google Fonts.
- Клик копирует строку font-family целиком, Shift+клик — все параметры разом, чтобы вставить в CSS.
- Панель можно закрепить и ходить по странице, сравнивая заголовки между собой.
Что стоит в коде страницы
font-family: TildaSans
Служебное имя. По нему не понять ни автора, ни лицензию, ни где взять файл.
Что показывает расширение
Graphik LC Web
Alt+клик — бесплатный аналог: Inter или Manrope, ближайшие по рисунку и метрикам, оба из Google Fonts.
Стайлгайд сайта
Дизайн-система чужой страницы за один клик
Расширение обходит страницу и собирает то, из чего она сделана: палитру с ролями, типографику, кнопки, отступы, скругления и тени. Готовый стайлгайд можно показать клиенту, забрать в новый проект или сравнить две версии сайта между собой.
Палитра · роли определены автоматически
Акцент#FF5C00
Текст#2B2B2B
Подложка#F7F7F8
Успех#33C07D
Контраст по WCAG 2.1
Типографика
44 / 48 · 60028 / 34 · 60017 / 27 · 400Забрать стайлгайд с собой
Семь форматов экспорта — от переменных для вёрстки до готового файла настроек Тильды.
- .tildastyles
- CSS-переменные
- Figma Tokens
- Tailwind config
- JSON
- PNG-карточка
Файл .tildastyles загружается в Настройках сайта → «Шрифты и цвета». После импорта палитра и типографика доступны во всех блоках Тильды — не придётся переносить цвета руками.
История и сравнение. Расширение помнит десять последних стайлгайдов и умеет сличать два: покажет, какие цвета и размеры разошлись после правок.
Сделано под Тильду
Понимает, как устроен сайт на Тильде
Универсальные инспекторы показывают абстрактный DOM. Это расширение говорит на языке Тильды: номера блоков, атомы Zero Block, родные брейкпоинты и файл настроек сайта.
Номер блока сразу под курсором
Кликнули по элементу — и видно, в каком блоке он лежит: #rec482910, тип блока и колонка. Не нужно листать страницу в редакторе, чтобы понять, какой блок править.
Zero Block как Zero Block
Внутри нулевого блока инструмент показывает атом T396 и его настройки — а не безымянный div, в который Тильда его завернула.
Родные брейкпоинты
Плашка размера окна называет не абстрактную ширину, а тот breakpoint Тильды, в который вы сейчас попали.
Шрифты без псевдонимов
Тильда подключает шрифты под служебными именами. Расширение читает файл и возвращает настоящее название — с лицензией и, если шрифт платный, с бесплатным аналогом.
Стили — прямо в настройки сайта
Стайлгайд выгружается файлом .tildastyles: палитра и типографика импортируются в «Шрифты и цвета» и работают во всех родных блоках.
Проверка адаптива до публикации
Превью экранов открывает сайт в рамке устройства и в свободном режиме — видно, где вёрстка ломается между брейкпоинтами, ещё до того, как это увидит клиент.
Расширение от Школы Тильды
Инструменты выросли из практики курсов: их собирали для тех, кто верстает на Тильде каждый день. Поэтому в них нет ничего лишнего — только то, к чему возвращаешься в работе.
Скриншоты и запись
Снять, разметить и отправить — не выходя из вкладки
Правки клиенту, баг разработчику, кусок макета в чат — всё это снимается и подписывается прямо в браузере. Ни отдельной программы, ни выгрузки в облако.
Главная страница — первый экран
Три режима съёмки⌘⇧U
Видимое окно, выделенная область с подгонкой границ за маркеры и вся страница целиком — со склейкой длинных кадров, включая сайты с прилипшей шапкой.
Разметка без Фотошопа
Стрелки, рамки, овалы, текст, нумерованные метки, маркер и размытие для чувствительных мест. Всё правится, отменяется и копируется в буфер одним ⌘C.
Запись экранаbeta
Видео вкладки, области или всего экрана в MP4 или WebM. По желанию — микрофон, звук вкладки и кружок камеры поверх страницы.
Приватность
Работает локально и ничего о вас не знает
Нет регистрации, нет аккаунта, нет своего сервера. Всё, что расширение измеряет и снимает, остаётся в вашем браузере и на вашем компьютере.
Политика конфиденциальностиНи аналитики, ни телеметрии
Расширение не собирает статистику использования и не отправляет наружу ни одного запроса о том, что вы делаете.
Настройки — в вашем браузере
Выбранный язык, размеры, палитры и последние стайлгайды хранятся локально средствами Chrome и никуда не синхронизируются нами.
Снимки сохраняются к вам
Скриншоты, видео, ZIP-архивы и экспорт стайлгайда идут прямо в папку «Загрузки». Промежуточное облако не используется.
Доступ к сайтам — чтобы измерять
Разрешение «на всех сайтах» нужно потому, что вёрстку смотрят где угодно. Код включается только в момент, когда вы сами вызвали инструмент, и содержимое страниц никуда не уходит.
Понятно, зачем каждое разрешение
Буфер обмена — чтобы копировать цвет и CSS. Загрузки — чтобы сохранять снимки. Очистка кэша — только кэш картинок для честного аудита веса. Всё расписано в политике.
Расширение правда бесплатное?
Да. Все инструменты открыты целиком, без пробного периода, подписки и платных функций. Регистрация и аккаунт не нужны — установили и работаете.
Работает только на сайтах Тильды?
Нет, инструменты работают на любом сайте: шрифты, линейка, пипетка, скриншоты и стайлгайд одинаково полезны где угодно.
Просто на Тильде расширение знает больше: показывает номера блоков #rec, атомы Zero Block, родные брейкпоинты и умеет выгружать стили файлом .tildastyles.
Зачем ему доступ ко всем сайтам?
Чтобы измерять вёрстку, инструменту нужно оказаться на той же странице, что и вы, — а вёрстку смотрят на любом сайте, не только на своём.
Код включается только в момент, когда вы сами вызвали инструмент, и выключается по Esc. Содержимое страниц никуда не отправляется: ни на наш сервер, ни на чужой. Подробнее — в политике конфиденциальности.
Как вызвать инструменты?
Кликните по значку расширения на панели Chrome — откроется меню со всеми инструментами. Меню можно переключить в плавающую панель поверх страницы или в боковую панель браузера.
Частое — с клавиатуры: ⌘⇧U — скриншот области, ⌘⇧F — шрифты, ⌘⇧L — линейка, ⌘⇧Y — направляющие. На Windows вместо ⌘ — Ctrl. Сочетания переназначаются на странице chrome://extensions/shortcuts.
Оно не сломает мой сайт?
Нет. Инструменты рисуются поверх страницы и не меняют ни её код, ни проект в Тильде. Закрыли по Esc или перезагрузили вкладку — от расширения не остаётся следа.
В каких браузерах работает?
Расширение сделано для Chrome и ставится из Chrome Web Store. В браузерах на движке Chromium — Edge, Arc, Brave, Яндекс.Браузере — оно обычно ставится и работает, но проверяем и поддерживаем мы Chrome.
В Safari и Firefox расширение не работает: у них другой формат дополнений.
Инструмент не открылся на странице — почему?
Chrome запрещает расширениям работать на служебных страницах: chrome://, страницах самого Chrome Web Store и некоторых системных вкладках. Откройте обычный сайт — всё заработает.
Если расширение только что обновилось, перезагрузите вкладку: в уже открытых страницах старый код остаётся до перезагрузки.
Что означает пометка beta?
Это инструменты, которые работают, но ещё дорабатываются: «Элемент → CSS», «Наложение макета», «Оптимизация картинок» и «Запись экрана». Пользоваться ими можно, а вот на редких сайтах они могут ошибаться — о таких случаях мы и ждём сообщений.
Как предложить инструмент или сообщить об ошибке?
Напишите в телеграм — это самый быстрый путь. Пригодится адрес страницы, на которой что-то пошло не так, и скриншот: снять его можно этим же расширением.
Установка
Пятнадцать инструментов — за полминуты
Бесплатно, без регистрации и без настройки. Достаточно нажать «Установить» в Chrome Web Store и открыть любой сайт.
Бесплатно · без регистрации · рейтинг 5,0 в Chrome Web Store
Поставьте расширение
Кнопка «Установить» в Chrome Web Store — Chrome покажет список разрешений и добавит значок на панель.
Закрепите значок
Нажмите на пазл справа от адресной строки и «булавку» у Tilda School Helper — так меню всегда под рукой.
Откройте любой сайт
Клик по значку — меню инструментов. Или сразу с клавиатуры: ⌘⇧F — шрифты, ⌘⇧U — скриншот области.
