Содержание:
Как я построил фреймворк для разработки на Тильде или SaaS, который помогает тысячам дизайнеров
Два года назад я начал собирать библиотеку модификаций для Тильды и прошел путь от первой строчки кода до подписки и поддержки тысяч пользователей. В статье поделюсь, как всё устроено изнутри – архитектура, дизайн, пользовательский опыт и сам продукт, и расскажу, что из этого получилось.
Концепция: библиотека модификаций для Тильды
Платформа внутри чужой платформы. Как это работает?
Инженерный дизайн: когда решить задачу важнее, чем продать
Пользовательский опыт. Каково это – работать с продуктом?
Монетизация. Подписка, при которой код остаётся открытым
Сколько стоило создать такой продукт? В попугаях и чашках кофе
Отличный продукт, но хрупкий бизнес. Что с модификациями сейчас?
#1 Концепция: библиотека модификаций для Тильды
Я руковожу разработкой корпоративных сайтов в ИТ-компании и отвечаю за их дизайн и архитектуру. Один из проектов, которым я занимался на работе – сайт на две тысячи страниц, собранный на Тильде и 1С-Битриксе. Связку двух платформ мы выбрали специально – Тильда позволяла быстро собирать уникальные страницы, Битрикс – размещать и редактировать динамический контент в CMS под одним доменом.
Стандартных возможностей для такого масштаба не хватало, а классические js-библиотеки работали на Тильде нестабильно, поэтому недостающий функционал пришлось писать с нуля – кастомные слайдеры, вкладки, анимации и другие компоненты.
По итогам проекта у меня накопился десяток таких скриптов, которыми я регулярно пользовался в работе, и появилась идея собрать из них библиотеку. На Тильде подобные инструменты уже были и назывались каталогами модификаций, но все они предлагали копируемые сниппеты – отдельного фреймворка на тот момент не было.
Мне нравилось, как работают зарубежные библиотеки вроде Finsweet, и идея сделать подобный инструмент для Тильды меня искренне грела. В ней же заключалась и основная сложность: код должен стабильно работать при любом дизайне, внутри недокументируемой платформы и чужой среды исполнения. И отдельный вызов – собрать его в продукт, которым дизайнеры будут пользоваться ежедневно.
Как я решил эту задачу архитектурно, продуктово, и что из этого вышло, рассказываю по полочкам дальше.
Стандартных возможностей для такого масштаба не хватало, а классические js-библиотеки работали на Тильде нестабильно, поэтому недостающий функционал пришлось писать с нуля – кастомные слайдеры, вкладки, анимации и другие компоненты.
По итогам проекта у меня накопился десяток таких скриптов, которыми я регулярно пользовался в работе, и появилась идея собрать из них библиотеку. На Тильде подобные инструменты уже были и назывались каталогами модификаций, но все они предлагали копируемые сниппеты – отдельного фреймворка на тот момент не было.
Мне нравилось, как работают зарубежные библиотеки вроде Finsweet, и идея сделать подобный инструмент для Тильды меня искренне грела. В ней же заключалась и основная сложность: код должен стабильно работать при любом дизайне, внутри недокументируемой платформы и чужой среды исполнения. И отдельный вызов – собрать его в продукт, которым дизайнеры будут пользоваться ежедневно.
Как я решил эту задачу архитектурно, продуктово, и что из этого вышло, рассказываю по полочкам дальше.
#2 Платформа внутри чужой платформы. Как это работает?
Библиотека представляет из себя конструктор функциональных компонентов, которые собираются на основе любого дизайна и верстки. Она закрывает практически весь маст-хэв функционал для коммерческих проектов:
Всего в библиотеке 36 уникальных модификаций или 60, если учитывать их вариации. Они работают по единому принципу: установка библиотеки в <head> сайта → настройка блока в Тильде → вызов мода mod.init(selector, params).
Для быстрой настройки на сайте есть генератор кода – он позволяет получить строку инициализации с необходимыми параметрами, указав их в соответствующих полях.
- компоненты: слайдеры, вкладки, аккордеоны, мультиформы, прелоадеры и др.
- анимации и эффекты для карточек, текстов и отдельных элементов;
- личный кабинет с авторизацией, настройками профиля, курсами и историей заказов;
- интернет-магазин: каталог, карточка товара, похожие товары, корзина и избранное.
Всего в библиотеке 36 уникальных модификаций или 60, если учитывать их вариации. Они работают по единому принципу: установка библиотеки в <head> сайта → настройка блока в Тильде → вызов мода mod.init(selector, params).
Для быстрой настройки на сайте есть генератор кода – он позволяет получить строку инициализации с необходимыми параметрами, указав их в соответствующих полях.
Каталог модификаций
Архитектура сервиса
Продукт работает в четырех контурах:
- Библиотека – сами модификации, которые пользователи подключают через CDN: ядро mods.min.js добавляется в <head> сайта и автоматически загружает используемые модификации после их вызова на странице.
- Сайт – веб-приложение с инструкциями, генератором кода и личным кабинетом. Работает поверх Тильды: платформа предоставляет сами страницы, а логика и интерфейс работают отдельно – по тому же принципу, что и библиотека.
- Бэк – личный кабинет, формы, платёжные интеграции – специально делегированы Тильде. Собственная часть отведена под хостинг и тестовую среду: на ней лежат копии кода сервиса и библиотеки, на которые можно переключиться служебным параметром с любого сайта.
- Расширение – тонкий клиент, встраивающий каталог модификаций в редактор Тильды. Работает отдельно от библиотеки и даёт пользователю быстрый доступ к модам. Поставляется через Chrome Web Store.
Архитектура сервиса
Всего под сопровождением 31 тысяча строк кода, большая часть из которых приходится на библиотеку (71%). Код написан на чистом JavaScript и CSS без препроцессоров и заточен под работу с Тильдой.
Библиотека вместо каталога сниппетов
Сниппеты для Тильды – большие и неповоротливые. Подключать их неудобно: нужно постоянно следить за правильностью селекторов, отсутствием конфликтов с другими модами, и при каждом обновлении пересобирать код вручную. К тому же, для каждого нового блока весь код копируется целиком, что добавляет странице избыточный вес.
Я решил отойти от привычной на рынке Тильды схемы и использовать модульную архитектуру. Смысл такой: пользователь добавляет скрипт в <head> сайта, и тот автоматически загружает используемые модификации и модули после их вызова на странице.
Ядро видит вызов, достаёт из реестра нужный модуль, подгружает его с CDN и запускает в браузере пользователя после готовности DOM Тильды. Если мод на странице не вызван, его код не загружается вообще. Это даёт экономию веса, единый паттерн запуска, комбинаторику, и главное – возможность масштабировать продукт вокруг ядра. При общем весе в 1,3 МБ одна установка обходится всего в 26 КБ (2%).
Я решил отойти от привычной на рынке Тильды схемы и использовать модульную архитектуру. Смысл такой: пользователь добавляет скрипт в <head> сайта, и тот автоматически загружает используемые модификации и модули после их вызова на странице.
Ядро видит вызов, достаёт из реестра нужный модуль, подгружает его с CDN и запускает в браузере пользователя после готовности DOM Тильды. Если мод на странице не вызван, его код не загружается вообще. Это даёт экономию веса, единый паттерн запуска, комбинаторику, и главное – возможность масштабировать продукт вокруг ядра. При общем весе в 1,3 МБ одна установка обходится всего в 26 КБ (2%).
Модули библиотеки
Единый паттерн установки
Модификации вызываются по единому принципу: mod.init(selector, params)
Селектор ограничивает область работы конкретным блоком, параметры регулируют поведение и стили, а состояния хранятся в отдельных неймспейсах так, что моды не конфликтуют друг с другом на одной странице.
На практике инициализация выглядит так:
Селектор ограничивает область работы конкретным блоком, параметры регулируют поведение и стили, а состояния хранятся в отдельных неймспейсах так, что моды не конфликтуют друг с другом на одной странице.
На практике инициализация выглядит так:
slider.init('.uc-slider', { loop: true });
tabs.init('.uc-tabs', { transition: 300, hover: true });Такой принцип легко запомнить и повторить самостоятельно. Освоив один мод, пользователь может воспроизвести по той же механике любой другой. Модификации работают и в связке – ядро оркестрирует порядок их запуска через пользовательские события <mod>init-<id>, позволяя собирать слайдеры во вкладках, аккордеоны в поп-апах и многое другое.
Сайт и расширение тоже собраны по единому принципу. Это долгосрочная инвестиция на входе, которая позволяет держать разработку под контролем – для выпуска новой модификации мне достаточно написать и залить код на CDN, добавить его в конфиг ядра и опубликовать на сайте вместе с документацией.
Сайт и расширение тоже собраны по единому принципу. Это долгосрочная инвестиция на входе, которая позволяет держать разработку под контролем – для выпуска новой модификации мне достаточно написать и залить код на CDN, добавить его в конфиг ядра и опубликовать на сайте вместе с документацией.
Реверс-инжиниринг недокументированного движка
Самое сложное в разработке для Тильды – полное отсутствие публичной документации. Когда пишешь фреймворк под классический стек, достаточно учитывать все возможные сценарии, когда пишешь под Тильду – приходится адаптировать код в движок платформы, разбирая его минифицированный легаси и встраиваясь в него методом эксперимента.
Так, например, у Тильды почти полностью отсутствует серверный рендеринг – вся отрисовка выполняется платформенным JS в браузере пользователя. Вовремя синхронизироваться с ним, не используя костыли – задача с тремя звёздочками. Чтобы найти точки сцепления и завязать на них свой API, мне пришлось разобрать устройство Тильды практически до атомов.
В итоге библиотека получила почти полное сцепление с движком – его обновления не ломают код, так как он построен на родных функциях Тильды и органично встраивается в жизненный цикл страницы. Именно это и дало продукту то, во что не смогли сниппеты, работающие поверх платформы – устойчивость.
Спойлер: на реверс-инжиниринг Тильды у меня ушло два года.
Так, например, у Тильды почти полностью отсутствует серверный рендеринг – вся отрисовка выполняется платформенным JS в браузере пользователя. Вовремя синхронизироваться с ним, не используя костыли – задача с тремя звёздочками. Чтобы найти точки сцепления и завязать на них свой API, мне пришлось разобрать устройство Тильды практически до атомов.
В итоге библиотека получила почти полное сцепление с движком – его обновления не ломают код, так как он построен на родных функциях Тильды и органично встраивается в жизненный цикл страницы. Именно это и дало продукту то, во что не смогли сниппеты, работающие поверх платформы – устойчивость.
Спойлер: на реверс-инжиниринг Тильды у меня ушло два года.
Вспомогательные функции библиотеки
Дистрибуция и версионирование
Модификации загружаются с CDN, поэтому обновления доходят до всех сайтов автоматически (в отличие от сниппетов, где каждое обновление приходится копировать и вставлять вручную). При отказе основного источника срабатывает фолбэк на резервный, а при недоступности обоих у пользователя остаётся возможность статичной вставки кода.
Синхронизация обновлений
Библиотека версионируется: при крупных обновлениях код переводится на новую ветку tilda@<version> – это защищает уже установленные модификации от ошибок совместимости. Они поддерживаются параллельно и не сливаются: переход между версиями остаётся решением пользователя, чтобы не создавать скрытых поломок.
Единственный риск такого подхода – так же, как и обновления, до всех могут доходить и ошибки. Приходится всё внимательно проверять до публикации и раскатывать на тестовой среде.
Единственный риск такого подхода – так же, как и обновления, до всех могут доходить и ошибки. Приходится всё внимательно проверять до публикации и раскатывать на тестовой среде.
Как устроена разработка и публикация
Весь процесс построен так, чтобы рост библиотеки не тянул за собой рост трудозатрат, и я мог вести ее самостоятельно. Модификации пишутся по единому скелету и правилам – так, чтобы вернувшись к ним через год, их можно было быстро понять и доработать.
Тестируется написанный код прямо в проде. Тильда не позволяет организовать отдельную тестовую среду, но я нашёл изящный путь: по служебному параметру в адресе библиотека перенаправляет загрузку модификаций на свой сервер, и стендом становится любая страница. Это позволяет с легкостью тестировать как новые модификации на своей верстке, так и дебажить ошибки на сайтах пользователей.
Готовый код минифицируется и заливается в хранилище, откуда его подтягивает CDN. Для выпуска модификаций у меня есть специальная связка скиллов: code → minify → publish → docs. На создание одной модификации с её помощью у меня уходит 3−5 дней.
Тестируется написанный код прямо в проде. Тильда не позволяет организовать отдельную тестовую среду, но я нашёл изящный путь: по служебному параметру в адресе библиотека перенаправляет загрузку модификаций на свой сервер, и стендом становится любая страница. Это позволяет с легкостью тестировать как новые модификации на своей верстке, так и дебажить ошибки на сайтах пользователей.
Готовый код минифицируется и заливается в хранилище, откуда его подтягивает CDN. Для выпуска модификаций у меня есть специальная связка скиллов: code → minify → publish → docs. На создание одной модификации с её помощью у меня уходит 3−5 дней.
#3 Инженерный дизайн: когда решить задачу важнее, чем продать
Тильда – платформа для дизайнеров и маркетологов, которые во многом с кодом на «вы». Поэтому фреймворк – только половина дела, его нужно грамотно донести до аудитории.
UX, который ведёт к решению задачи
Дизайн продукта устроен так, чтобы библиотекой можно было пользоваться с минимальным трением. Каждый экран отвечает на вопрос «что делать дальше»: как сверстать блок, настроить поведение модификации и что делать, если код не работает.
К каждой модификации прилагается подробная инструкция, как подготовить вёрстку в Тильде, разметить элементы и настроить код. В среднем она занимает 5 минут внимательного чтения – это больше, чем «скопировал-вставил» у сниппетов, но компенсируется тем, что вариантов вёрстки у фреймворка – примерно бесконечность.
К каждой модификации прилагается подробная инструкция, как подготовить вёрстку в Тильде, разметить элементы и настроить код. В среднем она занимает 5 минут внимательного чтения – это больше, чем «скопировал-вставил» у сниппетов, но компенсируется тем, что вариантов вёрстки у фреймворка – примерно бесконечность.
Инструкции к модификациям
Главное продуктовое ядро – генератор кода. Пользователь вводит в него нужные значения и получает готовый код для вставки в проект. Генератор выполняет роль мостика между конструктором и инженерным инструментом – приводит значения к валидному синтаксису и показывает подсказки к параметрам.
При необходимости строчку *.init() можно также написать самому по доке ниже – её короткая версия располагается на той же странице. Это делает продукт доступным для дизайнеров и разработчиков одновременно, несмотря на их разные вселенные.
При необходимости строчку *.init() можно также написать самому по доке ниже – её короткая версия располагается на той же странице. Это делает продукт доступным для дизайнеров и разработчиков одновременно, несмотря на их разные вселенные.
Генератор кода
У библиотеки также есть каталог примеров, подробная документация с разбором механик и отдельный раздел с пошаговым алгоритмом поддержки. Каждый из них вписывается в рабочий процесс там, где пользователь об этом задумывается:
Интерфейс показывает пользователю только то, что относится к его текущей задаче, и скрывает нерелевантное с помощью динамических компонентов. Они существуют в нескольких состояниях, которые определяются по статусу пользователя и свойств конкретной модификации.
Краевые сценарии проработаны так же детально, как и основные: некорректный ввод, ошибка входа, статус оплаты, 404, истечение подписки и пр. Принципиальный момент – дизайн всегда ведет из ошибки к решению и замыкает пользовательский путь.
- Пример модификации и туториал его сборки находится рядом с инструкцией по установке («как настроить?» и «что получится?»)
- Параметры для самостоятельной настройки и подробная дока – под генератором («как работает?» и «как доработать?»)
- FAQ с распространенными проблемами и переход в поддержку – в конце каждой страницы («почему не работает?» и «как исправить?»)
- Похожие модификации и карусель с примерами – там, где пользователь решил свою задачу («что ещё можно?» и «как?»)
Интерфейс показывает пользователю только то, что относится к его текущей задаче, и скрывает нерелевантное с помощью динамических компонентов. Они существуют в нескольких состояниях, которые определяются по статусу пользователя и свойств конкретной модификации.
Краевые сценарии проработаны так же детально, как и основные: некорректный ввод, ошибка входа, статус оплаты, 404, истечение подписки и пр. Принципиальный момент – дизайн всегда ведет из ошибки к решению и замыкает пользовательский путь.
Сценарии использования продукта (User Flow)
Дизайн-система в выдержанном стиле
Я специально отказался от дизайнерских «вау-эффектов», чтобы сфокусировать внимание пользователя на решении задачи. Интерфейс выполнен в светлой теме с единственным цветовым акцентом, плотной типографикой и тонкими линиями, обрамляющими страницу подобно инженерному чертежу. В сочетании с технической философией продукта он как бы сообщает: «это профессиональный инструмент, на который можно положиться».
Несмотря на сдержанность дизайна, он не скучный – яркие для пользователя моменты появляются дозированно. Так, например, акцентные элементы сопровождаются анимированным liquid-градиентом, движение курсора вызывает рукописный след, ошибки «переворачиваются» в решения, а при покупке появляются конфетти – как момент радости и облегчения о принятом решении. Они подогревают интерес и желание приблизиться к продукту, подчеркивая, что он сделан с душой и вдохновением.
В интерфейсе нет тёмных паттернов, манипуляций и FOMO – копирайт мягко подсказывает и направляет пользователя, попутно объясняя ему механики и обучая работе с модами. Я бы назвал эту тональность искренней сдержанностью –— она помогает пользователю прийти к решению, и ничего лишнего.
Несмотря на сдержанность дизайна, он не скучный – яркие для пользователя моменты появляются дозированно. Так, например, акцентные элементы сопровождаются анимированным liquid-градиентом, движение курсора вызывает рукописный след, ошибки «переворачиваются» в решения, а при покупке появляются конфетти – как момент радости и облегчения о принятом решении. Они подогревают интерес и желание приблизиться к продукту, подчеркивая, что он сделан с душой и вдохновением.
В интерфейсе нет тёмных паттернов, манипуляций и FOMO – копирайт мягко подсказывает и направляет пользователя, попутно объясняя ему механики и обучая работе с модами. Я бы назвал эту тональность искренней сдержанностью –— она помогает пользователю прийти к решению, и ничего лишнего.
Визуальный стиль
Консистентность интерфейса поддерживается с помощью дизайн-системы. В Фигме это набор токенов, правил и компонентов, в Тильде – css-переменные и Alias-блоки. Ритм отступов, скруглений и типографики кратен 4px, глубина строится фоном и линиями, а для переходов используется плавный 300ms ease-in-out.
Под каждую страницу проработано 4 версии адаптивов: мобильная 360px и компьютерные 1280, 1440 и 1920px. На планшетах страница пропорционально уменьшает компьютерную версию с помощью расширенного автоскейла – моей же модификации.
Такая система позволяет собирать новые страницы за 1−2 дня, переиспользуя существующие компоненты и стили. Все макеты и вёрстку я держу в порядке и регулярно обновляю.
Под каждую страницу проработано 4 версии адаптивов: мобильная 360px и компьютерные 1280, 1440 и 1920px. На планшетах страница пропорционально уменьшает компьютерную версию с помощью расширенного автоскейла – моей же модификации.
Такая система позволяет собирать новые страницы за 1−2 дня, переиспользуя существующие компоненты и стили. Все макеты и вёрстку я держу в порядке и регулярно обновляю.
Дизайн-проект в Figma
Сайт на собственных модах – продуктовое демо
Одно из главных преимуществ продукта – технически он построен на моей же библиотеке. Сайт сам ненавязчиво демонстрирует работу модов, используя их в своих компонентах – личном кабинете, слайдерах с рекомендациями, аккордеонах FAQ, анимациях, подсказках и многом другом. Чтобы далеко не ходить: главный экран библиотеки сразу же приветствует пользователя падающими под гравитацией иконками собственных модификаций.
Всё это приправлено каталогом примеров, собранных под распространенные сценарии B2B SaaS: слайдер с карточками возможностей, тарифная сетка с переключателем периода, бегущая строка с логотипами, многоуровневый хэдер, анимированные заголовки, FAQ и др. Они выдержаны в стиле самого продукта – так дизайн формирует узнаваемый стиль и задаёт профессиональную планку, в которую он целится.
Примеры модификаций
Браузерное расширение как тонкий клиент
И последнее, но не менее элегантное – расширение Chrome. Оно добавляет в редактор Тильды вкладку с каталогом модификаций, поиском по библиотеке и вставкой кода на сайт. На опубликованных сайтах расширение выполняет роль дебаггера – подсвечивает ошибки, возникшие при установке, и предлагает рекомендации по их исправлению.
Расширение Chrome
По сути это тонкий слой, который переносит взаимодействие с продуктом в рабочую среду пользователя. Он не добавляет новый функционал, а надстраивается над ядром библиотеки (такое возможно именно благодаря выбранной архитектуре). Расширение построено на Manifest V3, занимает 850 строк кода и совсем не требует прав. Меньше поддержки, проще модерация в Chrome Web Store, и пользователям удобно.
#4 Пользовательский опыт. Каково это – работать с продуктом?
Целевая аудитория и ее пользовательский путь
Инженерный продукт в свободной среде – задача со звездочкой не только для автора, но и для пользователей. При таких условиях, чтобы работать с библиотекой, дизайнер должен быть подготовленным, иначе продукт будет требовать персонального сопровождения.
Исходя из этого, у продукта три целевых сегмента:
Исходя из этого, у продукта три целевых сегмента:
- Дизайнер-фрилансер. Строит сайты на Тильде и упирается в потолок штатных блоков; писать код с нуля не готов, но редактор знает хорошо. Это массовый сегмент и источник основной части выручки.
- Агентство или студия с потоком проектов. Модификации встраиваются прямо в рабочий процесс команды, где важны скорость и предсказуемость. Целевой сегмент, но самый немногочисленный.
- Опытный верстальщик. Любит разбираться сам, читает доку и использует диагностику и примеры-шаблоны. Самые лояльные пользователи тут.
Персоны и их JTBD
Наравне с ними есть три антиперсоны — тот, кто ждёт магии и не готов разбираться, новичок без базы в Тильде и вайбкодер, который «сделает сам за 5 минут». Продукт их не отсекает, а скорее под них просто не подстраивается.
Путь пользователя выглядит примерно так: поиск мода → изучение инструкции → настройка блока в Тильде → генератор кода → копирование вызова в Тильду → публикация страницы. Если при установке у него возникают проблемы, сценарий расширяется доп. веткой с поддержкой.
Путь пользователя выглядит примерно так: поиск мода → изучение инструкции → настройка блока в Тильде → генератор кода → копирование вызова в Тильду → публикация страницы. Если при установке у него возникают проблемы, сценарий расширяется доп. веткой с поддержкой.
Полный путь пользователя (CJM)
Что интересно – основная работа пользователя идет в редакторе Тильды (верстка, настройка мода и вставка кода), и именно там возникает больше всего сложностей. Пользователи обращаются ко мне с проблемами, до которых библиотека уже не дотягивается, поэтому каждый случай приходится разбирать отдельно.
Как ведут себя пользователи: благодарность vs запрос на сервис
Пользователи любят продукт: примерно треть сообщений в телеграм-канале и ЛС – благодарности за крутую библиотеку. Но несмотря на это, доминирующий сценарий обращений – «сделал по инструкции, но не работает».
Модификации поддерживают огромное количество сценариев, и чтобы найти среди них проблему, мне часто приходится подключаться к отладке вручную. В 8 случаях из 10 причина оказывается не в самом моде, а в вёрстке и банальной невнимательности. Всё потому, что Тильда обещает «сайт без кода», и массовый сегмент приходит в продукт с таким же ожиданием – пользователи, столкнувшиеся с проблемой, часто не могут описать её в баг-репорте, не читают доку и ожидают, что поддержка (как и принято у самой Тильды) подключится и всё починит.
Отдел поддержки я позволить себе не могу – он обошелся бы слишком дорого, поэтому я построил контур self-service, чтобы пользователи могли самостоятельно решать свои проблемы. Он рассчитан на тех, кто готов разбираться, но спотыкается на конкретном шаге: его задача – помочь найти решение с минимальными усилиями, двигаясь по воронке: инструкция → диагностика → пример → дока → платная помощь.
Тем, кто по ней идти не готов, он, конечно, помочь не сможет – как соло-автор, я не могу обслуживать весь поток, приходящий за сервисной моделью (для этого в сутках мне понадобился бы 25-й час).
Модификации поддерживают огромное количество сценариев, и чтобы найти среди них проблему, мне часто приходится подключаться к отладке вручную. В 8 случаях из 10 причина оказывается не в самом моде, а в вёрстке и банальной невнимательности. Всё потому, что Тильда обещает «сайт без кода», и массовый сегмент приходит в продукт с таким же ожиданием – пользователи, столкнувшиеся с проблемой, часто не могут описать её в баг-репорте, не читают доку и ожидают, что поддержка (как и принято у самой Тильды) подключится и всё починит.
Отдел поддержки я позволить себе не могу – он обошелся бы слишком дорого, поэтому я построил контур self-service, чтобы пользователи могли самостоятельно решать свои проблемы. Он рассчитан на тех, кто готов разбираться, но спотыкается на конкретном шаге: его задача – помочь найти решение с минимальными усилиями, двигаясь по воронке: инструкция → диагностика → пример → дока → платная помощь.
Тем, кто по ней идти не готов, он, конечно, помочь не сможет – как соло-автор, я не могу обслуживать весь поток, приходящий за сервисной моделью (для этого в сутках мне понадобился бы 25-й час).
Self-service – первая линия поддержки
Первое, что есть у пользователя, когда он сталкивается с проблемой – режим диагностики. Он встраивается прямо в код модификаций и отлавливает большую часть ошибок (блок не найден; параметры противоречат друг другу; количество элементов не совпадает и т. д.). Каждую из них библиотека логирует в консоли и записывает в реестр, где они собираются и возвращаются в понятном для пользователя виде с подсказками параметров и рекомендациями по исправлению.
Диагностика со списком возникших на странице ошибок
По сути это интерфейс отладки с возможностью просмотра всех ошибок и параметров модификаций. Он охватывает 121 сценарий, собранный за два года работы с библиотекой и доставляется через отдельный скрипт при наличии в адресе ?showerrors или через браузерное расширение.
Выход диагностики был первым подобным решением на рынке Тильды. В первые три месяца мне приходилось напоминать о функции почти ежедневно, зато спустя год количество запросов уменьшилось втрое. Но несмотря на это, у диагностики есть предел – всё, что нельзя зашить в коде (например, нестандартную верстку), она определить не может.
Если с помощью диагностики проблему решить не удается, пользователь проходит по воронке дальше, где его ждут видеоинструкция и примеры. Для этого на канале есть более двух часов подробного контента с разбором собственных примеров, порядка их установки и нюансов, которые сложно передать текстом. Получившийся результат можно скопировать к себе в проект и разобрать, как он устроен изнутри.
Далее в ход идет документация. В ней детально описаны механики каждого мода, приведены инструкции по сборке и собраны все параметры, функции и распространенные ошибки, возникающие при установке. Это последний шаг, который пользователь проходит самостоятельно – к этому моменту у него есть всё, что позволяет решить проблему (ну, или почти).
Выход диагностики был первым подобным решением на рынке Тильды. В первые три месяца мне приходилось напоминать о функции почти ежедневно, зато спустя год количество запросов уменьшилось втрое. Но несмотря на это, у диагностики есть предел – всё, что нельзя зашить в коде (например, нестандартную верстку), она определить не может.
Если с помощью диагностики проблему решить не удается, пользователь проходит по воронке дальше, где его ждут видеоинструкция и примеры. Для этого на канале есть более двух часов подробного контента с разбором собственных примеров, порядка их установки и нюансов, которые сложно передать текстом. Получившийся результат можно скопировать к себе в проект и разобрать, как он устроен изнутри.
Далее в ход идет документация. В ней детально описаны механики каждого мода, приведены инструкции по сборке и собраны все параметры, функции и распространенные ошибки, возникающие при установке. Это последний шаг, который пользователь проходит самостоятельно – к этому моменту у него есть всё, что позволяет решить проблему (ну, или почти).
Документация к аккордеону
Если проблема все равно не решается, это уже случай для моего включения. Для этого есть форма баг-репорта и платной помощи – пользователь может сам выбрать, баг ли это или задача на доработку.
Баги я разбираю бесплатно, поэтому чаще всего пользователи выбирают именно этот вариант, но честности ради выбор всё равно есть – при оставлении баг-репорта нужно поставить галочку «проверил все по алгоритму», что снижает поток нецелевых заявок, когда проблема в невнимательности, а за индивидуальную помощь пользователь платить не готов. Для работы с обращениями у меня есть специальный скрипт – подобно тому, чем пользуются сотрудники службы поддержки.
Баги я разбираю бесплатно, поэтому чаще всего пользователи выбирают именно этот вариант, но честности ради выбор всё равно есть – при оставлении баг-репорта нужно поставить галочку «проверил все по алгоритму», что снижает поток нецелевых заявок, когда проблема в невнимательности, а за индивидуальную помощь пользователь платить не готов. Для работы с обращениями у меня есть специальный скрипт – подобно тому, чем пользуются сотрудники службы поддержки.
Алгоритм поддержки
Затраты на поддержку такой системы небольшие: для каждого нового мода достаточно дополнить реестр ошибок в диагностике, добавить пример, видео и документацию – и дальше ими сможет пользоваться неограниченное количество человек. С учетом того, что в среднем я получал по 100 обращений в месяц, а на разбор каждого могло уходить до часа, это заметный выигрыш: вместо подробного ответа теперь достаточно прикрепить ссылку на решение и короткий вектор к ней.
Со временем количество запросов снизилось в принципе: пользователи стали чаще обращаться к диагностике, документации и даже ИИ, который генерировал ответы на их основе. При этом сократилась и входящая аудитория: личное вовлечение выполняло в продукте функцию маркетинга – чем больше я отвечал, тем больше человек проявляли к библиотеке интерес. Но в основном это были пользователи, которых привлекала бесплатная магия без усилий – с переходом к самообслуживанию часть из них модификациями пользоваться перестала.
Со временем количество запросов снизилось в принципе: пользователи стали чаще обращаться к диагностике, документации и даже ИИ, который генерировал ответы на их основе. При этом сократилась и входящая аудитория: личное вовлечение выполняло в продукте функцию маркетинга – чем больше я отвечал, тем больше человек проявляли к библиотеке интерес. Но в основном это были пользователи, которых привлекала бесплатная магия без усилий – с переходом к самообслуживанию часть из них модификациями пользоваться перестала.
#5 Монетизация. Подписка, при которой код остаётся открытым
Позиционирование и почему появилась подписка
Продукт позиционирует себя как «фреймворк для Тильды, который позволяет выйти за рамки её функционала» и «профессиональный инструмент для регулярной работы».
Технически все это верно: ядро с загрузчиком, единый паттерн установки, комбинаторика, диагностика, оптимизация и др. – в общем, продуманная система, которую можно переносить из проекта в проект. Но пользуются ей иначе – в основном как костылем под разовые задачи.
Почему, спросите вы? Это связано с особенностью рынка Тильды: большая часть пользователей – новички, для которых структурное мышление и код близки к магии. Многие воспринимают модификации как функционал, который Тильда «обещала», но не дала, из-за чего их воспринимаемая стоимость и желание разбираться стремятся к нулю. И если для копируемых сниппетов с этим можно жить (низкая сложность запросов x низкая стоимость поддержки), то фреймворку, обслуживающему более дорогой класс задач, рамку восприятия нужно сдвигать в сторону профи.
Я решил это с помощью ввода монетизации. Задача такая же – отсеять неплатежеспособный спрос на магию и сохранить тех, для кого продукт представляет системную ценность. И то же с поддержкой – отделить вопрос на минуту, по которым меня дергали постоянно, от реальной задачи (тот, кто готов платить, придет с конкретным запросом).
Технически все это верно: ядро с загрузчиком, единый паттерн установки, комбинаторика, диагностика, оптимизация и др. – в общем, продуманная система, которую можно переносить из проекта в проект. Но пользуются ей иначе – в основном как костылем под разовые задачи.
Почему, спросите вы? Это связано с особенностью рынка Тильды: большая часть пользователей – новички, для которых структурное мышление и код близки к магии. Многие воспринимают модификации как функционал, который Тильда «обещала», но не дала, из-за чего их воспринимаемая стоимость и желание разбираться стремятся к нулю. И если для копируемых сниппетов с этим можно жить (низкая сложность запросов x низкая стоимость поддержки), то фреймворку, обслуживающему более дорогой класс задач, рамку восприятия нужно сдвигать в сторону профи.
Я решил это с помощью ввода монетизации. Задача такая же – отсеять неплатежеспособный спрос на магию и сохранить тех, для кого продукт представляет системную ценность. И то же с поддержкой – отделить вопрос на минуту, по которым меня дергали постоянно, от реальной задачи (тот, кто готов платить, придет с конкретным запросом).
Платная граница по усилию как честный механизм
Модификации получились специфичными на уровне самой концепции – подход, где все можно сделать одной строчкой кода, не позволяет полностью закрыть к ним доступ или сделать платной только часть. Нужно было найти честную и прозрачную модель, которая сохранила бы суть фреймворка, и одновременно отвела от него пользователей, не готовых разбираться.
Решение – провести платную границу по снятию ручной работы. Все модификации, их код и базовые настройки остались бесплатными, но появилась подписка на инструменты для ускорения работы с ними. Это касается:
Основную часть библиотеки при этом можно использовать бесплатно. Инструкции, диагностика и дока остаются открытыми так, что пользователь может пройти весь путь до работающей модификации и без подписки. А те, для кого генератор – единственный способ установки, задумываются о покупке, уже видя базовый результат.
Подписка доступна в двух форматах:
Решение – провести платную границу по снятию ручной работы. Все модификации, их код и базовые настройки остались бесплатными, но появилась подписка на инструменты для ускорения работы с ними. Это касается:
- Расширенных настроек в генераторе кода (например, стилей, логики поведения, ограничений и др.). Базовые поля доступны для всех, продвинутые – по подписке.
- Копирования примеров к себе в проект. Их можно спокойно посмотреть и воспроизвести по инструкции, но если нет времени/желания разбираться – получить готовое можно по подписке.
- Продвинутых модулей – сложных системных модификаций для личного кабинета и интернет-магазина. Это отдельный функционал с высоким порогом входа, который доступен только при осознанном выборе.
Основную часть библиотеки при этом можно использовать бесплатно. Инструкции, диагностика и дока остаются открытыми так, что пользователь может пройти весь путь до работающей модификации и без подписки. А те, для кого генератор – единственный способ установки, задумываются о покупке, уже видя базовый результат.
Подписка доступна в двух форматах:
- Pro – стандартная подписка с доступом на месяц. Подходит для работы над отдельным проектом или краткосрочных задач и стоит как две чашки кофе.
- Lifetime – бессрочная лицензия с доступом навсегда. Для пользователей, которые уже определились с выбором инструмента и хотят использовать его долгосрочно.
Как устроена монетизация: механики и удержание
Дизайн ведёт пользователя к покупке без давления – монетизация приглушённо встроена в рабочие места интерфейса:
- Продвинутые поля в генераторе кода отображаются в неактивном состоянии с подсказкой «Доступно в подписке»
- Страница примера доступна для просмотра, но идентификатор для копирования скрыт под пометкой «Pro»
- Возможность оформить подписку встроено в меню как вторичное действие
- Уведомление об истечении подписки в возможностью продления появляется за 3 дня до ее окончания
Продвинутые поля в генераторе
Инфраструктурно монетизация построена на личном кабинете. Он вводит пользователя как сущность и закрепляет за ним признак, по которому разделяется доступ к функциям. Страницы авторизации, профиля и управления заказами сделаны на Тильде с помощью моих же модов, логика и функционал работают на собственном фронте, а оплата проводится через Робокассу, у которой с Тильдой есть нативная интеграция.
Особое внимание уделяется удержанию: библиотека раскрывается медленнее, чем используется – за один визит пользователь касается одного-двух модов, а десятки других решений остаются за кадром. Для продукта с дорогим входом это главный риск, поэтому дизайн подогревает интерес вернуться ежедневно ротируемыми подборками, мегаменю с быстрым доступом к модификациям и собственной вкладкой с каталогом библиотеки в расширении Chrome.
Особое внимание уделяется удержанию: библиотека раскрывается медленнее, чем используется – за один визит пользователь касается одного-двух модов, а десятки других решений остаются за кадром. Для продукта с дорогим входом это главный риск, поэтому дизайн подогревает интерес вернуться ежедневно ротируемыми подборками, мегаменю с быстрым доступом к модификациям и собственной вкладкой с каталогом библиотеки в расширении Chrome.
Подборка «Смотрите также»
Вместе они превращают точечное использование в повторное расширением видимой ценности: каждый визит заканчивается знанием ещё о нескольких возможностях библиотеки. Единственное, что у продукта получается плохо – вернуть ушедшего пользователя. Но это ограничение рынка: следующее по уровню после фреймворка для Тильды – переход к другой платформе или заказной разработке.
#6 Сколько стоило создать такой продукт? В попугаях и чашках кофе
Если смотреть на модификации со стороны, всё выглядит несложно: нашёл мод, вставил строчку кода и получил результат. Но в глубине за ними стоит два года плотной работы, артефакты которой я показал выше. Это то, что я проектировал сотнями вечеров: ядро, общие события, встроенная диагностика, генератор кода. Всё это работает вместе и держится на тысячах сайтов.
По цифрам примерно так:
Поддерживать такой объем и легко, и сложно одновременно. Стоимость одной модификации – это архитектура взаимосвязей: код, единая логика, страница сайта, инструкция, документация, диагностика, пример, поддержка. Все это встраивается в единую систему, спроектированную за годы работы. Отдельную сложность добавляет то, что продукт привязан к Тильде – это и поставщик технических ограничений, и аудитории (часто не совсем целевой), и одновременно площадка, на которой все работает.
Деньги, вложенные в инфраструктуру, небольшие – в год на хостинг, домен и CDN уходит не более 20 тыс. рублей. Команды и операционных затрат у продукта нет, поэтому главная метрика, по которой я бы измерял стоимость его создания – личное время. Если пересчитывать его в человеко-часы, получилась бы полноценная вторая работа, которая по рыночной ставке стоила бы несколько миллионов (или неприлично много попугаев).
По цифрам примерно так:
- 2 года разработки;
- 31 120 строк кода;
- 36 модификаций (60 с вариациями);
- 192 страницы документации;
- 3 000 ответов в поддержке;
- 0 рублей на привлечение;
- 1100 чашек выпитого кофе.
Поддерживать такой объем и легко, и сложно одновременно. Стоимость одной модификации – это архитектура взаимосвязей: код, единая логика, страница сайта, инструкция, документация, диагностика, пример, поддержка. Все это встраивается в единую систему, спроектированную за годы работы. Отдельную сложность добавляет то, что продукт привязан к Тильде – это и поставщик технических ограничений, и аудитории (часто не совсем целевой), и одновременно площадка, на которой все работает.
Деньги, вложенные в инфраструктуру, небольшие – в год на хостинг, домен и CDN уходит не более 20 тыс. рублей. Команды и операционных затрат у продукта нет, поэтому главная метрика, по которой я бы измерял стоимость его создания – личное время. Если пересчитывать его в человеко-часы, получилась бы полноценная вторая работа, которая по рыночной ставке стоила бы несколько миллионов (или неприлично много попугаев).
#7 Отличный продукт, но хрупкий бизнес. Что с модификациями сейчас?
Библиотека задумывалась как профессиональный инструмент для регулярной работы. Я вкладывался в качество и функциональность и хотел сформировать вокруг неё сообщество, где пользователи обменивались бы опытом и помогали друг другу, подобно форумам StackOverflow. У моего канала даже был чат, в котором я регулярно публиковал обновления и post-mortem, делился опытом и отвечал на вопросы по модификациям. Маркетинг я не вел и полагался на виральность продуктовых релизов и рекомендации коллег по цеху.
Несмотря на все, что у меня получилось сделать, в полную силу продукт раскрыться так и не смог. Количество пользователей, способных работать с библиотекой, оказалось не таким большим – она была слишком инженерной для Тильды, в то время, как платежеспособный спрос был направлен в сторону магии и «вау», а рынок развернулся в сторону ИИ. Продукт рос, пока я вручную поддерживал пользователей и разбирал поток заявок, и перестал, когда я перешел на самообслуживание.
Но несмотря на это, определенных высот мне все же удалось достичь:
Несмотря на все, что у меня получилось сделать, в полную силу продукт раскрыться так и не смог. Количество пользователей, способных работать с библиотекой, оказалось не таким большим – она была слишком инженерной для Тильды, в то время, как платежеспособный спрос был направлен в сторону магии и «вау», а рынок развернулся в сторону ИИ. Продукт рос, пока я вручную поддерживал пользователей и разбирал поток заявок, и перестал, когда я перешел на самообслуживание.
Но несмотря на это, определенных высот мне все же удалось достичь:
- Библиотека работает примерно на 10 тыс. сайтах. Иногда открываю рандомную страницу и вижу, что она сделана с помощью моих модов – становится приятно.
- Пиковая месячная аудитория – около 4 600 человек. Всего за год сайт посещают 40 тыс. уникальных пользователей, которые залипают на нём на три с половиной минуты.
- Монетизация приносит мне 100−120 оплат в месяц при ARPPU 660 руб. Объем поддержки после ввода self-service сократился втрое и сейчас занимает у меня не более пары часов в неделю.
Заключение
Прочитав всю эту историю, любой сказал бы: продукт получился по стандартам, которых его рынок не требовал. Сильное в нём – не архитектура и не дизайн по отдельности, а то, что все они собраны одним человеком и не имеют швов. Это действительно так – подобные решения делаются командами из 3−4 человек и продаются в B2B сегменте. Впрочем, я пришел на Тильду именно оттуда – из ИТ-компании, которая занимается разработкой ERP, BPM и MDM-систем. И хотя привнести на рынок инженерный подход мне так и не удалось, я создал продуманную, качественную и честную библиотеку, которая помогает тысячам дизайнеров в создании сайтов и сделана с душой и вдохновением.
Максим Постников
Все права на данный материал принадлежат автору. Статью можно свободно распространять, сохраняя авторство. Присвоение материалов или использование без указания источника запрещено и может повлечь ответственность согласно законодательству РФ.
Другие статьи
Навигация
© 2026 Максим Постников. Все права защищены.
Максим—Постников©