Максим Постников | Дизайн, Тильда и модификации

💬 Друзья, хочу собрать небольшую обратную связь по модификациям)

Напишите, пожалуйста, в паре строк:
• Что вам нравится в модах?
• Чего вам сейчас не хватает?

С большой радостью приветствуется как позитивный, так и негативный фидбэк. Честность превыше всего 🤍

ps. Для тех, кто ещё не пользовался, самое время почитать комментарии)

Максим Постников | Дизайн, Тильда и модификации

🔗 Вайбкодить на Тильде можно)

Но аккуратно и с пониманием того, что получается на выходе. Иначе клиент получает хрупкий результат, который разваливается при первой смене контекста.

Так или иначе, если дизайнер берется генерировать код через ИИ, он должен базово понимать архитектуру его задачи – из каких компонентов она состоит, какими методами их можно связать, какие условия нужно учесть и тд.

В принципе это чем-то похоже на задачу по физике и математике: есть «дано», набор методов (формул) и переменных (компонент), с которыми можно получить результат. А дальше есть множество вариантов, как и в какой последовательности их применить, чтобы прийти к результату.

Поэтому да, для качественного результата вайбкод требует системного мышления. Если мы заранее не понимаем, как связать элементы в задаче, ИИ за нас сделает это криво – исходя из того контекста, который у него будет (а он почти всегда недостаточен).

Так вот, когда дизайнер с креативным мышлением идёт в ИИ, тот выдаёт работающий в первом приближении код, а тот без валидации вставляет его в T123 и отдаёт клиенту – происходит то самое, о чем я предупреждал) Оно разваливается.

Но значит ли это, что без системного мышления вайбкодить вообще не нужно? Конечно, нет. Можно и нужно. Но я против того, чтобы сходу без опыта решать через ИИ клиентские задачи. Как я говорил в посте выше, с помощью ИИ можно учиться мыслить. И Тильда – отличная песочница, чтобы это попробовать.

Короткий топ задач, которые стоит вайбкодить на Тильде:

🟩 Стилизовать стандартные блоки
Самая распространенная и актуальная задача, встречающаяся на Тильде) Не требует сложной логики, но помогает понять, как устроены элементы странички, как работают селекторы и свойства в css и как браузер преобразует их в стили. И провалидировать результат можно прямо визуально.

🟩 Добавить простую функцию
Например, таймер с обратным отсчетом, мини-калькулятор или подмену контента в блоке. Здесь появляется логика, условия, состояния, но все ещё на том уровне, который почти нельзя спроектировать «не так». И если разобрать с ИИ, почему код написан именно так, большинство загадочных #$!? в синтаксисе превратятся в понятное и последовательное.

Для старта этого достаточно. Остальные задачи на Тильде намного сложнее – и не потому, что они сами по себе такие, а потому что контекст конструктора настолько большой, что для их решения нужно в деталях понимать, как он работает и пошагово направлять нейросеть. Иногда бывает даже быстрее написать всё руками) А иногда отказаться от Тильды в пользу самописных или более масштабируемых решений.

Но в общем, шаг за шагом, мы приходим к пониманию, как строятся решения, которые выдает нам ИИ. Понимаем, как с ним общаться, чтобы получить работающий результат. И понимаем, как потом его валидировать, чтобы он работал устойчиво. И вот тогда предлагать его заказчику – не стыдно.

А дальше – развилка. Дизайнер начинает настолько хорошо понимать код, что задачи, которые он для себя ставит, сталкиваются с ограничениями среды (то есть Тильды). Часть из этих ограничений решается модификациями, часть остаётся на откуп конструктору. И тогда перед ним встаёт выбор: остаться на Тильде, потому что она закрывает большинство его задач, или уйти в вайбкод, но уже на качественно другом уровне, с полным контролем над стеком✍️

Максим Постников | Дизайн, Тильда и модификации

🔗 Вайбкодить нельзя на Тильде. Куда поставим запятую?

Друзья, в последнее время тема ИИ активно начинает заходить на рынок Тильды. Многие, кто пробовал писать код через нейросети, говорят, что это очень мощно — и с ИИ можно сделать буквально всё. Но чем больше людей это пишет, тем больше я не могу развидеть, как быстрый результат кружит головы. И как человек, который пользуется нейросетями и сам пишет код, очень хочу вас предостеречь. Поделюсь опытом)

Для начала скажу, что конечно же, я вайбкожу. Пробовал писать код с разными нейронками, от GPT до Claude, пользовался агентами и mcp. И могу сказать одно — они все очень хороши, если понимать, какой результат получается на выходе. И в особенности, если собирать с ним решения с нуля.

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

А что, если попросить ИИ «собери слайдер с карточками товаров, который будет работать в зеро блоке и подгружать данные из каталога товаров»?

Задача кратно усложняется контекстом. Мы говорим «карточки товаров», а под капотом подразумевается: получить товары от Tilda API, преобразовать и вставить их в блок, запустить слайдер, проверить состояния, учесть особенности Тильда и др.

Что делает ИИ, когда мы не даем ему достаточно контекста? Достраивает его на своё усмотрение. И код, который мы получаем, имеет прилично хрупких допущений, которые развалятся, если наш заказчик захочет поменять вводные или, например, добавить в слайдер фильтры.

Тогда мы попробуем написать ИИшке: «не работает». И если мы не даем ему диагностических данных или не позволяем ему (агенту) сделать это самостоятельно, то получаем «заплатку» — костыль, который решает нашу проблему при ограниченных вводных, который при следующем изменении снова развалится.

🟩 Так о чём я?
ИИ позволяет решать простые задачи быстро и эффективно. И главное, ИИ — это отличная песочница, которая позволяет учиться кодить.

Но не заменяет проектирование. Чтобы строить с ним рабочие и устойчивые в продакшне решения, нужно:
• заранее проектировать логику (какие элементы есть в системе, как они взаимодействуют)
• проверять, как эта логика реализуется в коде (да, хотя бы поверхностно, но валидировать методы, которые генерит ии)

Без этого «вайбкодинг» превращается в опасную для клиентов штуку – мы делаем им то, что, работает в моменте, но не выдерживает изменений. И в первую очередь от этого страдают сами заказчики.

В общем, навайбкодить можно правда всё, что угодно. И даже рабочее) Но вопрос не в том, работает ли, а в том, выдержит ли это следующий шаг.

А вы что думаете? Стоит ли на Тильде вайбкодить и какие задачи можно решить с ИИ?

Максим Постников | Дизайн, Тильда и модификации

💎 Он самый — каталог примеров модификаций!

Собрал в коллекцию 90+ примеров, которые накопились за два года работы с модами)

Всё самое нужное для создания функциональных сайтов: от слайдеров, вкладок и аккордеонов до комбинаций нескольких модов и продвинутых сценариев. Лёгким движением руки любой пример можно скопировать к себе в проект и адаптировать под свой дизайн)

Если когда-нибудь искали «как сделать такой функционал в зеро», велика вероятность, что он уже есть в каталоге.
И главное — теперь он наглядный пример того, что можно сделать с помощью библиотеки. А также место для дизайнерского и технического вдохновения 🤍

Где найти:
Модификации → раздел «Примеры» или по ссылке: https://postnikovmd.com/mods/examples

Делитесь впечатлениями, о скольких примерах из каталога вы знали?)

Максим Постников | Дизайн, Тильда и модификации

🤍 Подписка открыта, добро пожаловать в профессиональный уровень)

Что внутри:

💎 Расширенные настройки
В подписку вошли расширенные настройки генератора кода — логика, поведение, стили, ограничения и другие параметры, с которыми можно гибко настраивать работу модов. Базовые настройки (класс, ссылки, скорость переходов и др.) остаются доступными для всех.

💎 Шаблоны примеров
В библиотеке уже почти сотня примеров использования модификаций, и по подписке их можно копировать к себе в проект как готовые шаблоны. На бесплатном тарифе примеры остаются открытыми для вдохновения)

💎 Личный кабинет
Модификации личного кабинета перешли в тариф Pro, а на самом сайте появился одноимённый раздел для доступа к платным функциям и управления подпиской. Конечно же, на основе новенького продвинутого модуля) Уже можно регистрироваться 🔗

Сами модификации при этом остаются открытыми. Подписка — это мастхэв для тех, кто регулярно использует библиотеку, работает со сложными проектами и стремится повышать ценность своей работы.

Её основной смысл — сэкономить часы разработки и сделать сложное возможным 🦾

Оформить подписку можно тут:
https://postnikovmd.com/mods/pricing

В честь запуска добавил небольшой бонус – промокод START даёт 15% скидку на подписку в течение всего марта 🔥

Как всегда, сделано с душой и вдохновением)

Максим Постников | Дизайн, Тильда и модификации

💎 Подписка на модификации

За последний год библиотека сильно выросла, во многом — благодаря вам и вашим проектам. Мне безумно приятно видеть, как моды помогают вам в работе, радуют ваших клиентов и упрощают процесс разработки) И с ростом продукта я всё больше понимаю, что за ним стоит большая ответственность, которая требует взрослой экономики.

Поэтому в последнее время я много думал над монетизацией и тем, какой она должна быть. Не хотелось просто брать и закрывать библиотеку, оставляя доступ только по подписке, или делать freemium-модель, где часть модов стала бы платной.

Модификации получились специфичными на уровне самой концепции – подход, где все можно сделать одной строчкой кода – это одновременно и её суперсила, и слабость. И тут было важно найти честную, прозрачную и подходящую модель, которая позволит системе развиваться дальше.

Так вот, я её нашел. Спешу поделиться)

Все моды останутся бесплатными, но появится подписка на инструменты для ускорения работы с ними. Это касается:
🤩 Расширенных настроек в генераторе кода (например, стилей, логики поведения, ограничений и др.)
🤩 Шаблонов примеров, которые можно скопировать к себе на сайт
🤩 Продвинутых модулей (сложных системных модификаций, на данный момент — для личного кабинета)

Подписка подойдет тем, кто регулярно собирает проекты на Zero, делает сложные коммерческие проекты и хочет экономить часы ручной настройки.

При этом базу по-прежнему можно использовать бесплатно – например, если вы учитесь или просто хотите попробовать моды. Сам код, естественно, продолжит работать независимо от наличия подписки)

Оформить подписку можно будет с 10 марта (вт). До этого момента всё остаётся, как сейчас (тестирую финальные детали). Со стоимостью и условиями можно ознакомиться здесь: https://postnikovmd.com/mods/pricing

Переходим от подборки решений к профессиональному инструменту для регулярной работы ⭐️

Дальше – только интереснее)

Максим Постников | Дизайн, Тильда и модификации

🦾 Почему модификации получились именно такими?

Помните пост, где я показывал, на каком цикле кривой находился сервис полгода назад?

Тогда было интересно, как развернутся события дальше, и теперь, оглядываясь назад, понимаю, что за это время продукт вырос и стал намного более серьезным. Сейчас это уже больше, чем просто моды – это скорее мини-фреймворк в Тильде, который позволяет выйти за рамки её функционала, оставаясь внутри редактора.

Поэтому хочу рассказать вам о том, что долгое время оставалось за кулисами «авторской библиотеки»)

⌨️ Каждый мод — конструктор
Я никогда это так не называл, но в этом главная фишка и особенность модификаций. Любой дизайн в Zero можно превратить в функциональный компонент, причём способов сборки — тысячи.

Библиотека закрывает практически весь must-have функционал при создании сайтов:
• слайдеры
• вкладки
• аккордеоны
• автоскейл
• формы
• хэдеры
• поп-апы
• анимации и др.

Этого вполне хватает, чтобы создавать коммерческие проекты, когда сайт должен не только эффектно выглядеть, но и работать стабильно при любых сценариях.

Модификации также можно комбинировать друг с другом, оживляя на Тильде сложные дизайн-конструкции.

⌨️ Единая логика установки
Библиотека спроектирована по единому подходу, с помощью которого моды намного легче использовать и повторять из проекта в проект:
• Установка в <head> сайта
• Настройка зеро в редакторе (сверстать, создать группы Object, добавить классы и ссылки)
• Добавление кода в T123.

Если однажды разобрались в логике, дальше всё работает по одному и тому же принципу – и задачи, которые требуют долгой разработки, решаются внутри редактора за минуты)

🚫 Инженерное качество кода
Сок для разработчиков – чистый Javascript с минимальными зависимостями от сторонних библиотек.

В центре внимания – ядро модификаций, которое загружает нужный мод после его вызова на страничке. Внутри каждого мода – механики, благодаря которым они корректно работают даже в сложной вёрстке и нестандартных сценариях.

Кроме того, в библиотеку встроен диагностический модуль ?showerrors для поиска проблем прямо на сайте, а также скрытые обработчики ошибок, которые позволяют модификациям работать даже с ошибками в вёрстке. Код оптимизирован для максимальной производительности и переиспользования даже в сложных проектах.

Именно так и получилась целая система, которую можно переносить из проекта в проект. Она требует аккуратности в сборке, но зато дает возможности следующего уровня, которых нет в самой Тильде. И чем лучше вы понимаете её логику, тем сильнее она начинает работать на вас ⚡️

Ссылка на модификации:
https://postnikovmd.com/mods

Максим Постников | Дизайн, Тильда и модификации

🔥 Отметка в тысячу пройдена!

Друзья, хочу сказать спасибо каждому, кто рядом, кто следит и поддерживает)

Когда я только начинал, в канале было 5 человек, моих близких. Всё это время я просто делал и делился с вами мыслями, видением и результатами. Никогда не закупал рекламу, не использовал накрутку, не делал розыгрыши за подписку и тд. И я очень рад, что моя работа вызывает по-настоящему живой интерес и создаёт ценность)

Спасибо каждому из вас, что делитесь и рекомендуете, крепко обнимаю) 🫂

И плюс одно мини-достижение в жизни: канал вырос до 1 000 человек исключительно органически 🤍

Максим Постников | Дизайн, Тильда и модификации

✈️🟩 Новый раздел: Поддержка модификаций

Двигаемся дальше)
По мере роста библиотеки всё больше человек начинает использовать её в работе. А значит, чаще возникает один и тот же вопрос – что делать, если что-то не работает?

И конечно я, как автор продукта, уже не всегда могу помогать всем точечно. Не мог бы, если бы не знал, что можно по-другому)

В компании, где я работаю, есть такой замечательный подход – self-service. Мы внедряем в крупный бизнес системы, где пользователи могут самостоятельно решать проблемы и быстро находить ответы на свои вопросы. Понимая, что со временем нагрузка вырастет, я решил идти по такому же пути в модификациях.

Помните ?showerrors, документацию и видеоинструкции? Всё это с самого начала было частью одного подхода – сделать модификации понятными, предсказуемыми и повторяемыми в работе. Я кропотливо проектировал единую логику, писал документацию и добавлял диагностику ошибок, чтобы результатами моего труда могли пользоваться другие, и затем – улучшать то, что делал я.

Сегодня я завершил полный контур, который позволит вам самостоятельно разобраться в механиках библиотеки и сделать её мощным рабочим инструментом. Ведь понимание – сила)

Теперь у вас есть:
• Инструкции и видео по установке
• Модуль самостоятельной диагностики ?showerrors
• Ответы и решения по распространённым проблемам
• Подробная документация к модификациям
• 80+ примеров, которые можно скопировать к себе в проект
• И наконец-то, понятный и прозрачный пошаговый алгоритм, что делать, когда модификация не работает)

Его можно найти на сайте в разделе «Поддержка»: https://postnikovmd.com/mods/support

Если однажды поймёте логику модификаций, сможете делать с ними невероятные и ценные проекты) Всячески буду вам в этом помогать 🦾

Максим Постников | Дизайн, Тильда и модификации

💎 Личный кабинет в Zero-блоке

Добро пожаловать в один из самых продвинутых модулей библиотеки! Теперь личный кабинет — это ещё один функциональный компонент в Zero, с которым можно делать намного больше, чем в стандартных страницах Тильды.

Новый модуль отлично подойдёт для интернет-магазинов, проектов с курсами и закрытым контентом ⚡️

Рассказываю, что внутри:

➕ Страница авторизации в Zero‑блоке
Позволяет собрать свою страницу входа, регистрации и сброса пароля в личном кабинете.

Модификация отлично работает как на отдельной странице, так и во всплывающем окне. И при создании аккаунта теперь можно сразу указывать нужный пароль — без отправки на почту временного. Больше деталей показал в превью)

Модификация: Страница авторизации в Zero-блоке

➕ Настройки профиля в Zero‑блоке
Мод, с которым стандартную страничку профиля можно аккуратно кастомизировать под стиль проекта, если того пожелает заказчик)

Поддерживает все стандартные настройки: имя, email, телефон, язык, позволяет подгружать свою аватарку и изменять текущий пароль.

Модификация: Настройки профиля в Zero-блоке

➕ Страница курсов в Zero‑блоке
Или же главная страница, куда может попасть пользователь после авторизации)
Одна из самых интересных по настройке модификаций: в редакторе Zero создаётся один ряд карточек, после чего мод автоматически клонирует их под доступное количество курсов и выстраивает сетку внутри блока.

Модификация: Страница курсов в Zero-блоке

➕ История заказов/покупок в Zero‑блоке
Не так давно Тильда выпустила личный кабинет интернет-магазина (ЛКИМ) с красивым интерфейсом и возможностью просмотра истории заказов и покупок. Модификация переносит этот функционал в Zero, чтобы вы могли оформить всё в едином стиле)

Модификация: История заказов/покупок в Zero-блоке

➕ Своя кнопка выхода из личного кабинета
Небольшая, но полезная модификация, которая позволяет задать кастомную ссылку выхода из ЛК и использовать её в кнопках в Zero.

Модификация: Своя кнопка выхода из личного кабинета

➕ Скрытие стандартной иконки профиля
Ещё одна модификация, которая скрывает стандартную иконку вызова меню в личном кабинете — тот самый фиксированный кружок, который появляется после авторизации. Пригодится при кастомизации ЛК)

Модификация: Скрытие стандартной иконки профиля

Новые модификации уже доступны в библиотеке в разделе «Личный кабинет». И, конечно, к ним есть подробные видеоинструкции, чтобы было проще во всём разобраться.

Завершаю по классике — приятной работы) Сделано с душой и вдохновением 🤍

Максим Постников | Дизайн, Тильда и модификации

🔥 Долгожданное пополнение библиотеки

Открыл доступ к 6 новым модификациям для Zero-блоков. Среди них — тот самый продвинутый слайдер, гравитация и другие полезные моды и эффекты. Рассказываю, что нового:

➕ Продвинутый слайдер в Zero‑блоке
Слайдер, для которого почти нет технических ограничений. И пример, как аккуратно вписать swiper.js в Тильду. Поддерживает большое количество настроек, бесконечный скролл, трансформации, эффекты и многое другое.

Самое приятное – точки пагинации. Достаточно сверстать их в Zero-блоке и задать первой точке стиль активного состояния. Никаких настроек в коде, всё в макете.
Если однажды поняли принцип, оторваться не сможете)

Модификация: Продвинутый слайдер в Zero‑блоке

➕ Гравитация объектов в Zero-блоке
Те самые падающие элементы с главного экрана, но с одним большим отличием. В моде добавить гравитацию можно любому элементу – шейпу, картинке, кнопке или даже тексту. Просто расположить их в нужном месте блока, задать им класс – и они начнут падение оттуда.

Также можно вписать все элементы в границы определенного шейпа. Тогда они будут «кувыркаться» внутри него. Тоже по классу)

Модификация: Гравитация объектов в Zero-блоке

➕ Копирование текста в Zero‑блоке
Мод, который однажды мне пригодился в генераторе кода. Но только теперь я расширил его и сделал несколько сценариев – копировать текст можно из кнопки, отдельного контейнера или любого другого элемента, отображать подсказку и задавать своё сообщение успеха.

Модификация: Копирование текста в Zero‑блоке

➕ Показ/скрытие блоков по клику
Тривиальная модификация кнопки «Показать больше» с нетривиальным исполнением. Позволяет разворачивать по клику как один блок, так и несколько, причем работает не только с Zero, но и со стандартными блоками.

Модификация: Показ/скрытие блоков по клику

➕ Анимация перемешивания текста
Ещё одна акцентная анимация для текста: хорошо работает в заголовках, коротких фразах, интро и местах, где хочется добавить динамику.

Модификация: Анимация перемешивания текста

➕ Эффект конфетти в Zero‑блоке
Позволит порадовать вас и ваших пользователей) В отличие от кнопок-конфетти, этот эффект работает внутри шейпа-контейнера, что добавляет больше погружения и делает эффект заметным. Можно настроить свои цвета, указав их в генераторе через запятую.

Модификация: Эффект конфетти в Zero‑блоке

Новые модификации уже доступны в библиотеке. И без обновления текущих модов тоже не обошлось. Напишу про них отдельное сообщение в комментариях 🦾

В общем, приятной работы! Делитесь своими впечатлениями)

Максим Постников | Дизайн, Тильда и модификации