Сайт, который вы сейчас читаете

Контекст

Продажа разработки AI-агентов держалась на переписке и пересказе: каждый новый разговор с потенциальным клиентом начинался с объяснения на словах, что именно я делаю и почему это работает. Кейсы существовали в виде файлов, а не страниц, на которые можно дать ссылку, — до момента звонка клиент не мог ничего проверить сам.

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

Отдельная проблема — цена вопроса. Разговор о деньгах откладывался до созвона, из-за чего часть контактов отваливалась ещё до него: человек не понимал порядок сумм и не хотел спрашивать.

Ограничения

• Дизайн-система утверждена до старта разработки. Токены, шрифты, отступы и сигнатурный элемент «было → стало» зафиксированы заранее — их нельзя менять «по ходу», только переносить один в один. Это исключило любые готовые UI-киты
• Запрет на внешние UI-библиотеки и анимационные пакеты. Все компоненты — свои, на одном Tailwind. Сайт не должен выглядеть как шаблон
• Кириллица как жёсткое требование. Большинство «дизайнерских» гарнитур ломаются на русском — это определило подбор шрифтов и явные кириллические сабсеты
• Скорость важнее эффектов. Клиенты открывают сайт с телефона в дороге: нулевой JS там, где он не нужен, единственная анимация на весь сайт, reduced-motion отключает движение
• Сервер на 2 ГБ RAM. Сборка образа дважды подводила машину к пределу памяти
• Сетевые ограничения площадки. Дата-центр блокирует IPv4-маршрут к API мессенджера — работает только IPv6, который в контейнерах по умолчанию выключен
• Секреты только в окружении сервера, ничего в репозитории. Плюс мягкая деградация: без ключей сайт обязан работать, просто с выключенными функциями

Решение

Что это даёт

Сайт превратил разговор о работе в проверяемый материал: кейсы с метриками «было → стало», два калькулятора цены, живая демонстрация работы AI-агента прямо в первом экране и форма заявки, которая фиксирует обращение и доставляет его владельцу за секунды. Потенциальный клиент сам считает стоимость своего сценария до созвона и приходит уже с вопросом по существу.

Первый экран продаёт механикой, а не словами. В окне-имитации мессенджера проигрывается диалог клиента с AI-агентом: клиент пишет ночью, агент отвечает по остаткам и ценам, внизу — сигнатурная строка «3 часа → 40 секунд». Сценариев тридцать, они охватывают десять отраслей B2B-опта; при каждом заходе показывается случайный. А дальше демонстрация становится живой: посетитель пишет в это окно сам — и ему отвечает настоящий AI-агент с вшитым каталогом вымышленного склада, который считает суммы, называет остатки и вежливо возвращает разговор к делу. Если внешний API недоступен, окно продолжает работать на заготовленных ответах — демонстрация не ломается никогда.

Контент — данные, а не вёрстка. Каждый кейс лежит отдельным MDX-файлом с типизированным фронтматтером: заголовок, метрики, стек, схема, карточка для главной. Схема валидируется на сборке — опечатка в новом кейсе роняет билд с внятным сообщением на русском, а не ломает страницу тихо. Из этих же файлов собираются карточки на главной, список кейсов, sitemap и OG-изображения: добавление кейса не требует ни строчки вёрстки.

Калькуляторы вместо «цена по запросу». Первый считает внедрение и абонентскую плату AI-сотрудника отдела продаж по масштабу компании и региону; второй собирает флот AI-агентов по ролям с пакетной скидкой. Цифры пересчитываются плавной анимацией в духе той же сигнатуры «было → стало», первое взаимодействие уходит целью в аналитику — видно, что человек считал.

Заявка не теряется. Форма сначала фиксирует обращение вместе с фактом согласия на обработку данных в локальном хранилище и только потом шлёт уведомление в мессенджер: сбой внешнего API заявку не теряет. Аналитика подключается только после согласия в cookie-баннере; при отказе счётчик не загружается вовсе.

Скорость и деплой. Страницы генерируются статически на сборке, схемы архитектуры рендерятся в SVG заранее — библиотека диаграмм в браузер клиента не попадает вообще. Сайт живёт в минимальном Docker-образе за реверс-прокси, который сам выпускает и продлевает сертификат. Пуш в основную ветку — и правка на боевом домене через одну–пять минут, без ручных действий и без единого 502 у посетителей. Весь путь от чистого листа до боевого домена система прошла за выходные — и с тех пор дорабатывается только пушами.

Архитектура

Next.js со статической генерацией — но не чистая статика. Страницы отдаются готовыми, а серверная часть остаётся — под форму заявки и будущий AI-ассистент с RAG. На статическом генераторе пришлось бы отдельно поднимать бэкенд.

Токены дизайн-системы в CSS-слое, а не в конфиге. Цвета, типографика и шкала отступов перенесены один в один из утверждённого макета и служат единственным источником правды.

Прямая компиляция MDX вместо готовой библиотеки рендеринга. Популярная библиотека молча теряла свойства, переданные компонентам внутри контента: таблица получала пустые данные и роняла страницу. Прямая компиляция убрала целый класс тихих сбоев.

Схемы рендерятся на билде, хэш исходника вшивается в SVG. Ноль JS-диаграмм в браузере. Проверка на сборке сверяет хэш: изменил исходник, забыл перерендерить — билд падает с инструкцией, что запустить.

Единственная анимация — появление блока при скролле. Блоки, видимые при загрузке, не анимируются: иначе перерисовка становилась главным элементом отрисовки и портила показатели скорости.

Автодеплой на стороне сервера, а не в облачном CI. Планировщик на сервере раз в минуту сверяет ревизию с репозиторием и запускает деплой сам: меньше движущихся частей, независимость от чужой платформы.

Реверс-прокси с ретраями на время перезапуска. Секундный рестарт контейнера не выдаёт посетителю ошибку — запрос ждёт новый бэкенд.

Ассеты аватара запекаются офлайн-скриптом. Обрезка, ресайз и два формата считаются один раз при подготовке: файл совпадает с отображением один в один, сдвигов вёрстки нет. Вес исходников — 11–12 МБ, в проде — 11–32 КБ.

Стек

Результат

Показатели скорости — по итогам аудита на живом домене: главная 93 · 96 · 100 · 100, страница кейса 94 · 96 · 100 · 100 (производительность · доступность · лучшие практики · SEO). Сдвиг вёрстки — ноль, блокировка основного потока — 10 мс, первая отрисовка — 1,0 с на мобильной симуляции.

Объём витрины: восемь кейсов, восемь схем архитектуры, шесть тарифных страниц с калькуляторами, тридцать сценариев диалога, живой демо-чат и шесть целей аналитики — всё из шести продакшен-зависимостей, без единой UI-библиотеки.

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

Что бы сделал иначе

• Проверять, что библиотека действительно передаёт данные, а не только «рендерит». Библиотека рендеринга контента молча теряла свойства компонентов внутри MDX: таблица получала пустой массив и роняла страницу. При подключении слоя между данными и компонентом первым делом писать проверку «дошло ли значение», а не доверять примеру из документации
• Переводы строк — не косметика. Скрипт деплоя, собранный на Windows, падал на сервере на первой же строке: репозиторий отдавал файл с виндовыми переводами строк. Фиксировать переводы строк в настройках репозитория нужно с первого дня — до того, как появится первый исполняемый файл
• Проверять сетевую доступность внешних API с той площадки, где будет прод — и изнутри контейнера. Форма не работала из-за закрытого IPv4-маршрута к мессенджеру и выключенного IPv6 в контейнерах. Диагностика заняла час, сама проверка занимает пятнадцать секунд. «На сервере работает» и «в контейнере работает» — разные утверждения
• Сервер на 2 ГБ памяти нельзя использовать как сборочную машину без подстраховки. Сборка образа съела память, машина не отвечала около восьми минут. Либо собирать образ вне прода, либо заводить файл подкачки до первого деплоя, а не после инцидента
• Секреты не должны попадать даже в файл-пример. Реальные ключи оказались вписаны в шаблон переменных окружения. В историю репозитория они не попали — проверено поиском по всем ревизиям, — но перевыпускать пришлось всё равно. В примере только плейсхолдеры; реальные значения существуют только на сервере

Хотите сайт, где ваши цифры и процессы говорят сами за себя?

Напишите — разберём, что можно автоматизировать в вашем случае.