Я собрал kolesnikov-ai.ru с нуля как систему, а не как макет. Контент меняется за минуту, релиз не останавливает трафик, заявка доходит до CRM за полсекунды.
Паспорт проекта
Публичный адрес: kolesnikov-ai.ru
Стек: Next.js, Payload CMS, PostgreSQL, n8n, Python, Cursor IDE
Инфраструктура: собственный сервер в РФ, 4 ГБ RAM / 2 vCPU
Роль: архитектура, сборка, запуск, эксплуатация
Статус: в продакшене, контент ведётся через админку
Проблема: рынок предлагает два тупика
Когда бизнесу нужен сайт, выбор обычно сводится к двум вариантам. Оба выглядят дешевле и быстрее, чем собственная разработка. Оба упираются в потолок через год — и выбраться из него дороже, чем начать правильно.
Путь 1. Tilda: аренда вместо владения
Бизнес получает быстрый старт и удобный редактор, но платит за то, что ему не принадлежит. Код закрыт. Владелец арендует страницу на чужой платформе, а не владеет активом. Как только бизнесу нужна логика за пределами шаблона — сложный ИИ-агент, серверный шлюз, кастомная интеграция с CRM — начинаются проблемы. Компонент вставляется через iframe: медленно, с чужими стилями, без контроля над загрузкой. Или собирается костылями, которые ломаются при первом обновлении платформы.
Цена такой свободы — потолок. Переросли конструктор? Выбор один: переезд, новый бюджет и потеря накопленной структуры.
Путь 2. WordPress: владение монолитом
Бизнес владеет сайтом и данными. Платформа открыта, подрядчиков много.
Взамен он получает архитектуру из прошлого десятилетия. Функциональность собирается из десятков сторонних плагинов. Они конфликтуют, тянут свои тяжёлые скрипты на каждую страницу и обновляются независимо от сайта. Безопасность держится на том, что все компоненты вовремя обновлены — а половина из них не поддерживается годами.
Отсюда тот самый лагающий скролл на телефоне. Причина не в дизайне, а в накопленном весе: три плагина галереи, два слайдера, четыре формы. Сайт открывается, но пользователь уходит на третьем экране.
Я проектировал свой проект так, чтобы обе ловушки были исключены изначально.
Процесс: AI-first подход вместо рутины
Классические студии продают часы аналитиков и программистов. Я проектировал систему так, чтобы рутину выполняли алгоритмы. Это напрямую снижает время до релиза и стоимость сборки.
Этап 0. Сборка смыслов через Python и LLM
Контент сайта не писался из головы. Я собрал Python-парсер, который просканировал сайты конкурентов, вытащил их офферы, преимущества и триггеры. Собранный массив сырых данных был пропущен через нейросеть для поиска слабых мест в их позиционировании.
Результат — сводная матрица, на основе которой формировался мой оффер. Я бью точно в те боли рынка, которые конкуренты игнорируют: например, зависимость от разработчиков при правке текстов.
Этап 1. Проектирование пользовательского пути (CJM)
До написания первой строчки кода визуализируется вся логика интерфейса. Это не про отрисовку красивых кнопок, а про маршрутизацию внимания: куда ведёт каждый клик, на каком этапе открывается форма, как отрабатывают тупиковые сценарии. Макро-схема флоу в FigJam исключает слепые зоны и дорогие переделки интерфейса на этапе вёрстки.
Этап 2. Сборка в Cursor IDE
Написание шаблонного кода, настройка базовых CRUD-операций в Payload и вёрстка компонентов делегированы AI-агентам внутри Cursor IDE. Моя задача как инженера — управлять архитектурой, безопасностью и ревью кода, а не набирать текст вручную. Именно поэтому сборка корпоративного портала с кастомной логикой занимает недели, а не кварталы.
Решение: один контур вместо компромиссов
Сайт, редактор контента и приём заявок работают в одном приложении на моём сервере. Не три разрозненных сервиса, не платформа в аренду.
От конструкторов — удобство для маркетинга
Контент разложен на 6 коллекций и 16 смысловых блоков. Владелец правит один блок и физически не может затереть соседний.
Что получает маркетинг:
Черновики и публикация. Материал готовится в админке и выходит по переключателю.
Границы правок. Меняются тексты, цены, медиа и мета-теги. Вёрстка, сетки и анимации надёжно зафиксированы в коде.
Русский интерфейс. Подписи переведены, даты в привычном формате.
SEO внутри редактора. Мета-теги страниц и микроразметка правятся без привлечения разработчика.
Разница с Tilda в одном: мой редактор — это слой над моим кодом, а не платформа, которая держит меня в заложниках. Код остаётся моим активом.
От классических CMS — владение данными, но без монолита
База данных (PostgreSQL) развёрнута на моём сервере. Контент и заявки принадлежат мне.
При этом Payload CMS — не монолит вроде WordPress. Это современный headless-движок. Он не лезет в дизайн, не навязывает шаблон и не подключает мусорные скрипты на страницу. Фронтенд берёт по API только то, что нужно конкретному блоку.
Итог: нет десятка конфликтующих плагинов. Одна кодовая база, строгий процесс обновления и предсказуемая безопасность.
Сайт работает, даже если база недоступна
Сборка интерфейса идёт без прямого обращения к базе. Первый ответ посетителю отдаётся из статической памяти сервера, а свежий контент подтягивается в фоне.
Если база данных упадёт — сайт просто отдаст последнюю сохранённую копию. Для бизнеса это означает непрерывность: падение редактора не останавливает приём заявок. Сайт не «падает красиво» — он продолжает работать.
Процесс безопасного релиза с автооткатом
Каждый релиз — это строгая автоматическая процедура:
резервная копия базы перед каждой выкладкой (хранятся последние 10);
сборка новой версии происходит при работающей старой — трафик не прерывается;
переключение занимает 2–4 секунды;
система делает 30 попыток проверки жизнеспособности (health-check);
при любом провале — мгновенный автоматический откат на стабильную версию.
Скорость на слабом железе
На бюджетном Android в Firefox тяжёлые сайты лагают при скролле из-за высокой стоимости отрисовки размытий и анимаций.
Я внедрил автоматический лёгкий режим. Он сам включается на слабых смартфонах или если пользователь в настройках ОС попросил уменьшить анимацию.
Замеры на боевой сборке с искусственным 10-кратным замедлением процессора:
Полный режим: 28.6 мс на кадр, 35 FPS
Лёгкий режим: 17.7 мс на кадр, 57 FPS
Высота документа и контент остаются идентичными (11 285 px). Отключаются только тяжёлые эффекты. Изображения автоматически конвертируются сервером: вес главного фото снижен с 790 КБ до 45 КБ (−94%).
Мобильный UX: шапка и клавиатура
Две критичные проблемы конверсии, которые замечают только после запуска:
Шапка в PWA на iPhone. Если сохранить сайт на экран телефона, логотип уезжает под «динамический остров». Я прописал учёт системных отступов: в вебапе шапка встаёт ровно, а в обычном браузере вёрстка не ломается.
Клавиатура в чате. На Android строка ввода часто прячется за системной клавиатурой. Я настроил динамический пересчёт viewport: диалог сжимается, оставляя форму заявки видимой в 100% случаев.
Заявки без ключей в браузере (n8n)
Браузер клиента не общается с LLM напрямую. Он отправляет запрос на мой сервер, где действуют жёсткие лимиты (30 запросов в минуту) и скрыты все API-ключи.
Там же телефон валидируется и приводится к E.164. Только после этого сервер передаёт данные в сценарий автоматизации n8n. Сценарий фиксирует лид, пушит алерт в Telegram и создаёт сделку в CRM. Без валидного номера заявка сбросится на этапе сервера.
Транспорт вебхуков оптимизирован: лид падает менеджеру за ~0.5 секунды, исключая проблему «бот долго думает».
152-ФЗ по конструкции, а не по обещанию
Инфраструктура (Next.js, БД, n8n, CRM) изолирована на собственном сервере в РФ.
Скрипты аналитики физически не загружаются до клика «Принять» в cookie-баннере. Согласие можно отозвать в один клик из подвала.
Честный минус: часть посетителей не попадает в метрику. Это следствие жёсткого соблюдения закона, а не ошибка трекинга.
Экономика и ROI
Правильная архитектура стоит дороже на старте, но окупает себя в первый же год эксплуатации только за счёт срезанных костов на поддержку.
Стоимость подобной сборки: от 300 000 ₽ (единоразовая инвестиция в собственный актив).
Срок от старта до продакшена: 3–4 недели.
Стоимость одной контентной правки: 0 ₽. Ранее (через тикет разработчику) — от 3 000 ₽ за 1 час работы инженера.
Экономия на техподдержке: ~30 000 ₽/мес при стандартных 10 часах контентных правок.
Окупаемость инфраструктуры: 10 месяцев (только за счёт экономии на разработчиках, без учёта кратно выросшей конверсии с мобильных устройств).
Кому это нужно
B2B-проектам, где контент меняется чаще, чем код.
Компаниям, уставшим платить абонентскую плату за каждую правку в закрытом конструкторе.
Бизнесу, который уже владеет сайтом на старой CMS и тратит на починку конфликтующих плагинов больше, чем на развитие.
Тем, кому соблюдение 152-ФЗ и приватность данных важнее скорости запуска на арендованной платформе.
Я применяю к себе те же стандарты, которые внедряю клиентам: контент отделён от кода, инфраструктура принадлежит владельцу, релиз обратим, мобильный опыт проверен на реальном железе.
Если ваш сайт до сих пор обновляется через тикеты разработчику — начните с архитектурного разбора. Два дня, 10 000 ₽. Сумма вычитается из стоимости внедрения.