re-block · справка
Как работать в re-block
Чат на сайте app.re-block.ru собирает лендинг
разговором: бриф, план, секции по одной. Заливка кладёт готовые секции из папки проекта в Вайб-блоки
открытой страницы Тильды, грузит картинки в файловую, ставит куски кода в HEAD и заполняет заголовки,
описания и адреса страниц.
Ни на сайте, ни в расширении проектов нет. Секции, картинки, план и сам разговор
лежат в папке, которую вы укажете, — её можно носить, класть в гит и открывать с другой машины.
Проект целиком: от брифа до Тильды, 2:19 · открыть отдельно
С чего начать
Шесть шагов один раз, дальше всё повторяется одной кнопкой.
01
Поставить расширение re-block
Из магазина
Chrome. Расширение — мост: сам чат живёт на сайте, а в редактор Тильды сайт попадает только через
него. Доступ к tilda.ru мост получает при установке, остальное — кнопками в его окошке.
02
Открыть app.re-block.ru и войти паролем
Пароль один: он же вход и ключ к чату, второго секрета нет. Браузер запоминает
вход на 30 дней. Один пароль работает на десяти машинах.
03
«Выбрать…» и указать папку проекта
Хром спросит, можно ли сайту читать и писать в эту папку, — разрешите. Подойдёт
пустая папка под новый проект или папка с готовыми секциями. Можно указать и корень проекта: если
внутри есть sections/ с README.txt, сайт спустится туда сам. Последние
шесть папок помнит списком.
04
В соседней вкладке открыть страницу в редакторе Тильды
Обычный адрес вида tilda.ru/page/?pageid=…, в том же Хроме. Сайт
найдёт вкладку через мост сам; не нашёл — нажмите «Обновить». Страницу лучше брать пустую:
заливка блоки только добавляет и никогда ничего не удаляет.
Заводить её руками не обязательно: откройте в Тильде список страниц сайта
и нажмите «Новая страница» на вкладке «Заливка». Пустая страница появится в том же сайте, откроется
фоном и сама станет выбранной; заголовок и адрес встанут из плана при заливке. Сайт на tilda.by
тоже подходит — в окошке моста нажмите «Разрешить» у tilda.by.
05
Собрать секции разговором — или взять готовые
Вкладка «Наш чат»: бриф, план, секции. Каждая секция ложится в папку сразу,
как только написана. Как устроен разговор — отдельной страницей.
06
Выбрать страницу и нажать «Залить»
Список страниц — из README.txt. Копировать ничего не надо, файлы
сайт читает прямо из папки.
Потом «Опубликовать» — там же, рядом. Кнопка срабатывает со второго
нажатия и оставляет под собой ссылку на опубликованную страницу.
Ролик «Сборка», 0:50 · открыть отдельно
Мост и его разрешения
Значок re-block в панели Хрома открывает окошко: версия, кнопка «Открыть чат re-block»
и два разрешения.
Каталог товаров
Для «Цен и остатков»
Даёт мосту вкладку каталога store.tilda.ru: чат читает товары
и по вашему слову меняет цены и остатки. Без разрешения чат скажет, что доступа к вкладке
каталога нет.
Чужие сайты
Для «Редизайна старого сайта»
Чтобы прочитать тексты, разделы и контакты старого сайта. Читает только ту
вкладку, которую чат открыл сам, и закрывает её за собой.
Окно разрешения Хром показывает только по нажатию внутри
расширения, поэтому кнопки в окошке, а не на сайте. «Убрать» забирает разрешение обратно. Хром может
закрыть окошко, пока спрашивает, — разрешение всё равно выдастся, откройте окошко снова и проверьте
зелёную строку.
Работали в чате внутри расширения? Ничего не потеряно: разговор,
приложенные файлы и макет из Figma лежат в папке проекта, в .vibe/. На сайте выберите
ту же папку — разговор поднимется с того места, где остановились.
Что должно лежать в папке
Один файл — одна секция — один Вайб-блок. Порядок задаёт README.txt.
sections/
README.txt порядок блоков по страницам
styles.json цвета, шрифты, кнопки проекта (необязательно)
plan.md план сайта — пишет чат
.tilda-map.json что куда легло — пишет заливка, не трогать
00-header.html
01-hero.html
en-01-hero.html копия на другом языке (если заказывали)
…
images/ картинки секций
head/ куски кода для HEAD (необязательно)
favicon.html
vb-share.html картинка для соцсетей и знак — пишет чат
.vibe/ разговор, приложенные файлы, словари переводов
Формат README.txt простой: строка со слэша открывает страницу и её первое
слово — это адрес; имена блоков идут под ней с отступом ровно в два пробела; пустая строка страницу
закрывает. Скобки после имени блока — пояснение для человека, они отбрасываются.
/privacy (политика — на неё ссылается футер)
заголовок: Политика конфиденциальности
описание: Как мы обрабатываем персональные данные посетителей.
бейдж: images/share-privacy.webp
00-header
06-footer
Эти же строки заполняют настройки страницы в Тильде. Адрес отдельной строкой нужен
редко: путь страницы в README и есть её адрес. Бейдж — картинка, которую видно, когда страницу кидают
ссылкой; она уезжает в Тильду вместе с остальными картинками, а в настройки попадает уже адресом
на CDN.
Что умеет заливка
Вкладка «Заливка». Каждая кнопка делает ровно одно.
Ролик «Заливка», 1:14 · открыть отдельно
Секции
Заводит блоки и кладёт в них код
В том порядке, что в README. Девятнадцать секций уезжают одним нажатием,
прогресс виден построчно. Перед записью каждая секция проходит починку: окна, якоря,
отложенные картинки.
Картинки
Грузит файлы в файловую Тильды
В файлах проекта пути остаются относительными — местное превью работает
как работало, а в Тильду уезжают ссылки на CDN. Снимки со стока, которые пропали у источника,
заменяет живыми снимками того же проекта. Ролики .mp4 и .webm из images/ уезжают
в видеозагрузчик Тильды.
HEAD
Ставит куски кода в HEAD сайта и страницы
Фавиконка, картинка для соцсетей, прелоадер, разметка, счётчики. Чужой код
не трогается: свои куски лежат между маркерами.
Настройки
Заполняет заголовок, описание, адрес, бейдж
Через ту же панель, что и руками. Главную не трогает, живой адрес
не подменяет.
Стили
Собирает файл .tildastyles
Палитра, типографика и кнопки проекта — импортируются в Настройках сайта,
в разделе «Шрифты и цвета». Действует на родные блоки Тильды, чтобы
корзина и каталог стояли в той же палитре, что секции.
Палитра
Меняет цвет разом во всех секциях
Все цвета проекта одним списком. Правите один — он расходится
по файлам: и в токенах, и в выведенных из них прозрачных,
и в заливках значков. styles.json правится заодно, чтобы
не разъехался с секциями.
Слежение
Следит за папкой и льёт на лету
Сохранили файл — через пару секунд Тильда такая же. Есть галка «обновлять
вкладку», чтобы сразу видеть результат.
Новая страница
Заводит пустую страницу в сайте
В том сайте, чья страница или список страниц открыты в Тильде. Открыты списки
двух сайтов — спросит кнопками, в каком.
Опубликовать
Публикует выбранную страницу
Как одноимённая кнопка в Тильде. Со второго нажатия, чтобы не опубликовать
случайно. Ссылка на сайт остаётся под кнопками, пока выбрана эта страница.
Со второго раза обновляет, а не плодит
После каждой удачной заливки рядом с секциями появляется .tilda-map.json —
что куда легло и с каким содержимым. По ней вторая заливка находит те же блоки, а не создаёт новые.
У каждой секции в карте лежит хеш её текста. Совпал — блок уже такой в Тильде,
и он пропускается: в списке у него зелёный ободок и подпись без изменений, запросов по нему не уходит вовсе. Правка одной секции из девятнадцати стоит один
запрос, а не тридцать восемь.
Карта — файл проекта, а не браузера. Она видна гиту, уезжает вместе с папкой к другому
дизайнеру, и заливка с чужой машины попадёт в те же блоки. Надо залить всё заново — удалите её.
Папка — главный источник, но правки панели не пропадают. Тексты,
ссылки, фото и стили (цвета, отступы, шрифты), поправленные в панели СТИЛЬ, живут в коде блока.
Перед записью заливка читает нынешний код блока и переносит эти правки в новый — если в файле
то же место осталось прежним. Поменяли его и в файле — побеждает файл.
Не переносится перестройка: удалили, добавили или продублировали элементы в панели —
тексты и ссылки этого блока заливка не тронет, журнал об этом скажет. Кнопка
«Забрать правки из Тильды» вписывает правки панели в файлы секций — тогда их
видит и чат.
Как вносить правки
Любая правка ложится в файл секции в папке. В Тильду она уезжает следующей заливкой
или сразу, если включено слежение, а на сайт — после «Опубликовать».
Превью ходит по ссылкам, как живой сайт: пункт меню на другую страницу проекта открывает её
в том же превью, якорь листает к месту, чужой сайт открывается в новой вкладке. Ссылку на страницу,
которой в проекте нет, превью назовёт в строке под кадром. Формы и корзина работают только на сайте.
Ролик «Превью и правка», 1:14 · открыть отдельно
Чат
Словами — когда надо переделать
Напишите в чат, что поменять: «на первом экране фото справа и заголовок крупнее».
Чтобы правка точно попала в нужное место, сначала прицельтесь в превью: «Секции» подписывают файлы
на стыках — щёлкните ярлык, и правка пойдёт в эту секцию; «Элемент» — укажите мышью кнопку,
заголовок или карточку. Над полем появится чип с прицелом.
Только для телефона — так и скажите: «на телефоне карточки в одну колонку». Правка
ляжет в стили узкого экрана, компьютер не изменится.
Модель переписывает только эту секцию, правка стоит запроса. У переписанной
секции в превью есть «Было» и «Стало». Если модель вернула секцию без стилей, файл не перезаписывается —
в ленте будет просьба повторить.
Руки
«Правка» над превью — когда надо поменять слово, ссылку, кегль или фото
Нажмите «Правка» и щёлкните заголовок, абзац или кнопку — пишите прямо на месте,
Enter сохраняет в файл с ёлочками и неразрывными пробелами. У ссылки адрес правится в поле
над превью. Под текстом — «Размер шрифта» в пикселях: на ширине 360 он ставится только для телефона,
на 768 и 1440 — для компьютера и планшета. Рядом — «Цвет текста», один для всех ширин.
Строка «Место» двигает элемент: «Выше» и «Ниже» меняют его местами с соседом,
«Шире» берёт то, что вокруг (карточку, ряд), дальше — «Слева», «По центру», «Справа». Отступы сверху
и снизу и «Ширина» в пикселях свои у каждой ширины экрана, как кегль: на 360 — для телефона,
шире — для компьютера и планшета. Ширина не выходит за родителя, пустое поле возвращает её как в вёрстке.
Картинку меняют щелчком и выбором файла или броском файла на неё. Файл ляжет
в images/, крупное фото сожмётся в WebP. «Вернуть» откатывает последнюю правку. Модель
не участвует — бесплатно и сразу.
Если в шапке название текстом, а логотип появился позже, щёлкните название
и нажмите «Поставить логотип…». Знак встанет вместо названия везде, где оно стоит: в шапке,
в меню на телефоне и в подвале. Ссылка на главную остаётся, высота берётся по кеглю названия.
Щелчок по поставленному логотипу даёт поле «Высота»: на ширине 360 она для телефона, шире — для компьютера
и планшета, копии меняются в той же пропорции. «Другой файл…» заменяет знак сразу везде.
Разом
Разом по всей странице
Цвет — «Палитра» на вкладке «Заливка»: правите один цвет, он расходится по всем
секциям. Огрехи вёрстки — «Проверить страницу» и «Починить отмеченное». Другие эффекты — отметьте
плитки в опроснике и нажмите «Переставить эффекты»: модель перепишет только те секции,
где эффекту есть место.
Заказ
Правки заказчика — по ссылке
Под превью — «Ссылка для заказчика»: страница до заливки на show.re-block.ru.
Заказчик показывает на место и пишет, что не так. Его правки приходят списком «Правки заказчика»
под ссылкой. «Взять в правку» прицеливает чат в ту секцию и кладёт слова заказчика в поле —
прочтите и отправьте сами. Сделали — «Исправлено»: страница по ссылке обновится, и заказчик
увидит «Было / Стало».
Тильда
В панели СТИЛЬ — можно, не пропадут
Тексты, ссылки, фото и стили, поправленные в Тильде, заливка переносит в новый код
блока. Чтобы их видел и чат, нажмите «Забрать правки из Тильды» — они впишутся в файлы секций.
Удалять и добавлять элементы лучше в чате: перестройку блока заливка не переносит.
Карта сайта
Выпуски 2.1.110–2.1.136. Сначала скелет сайта — страницы, экраны по порядку, меню, —
потом план. План не придумывает структуру, а наполняет вашу.
Где она
В брифе выберите «Многостраничный сайт» и нажмите чип «Карта сайта» — откроется одноимённая
карточка. Пишите бриф прямо в её поле: чем занимаетесь, для кого, какие разделы нужны. Двух строк
хватит, но чем больше фактов, тем точнее карта. Нет слов под рукой — «Вставить пример брифа»
под полем, его останется поправить под себя.
Дальше два пути. «Собрать по брифу» разложит сайт моделью — платно, по тарифу, как подбор
систем; бриф нужен хотя бы в 20 знаков. «Нарисовать карту» откроет пустую карту, и вы наберёте
её сами, бесплатно. Не трогаете карту вовсе — страницы и меню, как раньше, решит план.
Ролик «Карта сайта», 0:44 · открыть отдельно
Окно карты
Сверху — шапка сайта, как её увидит посетитель, на компьютере и на телефоне. Слева —
страницы: «+ страница» добавит новую, у каждой название и адрес для Тильды. В середине — экраны
выбранной страницы сверху вниз: тяните за точки слева, чтобы переставить, крестик убирает экран,
в строке видно, что на нём и какой у него якорь. Шапка и подвал стоят на всех страницах сами.
Справа — меню. Пункт ведёт на страницу или на экран по якорю. Стрелка ⇥ вкладывает его
в пункт выше — так получается выпадающий список, ⇤ выносит обратно в верхний ряд, «+» добавит в список
ещё пункт. Под меню — «Проверка карты»: она скажет, если пункт никуда не ведёт, ведёт на несуществующую
страницу, прыгает по странице вверх или список в нём слишком длинный.
Правки в окне бесплатны, «Готово» закрывает его.
Только то, что в брифе
Цифр, сроков, гарантий и скидок, которых нет в брифе, на карте не будет: план берёт
строки экранов как ваши слова, и выдумка ушла бы в тексты сайта. Где экрану нужен факт,
а в брифе его нет, карта так и пишет: «уточнить у заказчика». Допишите факт в строку экрана или в бриф.
Экран «Каталог товаров» и «Новости» на карте — это каталог и Поток Тильды. Карточка покажет
под ними «С сайта в Тильде»: нажмите «Подключить», и витрина соберётся из настоящих товаров
и постов, а не болванками. Страница, на которой кроме шапки и подвала только первый экран, —
заготовка: остальные экраны на ней наберёт план по брифу. Нужны свои — наберите их на карте.
Дальше — план по карте
Под собранной картой в карточке видно, как модель поняла сайт, и меню одной строкой.
«Дальше — план по карте» отдаст плану бриф и карту вместе: второй раз писать бриф не нужно. Нижнее
поле в это время — для пожеланий к плану, его можно оставить пустым; написанное там допишется
к брифу карты.
Поменяли бриф — «Собрать заново» разложит карту по нему, но заменит и ваши правки, поэтому
сначала спросит. «Карта в PDF» сохранит структуру документом для заказчика — её удобно приложить
к КП. «Убрать карту» стирает карту и её бриф.
Что нового по отзывам
Выпуски 2.1.71–2.1.86: то, о чём просили те, кто собирает в re-block каждый день.
Всё, кроме фото, работает без модели — бесплатно и сразу.
Проекты вместо папки
«Новый проект» спрашивает имя, а папку для проектов вы указываете один раз. Каждый
проект ложится в ней своей папкой, и второй сайт больше не перепишет файлы первого. Слева — список
«Проекты»: прежние разговоры проекта собраны под его именем.
Бриф в два шага, чипы — навигация
Опросник идёт ступенями: «1. Бриф → 2. Уточнения». Уточнения откроются сами, когда
план будет готов. «Собрать план заново» больше не теряет ответы и вложения, а к прошлому плану можно
вернуться без запроса. Пустое поле брифа предлагает «Вставить прошлый бриф».
Чипы над карточками прилипают к верху ленты. Первый щелчок по чипу включает карточку
и переносит к ней, второй — по той, где вы сейчас, — выключает. Заполненное не пропадает: включите
снова, и оно вернётся.
Такая же строка стоит и над планом: «Что собираем», «Сюжет», «Стиль», страницы сайта,
«Сетка», «Движение», «Эффекты» и остальные вопросы уточнений. Она всегда в одну линию и листается
вбок, щелчок по чипу переносит к карточке, а раздел, который вы сейчас читаете, подсвечен.
Выключать здесь нечего — строка только ведёт.
Ролик «Что собираем», 0:28 · открыть отдельно
Свой текст: дословно, подправить или сам
Карточка «Тексты сайта» берёт текст заказчика вставкой или файлом .docx, .txt, .md. Режим
«Дословно» запрещает модели менять слова: заголовки и кнопки берутся только из вашего текста, а после
сборки код сверяет секции с ним. «Можно подправить» разрешает сократить и пригладить, «Пиши сам» —
текст как раньше пишет модель.
Ролик «Тексты сайта», 0:38 · открыть отдельно
Как пишет re-block
Когда тексты пишет модель, re-block держит её в инфостиле: глагол вместо канцелярита, факт вместо
оценки, о посетителе, а не о «нас». Цифры и факты — только из брифа. Пример — кофейня «Зерно»
из роликов.
Обычная нейросеть
Кофейня «Зерно» — место, где рождается вкус
Мы являемся командой профессионалов и осуществляем обжарку кофе с максимальной заботой
о каждом клиенте.
Кнопка: «Отправить»
Как пишет re-block
Своя обжарка и завтраки до 12 — в Казани
Обжариваем зерно сами. В зале 30 мест — забронируйте столик заранее.
Кнопка: «Забронировать столик»
Обычная нейросеть
Качественный кофе собственной обжарки
Предоставление вкусных завтраков
Всегда уютная атмосфера для всех гостей
Как пишет re-block
Своя обжарка
Завтраки до 12
Зал на 30 мест
Что ушло: «являемся», «осуществляем», «предоставление»; оценки «качественный», «вкусных», «уютная»;
«всегда», «всех», «каждом»; пункты разной формы. Слова заказчика в режиме «Дословно» re-block не трогает.
Крестик в плане и «+ фото»
Лишнюю секцию снимает крестик в её строке — без модели. Сразу он ничего не убирает: рядом
встанут «Убрать» и «Оставить», так что промах мимо кнопки секцию не потеряет. Убранное копится в карточке
«Убрано из плана», оттуда его можно вернуть. Убрали последнюю форму — из плана уходят и «Спасибо»
с политикой, вернули — возвращаются.
В строке секции есть «+ фото»: модель нарисует кадр под неё. У собранной секции
кадр встаёт вместо фото, которое вы выберете в строке «Вместо».
Опишите, что на фото, выберите кадр — широкий, 3:2, квадрат или портрет — и нажмите «Нарисовать».
Цена — на кнопке, обычно 18 ₽ за кадр, в сутки — до 20 кадров. Кадр ляжет в images/ проекта, миниатюра встанет в строку секции, и секция соберётся уже с ним. Щелчок по миниатюре
открывает кадр крупно, с именем файла и размером; закрыть — крестиком, Esc или щелчком мимо.
Ролик «План», 0:58 · открыть отдельно
Ролик моделью: «+ видео» и «Оживить»
У собранной секции в строке плана есть «+ видео»: модель снимет ролик по описанию.
Напишите, что в кадре и что движется, выберите кадр — широкий или стоя — и место: вместо
одного из фото секции или фоном секции.
«Оживить» делает ролик из готового фото: «Правка» над превью → щёлкните фото → «Оживить».
Композиция остаётся прежней, в кадре появляется движение.
- Ролик — 10 секунд, без звука, надписей и логотипов. Конец сходится с началом,
и по кругу он играет без рывка.
- Обычно 720p. Галка «1080p» — «Качество» в «+ видео» или рядом с «Оживить» — даёт
ролик резче на больших экранах. Стоит дороже.
- Цена — на кнопке. Второе нажатие подтверждает: ролик дороже кадра. Снимается около минуты,
в сутки — до 10 роликов, остаток виден в форме.
- Ролик ляжет в images/ проекта и сразу в секцию. В Тильду его довезёт заливка:
файл уедет в видеозагрузчик Тильды, а в блок встанет ссылка на CDN.
- Ссылка для заказчика показывает ролики, если её собрали после того, как ролик встал
в секцию. Ролик появился позже — соберите ссылку заново.
- Вернуть фото — «Правка» → щёлкните ролик → «Вернуть фото». Ролик фоном убирается
словами в чат или файлом секции из «истории».
- Только в проекте, собранном в чате. В пробе роликов нет.
Страница в готовый сайт
В карточке «Что собираем» есть третий вид — «Страница в готовый сайт». Это одна страница
без шапки, подвала и меню: их даёт сайт, в который она встанет. Вопросы про служебные страницы
и меню на телефоне в этом виде не задаются.
Блок или страница в собранный проект
Сайт уже собран, и нужен ещё один блок. План для этого не трогайте — правка в плане
пересобирает план целиком. «Свой проект как основа» тоже не нужен: он для нового сайта по образцу старого.
Короче всего — кнопки у поля ввода, они появляются после сборки. «＋ блок»: выберите страницу
и после какой секции встать, опишите блок в двух словах и нажмите «Написать блок» — секция пишется сразу
и стоит как одна. «＋ страница»: название и что на ней, «Предложить страницу» — придёт карточка
с составом, писать будет её кнопка.
То же можно сказать словами. Откройте проект в «Проектах» и напишите в чат, что добавить и куда: «добавь отзывы после цен».
Придёт карточка «＋» с именем файла, тем, что в нём будет, и местом. «Написать секцию» пишет только этот блок,
остальные не трогаются; «Не надо» отменяет без списания.
На многостраничном сайте назовите страницу: «на странице Услуги добавь цены после первого экрана»
или адресом — «/uslugi». Не назвали — блок может уйти на главную; в карточке видно, куда он встанет.
Целую страницу просят так же: «добавь страницу Вакансии: первый экран, список вакансий, форма отклика».
Карточка покажет все блоки по порядку. Шапка и подвал помечены «тот же файл» — заново не пишутся,
в меню шапки и подвала допишется ссылка на новую страницу. «Собрать страницу» платит только новые секции.
Дальше — обычная заливка. Новый блок встаёт в Тильде в конец страницы — передвиньте его
на место руками. Новую страницу заведёт «Новая страница» или «Залить все страницы» на вкладке «Заливка».
Лендинг вместо сайта
Забыли выбрать «Многостраничный сайт», и план вышел лендингом. Пока секции не собраны,
нажмите в плане, в карточке «Что собираем», «многостраничный сайт»: план соберётся заново,
и за лендинг не спишется.
Главная уже собрана — переделывать её не нужно. Короче всего попросить страницу в чате,
как в разделе выше: она встанет в тот же проект с той же шапкой и подвалом. Другой путь —
доделайте главную и залейте её. Каждую следующую страницу соберите своим проектом: «Новый проект» → в «Что собираем» выберите
«Страница в готовый сайт», а в брифе в карточке «Свой проект как основа» укажите папку
главной и отметьте «Раскладка и стили». Страница выйдет в той же вёрстке, цветах и шрифтах,
без второй шапки и подвала. Шапку и подвал возьмите с главной в Тильде.
Стили из Тильды
Скачайте в Тильде файл .tildastyles (Настройки сайта → «Шрифты и цвета» → скачать)
и отдайте его чату: кнопкой «Стили из Тильды…» в дизайн-системе, скрепкой брифа или просто положите
в папку проекта — чат найдёт его сам. Цвета, кегли и кнопки станут дизайн-системой секций.
Шрифтов сайта Тильда в этот файл не кладёт — их выберите в карточке «Шрифты», она откроется сама.
Ролик «Дизайн-система», 0:42 · открыть отдельно
Своя сетка по брейкпоинтам
Под вопросом о сетке — «Своя по брейкпоинтам…». Откроется таблица экранов
по Тильде: от 1600, основа, до 1200, 960 и 640. На каждом — контейнер (пусто — резина), колонки,
поле и межколонник. Выключенный экран живёт по строке выше. Модель держит эти числа как закон.
Ролик «Сетка», 0:34 · открыть отдельно
Фон и видео в «Правке»
В «Правке» щёлкните по пустому месту секции, мимо текста и картинок: слой фона обведётся
пунктиром, а над превью встанет строка «Фон» — цвет, картинка или видео. Видео берётся ссылкой Recozy
или прямой ссылкой на файл .mp4 или .webm. Если фон героя — фото во всю секцию, щелчок тоже
ведёт в эту строку, а не к выбору файла.
Что ещё есть в чате
Всё по желанию. Пометка в углу карточки говорит, кто делает работу: модель
(стоит запроса), код на вашей машине или наш сервер (бесплатно и сразу).
До сборки: откуда брать и как задумать
Модель
Редизайн старого сайта
Впишите адрес — чат прочитает тексты, разделы и контакты старого сайта
и соберёт новый на них. Нужно разрешение «Чужие сайты» в окошке моста.
Модель
Свой проект как основа
Собрали удачный сайт — следующий соберите от него. Чат возьмёт порядок
экранов, сетку, приёмы и движение; тексты, цифры, контакты и фото — новые, из брифа.
Код
Правка плана руками
Наведите на строку плана — появится «править»: живая схема экрана с кнопками
(шапка, половинки, сетка, отразить, контакты). Ваша правка едет в сборку поверх плана, а советчик
рядом подсказывает, где план можно усилить.
Код
КП для заказчика
Коммерческое предложение по плану, ещё до сборки: состав страниц, что будет
на каждом экране и схемы экранов. Без модели — сразу и бесплатно. «Ссылка для заказчика»
отдаёт КП страницей на show.re-block.ru с кнопкой «Скачать PDF».
Код
Свой DESIGN.md
В карточке «Дизайн-система» — «Свой DESIGN.md…», бросок файла на карточку или
«Взять из папки». Цвета, шрифты, скругление и шаг вынимаются сами, а текст файла становится законом
для плана и каждой секции. «Скачать DESIGN.md» отдаёт систему проекта одним файлом для Stitch,
Cursor и Claude.
Код
Фото и знак по местам
План сам раскладывает ваши фото по секциям и показывает миниатюры ещё до сборки;
что никуда не попало — списком под планом. Имена вроде hero-, team-, review- ставят снимок
на своё место. Логотип положите в images/ как logo.svg или logo.png — иначе в шапке будет название
текстом.
Данные из Тильды
Модель
Поток
Посты Потока Тильды — лентой в секции, с рубриками и своей страницей поста.
Чат читает Поток из открытого редактора; отдельного разрешения не нужно.
Модель
Цены и остатки
Правка каталога словами: «подними ремешки на 10 %». Чат покажет, что
поменяет, и запишет только после вашего нажатия. Нужны открытая вкладка каталога этого сайта
и разрешение «Каталог товаров».
Модель
Витрина каталога: вкладки, варианты, поиск
Витрина берёт товары из каталога Тильды и сама обновляется на опубликованной странице.
Попросите в брифе или правкой — и у неё появятся вкладки разделов магазина, выбор размера
или цвета в карточке с ценой варианта, поиск по названию, сортировка, цена от и до, фильтр
по цвету, второе фото при наведении и сердечко «В избранное» (нужен блок избранного Тильды ST110). Всё это работает на сайте, в превью виден снимок.
Код
Счётчик на значках корзины и избранного
Положили товар в корзину или в избранное — на значке в шапке появляется кружок
с числом. Заливка сама узнаёт значки и ставит им метки Тильды. В новых секциях кружок цвета акцента, в старых — красный, поменять можно словами.
Открываются корзина и избранное, когда на странице стоят их блоки Тильды: корзина ST100
и блок избранного ST110. Число видно на опубликованной странице.
Модель
Своя страница товара
Впишите товару в каталоге Тильды адрес страницы, например /nabor-stikerov.
При следующем открытии проекта с открытой вкладкой каталога re-block покажет новые товары
и кнопку «Страница „Название“» — в плане появится страница с карточкой товара. Цену, фото
и варианты она берёт из каталога: поменяли цену в Тильде — поменялась и страница. Кнопке
«В корзину» нужен блок корзины ST100 на этой странице.
Движение
Код
Как окно появляется?
Двадцать четыре эффекта появления попапа — вопросом в опроснике,
с живыми образцами. Код ставит заливка, модель о нём не знает. Крестик окна
рисуется ровно по центру на любом шрифте.
Код
Как появляются заголовки?
Двадцать шесть эффектов: буквы по одной, слова и строки из-под кромки.
Заголовок в панели остаётся одним текстом, а эффект виден на опубликованном сайте —
в редакторе Тильды заголовки стоят как есть. Под плиткой серым — название эффекта:
data-hfx="karaoke" в теге заголовка даёт эффект только ему, data-hfx="none"
оставляет заголовок без эффекта.
Модель
Эффекты витрины
Восемьдесят восемь эффектов плитками с живыми миниатюрами — кнопки, фоны и слово
первого экрана, карточки, стекло, поля и галочки формы. Свёрнуты в опроснике с пометкой «бета»;
по умолчанию везде «Обычные». Ставит их модель, подгоняя под цвета проекта.
Код
Плавная прокрутка
Пункт плана: страница плывёт за колесом мыши с инерцией. Кусок head/smooth
на 3 КБ, ставится через HEAD. Телефон и тех, у кого включено «Уменьшить движение», не трогает.
Модель + код
Движение с чужого сайта
Запишите экран понравившегося сайта: секунд пять–восемь, с прокруткой. Приложите ролик
скрепкой и нажмите «Взять движение» — re-block расскажет, как там появляются заголовки, тексты,
карточки и фото, а «Поставить в секции» перенесёт то же движение к вам. Модель только
называет параметры, исполняет их код. Переносится обычное появление, проявление из размытия, выезд
по словам и изменение размера при прокрутке; авторские 3D-эффекты — нет. Шапку, меню, формы
и подвал не трогает. Разбор ролика — 9–14 ₽.
Код
Стиль по ссылке
Вставьте в бриф адрес понравившегося сайта, до трёх ссылок. re-block спросит, старый
это сайт или образец стиля. С образца возьмёт цвета, шрифты и кегли, кнопки с наведением, карточки
и ширину колонки; платный шрифт или шрифт без кириллицы план заменит близким из Google Fonts. Движение
появления и плавную прокрутку найдёт в коде и покажет плитками. Тексты и раскладка — из брифа.
Читать образец бесплатно, нужен мост.
После сборки: перед показом и сдачей
Ролик «Сдача заказчику», 1:20 · открыть отдельно
Код
Проверить страницу перед показом
Замер на ширине компьютера и телефона: контраст, мелкий текст, длинные
строки, кнопки меньше пальца, секции шире экрана, поля без подписи, фокус с клавиатуры,
движение для тех, кого укачивает. Отмеченное чинится кнопкой «Починить отмеченное».
Под пунктами — путь клиента: сколько кнопок ведёт к заявке, мессенджеру или корзине
и на каких экранах телефона. Проверка отметит кнопку без адреса, одно действие под разными
подписями, больше четырёх экранов без кнопки и форму в самом низу, к которой ничего не ведёт.
Ещё она сверяет кнопки: одна подпись в разных секциях — одна высота, кегль и поля; экраны
одни на весь проект (960 и 640); у шрифта из панели Тильды есть запасной, а не Times; адрес
на карте совпадает с адресом в тексте.
Модель
Обоснование дизайна для заказчика
Почему экраны стоят в таком порядке, откуда цвета, шрифты и сетка — текстом,
который можно нести на защиту макета. Раздел «Куда ведут кнопки» считает код: каждая кнопка,
куда ведёт и на каком экране, и полоса экранов с отметками. PDF — без даты и адреса
по краям, с цветами палитры; «Ссылка для заказчика» кладёт документ на show.re-block.ru на 60 дней.
Код
Инструкция заказчику
Как править сайт самому: где какие кнопки, формы и окна, что трогать
в панели, а что нет. Собирается по файлам секций; что не нашлось — на жёлтом листе отдельно.
Модель
Версия на другом языке
Копии секций с переводом ложатся рядом с оригиналами
(en-01-hero.html), страницы /en — в README, заливаются как обычно.
Перевод копится в .vibe/: при обновлении сайта переводятся только новые строки.
Код
Картинка для соцсетей и знак
Рисуется по первому экрану сайта: превью того, как ссылка выглядит
в мессенджере, и фавиконка. Заливается через HEAD. Бейдж, поставленный руками, не трогается.
Код
Упаковать кейс
Кнопка в итоге проекта. В папку case/ ложатся обложка, длинные снимки страницы
на 1440 и 360, экраны в телефонах, лист стиля, текст case.txt и всё одним zip — для портфолио. «Посмотреть кейс» открывает его во вкладке. Личные данные на снимках заменены болванками.
Код
QR-код на ссылку
Кнопка «QR» у ссылки для заказчика, у ссылок КП и обоснования. Код рисуется на вашей машине —
его можно вставить в письмо или распечатать. В КП поле «Готовый сайт» добавляет блок «Посмотреть сайт» с QR.
Код
Бренд в документах
«☰» → «Бренд в документах»: ваш логотип и контакты встают в КП, обоснование и кейс.
Хранятся на вашей машине, модели не уходят.
После сборки: замеры, шрифты, откат
Код
Линейка в превью
Кнопка «Линейка» над превью. Наведите на элемент — отступы подсветятся оранжевым, поля зелёным,
а ярлык покажет размер в px, поля, отступы, промежуток, кегль, интерлиньяж, жирность, гарнитуру и скругление.
Щелчок закрепляет элемент, наведение на другой рисует расстояние между ними; Alt — до родителя, Esc снимает.
Замер пишется строкой под кадром — его можно скопировать в чат.
Код
История версий секции
У написанной секции в плане есть «история»: каждая перезапись — правка словами, «Правка»
в превью, перекраска, «Забрать правки из Тильды» — с подписью и временем. «Открыть» показывает версию
во вкладке, «Вернуть» кладёт её обратно в файл. Пропал блок после правки — сюда.
Код
Поправить раскладку
После правки словами код сам меряет секцию: ячейки сетки, которые съехали на новую строку,
и текст, вылезший за край. Нашёл — в ленте строки «Раскладка: …» с пикселями и кнопка «Поправить раскладку»:
модель получит точную причину, а не «что-то поехало».
Код
Эффекты правкой — без модели
Попросили поменять эффект меню, кнопок, заголовков, появления окна или прокрутку — чат ответит
сразу и бесплатно кнопкой «К вопросу…»: эти эффекты ставит код, их выбирают плиткой в опроснике.
Чип «Эффекты» в строке разговора ведёт к ним списком.
Сервер
Скорость страницы
«Скорость» в карточке «Страница Тильды»: замер Google PageSpeed для телефона и компьютера
(три прогона, в зачёт идёт серединный) и советы по делу: тяжёлый шрифт сайта и его бесплатные аналоги, картинки,
сдвиг вёрстки, магазин Тильды, чужие скрипты. Что упирается в файлы самой Тильды, так и сказано.
Нужен опубликованный адрес.
Сервер
Шрифты без Google
Галка в карточке «Шрифты», после сборки — чип «Шрифты» в строке разговора. Файлы шрифтов ложатся
в fonts/ папки (все толщины из CSS секций), а при заливке подключения Google вырезаются —
для тех, кому важен 152-ФЗ. Файлы загрузите в Тильде в свой шрифт, каждый в свою толщину — как, написано в fonts/README.txt.
Код
SVG и ZIP в чате
Бросьте в чат SVG — он нарисуется и ляжет в images/. ZIP с картинками распакуется туда же,
без служебных файлов Мака.
Код
Кнопка «Обновить до …»
Вышла новая версия — рядом с «Что нового» в шапке появится кнопка с её номером, не позже чем
через 10 минут. Пока чат работает, она неактивна, чтобы не оборвать сборку.
Сервер
Поддержка с проектом
«☰» → «Поддержка» → «Написать»: текст и до пяти скринов. Галочка «Приложить проект» отправит
папку архивом с болванками вместо личных данных; архив удаляется через 30 дней после ответа. Ответили —
всплывёт «Поддержка ответила», письмо придёт на почту.
Тонкости
То, обо что чаще всего спотыкаются.
Вопрос в «Помощь» — ответит ИИ
Кнопка «Помощь» в шапке сначала ищет готовый ответ. Нет его — вопрос уходит ИИ,
который знает эту справку и только её. Это бесплатно, до двадцати вопросов в день.
Ответ ИИ подписан. Уверенности нет — он так и скажет и предложит «Спросить поддержку»;
кнопка «Где в справке» откроет нужное место. Под готовым ответом есть «Спросить ИИ», если он не про то.
Один пароль — десять машин
Машина — это браузер, в котором вы вошли: рабочий ноутбук, домашний компьютер,
второй профиль Хрома. Повторный вход в том же браузере места не занимает.
Окно инкогнито при закрытии забывает всё, поэтому каждый вход из него — новая
машина. Кнопка «Выйти» освобождает место. Мест не осталось — экран входа скажет это словами;
напишите нам, освободим.
Вкладка сайта должна оставаться открытой
Доступ к папке живёт во вкладке сайта и больше нигде. Закрыли её — слежение
кончилось; файлы целы, карта на месте, откройте и выберите папку из списка последних.
Вкладке в фоне Хром режет таймеры, поэтому слежение в ней замедляется.
Вернитесь на вкладку — папка проверится заново.
Сайт не видит страницу Тильды
Сайт видит редактор только через мост. Если вместо списка страниц написано,
что заливает расширение re-block, — моста нет или он старый: поставьте или обновите его
и нажмите «Обновить».
Страница должна быть открыта в редакторе в том же Хроме, а не в другом
профиле или браузере. Чат, план и запись секций в папку работают и без моста —
не получится только залить.
Секция не влезла в блок
У Тильды есть потолок на размер кода блока. Точного числа она не называет, но по опыту: секция в 131 000 символов проходит, 158 000 — уже нет. Строка станет красной:
секция велика для Тильды
Заливка при этом не останавливается — остальные секции уедут как обычно.
Почти всегда причина одна: картинки, зашитые в HTML через base64 вместо ссылок. Лечится кнопкой
«Залить картинки» или переводом в WebP.
Страница медленная — виноваты картинки
Замеренный случай: лендинг с безупречным кодом — нулевой сдвиг макета,
10 мс блокировки, 66 КБ разметки — и 33,7 секунды до отрисовки главного на мобильном.
Причина одна: восемь фотографий по 1,2 МБ, все грузятся разом, ни одной отложенной. Браузер
тянул десять мегабайт, и первый экран стоял в очереди за тем, что ниже сгиба.
Лечится двумя действиями, и оба дают примерно поровну:
- Пережать. Фото 1024×1024 в PNG весит 1,24 МБ; тот же кадр
в JPEG шириной 800 px — 114 КБ. Одиннадцатикратно, а на глаз неотличимо. PNG нужен
только там, где есть прозрачность.
- Отложить. Всем картинкам, кроме одной самой крупной на первом
экране, нужен
loading="lazy". Это заливка делает сама при починке — но
только внутри секции: какая секция первая на странице, ей не видно.
Отдельно: картинки, которые нейросеть сгенерировала и оставила у себя,
живут по ссылке без обещанного срока. Показать на них лендинг можно, сдать — нет. Кнопка
«Залить картинки» такие адреса забирает сама: страница редактора скачивает картинку
и тут же кладёт её в файлы Тильды. Забирает не любую ссылку, а ту, по которой видно, что это
картинка, — с расширением в адресе либо с хоста, который ничего кроме картинок
не отдаёт (images.unsplash.com, image.qwenlm.ai). Если ссылка
под это не подошла или сервер не пустил, останется старый путь: сохраните картинку
в папку, пережмите и нажимайте.
Попап в блоке работает одним способом
Самодельное окно «во весь экран» на position: fixed в Вайб-блоке
не разворачивается. Стоит включить блоку появление при прокрутке, как Тильда вешает
на него transform, а трансформация на предке заводит новую систему
отсчёта: «весь экран» начинает считаться от коробки блока. Замер: подложка получила
191 px высоты вместо 1108 и легла под шапку сайта.
С :target и <details> выходит то же самое.
Рабочий способ один — тег <dialog>. Открытое модально,
окно лежит в верхнем слое браузера: его не режет overflow,
не смещает transform и не перекрывает чужой
z-index — своего ему не нужно вовсе.
В файле пишется только разметка: кнопке —
data-vibe-open="имя", окну — data-vibe-popup="имя" тем же
словом. Строку, которая окно открывает, дописывает починка при заливке; если выхода
из окна в разметке нет, она добавит и крестик — с телефона
Esc нажать нечем. Пока в окне решают капчу, оно перестаёт быть модальным,
иначе капча легла бы под него.
Форму заявки при этом стоит держать и отдельной секцией: попап
экономит прокрутку, и если он однажды не откроется, это должно стоить удобства,
а не заявки.
Два начала якоря заняты Тильдой
Плавную прокрутку Тильда вешает не на все якоря: у неё
один общий обработчик со списком исключений, и сверяет он начало имени,
а не имя целиком. Занято начало price, начало order
и ещё несколько служебных. Обойти это со стороны секции нечем — скрипт чужой
и грузится раньше нашего.
Поэтому дописать «s» не выход: #prices
и #orders выпадают из прокрутки так же. С order
вдобавок хуже: корзина Тильды ловит все ссылки, начинающиеся на #order,
и клик по такой ссылке открывает корзину.
А просятся эти два слова сами: раздел с тарифами
и блок заказа. Поэтому починка переименовывает такие якоря при заливке —
и id раздела, и ссылку на него, и упоминание
в <style>: выходит #tariffs и #request.
Имя файла и класс секции при этом не меняются.
Язык сайта задаётся в Тильде, а не в секции
Тег <html> пишет сама Тильда при публикации, а язык берёт
из настроек проекта. Не задали — выйдет <html> без lang,
и это замечание сразу в двух местах: в поисковой оптимизации и в доступности, потому что
программа чтения вслух не знает, на каком языке читать.
Ставится один раз: Настройки сайта → Основное → Язык сайта. Заливка сюда
не достаёт: она правит настройки страницы, а язык живёт у проекта.
Залилось не в ту страницу
Заливка льёт в страницу, выбранную в «Странице Тильды» на вкладке «Заливка».
Сам re-block ставит открытую страницу, куда эту папку уже заливали. Но если выбрать руками другую
или закрыть вкладку своей, своя страница не обновляется, сколько ни перезаливайте.
Строка «На странице уже N блоков, о которых карта этой папки не знает»
почти всегда значит, что выбрана не та страница — там же сказано, куда эту папку
заливали. Выберите её и нажмите «Залить». «Всё равно залить» здесь заведёт на чужой странице
новые блоки ниже футера — их потом удаляют в редакторе Тильды.
Заливка просит обновить редактор
Если блок есть в карте, но редактор его не показал, заливка не заводит второй,
а останавливается и просит обновить страницу редактора. Удалили блок сами — нажмите «Всё равно
залить», и он появится заново. Блок, в который Тильда не приняла запись, помечается
как не принятый, а не пересоздаётся рядом.
Что-то пошло не так — «Сообщить о проблеме» в окне «Что нового». В поле
«Что случилось?» можно своими словами написать, что нажимали и что вышло.
Картинки грузим до секций
Адреса на CDN заливка подставляет в секцию в момент заливки. Залили секции
раньше картинок — на сайте эти места будут битыми, и об этом будет сказано отдельной строкой.
Второй раз одно и то же не грузится: рядом с адресом карта помнит хеш файла.
Подменили файл в папке — уедет новый. Больше 10 МБ Тильда не принимает.
Как залить код в HEAD — по шагам
Куски кода лежат в папке head/ проекта, по файлу на кусок: фавиконка,
картинка для соцсетей, счётчики, эффекты.
1. В Тильде откройте поле HEAD. Для всего сайта: «Настройки сайта» → «Вставка кода» →
«HTML-код для вставки внутрь head». Для одной страницы: «Настройки страницы» → «Дополнительно» →
то же поле.
2. У поля нажмите «Редактировать» — откроется страница Тильды «Вставка кода в HEAD».
Оставьте её открытой вкладкой в том же Хроме, где мост.
3. В re-block: вкладка «Заливка» → «Обновить» → «Ещё: картинки, код в HEAD, стили
проекта» → карточка «Код в HEAD». Она видна, только когда в head/ есть файлы.
4. Выберите в списке эту вкладку («HEAD сайта …» или «HEAD страницы …»), отметьте
галками куски и нажмите «Залить в HEAD».
5. Опубликуйте: HEAD страницы — эту страницу, HEAD сайта — все страницы.
Список пуст («Страница «Вставка кода в HEAD» не открыта») — значит, эта страница
Тильды не открыта. Кусок берёт картинки из папки — сперва «Залить картинки». Написанное
в HEAD руками остаётся на месте. Потолок поля — 65 535 байт.
После HEAD страницу надо переопубликовать
Код в HEAD попадает на сайт только после публикации — это правило Тильды,
заливка тут ни при чём. Картинки внутри кусков HEAD подменяются так же, как в секциях,
а пути к ним пишутся от папки секций, а не от папки head/.
Чего оно не делает
Намеренно — чтобы нельзя было испортить страницу одной кнопкой.
- Не удаляет и не чистит блоки. Только добавляет и обновляет.
- Не публикует само: «Опубликовать» жмёте вы — здесь или в Тильде.
- Не пишет в Тильду по своей воле: секции, цены и настройки уезжают по вашей кнопке или при слежении, которое вы включили сами.
- Не следит за папкой
head/: куски для HEAD заливаются только кнопкой.
- Не переносит файлы вроде PDF — только картинки и ролики .mp4 и .webm: те, что стоят
в секции относительным путём, и картинки, по чьему адресу видно, что это картинка.
- Не убирает с Тильды уже загруженное: перезалили картинку — прежняя осталась
в файловой.
- Не хранит проекты у себя. Модели уходит только то, что ей нужно для ответа,
а телефоны, почта, адреса и ФИО — болванками той же длины.
- Мост не выполняет на страницах ничего, кроме своего короткого списка
действий, и не ходит никуда, кроме вашего аккаунта Тильды и вкладок, которые вы разрешили.