Tutorial: Tilda без границ, когда ChatGPT — ваш веб-разработчик
Коротко. С ChatGPT дизайнеру больше не нужно «уметь кодить». В этой статье покажу, как за один «новый чат» собрать на Tilda эффектный мини-сайт на примере проекта для Labubu. В конце — подборка бесплатных эффектов под Tilda.
🧠 Нужно ли разбираться в коде?
Спойлер — нет.
Конечно, глубокие знания в кодинге – это супер, но наша статья не об этом. Достаточно понимать основу:
- HTML — из чего страница «собрана».
- CSS — как всё выглядит.
- JS — как всё «двигается» и реагирует.
Ещё один базовый факт: у тегов есть открывающие и закрывающие элементы. Этого уровня знания хватит, чтобы уверенно работать с Tilda и подсказками от ChatGPT.
Немного самоиронии. В институте у нас был странный для творческого вуза предмет — мы чертили редуктор. Я тогда понял, что механизмами управляют не «зелёные человечки», а передачи и шестерёнки, которые передают энергию 🙂. Для общего понимания этого достаточно — в вебе так же.
Пользователь смартфона не обязан знать, как он устроен, чтобы использовать все функции. С сайтом на Tilda аналогично: ChatGPT объяснит и сгенерирует код, а вы вставите его в нужное место и проверите результат.
— «А что если ChatGPT исчезнет, а я так и не разобрался?»
Для особо тревожных есть даже автономная «нейросеть по выживанию», которая работает без интернета — Survival AI: The Ark. Но по факту: базовые принципы и Tilda останутся с вами, а сниппеты — сохранятся.
✨ Tutorial: разберёмся как же всё это делать
Откуда идея
Я думала какое-то время на примере чего именно разобрать работу с ChatGPT вкупе с Tilda и вспомнила сайт, которым не так давно восхищалась вся общественность Ferrari 296 Speciale, по факту же его собрать не так уж и трудно. Мы не будем делать настолько эффектную подачу, но разберём приём видео по скроллу и появление элементов, завязанных на тайм-коде.
Задача: мини-сайт для дистрибьютора Labubu за 3 часа и один «новый чат»
Пофантазируем, что к нам обратился дистрибьютер Labubu в России и у него есть три игрушки, которые он хочет продавать.
Что сделаем?
1. Сначала соберем видео с тремя игрушками Labubu.
2. Попросим ChatGPT сгенерить код с определенными условиями.
3. Создадим сайт на Tilda и вставим туда этот код.
4. Доработаем функционал на стороне Tilda. Готово!
Этап 1. Собираем видео с игрушками на 10сек
Для начала отрисуем три ключевых кадра с Labubu, можете выбрать из пространства интернета любые, которые вам по душе. Помним, что размер горизонтального видео 1920х1080px.
Для того, чтобы собрать видео, я тоже воспользуюсь нейросетью, в данном случае – это Runway (модель Gen-3 Turbo, потому что там можно использовать ключевые кадры)
Создаём "новый чат" в ChatGPT (в этом же чате мы будем сидеть до последнего) и просим его написать промт для Runway, чтобы получить ровно то, что нам надо, у меня это выглядит так:
Напиши мне промт для runway gen-3-turbo, у нас будет три кадра (прикрепляю во вложении), нужно сделать так, чтобы игрушка шла на месте, подмигивала и превращалась в следующую игрушку и так по кругу со всеми тремя игрушками, то есть первая превращается во вторую, а вторая превращается в третью. Продолжительность видео 10 сек, промт должен быть на английском и не превышать 1000 слов.
Можете править промт, создавать варианты видео, пока не получите желаемый результат, я остановилась на таком варианте:
Этап 2. Просим ChatGPT сгенерировать код для Tilda
После того, как видео готово, мы должны понять, что мы хотим увидеть в финале: я это представила как видео на всю ширину, анимация видео по скроллу и выплывающие тексты при появлении определенной игрушки на экране.
Теперь нужно представить желаемое в структуре Tilda
Как это реализовать? Скорее всего, это будет блок T-123 с основным кодом, ниже будет 3 zero-block с моими текстами, окей, как будет выглядеть промт для ChatGPT:
Итак, теперь представь, что ты профессиональный web-разработчик, нам нужно создать сайт на tilda, где будет видео продолжительностью 10сек, оно будет проигрываться в зависимости от скролла. Код будет интегрирован в блок T-123, за ним будут следовать 3 zero-block с элементами, которые я соберу сама. Что нужно: - нужно чтобы на первой секунде видео на нем плавно появлялся снизу-вверх первый zero-block с определенным id, на третьей секунде он должен плавно исчезать и меняться на второй zero-block с определенным id, анимация появления та же, на 6 секунде видео 2 zero-block должен пропадать и появляться 3 zero-block с определенным id.
В ответе получаем код для вставки в T-123.
Этап 3. Создаём сайт на Tilda и готовим блоки
Создаём страницу на Tilda и готовим 1 блок T-123 и 3 zero-block с нашими текстами, уместно сначала сделать 1 зеро-блок, отрисовать адаптации под разрешения и откопировать его, потом поменять тексты в новых. В блок T-123 вставляем код из ChatGPT.
Что если код не сразу сработал корректно?
Такое бывает, что получившийся код не реализует сразу нашу задумку, так получилось и у меня. Не бойтесь писеть об этом ChatGPT и старайтесь доступно объяснять проблему:
по какой-то причине зеро блоки не наложились, а просто расположены снизу под видео?
После этого ChatGPT все изучил и выдал абсолютно работающий код!
Этап 4. Доработка сайта
После того, как всё заработало исправно, мы просто доводим сайт до красоты, например, добавляем pop-up при нажатии на кнопку, прелоадер, иконку скролла вниз и всего, чего душе угодно. Проверяем все ли корректно работает на всех устройствах.
Пример результата
Получившийся результат можно посмотреть тут:
Небольшой лайфхак по прелоадеру
Если вам тоже хочется сделать анимированный прелоадер, что я посоветую:
- Отрисуйте два состояния прелоадера в Figma и воспользуйтесь плагином Shape Move.
- Выгрузите его в формате SVG-анимации.
- И также попросите ChatGPT интегрировать его в сайт, мой промт выглядел так:
Представь, что ты профессиональный web-разработчик и нам нужно составить код для прелоадера на сайт tilda: - нужно чтобы он был интегрирован в блок t-123 - нужно, чтобы прелоадер повторялся пока сайт полностью не загрузится - прелоадер будет выполнен ссылкой на файл svg https://www._________.ru/labubu/preloader.svg - на горизонтальных устройствах нужно, чтобы он занимал 100% ширины, высота auto, на вертикальных устройствах 100% высоты, ширина auto
Частые вопросы
Это безопасно? Да. Мы не трогаем платёжку и сервер — только фронтенд-эффекты. Работает в рамках Tilda.
А если что-то «сломается»? Держите запасную копию кода в выключенном состоянии.
Сколько времени нужно? На кейс с тремя карточками уходит около 3 часов: бриф → сборка → тесты.
🫰🏻 Готовые эффекты для Tilda — бесплатно
Я регулярно делаю эффекты, которые легко вставить в Tilda, и складываю их сюда, ими можно пользоваться бесплатно, коллекция растёт.
Дерзайте и создавайте классные и эффектные проекты! С ChatGPT это стало абсолютно реально!