Разработка сайта через ИИ: полный локальный пайплайн на Claude Code и ChatGPT Codex

Если вы ищете способ, как создать сайт с помощью ИИ, который реально работает на продакшн, а не просто создает шаблонный лендинг, этот материал для вас. Мы разберем, как нейросеть делает сайты в руках опытного разработчика, используя Claude Code и ChatGPT Codex. Это руководство ответит на вопрос, какой ИИ создает сайты наиболее эффективно, и покажет, как сделать сайт с помощью нейросети, чтобы не просто сгенерировать код, а выстроить полноценную архитектуру.

Ниже - практический план для разработчика из России: от подключения агентов до задеплоенного сайта. Без «вайб-кодинга наугад» — с контекст-файлами, ветками, ревью и проверками.

Что получится на выходе?

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

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

Локальный проект, который целиком собран двумя терминальными агентами и который вы контролируете на каждом шаге:

• репозиторий с историей коммитов, где каждый коммит — законченная итерация;

• рабочий фронтенд (Next.js / Vue / WordPress-тема — на выбор);

• контент и SEO-разметка;

• формы с бэкендом и защитой от спама;

• Docker-сборка и деплой на VPS с HTTPS.

Агенты пишут код. Вы задаёте архитектуру, режете задачи, ревьюите диффы и отвечаете за результат. Это не «сайт за один промпт» — это сокращение времени разработки в 3–5 раз при сохранении контроля.

1. Доступ и оплата: что нужно россиянину

Это первый блокирующий пункт, и его лучше решить до установки чего-либо.

1.1. Общая ситуация

Ни Anthropic, ни OpenAI официально не обслуживают Россию. Практически это означает три отдельные проблемы:

1. IP-адрес. Регистрация, вход и работа агента требуют зарубежного IP. Российский адрес отдаёт ошибку доступа или блокирует запросы агента посреди сессии.

2. Платёж. Российские карты не проходят. Нужна альтернатива.

3. Телефон и почта для регистрации. OpenAI не принимает номера +7. У Anthropic регистрация мягче, но привязка телефона тоже может понадобиться.

1.2. Как платить

Работающие в 2026 году варианты, по убыванию контроля над аккаунтом:

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

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

API-баланс вместо подписки. Пополняете Anthropic Console / OpenAI Platform и работаете по токенам. Плюс: нет ежемесячной подписки, платите за факт. Минус: на плотной агентной разработке выходит заметно дороже подписки, и лимиты нужно контролировать самому.

Оплата через мобильного оператора / магазины приложений. Для Claude в 2026 году работает оплата через «МТС Оплата»; часть подписок можно оформить через App Store или Google Play с зарубежным аккаунтом. Способ рабочий, но не для всех тарифов.

1.3. Что брать по тарифам

По состоянию на август 2026:

Отдельной «подписки Claude Code» не существует: Claude Code входит в обычную подписку Claude. То же с Codex — он входит в подписку ChatGPT, отдельно не продаётся.

Реалистичный минимум для старта: Claude Pro + ChatGPT Plus = $40/мес. На плотной разработке лимиты Pro-уровня заканчиваются за 2–4 часа активной работы, и вы упрётесь в апгрейд до Max.

1.4. VPN: требования

Обычный «VPN для ютуба» здесь не годится. Нужен:

• стабильный выделенный IP страны, где сервис обслуживается (не общий IP на 200 человек — иначе прилетит бан за подозрительную активность);

• маршрутизация на уровне системы или WSL, а не только в браузере — агент ходит из терминала;

• отсутствие разрывов: обрыв на середине агентной сессии убивает контекст задачи.

Практично поднять свой узел (Xray/WireGuard) на зарубежном VPS и завернуть трафик разработческой машины через него. Если пользуетесь WSL2 — проверьте, что туннель поднят на уровне Windows и WSL его наследует, либо настройте прокси внутри WSL отдельно:

1.5. Что нельзя делать

• Логиниться из-под российского IP «один разок» — это самая частая причина блокировки аккаунта, за который вы заплатили.

• Шарить один аккаунт на несколько человек.

• Заливать в агента персональные данные клиентов и коммерческую тайну без разрешения. По 152-ФЗ трансграничная передача персональных данных требует отдельных оснований, и «я скинул базу в чат» — это нарушение, а не оптимизация.
  

⚠️ ВНИМАНИЕ: Золотое правило доступа
Никогда не пытайтесь «проверить» или «просто залогиниться» в аккаунт Claude или ChatGPT без активного, проверенного VPN с зарубежным IP. Система безопасности Anthropic и OpenAI отслеживает не только IP, но и отпечатки браузера. Один «чистый» вход из РФ — это почти гарантированная блокировка аккаунта с потерей всех денег на балансе подписки.

2. Локальная среда

2.1. Железо

Минимум: 16 ГБ RAM, SSD, 4 ядра. Агенты не считают ничего локально — нагрузку даёт то, что вы запускаете параллельно (dev-сервер, Docker, база, браузер, IDE). На 8 ГБ работать можно, но с одним контейнером и без Chrome.

2.2. Операционная система

Ubuntu 22.04/24.04 — самый предсказуемый вариант. Всё нативно, никаких прослоек.

Windows 11 + WSL2 — рабочий вариант, если основная ОС Windows. Ключевое правило: проект держите внутри файловой системы WSL (~/projects/...), а не в /mnt/c/.... На /mnt/c файловые операции медленнее в разы, а node_modules и watch-режимы работают отвратительно.

💡 СОВЕТ: Файловая система WSL
Никогда не работайте с проектами, которые лежат на диске C (путь /mnt/c/). Это медленно и вызывает баги в работе npm/pnpm. Всегда создавайте рабочую папку внутри домашней директории пользователя в Ubuntu (например, ~/projects/), чтобы файловые операции работали на максимальной скорости.

macOS 13+ — всё работает из коробки.

2.3. Базовый стек

Одной строкой на чистой Ubuntu/WSL:

Что ставится и зачем:

• Node.js 22 LTS — требуется Codex CLI и npm-вариантом Claude Code;

• pnpm — быстрее и экономнее npm на проектах с большим деревом зависимостей;

• ripgrep — агенты используют его для поиска по кодовой базе; без него они читают файлы целиком и жгут контекст;

• jq — разбор JSON в хуках и скриптах;

• git — обязателен, это ваша страховка от агента (см. раздел 10).

Docker (если нужны база, Redis, PHP):

Git — настроить сразу, иначе агент не сможет коммитить:

3. Установка Claude Code

Рекомендуемый способ — нативный установщик, без Node.js:

Windows PowerShell:

Бинарник ложится в ~/.local/bin/claude. Если после установки claude не находится — каталога нет в PATH:

npm-вариант (npm install -g @anthropic-ai/claude-code) считается легаси, требует Node 22+ и под капотом ставит тот же бинарник. Если вы начинали с него — перейдите на нативный и снесите npm-копию, иначе получите конфликт версий:

claude doctor — первая команда при любых проблемах: показывает тип установки, версию, PATH и конфликтующие копии.

Первый вход:

Откроется браузер для OAuth. Логиньтесь под аккаунтом с подпиской — токен ляжет локально, повторно входить не нужно. Альтернатива для API-баланса: переменная ANTHROPIC_API_KEY.

🆘 ПАНИЧЕСКИЙ ПРОТОКОЛ: Что делать, если агент «сошел с ума»
Иногда агент может зациклиться, начать переписывать одни и те же файлы или «галлюцинировать». Если это случилось:
1. Прервите процесс: Нажмите Ctrl + C в терминале.
2. Откатите изменения: Если агент успел насоздавать лишнего, выполните git reset --hard (это удалит все незакоммиченные изменения).
3. Начните заново: Запустите агента снова и дайте ему чёткую команду: "Stop the current task, start over from the current state, and follow instructions in CLAUDE.md".
Не пытайтесь «убедить» агента, если он сделал 5 ошибок подряд — откат через git всегда надежнее.

4. Установка Codex CLI

Вход — под аккаунтом ChatGPT:

Если раньше пользовались Codex через API-ключ и хотите перейти на подписку:

Codex доступен ещё в трёх видах: расширение для VS Code (и для форков — Cursor, Windsurf), десктопное приложение и облачный агент в вебе. Для локальной разработки достаточно CLI и расширения.

5. Зачем два агента, а не один

Смысл связки не в том, чтобы «было больше ИИ». Смысл в трёх вещах.

Разные слепые зоны. Модели ошибаются по-разному. Код, который написал один агент, второй читает без «авторской слепоты» — он не защищает своё решение, потому что оно не его.

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

Параллельность. Один делает фичу в ветке, второй в это же время пишет тесты или чинит баг в другой ветке. Через git-worktree это два независимых каталога одного репозитория:

Практичное разделение ролей

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

Теперь вы понимаете, как делать сайты через ИИ, используя связку моделей для достижения максимального результата. Если вы думали, может ли нейросеть сделать сайт целиком, ответ — да, но под вашим контролем. Этот метод — создание сайта с помощью ИИ онлайн (через API-связки) и локально — позволяет закрыть потребности бизнеса в разы быстрее, чем при традиционной разработке.

💡 СОВЕТ: Экономия лимитов
Если вы работаете в Pro-тарифе, вы можете быстро упереться в лимиты сообщений. Чтобы не останавливать работу:
- Используйте Claude Code для архитектуры и кода.
- Используйте Codex CLI (или веб-интерфейс ChatGPT) для мелких правок текста, поиска багов или генерации unit-тестов.
Переключение между агентами позволяет «растянуть» лимиты одного проекта на весь рабочий день.

6. Контекст-файлы: самое важное перед первым промптом

Агент без контекста генерирует усреднённый интернет-код. Агент с контекстом генерирует ваш код. Разница колоссальная, а стоит она 20 минут работы.

6.1. CLAUDE.md (для Claude Code) и AGENTS.md (для Codex)

Кладутся в корень репозитория. Содержимое почти одинаковое — можно сделать один файл, а второй симлинком:

Шаблон:

Последний блок про «не создавать документацию по своей инициативе» — не придирка. Без него агенты засыпают репозиторий markdown-файлами с пересказом того, что и так видно в коде.

6.2. Что ещё положить в репозиторий

• /docs/tz.md — техзадание в том виде, в котором вы его согласовали;

• /docs/design.md — описание дизайн-системы: палитра, шрифты, отступы, брейкпоинты;

• /docs/content-plan.md — структура страниц и семантика;

• скриншоты макетов в /docs/mockups/ — оба агента читают изображения.
  

7. Пошаговый план разработки

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

Шаг 1. Техзадание

Не начинайте с кода. Начните с того, чтобы агент разобрал ваши входные материалы и задал вопросы.

Промпт:

Отвечаете, потом:

Раздел «что вне скоупа» — обязателен. Он же потом защищает вас от бесконечных правок заказчика.

Шаг 2. Каркас проекта

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

Дальше кладёте CLAUDE.md, docs/, запускаете агента и просите привести конфиги в порядок:

Шаг 3. Дизайн-система

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

Страница /ui-kit — ваш инструмент приёмки. Открыли, посмотрели глазами, поправили, и дальше все страницы собираются из проверенных кубиков.

Шаг 4. Layout и навигация

Шаг 5. Страницы

По одной странице за итерацию. Не «сделай весь сайт».

После каждой страницы:

Шаг 6. Контент

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

Шаг 7. Формы и бэкенд

Отдельно проверьте: агенты регулярно оставляют реальные значения в .env.example и логируют тело запроса в консоль. Это надо ловить на ревью.

Шаг 8. SEO и микроразметка

Отдельно про GEO/AEO: если хотите, чтобы сайт цитировали ИИ-поисковики, проверьте, что ваш хостинг не режет их краулеров. Российские anti-DDoS-прослойки на шаред-хостингах регулярно блокируют GPTBot и ClaudeBot, при этом пропуская OAI-SearchBot и PerplexityBot — и вы этого не заметите, пока не проверите логи руками.

Шаг 9. Проверка качества

Прогоняете сами, потом отдаёте агенту чинить:

Промпт на исправление:

Дополнительно: проверка битых ссылок, контраста, alt-текстов, работы без JS, мобильных брейкпоинтов на 360px.

Шаг 10. Docker и деплой

Дальше — на VPS. Для сайтов, собирающих персональные данные российских пользователей, сервер должен быть в РФ: это требование 152-ФЗ о локализации баз персональных данных. Плюс политика конфиденциальности, форма согласия и уведомление в Роскомнадзор об обработке ПДн.

Развёртывание одной строкой:

HTTPS:

8. Вариант с WordPress

Если сайт делается на WordPress, логика та же, меняются шаги 2–5.

Локальная среда — Docker:

Агента подключаете к каталогу темы, а не ко всему WordPress:

В CLAUDE.md обязательно:

Без последних трёх правил агент напишет рабочий, но дырявый код: SQL-инъекции и отсутствие nonce — самые частые находки при ревью ИИ-кода на WordPress.

9. Как формулировать промпты

Плохо: «сделай красивую главную страницу».

Хорошо — по структуре:

1. Контекст. Какой файл, какой компонент, какая часть системы.

2. Задача. Одно изменение, одна цель.

3. Ограничения. Что нельзя трогать, какие библиотеки нельзя ставить.

4. Критерий приёмки. Как вы поймёте, что готово.

Пример:

Ещё три приёма, которые сильно повышают качество:

Просите план до кода. «Сначала распиши план изменений по файлам, жди подтверждения». Это ловит непонимание задачи до того, как агент перепишет 15 файлов.

Требуйте объяснения выбора. «Почему ты выбрал этот подход, какие были альтернативы» — половина сомнительных решений отваливается на этом вопросе сама.

Просите найти проблемы, а не подтвердить решение. «Найди в этом коде 5 проблем» работает лучше, чем «всё ли тут хорошо».

10. Гигиена работы с агентами

Git — не опция. Коммит перед каждой крупной задачей. Если агент ушёл не туда — git reset --hard, а не двадцать минут разгребания.

Ветка на фичу. git checkout -b feature/forms. Мержите только то, что просмотрели.

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

Ограничивайте автономность на старте. Режимы «делай что хочешь без подтверждений» экономят время только на кодовой базе, которую вы уже знаете наизусть, и с чистым git-статусом.

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

Секреты — мимо агента. .env в .gitignore до первого коммита. Ключи, доступы к БД, токены клиентов — не в промпт и не в файлы, которые агент читает.

Контекст надо чистить. Длинная сессия деградирует: агент начинает противоречить сам себе и забывать ранние договорённости. Новая крупная задача — новая сессия, важное — в CLAUDE.md, а не в переписке.

11. Сколько это стоит и где лимиты

Ориентир для одного корпоративного сайта на 8–12 страниц:

• подписки: $40/мес при минимальной конфигурации, $120 при Claude Max;

• VPS под деплой: 400–1200 ₽/мес;

• VPS под свой VPN-узел: 200–500 ₽/мес;

• домен .ru: ~300 ₽/год;

• время: 3–6 рабочих дней вместо 3–4 недель ручной разработки.

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

12. Частые ошибки

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

Не проверять сборку после каждой итерации. Три итерации без build — и вы разбираете кашу из трёх наложившихся изменений вместо одной ошибки.

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

Разрешать ставить зависимости свободно. Агент притащит библиотеку на 300 КБ ради функции в восемь строк.

Игнорировать безопасность. ИИ-код проходит happy path и заваливает граничные случаи: отсутствие валидации на сервере, XSS в выводе пользовательских данных, открытые эндпоинты без авторизации, секреты в клиентском бандле. Отдельная итерация «прогони проект по OWASP Top 10 и покажи находки таблицей» окупается всегда.

Отдавать заказчику неревьюенное. Ответственность за код несёте вы. «Это ИИ написал» — не аргумент ни в переписке, ни в суде.

13. Чек-лист перед сдачей

☐   pnpm lint, pnpm typecheck, pnpm build проходят без ошибок и варнингов

☐   Lighthouse: Performance / Accessibility / Best Practices / SEO — 90+

☐   Адаптив проверен на 360, 768, 1024, 1440 px

☐   Формы: валидация на сервере, антиспам, письма доходят, ошибки видны пользователю

☐   Нет секретов в репозитории и в клиентском бандле

☐   robots.txt, sitemap.xml, canonical, Open Graph, favicon, JSON-LD

☐   404 и 500 оформлены

☐   Политика конфиденциальности, согласие на обработку ПДн, данные хранятся в РФ

☐   HTTPS с редиректом, HSTS, автопродление сертификата

☐   Бэкапы настроены и проверены восстановлением

☐   Метрика/аналитика установлена, цели настроены

☐   Вы прочитали весь код, который сдаёте

Итог

Claude Code и Codex не заменяют разработчика — они убирают из работы механическую часть: вёрстку по макету, обвязку форм, конфиги, миграции, тесты. Остаётся то, за что вам платят: архитектура, декомпозиция, ревью и ответственность за результат.

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

14. Что дальше?

Следующим шагом будет публикация разработанного веб-сайта на хостинге и привязка его к домену. Об этом пишем в другой статье - эта получилась достаточно объемной. Чтобы не пропустить ее, подпишитесь на рассылку по кнопке ниже - это бесплатно.

С удовольствием ответим на Ваши вопросы, пишите, если что-то стало вдруг непонятно. И помните: вайб-кодинг это про разработку именно на "вайбе", наслаждайтесь процессом, в первую очередь🙌

Часто задаваемые вопросы (FAQ)

Могу ли я создать сайт бесплатно с помощью нейросети?
Полностью бесплатно и профессионально — задача сложная, так как самые мощные модели требуют подписки. Однако для обучения вы можете использовать бесплатные trial-версии, чтобы сделать сайт с ИИ на локальной машине и оценить возможности платформы.

Является ли ИИ полноценным создателем сайтов?
ИИ — это ваш главный инструмент, а не самостоятельный «создатель сайтов». Любой сайт на основе ИИ требует архитектурного контроля со стороны разработчика. ИИ отлично справляется с кодом, но логику, структуру и дизайн выстраиваете вы.

Можно ли использовать ИИ для создания дизайна сайта?
Да, сегодня существует специализированный ИИ для создания дизайна сайта, который помогает генерировать дизайн-токены, сетки и базовую верстку, но для уникальных проектов всегда потребуется ваша ручная корректировка.

Как происходит создание сайта онлайн с ИИ?
Создание сайта онлайн с ИИ возможно через облачные IDE, но для серьезных, защищенных проектов мы рекомендуем локальный подход, описанный в этой статье — это безопаснее и дает больше контроля над кодом.

Какая нейросеть может сделать сайт лучше всего?
Нет одной «идеальной» нейросети. Ответ на вопрос «сайт, как делать его с ИИ» зависит от ваших задач. На данный момент комбинация Claude Code и Codex показывает лучшие результаты для агентной разработки и написания кода.

С чего начать, чтобы сделать свой сайт из нейросети?
Начните с подготовки подробного ТЗ и правильных контекст-файлов, как описано в разделе 6. Это ключ к тому, чтобы успешно сделать свой сайт из нейросети и не потратить время на «галлюцинации» агентов.