Архив рубрики ~Лента новостей~

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента
Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

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

Год назад я устал от этого и стал делать сайты по-другому: код пишет и поддерживает нейросеть-агент. Вместо админки — чат. Пишу, что нужно, — агент делает: правит дизайн, чинит ошибки, настраивает SEO, добавляет отзывы и статьи в блог.

В таком режиме у меня работают два сайта: личный molyanov.ru и broken-links-checker.com — лендинг моего Chrome-расширения с блогом про SEO. Ниже — весь путь по шагам: как написать сайт нейросетью и выложить его на сервер, если вы не разработчик. Будет сложновато, но Справитесь, даже если никогда не открывали код.

Что такое вайбкодинг

Так называют подход, при котором код пишет нейросеть, а человек только ставит задачи. Вы объясняете, что нужно, — текстом или голосом. Агент открывает файлы проекта, читает их, правит, запускает команды и сам смотрит, что получилось.

Ещё недавно собрать так целый сайт не получалось: на проекте побольше модель теряла нить, вместе с новой фичей ломала старую, ссылалась на библиотеки, которых не существует. К 2026 году агенты дозрели: сайт теперь реально сделать от начала до конца, ни разу не заглянув в код. Оба моих сайта появились именно так, и я продолжаю их развивать.

План действий целиком

  1. Установите на компьютер приложение с агентом — Claude или Codex.
  2. Зарегистрируйтесь на GitHub.
  3. Отправьте агенту стартовый промт — он начнёт собирать сайт.
  4. Посмотрите первую версию у себя на компьютере, докрутите мелочи.
  5. Сохраните результат на GitHub.
  6. Купите VPS и домен.
  7. Дайте агенту доступ к VPS — он опубликует сайт, пока по IP-адресу.
  8. Подключите домен — сайт заработает по нормальному адресу.
  9. Настройте автообновление сайта при изменениях кода.
  10. Добавьте SEO и аналитику, наполняйте контентом.

Кстати, если вы уже пользутесь Claude Code или Codex, можете просто дать им ссылку на этот гайд — они поймут, что делать, и сами вам все объяснят =)

Главный приём для нетехнаря

Когда агент пишет незнакомое слово — деплой, коммит, контейнер, что угодно — не идите гуглить. Спросите его самого: «объясни простым языком, что это значит, я не технарь». Claude и Codex объясняют спокойно и без снобизма. Большую часть того, что я знаю про фронтенд, я узнал именно так — из объяснений агента по ходу работы, а не из курсов.

Что понадобится

Руками вы делаете два действия: ставите на компьютер одну программу и заводите бесплатный аккаунт на GitHub. Дальше вся работа — диалог: вы описываете задачу, агент выполняет.

На агенте — весь код, установка библиотек, починка багов и объяснение непонятного. Если какой-то шаг может сделать только человек — зайти в кабинет регистратора домена, взять ID счётчика Метрики — агент выдаст инструкцию по пунктам.

Всего понадобятся четыре вещи:

  • Подписка на Claude или ChatGPT — это мозг вашего агента.
  • Бесплатный аккаунт на github.com — там будет лежать код сайта.
  • VPS — арендованный сервер, на котором сайт будет жить в интернете.
  • Домен — адрес вида вашсайт.ру.

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

Claude Code или Codex — кого выбрать

Главных агентов для вайбкодинга два: Claude Code от Anthropic и Codex от OpenAI. Работают одинаково: получают задачу текстом или голосом, дальше сами читают и правят файлы, запускают команды, проверяют результат.

Выбрать можно любого — оба сильные. Различаются они фирменными фишками.

Codex генерирует картинки прямо в чате — встроенной моделью OpenAI. Просите «нарисуй обложку к статье в таком-то стиле» или «сделай иконки для блока с фичами» — он рисует и сразу расставляет картинки по местам на сайте. Когда сайту регулярно нужна графика, это сильно выручает.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

У Claude Code есть Claude Design — отдельный инструмент Anthropic для дизайна, работает в веб-версии Claude. Описываете страницу промтом — получаете аккуратный макет. Потом отдаёте макет в Claude Code, и он превращает его в код вашего сайта.

Лимиты Codex расходуются медленнее. Так по моему опыту. Anthropic в 2026 году добавила к пятичасовым окнам ещё и жёсткие недельные лимиты: если работать в Claude плотно, потолок наступает быстро, и дальше остаётся ждать следующей недели.

Как выбрать:

  • Есть подписка на ChatGPT — берите Codex.
  • Есть подписка на Claude — берите Claude Code.
  • Нет никакой — заводите ChatGPT и Codex: подписку проще купить и оплатить, лимитов хватает на дольше. Я работаю в обоих и переключаюсь, но если бы оставлял один — оставил бы Codex.

Какую подписку брать

Начните с базового тарифа за $20 — ChatGPT Plus или Claude Pro. Его хватит, чтобы понять, как устроена работа с агентом, а часто — и на первую версию небольшого сайта. Особенно в ChatGPT, где лимиты пощедрее.

Если лимит кончается постоянно и вы часами ждёте, пока он восстановится, — переходите на тариф за $100, ChatGPT Pro или Claude Max 5x. Запас там в несколько раз больше, для ежедневной активной работы этого уже хватает.

У обоих есть и тарифы за $200 — ChatGPT Pro 20x и Claude Max 20x. Это для тех, кто ведёт несколько проектов сразу или проводит в агенте весь рабочий день. Одному сайту столько не нужно.

Порядок такой: сначала $20, упёрлись в лимиты — апгрейд. Платить $100 заранее, не проверив, нужно ли это вам, смысла нет.

Что поставить на компьютер

Понадобится одна программа — приложение вашей нейросети. Внутри обычное окно с чатом, по ощущениям — мессенджер.

Для Claude Code. Скачайте десктопное приложение Claude на claude.com/download, версии есть для Mac и Windows. Claude Code находится внутри, на вкладке «Code»: запустили приложение, вошли в аккаунт, открыли вкладку, создали сессию, указали папку проекта.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Для Codex. Скачайте Codex App на (Mac и Windows). Запустили, вошли через аккаунт ChatGPT, нажали «New project», выбрали папку.

Это всё. Остальные инструменты, если они понадобятся по ходу, агент установит на компьютер сам.

Для России есть нюанс: без VPN ни Claude, ни Codex не работают. Если с VPN возиться не хочется, агента можно запустить на недорогом зарубежном сервере и обходиться без VPN вообще. Как это настроить по шагам, я разбирал в отдельной статье на своём сайте.

Сколько это стоит

Постоянные расходы на сайт небольшие:

  • VPS — около 810 ₽ в месяц плюс ~150 ₽ за публичный IP-адрес, всего около 960 ₽.
  • Домен — 100–200 ₽ за первый год, дальше около 400 ₽ в год.

Округлённо — 1000 ₽ в месяц.

Отдельная статья расходов на время активной разработки — подписка на нейросеть: от $20 на базовом тарифе до $100 на продвинутом, в рублях примерно от 2000 до 10 000 ₽. Готовому сайту подписка не нужна — он работает сам по себе. Но публиковать статьи и вносить правки через чат гораздо удобнее, чем руками, так что подписку есть смысл сохранить.

Даже по верхней планке на старте выходит около 10 000–11 000 ₽. Теперь сравните с классическим путём: час фрилансера-разработчика среднего уровня в России — 1500–3000 ₽, на сайт уходят десятки часов, то есть сразу десятки, а то и сотни тысяч рублей, и за каждую следующую правку — отдельный счёт и ожидание, пока подрядчик освободится. Свой личный сайт я собрал агентом за три дня. Его предыдущую версию на Тильде подрядчик делал месяц.

Какой путь мы выбираем

Все способы завести сайт сводятся к трём.

Готовые движки — WordPress, Joomla, Drupal, Битрикс. Ставите движок на сервер, работаете в его админке, расширяете темами и плагинами.

Конструкторы — Тильда, Wix, Squarespace, Webflow, Craftum. Сервис всё сделал за вас: собираете страницы из готовых блоков в его интерфейсе и платите подписку.

Разработка с нуля, как у программистов — наш вариант. Никакого чужого движка и чужой платформы, никаких рамок по дизайну и функциям. Только вместо программиста у нас агент. Сайт полностью под вашим контролем, платить не нужно ни разработчику, ни сервису за подписку. Как в этой схеме устроены контент и обновления — расскажу дальше, когда доберёмся до этих шагов.

Стартовый промт — берите готовый

Приложение стоит — создаём проект. VPS пока не нужен: сначала сайт целиком делается на вашем компьютере, в интернет он поедет уже готовым.

Создайте пустую папку с любым названием, например «мойсайт». В Claude Code или Codex укажите её как папку проекта и отправьте в чат промт:

Мне нужен сайт-визитка с блогом. Я не программист и в коде не разбираюсь: вся техническая работа на тебе, я смотрю результат, даю обратную связь и пишу контент. Объясняй всё простым языком, без жаргона; если термин неизбежен — тут же коротко его расшифруй. Когда тебе нужно что-то у меня узнать, давай варианты на выбор, а не открытые вопросы: правильного ответа я могу не знать. Что за сайт. Визитка плюс блог. На главной — короткий рассказ обо мне и моих услугах, CTA-кнопка, блоки с фичами, отзывами и ценами. Отдельные страницы: «обо мне», «контакты», «блог». Блог — лента статей с категориями, у каждой статьи своя страница. Дизайн современный и минималистичный, со светлой и тёмной темой. Стек технологий. Строго этот, всегда последние стабильные версии: — Next.js с App Router, React и TypeScript как основа. По умолчанию серверные компоненты, клиентские — только там, где без них нельзя. — Tailwind CSS для стилей. — shadcn/ui для компонентов интерфейса. — Статьи блога — в MDX: одна статья — один файл в content/blog/ с фронт-маттером (title, description, publishedAt, featuredImage, categories). — Все данные-списки (отзывы, ссылки и похожее) — JSON-файлами в content/. Базу данных не подключай. Vue, Svelte, Astro, WordPress и другие альтернативы не предлагай — решение в пользу Next.js окончательное. Дизайн. Свой дизайн с нуля не придумывай — у нейросетей он получается плохо. Собирай из готового: — Элементы интерфейса — только из shadcn/ui (npx shadcn@latest add …). — Секции целиком (hero, фичи, цены, отзывы, CTA, FAQ, футер) — из открытых коллекций блоков: Tailark, Magic UI, shadcn.io. Нет подходящего блока — собери из shadcn-компонентов, не выбиваясь из их стиля. — Светлая и тёмная темы — через next-themes. — Современные шрифты — через next/font. — Анимации лёгкие, без перегруза. Контент и админка. Админку не делай вообще. Контент управляется только через файлы в репозитории: .mdx-статьи редактирую я сам или ты по моей просьбе. Без CMS, без авторизации, без личных кабинетов. SEO с первого дня, ничего не откладываем на потом: — sitemap.ts и robots.ts в app/. — generateMetadata на каждой странице: уникальные title, description и OG-картинка. — Разметка JSON-LD: BlogPosting для статей, Person или Organization на главной, Review для отзывов, BreadcrumbList для навигации. — Canonical URL на всех страницах. — Все картинки через next/image — автоматические AVIF/WebP и ленивая загрузка. — После деплоя — пинг IndexNow со списком обновлённых URL (для Яндекса и Bing). Деплой и инфраструктура. — Развёртывание на VPS с последней LTS-версией Ubuntu: Docker (multi-stage build, output: standalone) и Docker Compose. — Nginx как reverse proxy, в конфиге HTTPS и сжатие gzip. — Сертификат Let's Encrypt через certbot, с автопродлением. — Workflow для GitHub Actions: автодеплой по пушу в main — тесты, сборка, деплой на VPS по SSH, healthcheck. Репозитория на GitHub пока нет, поэтому просто положи workflow-файл в проект — включим его позже, когда дойдём до публикации. — Скрипт первичной настройки VPS: запустим один раз, когда купим сервер. Документация и память. Создай в корне проекта файл CLAUDE.md (если ты Codex — AGENTS.md) и храни в нём всё, что нужно помнить между сессиями: стек, устройство папок, паттерны дизайна, доступы, когда появятся (IP сервера, имя пользователя, путь к SSH-ключу), правила деплоя, рабочие команды, наши договорённости. Один файл, без подпапок — мне так проще. Дополняй его по ходу работы сам, не жди моей просьбы. Как работаем. Перед большой задачей пишешь план: какие файлы создашь, какие изменишь, что от чего зависит. Начинаешь только после моего «делай». Работаешь маленькими итерациями, чтобы после каждой был виден результат. После правок запускаешь сайт локально (npm run dev) и проверяешь, что он открывается без ошибок. Проблемы чинишь сам, меня не зовёшь. Перед коммитом просматриваешь свои изменения: без мусора и закомментированного кода. Коммиты короткие и осмысленные, одна задача — один коммит. Что делаем прямо сейчас. Создай CLAUDE.md (или AGENTS.md) и запиши туда всё, о чём мы договорились этим промтом: стек, подход к дизайну, контент в файлах, инфраструктуру, порядок работы. Задай мне вопросы: название сайта, ниша и специализация, цветовая палитра, набор секций на главной, тон текстов. Получив ответы, сразу допиши их в CLAUDE.md. Предложи структуру проекта — страницы, папки, основные файлы — и план работы. Когда я скажу «делай» — начинай, шаг за шагом.

Промт можно переделать под свою задачу: вместо «сайт-визитка с блогом» напишите «лендинг онлайн-курса с формой заявки», «портфолио фотографа с галереями», «сайт коуча с отзывами и блогом». Всё остальное, если вайбкодите впервые, лучше не трогать.

Что мы попросили в промте — перевод на человеческий

В промте много страшных слов. Разбираться в них не обязательно — кодить будет агент, а не вы. Но если хочется понимать, что вы только что попросили, — вот перевод.

Next.js + React + TypeScript — движок сайта. Самый распространённый стек в мире, на нём работают миллионы сайтов. Сайты на нём быстрые и хорошо дружат с поиском. И главное: нейросети знают его лучше всего остального, поэтому меньше ошибаются и реже выдумывают несуществующее.

Tailwind CSS — способ задавать внешний вид. Стили записываются прямо в разметке страницы, без отдельных файлов. Агенту с ним проще, он не путается.

shadcn/ui — библиотека готовых красивых компонентов: кнопки, формы, карточки, попапы. Открытая и бесплатная. Агент копирует компоненты в проект — и сайт сразу выглядит опрятно. Без неё нейросети часто верстают, как плохой дизайнер.

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

Docker + Nginx + Let’s Encrypt + GitHub Actions — набор, благодаря которому сайт работает на сервере и открывается по защищённому https://. Docker упаковывает сайт в изолированную «коробку». Nginx стоит на входе, как швейцар: принимает запросы из интернета и передаёт их сайту. Let’s Encrypt бесплатно выдаёт HTTPS-сертификат. GitHub Actions обновляет сайт, когда меняется код. Звучит сложно, но всем этим занимается агент — вам туда лезть не придётся.

Почему стек именно такой:

  • Массовый: на нём миллионы сайтов по всему миру.
  • Проверенный, а не модная новинка, которая через год исчезнет.
  • Хорошо дружит с SEO: сайт быстро открывается, поисковики такое любят.
  • Если однажды позовёте живого разработчика — найдёте без труда, это мейнстрим.
  • Нейросети ориентируются в нём уверенно и ошибаются реже.

Учить всё это не нужно. От вас — один раз вставить промт. Дальше общаетесь с агентом обычным языком: «добавь блок с отзывами», «поменяй цвет кнопки», «напиши текст для главной».

Вопросы агента и его план

Промт заканчивается просьбой задать вопросы — без этого агент начнёт угадывать и сделает не то. Он спросит про название сайта, нишу, цвета, набор секций на главной, отзывы, форму заявки, тон текстов. Отвечайте коротко и как умеете. Не знаете ответа — честно пишите «не знаю, предложи варианты».

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

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

Первая версия

Дальше агент собирает каркас сайта по плану: запускает команды, создаёт файлы, ставит компоненты shadcn, складывает страницы из блоков. Уйдёт от десяти минут до пары часов — зависит от размера сайта и скорости вашей нейросети.

Когда первый кусок готов, агент пришлёт ссылку вида http://localhost:3000 и попросит открыть её в браузере. Это сайт, запущенный прямо на вашем компьютере. В интернете его нет, ничего никуда не опубликовано: видите его только вы. Можно спокойно править, ломать и переделывать — никто не заметит.

Открывайте ссылку в любом браузере — Chrome, Safari, Firefox — и смотрите. Вся разработка будет идти в этом режиме: сайт живёт у вас, вы доводите его до состояния «нравится», и только потом он поедет в интернет, к людям. До этого шага ещё дойдём.

Первая версия наверняка выйдет сырой: что-то стоит не там, отступы кривые, вместо текстов заглушки. Так и должно быть — дальше правим итерациями.

Возвращаетесь в чат и перечисляете конкретно, что не так:

  • «На главной хочу четыре карточки фич вместо трёх. Четвёртая — про такое-то».
  • «Шрифт заголовка великоват, уменьши примерно на четверть».
  • «Акцентную кнопку перекрась из синего в зелёный, оттенок поспокойнее».
  • «Первый абзац на странице «обо мне» замени на этот: [текст]».
  • «В футер добавь мои соцсети: Telegram, ВКонтакте, YouTube».

Агент правит, вы говорите «обнови localhost» и смотрите в браузере. Несколько таких кругов — и сайт на компьютере становится таким, каким вы его задумали.

До идеала на этом этапе доводить не стоит. Достаточно, чтобы сайт прилично выглядел и работал, — мелочи удобнее докручивать, когда он уже в интернете и виден с разных устройств.

Как получить красивый дизайн

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

Обойти это можно двумя способами.

Способ 1: готовые shadcn-блоки

Самый надёжный путь — он и зашит в наш промт. shadcn/ui — это библиотека красивых готовых элементов: кнопок, форм, карточек, попапов, которые дизайнеры выложили в открытый доступ бесплатно. К ней есть и готовые секции целиком: первые экраны (их называют hero), блоки с фичами, отзывами, ценами, FAQ, формами обратной связи.

Например, вот готовый shadcn-блок с ценами.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Строчка промта про «блоки из открытых коллекций — Tailark, Magic UI, shadcn.io» — как раз про такие заготовки. Агент сам находит в коллекциях подходящее, приносит в проект и складывает из них страницы, как из конструктора.

У подхода есть цена: сайт будет похож на другие сайты, собранные из тех же блоков. Зато без дизайнера и без мучений вы получаете ровный, аккуратный, профессиональный вид. Для первого сайта это важнее уникальности.

Оба моих сайта сделаны именно так.

Способ 2: Claude Design или Google Stitch

Если шаблонность не устраивает, есть два инструмента специально под дизайн.

Claude Design — инструмент Anthropic, вышел в апреле 2026. Подключаете проект, описываете промтом, что хотите, — он генерирует красивый макет страницы с учётом ваших цветов, шрифтов и стиля. Макет отдаёте в Claude Code как референс, и тот превращает его в код. Доступен на тарифах Pro, Max, Team и Enterprise: claude.com/design.

Google Stitch — инструмент Google Labs. Превращает текст или набросок в готовый макет интерфейса. Одним промтом можно описать сразу несколько связанных экранов — получится единый дизайн для страницы услуг, контактов, формы заявки. Бесплатный лимит — 350 обычных и 200 продвинутых генераций в месяц, одному сайту хватит с запасом: stitch.withgoogle.com.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Свои сайты я делал первым способом, без дизайн-инструментов. Начинал бы сегодня — попробовал бы и второй. Особенно для лендинга, где внешний вид решает.

Сохраняем код на GitHub

Однажды агент очередной правкой сломает то, что работало. Или вы скажете «верни как было», а он уже не вспомнит, как было. Или подведёт сам компьютер, и кусок сайта пропадёт. На все эти случаи нужен GitHub.

GitHub — бесплатный сервис для хранения кода, что-то вроде облака для него. Работает как сохранения в игре: получилось хорошо → попросили агента отправить код на GitHub → есть точка сохранения. Что бы дальше ни случилось с компьютером и как бы ни ошибся агент, к этой точке можно вернуться.

Заведите аккаунт на github.com — там всё просто. Потом поставьте агенту задачу:

Заведи GitHub-репозиторий для этого проекта: название мойсайт, доступ приватный — вижу только я. Загрузи туда весь текущий код и оформи первый коммит с понятным описанием. Дальше, когда я говорю «сохрани», делай новый коммит и отправляй его на GitHub.

Репозиторий, настройку Git и загрузку кода агент выполнит сам. Если для авторизации понадобится персональный ключ доступа GitHub, агент объяснит, где взять его в настройках аккаунта (Settings → Developer settings → Personal access tokens): скопируете строку и передадите ему.

Вот так выглядит репозиторий моего сайта.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Дальше правило: получилось что-то стоящее — говорите «сохрани», агент отправляет код на GitHub. Сломалось — говорите «откати к последнему сохранению». Потерять проект безвозвратно в этой схеме нельзя, точка возврата есть всегда.

Если хочется общаться с агентом на языке разработчиков, запомните два слова:

  • Коммит — сохранение на вашем компьютере, как кнопка «Сохранить» в Word.
  • Пуш — отправка накопленных сохранений в облако на GitHub, как выгрузка Word-файла на Google Диск.

Где живёт контент сайта

Пока агент собирает первую версию, полезно разобраться, где в такой схеме хранится контент.

В движках вроде WordPress контент лежит в базе данных, и путь к нему один — через админку. У нас всё иначе: статьи, отзывы, любые списки хранятся прямо в проекте обычными текстовыми файлами.

Статья блога — это файл с расширением .mdx в папке content/blog/. Внутри почти обычный документ: заголовки, абзацы, картинки, ссылки, форматирование. Сверху — короткий блок с настройками статьи: название, описание, дата публикации, обложка. Его обычно заполняет агент.

Открыть такой файл можно чем угодно, хоть Блокнотом на Windows, хоть TextEdit на Mac. Поправить опечатку или заменить слово руками — нормально: исправили, сохранили, готово. Правки посерьёзнее лучше делать через агента: в файле встречаются служебные блоки и настройки, которые проще не трогать руками.

Хотя на практике удобнее всего вообще всё делать через чат. «Опубликуй статью» → присылаете текст или ссылку → агент создаёт .mdx-файл, заполняет настройки, раскладывает картинки. «Добавь отзыв клиента» → текст и фото → отзыв на сайте. Это и есть наша замена админке.

Как ставить агенту задачи

Точность формулировок — главный навык в вайбкодинге: чем конкретнее задача, тем меньше кругов правок. Вот что я понял за два сайта.

Конкретно, а не абстрактно. «Сделай красиво» агенту ни о чём не говорит. Работает другое: «шрифт заголовка уменьши с 48 до 36 пикселей, сделай жирным, отступ до подзаголовка — 20 пикселей». А если конкретики у вас нет, запросите её у агента: «предложи три варианта оформления заголовка и опиши их, я выберу».

Показывайте, а не описывайте. Понравился блок на чужом сайте — скриншот в чат и «сделай похоже, только в наших цветах». Агент видит картинку и понимает, чего вы хотите. Ссылка на чужой сайт с той же просьбой тоже работает.

Дробите большие задачи. Пять пунктов в одной задаче — это пять отдельных задач с проверкой после каждой. Иначе агент что-то поймёт по-своему, а вы будете долго искать, где именно.

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

Не повторяйте неудачную формулировку — меняйте её. На ту же фразу агент обычно выдаёт тот же результат. Опишите, что конкретно не понравилось и каким должен быть итог.

Спрашивайте о непонятном. «Объясни простым языком, что ты сейчас сделал и зачем» — и разберётесь, и вовремя заметите, если агент понял задачу не так.

Одна задача — один чат. У агента есть контекстное окно — «оперативная память» текущего разговора. Долгий чат забивается старыми обсуждениями, кусками кода, неудачными попытками — и на этом фоне агент начинает тупить, путать задачи и выдумывать. Отсюда правило: закончили задачу — добавили статью, переделали секцию, починили баг — закрывайте чат и открывайте новый. Первой фразой в новом чате пишите «прочитай документацию проекта»: агент откроет CLAUDE.md, войдёт в курс дела и начнёт следующую задачу с чистой головой. Больше одной осмысленной задачи в чате лучше не делать.

Если агент буксует на задаче несколько попыток подряд — тоже открывайте новый чат. Перенесите туда вводные: что делаем, что не выходит, что уже пробовали. Свежая сессия часто сразу видит решение, вокруг которого старая ходила по кругу.

Фиксируйте удачные решения. Получилось хорошо — скажите: «запиши в CLAUDE.md, чтобы в следующий раз сделать так же». За месяц наберётся база, и агент перестанет каждый раз изобретать заново. У меня есть большой гайд по документации проектов для ИИ-агентов, тоже почитайте.

База знаний для агента

Файл CLAUDE.md (в Codex — AGENTS.md) мы завели ещё стартовым промтом. Это внутренний блокнот агента: каждую новую сессию он начинает с чтения этого файла и сразу понимает, что за проект перед ним и как тут всё устроено.

Туда идёт всё, что должно переживать смену сессий:

  • Стек и причины его выбора
  • Устройство папок проекта
  • Цвета, шрифты, правила дизайна
  • Доступы: IP сервера, имя пользователя, путь к SSH-ключу
  • Порядок деплоя
  • Договорённости, которые появляются по ходу работы

Скажите агенту прямо: «всё, что касается движка, бэкенда, дизайна, доступов и деплоя, храни в CLAUDE.md и дополняй сам, не дожидаясь моей просьбы».

И каждый раз, когда вместе принимаете решение — выбрали палитру, придумали структуру разделов, договорились хранить отзывы в JSON, — просите: «запиши в CLAUDE.md, чтобы не забыть».

Без этой базы агент недели через две начинает наводить хаос: забывает структуру папок, пишет в другом стиле, плодит дубли компонентов. С базой — работает ровно.

Публикуем сайт: покупаем VPS

Сайт на компьютере готов и нравится — пора выпускать его в интернет, чтобы его видели другие люди. Первый шаг — VPS.

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

Я арендую серверы на Бегете — пользуюсь этим хостингом с 2016 года, там же держу домены и почту. Оплата рублями, поддержка отвечает быстро.

Альтернатив хватает: Timeweb, Selectel, FirstVDS, RUVDS — все живые, все дают Linux-серверы. Но сам я на них не работал, а советовать привык только то, что проверил на себе.

На Бегете нужный раздел — «Облако → Создать сервер → Виртуальный сервер».

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Под визитку с блогом хватит 2 ядер, 2 ГБ памяти и 30 ГБ диска — на Бегете это примерно 810 ₽ в месяц (точная цена на странице тарифов, она меняется). Меньше не берите: при сборке сайту может не хватить памяти. Планируете блог на сотни статей — берите сразу 4 ГБ.

Отдельно проследите за публичным IP-адресом: без него сервер не виден из интернета, и домену будет некуда указывать. На Бегете публичный IPv4 идёт отдельной строкой в счёте — около 5 ₽ в день, то есть примерно 150 ₽ в месяц. У других хостингов похоже: IP либо входит в тариф, либо докупается. Просто проверьте при заказе, что IPv4 выбран.

Операционная система — последняя LTS-версия Ubuntu: сейчас это 26.04, она вышла в апреле 2026. Самый стандартный вариант, агенту с ним привычнее всего.

Заодно купите домен, если его ещё нет, — на том же Бегете или у любого регистратора вроде REG.RU и RU-CENTER. Первый год стоит 100–200 ₽.

Доступ к серверу — по SSH-ключу

В форме создания VPS есть блок «Аутентификация» — то, как вы будете подключаться к серверу. Подключаться придётся не только вам: агенту тоже нужен доступ, чтобы настроить на сервере Docker, Nginx и всё остальное. Мы ведь не разработчики и руками туда не полезем.

Варианта два: пароль или SSH-ключ.

Пароль удобный, но плохой вариант — хотя бы потому, что его придётся как-то сообщить агенту. Писать пароль от root в чат нельзя никогда: он может осесть в логах, истории переписки, обучающих данных нейросети. Риск настоящий.

SSH-ключ — правильный вариант. Это файл, который выполняет роль пароля, но лежит на вашем компьютере и никуда не отправляется. Агенту достаточно один раз узнать путь к нему — и он подключается к серверу, а в чате никакие секреты не появляются.

Поэтому при создании VPS выбирайте аутентификацию по SSH-ключу. Если ключа у вас нет — сделаем его прямо сейчас.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Напишите агенту:

Сгенерируй мне SSH-ключ для доступа к VPS на Бегете: создай пару ключей на этом компьютере и выведи публичную часть одной длинной строкой — я вставлю её в форму на сайте хостинга.

Агент выполнит нужную команду и создаст два файла: приватный ключ — секретный, остаётся у вас, и публичный — его можно показывать. Публичную часть он выведет в чат: длинную строку, которая начинается с ssh-ed25519 или ssh-rsa.

Копируете строку, возвращаетесь на Бегет: «Добавить новый SSH-ключ» → вставили → «Добавить». В форме создания сервера выбираете этот ключ из списка — и сервер создаётся сразу с ним.

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

У созданного сервера появится IP-адрес. Сразу отдайте его агенту на хранение, чтобы потом не искать:

VPS на Бегете создан. IP-адрес: такой-то. Пользователь — root. Вход — по SSH-ключу, который ты только что сгенерировал. Запиши всё это в файл документации (CLAUDE.md или AGENTS.md): когда я в следующий раз попрошу подключиться к серверу, ты должен знать, куда и как заходить.

Теперь доступы не придётся повторять: при любой работе с сервером агент возьмёт их из своей документации.

Пароль root придёт на почту, но не пригодится — всё пойдёт через ключ.

Если VPS уже куплен и доступ там по паролю — пароль в чат всё равно не пишите. Скажите агенту:

У меня VPS, доступ пока только по паролю. IP и имя пользователя такие-то. Пароль в чат писать не буду — это небезопасно. Дай мне подробную пошаговую инструкцию, как самостоятельно добавить на сервер SSH-ключ. Я не технарь, объясняй максимально просто.

Он распишет шаги: создать ключ, выполнить в терминале команду ssh-copy-id, один раз ввести пароль самому. Дальше работа идёт только через ключ, пароль больше не нужен.

Публикуем сайт: разворачиваем на VPS

Сервер куплен, доступы записаны — переносим сайт. Задача агенту:

Зайди на мой VPS — IP, пользователя и SSH-ключ ты записал в документацию проекта. Разверни там наш сайт. Начни с безопасности: создай отдельного пользователя без root-прав и всю дальнейшую работу веди от него. На сервере подними такое окружение: сайт работает в Docker-контейнере через Docker Compose, впереди стоит Nginx в роли reverse proxy, в firewall открыты порты 80 и 443. HTTPS пока не трогай — сертификат выпустим после подключения домена. В конце запусти сайт в Docker и убедись, что он отвечает по IP-адресу.

Агент зайдёт на сервер по SSH, поставит всё необходимое окружение и запустит сайт. Это самый долгий этап: от получаса до пары часов — в зависимости от того, сколько раз что-нибудь пойдёт не так и потребует починки. Агент будет отчитываться по ходу: «жду, пока установится X», «сделал Y», «вот результат Z».

Когда он закончит, проверьте сами: наберите в браузере http://IP-вашего-сервера — должна открыться ваша первая версия. Сайт уже в интернете, пусть пока по IP-адресу и без https:// — сейчас это исправим.

Подключаем домен

Меняем IP на нормальный адрес и заодно включаем https://.

В кабинете сервиса, где куплен домен, добавьте A-запись — настройку, которая связывает адрес с сервером: «этот домен ведёт на этот IP». Тип записи — A, имя — @, значение — IP вашего сервера. Это единственный шаг гайда, который агент не сделает за вас: настройки DNS живут у регистратора.

На Бегете нужный экран — «Домены и поддомены → ваш домен → Редактировать DNS».

Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Если не находите его в кабинете, спросите агента: «домен куплен на Бегете (или другом сервисе), не могу найти, где добавить A-запись, объясни по шагам». Он подскажет, куда нажимать.

DNS обновляется 5–30 минут. Параллельно дайте агенту задачу:

Домен такой-то теперь указывает на наш сервер. Обнови конфиг Nginx под этот домен, выпусти через certbot сертификат Let's Encrypt для HTTPS и настрой его автопродление. После этого включи редирект с http на https.

Агент перенастроит Nginx, certbot выпустит сертификат. Открываете https://вашсайт.ру — сайт работает: нормальный адрес, защищённое соединение.

Публикуем сайт: настраиваем автодеплой

Осталось одно неудобство: после каждого изменения кода сайт на сервере нужно обновлять — самому или через агента. Настроим автоматику: изменился код на GitHub — сайт на VPS обновился сам. Этим занимается GitHub Actions.

Задача агенту:

Настрой автодеплой через GitHub Actions по такой схеме: на каждый пуш в ветку main GitHub Actions заходит на мой VPS, подтягивает обновлённый код, заново собирает Docker-контейнер, перезапускает сайт и в конце убеждается через healthcheck, что сайт живой. Любая ошибка — деплой отменяется, на сервере остаётся прежняя рабочая версия. SSH-ключ для сервера положи в GitHub Secrets под именем VPS_SSH_KEY, IP — как VPS_HOST, имя пользователя — как VPS_USER (тот deploy-пользователь без root-прав с прошлого шага). Покажи мне, где всё это находится в интерфейсе GitHub и что именно туда вставлять.

Агент подготовит workflow и объяснит, куда положить секреты (Settings → Secrets and variables → Actions → New repository secret). Для проверки делаете тестовый коммит и пуш в main — GitHub Actions сам подхватит изменения и развернёт их. Через пару минут они видны на сайте.

Как дальше жить с сайтом: правки и контент

С опубликованным сайтом работа выглядит так. Открываю Claude Code или Codex с проектом и пишу в чат задачу. Например:

На странице консультаций, под текущим блоком отзывов, добавь горизонтальную карусель карточек клиентов. Компонент карусели возьми из shadcn; в карточке — фото, имя, должность и короткая цитата. Данные бери из существующего файла testimonials.json.

Длинные задачи удобнее наговаривать, чем печатать. Я пользуюсь Handy — бесплатной программой для голосового ввода: работает оффлайн, есть под Mac, Windows и Linux. Зажали клавишу, продиктовали, отпустили — текст вставился. Сайт: handy.computer.

Агент читает базу знаний проекта, смотрит существующий код и присылает план: какие файлы создаст, какие изменит. План хороший — говорите «делай». Нет — правите.

Результат проверяете у себя на компьютере, на http://localhost:3000. Что-то не так — уточняете: «отступы между карточками уменьши в полтора раза», «высоту карточки зафиксируй», «при наведении добавь плавную анимацию». Пара итераций — и порядок.

Когда всё устраивает — говорите «коммить и пуш». Агент сохраняет изменения в Git, отправляет на GitHub, оттуда GitHub Actions сам выкатывает новую версию на сервер. Через несколько минут её видят посетители.

Альтернатива VPS — Vercel, если аудитория зарубежная

Если сайт на английском и клиенты иностранные, вместо VPS можно взять Vercel — хостинг от авторов Next.js, сделанный специально под него. Сразу три шага гайда — GitHub, разворачивание на сервере, автодеплой — там сжимаются в один: подключаете репозиторий, остальное Vercel делает сам.

Что он даёт:

  • Бесплатный тариф Hobby, которого хватает личным проектам. Правда, формально Hobby только для некоммерческого использования: лендингу, который продаёт ваши услуги, положен Pro за $20 в месяц — иначе сайт могут отключить без предупреждения.
  • Публикацию одной кнопкой после подключения GitHub-репозитория — без серверов и настроек.
  • Превью-ссылку на каждое изменение: удобно показывать клиенту до публикации.
  • HTTPS-сертификат, ускорение загрузки и оптимизацию картинок — из коробки, бесплатно.
Свой сайт без разработчика: как собрать и запустить его с помощью ИИ-агента

Недостаток один, но серьёзный: в России кастомные домены на Vercel часто не открываются. Vercel попадает под блокировки рикошетом: Роскомнадзор закрывает отдельные IP-адреса, а на одном IP кроме вашего сидят чужие сайты. Стандартный адрес *.vercel.app обычно работает, а вот кастомный домен рискует оказаться на «плохом» IP — и читатели из России без VPN до сайта не дойдут.

Поэтому для русскоязычной аудитории — VPS. Для зарубежной Vercel и дешевле, и заметно проще в настройке.

Если у вас уже есть сайт на Тильде или WordPress

Главный риск переезда — потерять поисковый трафик. Если страница перестала открываться по старому адресу, а поисковик не получил редиректа на новый, позиции просядут и трафик уйдёт.

Перенести нужно:

  • Тексты страниц и статей
  • Картинки
  • Адреса страниц — через 301-редиректы

Порядок такой:

  1. Откройте sitemap старого сайта — обычно он лежит по адресу вашсайт.ру/sitemap.xml и перечисляет все URL.
  2. Сохраните ссылку на него или скачайте файл.
  3. Передайте агенту: «вот sitemap старого сайта, прочитай его и настрой 301-редиректы со всех старых адресов на новые; структуру новых URL обсудим». Дальше проговорите с ним схему адресов — например, /blog/old-slug так и остаётся /blog/old-slug.
  4. Я проходил это при переезде с Тильды: Claude разобрал sitemap и сделал 80 редиректов за один заход.

Если sitemap почему-то не открывается, дайте агенту ссылку на сайт — он соберёт полную структуру страниц сам.

После деплоя проверьте руками: старый URL в браузере должен перебрасывать на новый адрес, без ошибки 404.

SEO — с первого дня

Если сайт делается под поисковый трафик, SEO закладывается сразу. Прикручивать его к готовому сайту — значит переписывать половину кода или жить на костылях. В Next.js всё ставится легко, нужно только попросить агента в самом начале.

Список можно отправить агенту как есть, ещё на этапе первой версии:

  • Sitemap.xml — карта сайта со списком всех страниц, по ней поисковики понимают, что у вас есть.
  • Robots.txt — правила для поисковых ботов: что индексировать, что нет.
  • Метаданные на каждой странице — заголовок, описание и картинка для аккуратного превью в соцсетях.
  • Разметка Schema.org — служебная разметка, которая объясняет поисковику содержимое страницы: статья, человек, отзыв. Повышает кликабельность в выдаче: у статей появляются даты и авторы, у отзывов — звёзды.
  • Canonical URL — главный адрес каждой страницы, чтобы её версии с разными параметрами в URL не считались дублями.
  • Оптимизация картинок — современные форматы и загрузка по мере прокрутки. Сайт ускоряется в разы, поисковики это учитывают.
  • IndexNow — протокол мгновенной переиндексации для Яндекса и Bing: сайт сам сообщает поисковикам о новых страницах, и они попадают в выдачу за часы, а не за недели. Google протокол не поддерживает (на 2026 год), но ему хватает обычного sitemap.

Аналитика — что ставить

Что ставить, зависит от аудитории.

Русская аудитория

Яндекс.Метрика. Бесплатная и мощная: вебвизор с видеозаписями сессий пользователей, карты кликов, тепловые карты. Отдельный плюс — связка с Яндекс.Вебмастером и Директом: вся картина в одном месте.

Яндекс.Вебмастер. Показывает сайт глазами Яндекса: какие страницы в индексе, какие нет, по каким запросам приходят люди, где технические ошибки. Работать без него — вслепую.

Подключаются оба без сложностей. В Метрике (metrika.yandex.ru) нажимаете «Добавить счётчик», вводите домен, получаете восьмизначный ID — и агенту: «добавь Яндекс.Метрику с таким-то ID». В Вебмастере (webmaster.yandex.ru) добавляете сайт, выбираете подтверждение — мета-тег или DNS-запись, — копируете строку и агенту: «добавь этот мета-тег в head главной страницы».

Зарубежная аудитория

Google Analytics. Стандарт индустрии, подключается по ID.

Google Search Console. Аналог Яндекс.Вебмастера: как Google видит сайт, что проиндексировано, по каким запросам приходят люди. Обязательный минимум.

Подводные камни

Не публикуйте без проверки на своём компьютере. «Давай сразу на сервер, там и посмотрим» — заманчиво, но сломанный рабочий сайт обходится дороже минуты, потраченной на просмотр локальной версии в браузере.

Внутри проекта — английский. По-русски — только тексты сайта и статьи блога. Названия файлов, записи в CLAUDE.md, комментарии в коде — по-английски: так нейросеть работает быстрее и точнее и не путается в кодировках.

Проверяйте за агентом. Он ошибается: может удалить нужный файл, может выкатить странное. Перед публикацией нового кода я бегло просматриваю, что он сделал, и проверяю результат у себя на компьютере. Не вместо доверия, а вместе с ним.

Не пытайтесь сделать всё сразу. Первая версия — это минимум: главная, блог, одна-две страницы. Остальное — итерациями. Если сразу заталкивать в неё travel-карту, спикерское портфолио, форму обратной связи и интеграцию с CRM, получится монстр Франкенштейна. Я пробовал — потом всё переделывал.

Что делать, если застряли

Главный страх нетехнаря в вайбкодинге: «сломаю так, что не пойму, как чинить». Вот что делаю я в таких случаях.

Ошибка на экране — скриншот агенту и «вот что случилось, поправь». Большинство проблем на этом и заканчивается.

Непонятен ответ агента — «объясни простым языком для нетехнаря». Перескажет по-человечески.

Сломалось после последней правки — «откати к последнему сохранению на GitHub». Агент вернёт код к предыдущему рабочему состоянию. Если поломка успела уехать на сайт, после отката автодеплой сам восстановит там рабочую версию. Необратимых поломок в этой схеме не бывает.

Агент ходит по кругу и ломает одно и то же место — новый чат, туда вводные: вот код, вот цель, вот ошибка. Свежая сессия часто замечает то, что старая пропускала. Второе мнение тоже работает: сидите в Claude — спросите Codex или ChatGPT.

И основа всего этого — частые коммиты в GitHub. Сохраняйтесь после каждой удачной итерации, и любая правка будет обратимой.

Что получается в итоге

Свой сайт: современный, быстрый, нормально живущий в поиске. Правки вносите сами через чат за минуты — не за дни через дизайнера.

Код целиком ваш. Захотели переехать на другой сервер, продать сайт или передать его другому человеку — забрали репозиторий, и всё.

Расходы — около 1000 ₽ в месяц на сам сайт плюс подписка на нейросеть.

И бонус, который замечаешь позже: через месяц плотной работы с агентом вы начинаете понимать разработчиков без переводчика. Не по курсам — просто потому, что реальные термины много раз звучали в реальных задачах.

Скиллы для Claude Code, которыми пользуюсь сам, лежат у меня в открытом репозитории: github.com/pavel-molyanov/molyanov-ai-dev. Их можно склонировать, скопировать в свой ~/.claude/ и пользоваться. А если хотите научиться делать свои скиллы — гляньте вот этот гайдик.

Дальше дело за вами: придумайте название сайта, купите домен, оформите подписку на ChatGPT или Claude, поставьте приложение — и вперёд по этому гайду.

Больше про работу с нейросетями и ИИ-агентами в реальных проектах — в моём телеграм-канале.

Источник: vc.ru

Оцените материал:

Поделиться
Понравилась статья? Расскажите другим
ВКонтакте
Читайте также
Новости робототехники Страх перед человекоподобными роботами подтолкнул рабочих к забастовке на автомобильном заводе Hyundai. Новости робототехники Основатель Максимо рассказывает, как робототехника строит строительство солнечной энергетики. Архив рубрики ~Обо всем~ Астрономы нашли кандидата в самый далекий галактический бар. Он существовал спустя почти 1,2 миллиарда лет после Большого Взрыва Новости робототехники По заключению Национального совета по безопасности на транспорте (NTSB), водитель Tesla, который объяснил аварию тем, что автопилот нажал на педаль газа на 100%. Новости робототехники Mondo Robotics представляет собой Beni, вездеходного робота с электрической розеткой и искусственным интеллектом для потребителей. Архив рубрики ~Обо всем~ «Парачастицы» могут стать представителями третьего царства квантовых частиц Архив рубрики ~Коротко из Telegram~ Нейросеть обучили подсчету и оценке качества семян Архив рубрики ~Коротко из Telegram~ «Комендантский час» на соцсети для подростков 16-17 лет хотят ввести… Архив рубрики ~Коротко из Telegram~ В Южной Корее создадут бесплатного ИИ-бота для всех граждан. Архив рубрики ~Коротко из Telegram~ В США 73% технических вакансий требуют навыков работы с ИИ,… Архив рубрики ~Обо всем~ Компания SpaceX внезапно прервала второй запуск Starship V3 после запуска двигателя. Архив рубрики ~Коротко из Telegram~ Samsung хочет обучать ИИ на данных здоровья Архив рубрики ~Коротко из Telegram~ Бывший глава «Яндекс Лавки» вышел в Nebius Илья Красильщик, медиаменеджер… Архив рубрики ~Коротко из Telegram~ Хотел рассказать про запуск самого большого в мире Starship —… Новости робототехники Страх перед человекоподобными роботами подтолкнул рабочих к забастовке на автомобильном заводе Hyundai. Новости робототехники Основатель Максимо рассказывает, как робототехника строит строительство солнечной энергетики. Архив рубрики ~Обо всем~ Астрономы нашли кандидата в самый далекий галактический бар. Он существовал спустя почти 1,2 миллиарда лет после Большого Взрыва Новости робототехники По заключению Национального совета по безопасности на транспорте (NTSB), водитель Tesla, который объяснил аварию тем, что автопилот нажал на педаль газа на 100%. Новости робототехники Mondo Robotics представляет собой Beni, вездеходного робота с электрической розеткой и искусственным интеллектом для потребителей. Архив рубрики ~Обо всем~ «Парачастицы» могут стать представителями третьего царства квантовых частиц Архив рубрики ~Коротко из Telegram~ Нейросеть обучили подсчету и оценке качества семян Архив рубрики ~Коротко из Telegram~ «Комендантский час» на соцсети для подростков 16-17 лет хотят ввести… Архив рубрики ~Коротко из Telegram~ В Южной Корее создадут бесплатного ИИ-бота для всех граждан. Архив рубрики ~Коротко из Telegram~ В США 73% технических вакансий требуют навыков работы с ИИ,… Архив рубрики ~Обо всем~ Компания SpaceX внезапно прервала второй запуск Starship V3 после запуска двигателя. Архив рубрики ~Коротко из Telegram~ Samsung хочет обучать ИИ на данных здоровья Архив рубрики ~Коротко из Telegram~ Бывший глава «Яндекс Лавки» вышел в Nebius Илья Красильщик, медиаменеджер… Архив рубрики ~Коротко из Telegram~ Хотел рассказать про запуск самого большого в мире Starship —…

Оставить комментарий