Сегодня хочу не просто «накидать гайд», а честно рассказать, как я на самом деле делаю сайты для компаний — от первого сообщения клиента до момента, когда он сам правит контент в админке без моей помощи.
Это не история про волшебную кнопку «сделать сайт за 5 минут».
Это рабочий пайплайн, который я выстраивал на реальных проектах, в том числе для студий, онлайн‑школ и сервисных бизнесов.
Почему всё начинается не с кода, а с понимания людей
Обычно всё выглядит так:
пишет владелец компании и говорит примерно одно и то же:
«Нам нужен сайт, который будет нормально выглядеть, приводить заявки и не умирать через полгода. Бюджет — без космоса, сроки — “вчера”.»
За этими словами почти всегда стоят одни и те же проблемы:
• сайт либо устарел морально, либо его вообще нет;
• заявки идут через мессенджеры, админы не успевают отвечать;
• нет цельной визуальной айдентики: одна аватарка в ВК, другая в Telegram, на сайте — вообще третья история;
• бизнес растёт, а цифровая часть за ним не успевает.
Если здесь сразу открыть редактор и начать верстать, получится ещё один «красивый, но бессмысленный» лендинг.
Поэтому Шаг 1 у меня всегда один и тот же.
Шаг 1. Референсы, мудборд и брендбук: собираем картинку в голове
Сначала я вообще не трогаю код.
Моя задача — почувствовать бизнес и его людей.
Что я делаю:
• прошу у заказчика 3–7 сайтов‑референсов: что нравится по стилю, подаче, структуре;
• прошу описать проект простым языком: кто ваши клиенты, какую боль вы закрываете, что для вас “идеальный результат сайта”;
• если есть — внимательно читаю брендбук, гайд по стилю, старые презентации;
• параллельно собираю мудборд: цвет, шрифты, визуальный характер, примеры блоков.
На этом этапе я вообще не думаю про «Билд или что‑то другое».
Я отвечаю себе на три простых вопроса:
1. Какое ощущение человек должен получить, попав на сайт?
2. Какой путь он должен пройти: от первого экрана до заявки/оплаты?
3. Какие страхи и сомнения нужно снять по дороге?
И только когда на эти вопросы есть ответы, можно двигаться дальше.
Шаг 2. Прототип, который максимально близок к будущему сайту
Теперь нужна структура и визуал.
Но не абстрактный вайрфрейм, а прототип, который уже можно показать клиенту и сказать:
«Смотри, вот так примерно будет выглядеть твой сайт».
Здесь у меня работает связка Cometa → Gemini → Aura.
2.1. Cometa: выжимаю максимум из референсов
Вместо того чтобы «на глаз» повторять чужой сайт, я прогоняю его через Cometa.
Зачем:
• Cometa скрапит сайт: структуру, блоки, навигацию;
• вычленяет UI/UX‑паттерны, которые реально работают;
• собирает всё в понятное исследование, а не просто «мне нравится фиолетовый».
По сути, я получаю не просто вдохновение, а декомпозицию того, почему этот сайт заходит.
2.2. Gemini 3: собираем идеальный промпт для прототипа
Дальше иду в Gemini 3, загружаю туда:
• исследование из Cometa,
• брендбук,
• референсы,
• ТЗ и заметки о целевой аудитории.
И даю задачу:
«Собери для меня подробный промпт для генерации прототипа сайта в Aura.
Укажи структуру, порядок блоков, акценты, ключевые смыслы, элементы UI/UX.»
В итоге Gemini возвращает не «абстрактный текст», а каркас будущего сайта:
какие секции должны быть, что в них говорить, что обязательно выделить визуально.
2.3. Aura: быстрые прототипы, которые не стыдно показать клиенту
Дальше беру этот промпт и загружаю в Aura.
Через несколько минут у меня уже есть 2–3 варианта живых прототипов:
• с реальной версткой;
• максимально близких к нужному UI/UX;
• заточенных под конкретную цель: лиды, записи, продажи, заявки.
Вместо «пообещали макет через неделю» я могу уже на этом этапе показать клиенту
живую, кликабельную версию и собрать обратную связь по делу, а не «нравится/не нравится шрифт».
Шаг 3. Подготовка к билду: из чернового HTML в архитектуру проекта
Aura отдаёт мне HTML‑структуру.
Это похоже на хороший черновик: в целом всё понятно, но до продакшна ещё далеко.
Дальше я:
1. Забираю этот HTML в IDE.
2. Пишу промпт для ИИ‑агента (Gemini или другого), что‑то вроде:
«Твоя роль — Senior Full‑Stack Web Designer.
Возьми этот HTML и:
– сохрани UI/UX как можно точнее;
– перенеси всё в Next.js / React;
– добавь логику форм, кнопок, навигации;
– используй Shadcn и другие MCP‑серверы, которые у меня уже установлены;
– сделай код читаемым и поддерживаемым.»
Почему это важно:
• я задаю роль (не просто “чат‑бот”, а senior‑специалист);
• привязываю к конкретному коду, а не к абстракции;
• фиксирую технологический стек.
Это превращает ИИ не в игрушку, а в полноценного джуна, которому можно доверить часть работы.
Шаг 4. Билд: где заканчивается ИИ и начинается реальный опыт
После этого агент собирает работающий проект:
• страницы открываются;
• формы кликаются;
• базовая логика на месте.
И вот здесь — честно — заканчивается сказка про «ИИ сам всё сделает».
Как я добиваю проект до продакшна
1. Детализирую задачи.Если что‑то ломается, я не пишу «почини форму», я:
• прикладываю кусок кода,
• даю текст ошибки из терминала,
• поясняю, какой должен быть ожидаемый результат.
1. В таком формате агент действительно понимает контекст,а не угадывает по одному предложению.
2. Прошу ИИ думать, а не спешить.В каждом важном промпте есть что‑то из серии:
«Сначала опиши план действий. Не трогай рабочий код без необходимости. Разбей задачу на шаги и объясняй, что ты делаешь.»
Это сильно снижает количество сюрпризов, когда после «фикса» начинает падать всё остальное.
3. Расширяю агента через MCP и skills.Подключаю:
• Shadcn для UI‑компонентов;
• нужные библиотеки для анимаций, форм, работы с API;
• доп. навыки, чтобы агент не «изобретал велосипед», а пользовался готовыми решениями.
И только после такой подготовки я руками:
• чищу архитектуру,
• упорядочиваю логику,
• привожу проект к состоянию, в котором мне не страшно его поддерживать через год.
Шаг 5. Деплой: одна схема для мира, другая — для России
Готовый сайт нужно не только собрать, но и адекватно разместить.
Здесь у меня две стандартные схемы.
Вариант для зарубежных проектов: Git + Vercel
Для клиентов за пределами РФ почти всегда работаю так:
• пушу проект в Git;
• подключаю репозиторий к Vercel;
• на каждый новый коммит Vercel сам собирает и обновляет сайт.
Преимущества:
• минимум ручных действий;
• встроенная аналитика и логирование;
• удобное управление окружениями (preview, production);
• быстрая скорость доставки контента.
Вариант для российских проектов: Git + VPS + Coolify
С российской аудиторией всё сложнее:
зарубежные сервисы часто под блокировками мобильных операторов или работают нестабильно.
Поэтому для РФ часто использую:
• Git → VPS в России → Coolify.
Coolify — это по сути «свой Vercel на своём сервере»:
• деплой из репозитория;
• удобная панель для нескольких проектов;
• возможность крутить несколько сайтов и мини‑приложений даже на дешёвом тарифе.
В итоге:
• проект открыт и стабилен для пользователей из РФ;
• на одном сервере можно держать не один, а несколько проектов;
• расходы остаются вменяемыми, а не «как ещё один сотрудник в штате».
Шаг 6. Админка и передача: сайт должен жить без меня
Для меня сайт, который нельзя спокойно передать клиенту, — это недоделанный проект.
Поэтому финальный этап — всегда админ‑панель и база данных.
Связка Payload + Next.js + Neon
Почему именно так:
• Payload даёт мощную, но при этом дружелюбную админку,идеально стыкуется с Next.js и хорошо работает на Vercel / VPS.
• Neon позволяет развернуть базу данных буквально в несколько кликов.
• В админке клиент сам:
• правит тексты и цены,
• добавляет новые страницы,
• меняет расписание,
• управляет контентом без участия разработчика.
То есть я не становлюсь «узким горлышком» для любых правок.
Бизнес живёт своей жизнью, а я подключаюсь уже по крупным задачам, а не ради смены заголовка.
Что в итоге получает бизнес
Если собрать всё вместе, на выходе у клиента:
• быстрый аккуратный сайт, который нормально индексируется поисковиками;
• автоматизированный пайплайн: от заявки до удобной панели администратора;
• понятные расходы — в основном только на VPS / хостинг;
• возможность масштабироваться, а не упираться в ручные переписки и хаотичные лендинги.
А я получаю проект, который:
• не стыдно показать как кейс,
• приятно поддерживать,
• можно развивать дальше — добавлять личный кабинет, онлайн‑оплату, новые сервисы.
Зачем я вообще делюсь пайплайном
Во‑первых, вокруг ИИ сейчас много маркетинговой пены.
Хочется показывать реальные процессы, а не сказки в духе «агент всё сделает сам».
Во‑вторых, это хороший фильтр:
ко мне приходят люди, которые понимают, что сайт — это система, а не просто «картинка и форма обратной связи».
Если тебе интересно разобрать это на примере твоего проекта — напиши мне в личку.
Расскажу про удачные кейсы и где ИИ действительно экономит месяцы работы, а где без живого разработчика пока никуда.
Подпишись на мои каналы
📺 YouTube — видеотуториалы
https://www.youtube.com/@Acronelab
💬 Telegram — эксклюзивные материалы
https://t.me/acronelab
📰 Яндекс Дзен — глубокие статьи
https://dzen.ru/acronelab
Подпишись на все три — не пропустишь ничего.
Если остались вопросы по этому пайплайну или хочешь, чтобы я разобрал твой случай — пиши в комментариях или в Telegram, читаю и отвечаю лично.