Зачем сайту своя система
У Финтабло уже был фирменный стиль: логотип, цвета, шрифт и принципы. Для презентаций и печати этого хватает. Для сайта нужно больше: размеры текста, сетка, кнопки, поля, состояния при наведении, отступы между блоками.
Когда сайт, лендинги и сервисы делают разные люди, каждая новая страница приносит свои оттенки, кегли и кнопки. Со временем на одном домене складывается несколько разных сайтов.
Отдельная задача от клиента: разложить систему так, чтобы по ней мог верстать ИИ-агент. И чтобы результат не зависел от «настроения модели».
Что внутри
Одна система на три части домена: сайт после переезда с Тильды, лендинги команды и микросервисы.
- 144 токена в формате W3C. Цвета, шкала текста, отступы, сетка, скругления, тени и скорость анимаций. Формат читают и браузер, и дизайн-инструменты, и агент.
- Около 45 элементов интерфейса. Кнопки, поля, карточки, плашки, таблицы, у каждого все состояния.
- 16 блоков и 7 шаблонов страниц. Главная, страница возможности, тарифы, кейс, лендинг команды, лид-магнит и документ собираются из одних и тех же блоков.
- Правила в 14 главах. От логотипа и цвета до текста, движения и того, что нельзя сломать при переверстке.
У каждого токена и правила есть статус. «Закон» взят из фирменного стиля и не меняется. «Предлагаем» значит наше решение для веба, оно ждёт согласования. «Решить» отмечает открытый вопрос, к которому уже есть рекомендация. Так сразу видно, что можно брать в работу, а что ещё обсуждается.
Продукт показываем живым
В брендбуке работает сам интерфейс продукта. Макет запускается, когда до него долистали, и его можно нажимать.
- Тур с курсором. Курсор сам показывает, куда нажать, и экран отвечает. Человек может перехватить управление в любой момент.
- Телефон с ИИ-аналитиком. Вопрос по цифрам компании и ответ, который строится на этих цифрах.
- Фрагмент «Фонды». Поступление раскладывается на налоги, зарплату, резерв и свободные деньги.
- Схема интеграций. Анимация показывает, как операции приходят из банков и учётных систем и сами разносятся по статьям.
- Ролик на 40 секунд из шести глав. От кучи выписок до прогноза без кассового разрыва, с паузой и перемоткой.
Все пять макетов работают на одной учебной компании и настоящем движке расчёта. Поэтому цифры везде совпадают: кассовый разрыв в туре, в телефоне и в ролике один и тот же.
Правила для ИИ-агента
Для агента сделали отдельный файл правил: 18 жёстких правил и 14 пунктов проверки перед сдачей. Несколько примеров:
- только токены: случайных цветов и размеров в вёрстке нет, а если нужного токена нет, агент останавливается и спрашивает;
- только элементы и блоки системы: новый вид кнопки агент не придумывает, он описывает его и отдаёт человеку на решение;
- телефон сразу: на ширине 390 px нет горизонтальной прокрутки, кнопки от 44 px, текст от 14 px;
- логотип только файлом и с охранным полем;
- агент готовит черновик, на сайт страница уходит после согласования ответственного.
Проверка перед сдачей тоже механическая. Ширина страницы равна ширине окна на 390, 768, 1280 и 1920 px. У каждой картинки есть alt, width и height. Над заголовками блоков нет номеров и подписей, висячих слов нет. Такие пункты проверяет скрипт, и результат не зависит от того, какая модель верстала.
Воздух вокруг заголовков
При переверстке чаще всего плывут отступы. В брендбуке они заданы токенами и показаны прямо между настоящими элементами: синяя полоса и размер в пикселях. От заголовка до подводки 28, до кнопок 40, между блоками 176.
Меню, подвал и главная
Чтобы проверить систему на деле, собрали прототип главной с мега-меню и подвалом. Он работает на компьютере и на телефоне, всё нажимается.
В новом меню продукт видно до клика. При наведении на «Платёжный календарь» справа появляется прогноз остатка на 12 недель на тех же учебных цифрах.
Тексты и порядок блоков на главной пока условные. Прототип нужен, чтобы согласовать стиль на настоящей странице.
Логотип одним архивом
Пакет логотипа из 27 файлов собирается в архив прямо в браузере: векторы, PNG на прозрачном фоне, иконки сайта и памятка с правилами. Рядом схема охранного поля, чтобы логотип не прижимали к краю и не ставили вплотную к тексту.
Как шла работа
С 9 по 16 октября 2026 года вышло пять версий, от v0.5 до v0.9. Правка всегда идёт в одном порядке: сначала токены и правила, потом страницы брендбука. Поэтому примеры не расходятся с тем, что написано в правилах.
Частые вопросы
Чем веб-брендбук отличается от обычного?
Обычный брендбук задаёт логотип, цвета и шрифт. Веб-брендбук добавляет то, без чего сайт не сверстать: размеры текста, сетку, отступы, кнопки и поля со всеми состояниями, готовые блоки и шаблоны страниц. У Финтабло всё это показано живым в браузере, каждый пример можно нажать.
Можно ли верстать сайт по брендбуку с помощью ИИ-агента?
Можно, если правила записаны так, что их проверяет скрипт. Для Финтабло сделали отдельный файл для агента: 18 жёстких правил и 14 пунктов проверки перед сдачей. Значения агент берёт только из токенов, страницу собирает только из блоков системы. На сайт она уходит после согласования человеком.
Что такое дизайн-токены и зачем они сайту?
Токен это именованное значение: цвет, размер текста, отступ, скругление. В вёрстке пишут имя токена вместо числа. Значение меняют в одном месте, и оно обновляется на всех страницах. У Финтабло 144 токена в формате W3C, у каждого свой статус: «закон», «предлагаем» или «решить».
Зачем в брендбуке живые макеты продукта?
Скриншот устаревает с каждым обновлением продукта и без подписи мало что объясняет. Живой макет показывает сценарий: курсор нажимает кнопку, цифры пересчитываются, ИИ отвечает. В брендбуке Финтабло пять видов таких макетов. Все работают на одной учебной компании, поэтому цифры в них совпадают.
Как быстро идут правки в веб-брендбуке?
У Финтабло за неделю, с 9 по 16 октября 2026 года, вышло пять версий: от v0.5 до v0.9. Правка всегда идёт в одном порядке. Сначала меняются токены и правила, потом из них обновляются страницы, поэтому примеры не расходятся с правилами.
