Длиннопост на ~15 минут. Здесь я пошагово показываю, как мы в ЯРЧЕ собираем простые сайты с помощью AI: что поставить, как авторизоваться, какие промпты работают и как опубликовать результат. Если торопитесь — листайте к пошаговой инструкции.
Что такое создание сайтов с помощью AI
Ещё пару лет назад «сайт через AI» означал шаблонный конструктор и довольно средний результат. Сегодня всё иначе: с инструментами уровня Claude Code и редактора VS Code можно собрать полноценный сайт на нормальном коде, который потом можно дорабатывать, размещать на своём домене и масштабировать — без визуального конструктора, запирающего в своей экосистеме.
Подход простой: вы описываете задачу обычным языком, а нейросеть пишет за вас код — HTML, CSS, JavaScript, а при необходимости и серверную логику. Вы выступаете не наборщиком кода, а постановщиком задачи и редактором.
Принципиальное отличие от Tilda или Wix — на выходе у вас настоящий проект с открытым кодом. Его можно положить на любой хостинг, подключить к домену в зоне .by, передать другому разработчику и развивать без ограничений платформы. Конструктор удобен для лендинга «на вчера», но AI-разработка даёт контроль и гибкость, которых конструктор по определению не даст.
Claude Code и VS Code: связка
Claude Code — это агент от Anthropic, который работает прямо в терминале и редакторе кода. В отличие от обычного чата, куда вы копируете куски кода руками, Claude Code видит файлы проекта, сам создаёт и редактирует их, запускает команды и исправляет собственные ошибки. По сути это AI-разработчик, который сидит у вас в проекте.
VS Code — бесплатный редактор кода от Microsoft, самый популярный в мире. В нём удобнее всего видеть структуру сайта и пользоваться официальным расширением Claude Code: оно показывает правки в виде наглядных диффов, которые можно принять или отклонить одной кнопкой.
Связка простая: VS Code — рабочее пространство, Claude Code — исполнитель. Вы описываете, что нужно, AI пишет и правит код, а вы контролируете результат в редакторе.
Кому это подходит, а кому — нет
Будем честны — AI не волшебная кнопка. Вот трезвая картина из нашей практики.
Подойдёт, если вы:
- хотите лендинг, сайт-визитку, портфолио или несложный корпоративный сайт;
- готовы потратить пару часов на освоение инструментов;
- хотите понимать, как устроен ваш сайт, и владеть его кодом;
- цените гибкость и независимость от платформы-конструктора.
Стоит подумать дважды, если нужно:
- сложное веб-приложение с платежами, личными кабинетами и интеграциями — без опытного разработчика рискованно;
- интернет-магазин с тысячами товаров и учётом остатков;
- гарантия безопасности, нагрузочной устойчивости и поддержки — это уже зона ответственности команды.
Если ваш случай из второго списка — задачу разумнее делегировать. Как сочетать оба подхода — расскажу ближе к концу.
Что понадобится перед стартом
Минимальный набор:
- Компьютер на macOS 13+, Windows 10 (сборка 1809+) или Linux (Ubuntu 20.04+), с 4 ГБ оперативной памяти и стабильным интернетом.
- Подписка Anthropic. Без неё ничего не выйдет — Claude Code требует платный доступ (Pro, Max, Team или Enterprise) либо доступ через API Console. Бесплатного режима, в котором этот сценарий работал бы стабильно, у Anthropic для Claude Code нет — рассчитывайте минимум на $20/мес.
- Базовая готовность работать с терминалом. Пугаться не надо — все команды я привожу ниже, их достаточно скопировать.
claude просто не запустится — заводите аккаунт и оплачивайте подписку до того, как начнёте установку.Пошаговая инструкция: собираем сайт с помощью AI
Шаг 1. Установите VS Code
Скачайте редактор с официального сайта code.visualstudio.com и установите как обычную программу. Для русского интерфейса можно потом добавить языковой пакет Russian Language Pack — но это не обязательно.
Шаг 2. Установите Claude Code
Anthropic рекомендует нативный установщик — он не требует Node.js и обновляется в фоне сам. Откройте терминал и выполните одну команду под вашу систему.
На macOS, Linux или WSL:
curl -fsSL https://claude.ai/install.sh | bashНа Windows (PowerShell):
irm https://claude.ai/install.ps1 | iexЕсли предпочитаете установку через npm (нужен Node.js 18+):
npm install -g @anthropic-ai/claude-codeНе используйте sudo с npm-установкой — это приводит к проблемам с правами доступа. На «голой» Windows полезно дополнительно поставить Git for Windows: это даст инструмент Bash, хотя строго обязательным он не является.
Шаг 3. Проверьте установку
Убедитесь, что всё встало корректно:
claude --versionЕсли в ответ видите номер версии — отлично. Для более глубокой диагностики окружения есть отдельная команда:
claude doctorШаг 4. Авторизуйтесь
Запустите Claude Code командой:
claudeПри первом запуске откроется браузер с предложением войти в учётную запись Anthropic. Подтвердите вход — и агент будет готов к работе. Напомню: доступ работает на тарифах Pro, Max, Team, Enterprise или через Console (API). Без подписки шаг не пройдёт.
Шаг 5. Подключите расширение в VS Code
Откройте VS Code, перейдите во вкладку Extensions, найдите официальное расширение Claude Code и установите его. После этого вы сможете запускать агента прямо из редактора и принимать его правки наглядными кнопками — без переключения на терминал.
Шаг 6. Создайте проект и дайте первый промпт
Создайте на компьютере пустую папку для будущего сайта, например my-website. Откройте её в VS Code (File → Open Folder), запустите там Claude Code и опишите задачу обычными словами. Например:
Создай одностраничный сайт-лендинг для кофейни в Минске. Нужны разделы: шапка с логотипом и меню, первый экран с заголовком и кнопкой «Забронировать столик», блок «О нас», меню с ценами, галерея, контакты с картой и футер. Сделай адаптивно под мобильные, в тёплой бежево-коричневой палитре, на чистом HTML и CSS.
Claude Code создаст файлы проекта и напишет код. Чем конкретнее запрос — тем точнее результат (рабочие формулировки — в следующем разделе).
Шаг 7. Дорабатывайте итерациями
Не пытайтесь получить идеал с первого раза. Сила подхода — в коротких уточнениях:
Сделай шапку «прилипающей» при прокрутке. Увеличь отступы между блоками. Добавь плавное появление секций при скролле. Кнопку брони сделай ярче.
AI правит код, вы смотрите изменения в VS Code и принимаете их. Шаг за шагом сайт доводится до нужного вида.
Шаг 8. Посмотрите сайт локально
Чтобы открыть результат в браузере, попросите агента напрямую:
Запусти локальный сервер, чтобы я мог посмотреть сайт в браузере.
Claude Code поднимет локальный сервер и подскажет адрес (обычно вида http://localhost:3000). Откройте — увидите свой сайт.
Шаг 9. Опубликуйте сайт в интернете
Когда результат устраивает, сайт нужно разместить онлайн. Для статичных сайтов отлично подходят бесплатные хостинги Vercel, Netlify или GitHub Pages — Claude Code может помочь и с публикацией:
Подготовь проект к деплою на Vercel и объясни по шагам, что мне сделать.
Останется подключить домен. Регистрация в зоне .by, настройка DNS и стыковка с белорусским хостингом — типичная история, в которой проще не разбираться самому. Если нужна помощь с этим этапом — напишите нам, подскажем под вашу ситуацию.
Примеры рабочих промптов
Качество сайта напрямую зависит от качества запроса. Несколько формул, которые работают:
Для структуры: перечисляйте конкретные блоки. «Шапка, первый экран, преимущества, отзывы, форма заявки, футер» работает лучше, чем «сделай красивый сайт».
Для дизайна: задавайте палитру, настроение и референс. Например: «минималистично, много воздуха, шрифт без засечек, акцентный цвет — глубокий синий, как у скандинавских студий».
Для адаптивности: прямо просите «сделай адаптивно под телефоны и планшеты» — это критично, ведь большинство посетителей придёт с мобильных.
Для SEO: «добавь корректные мета-теги title и description, семантическую HTML-разметку (header, main, section, footer), alt к изображениям». Дальше — заметно проще продвигать сайт в поиске.
Для правок: меняйте одну вещь за раз. Десять точечных запросов дают более предсказуемый результат, чем один огромный.
Частые ошибки
- Слишком общие запросы. «Сделай сайт компании» заставляет AI додумывать за вас. Описывайте детали.
- Отсутствие проверки кода. AI ошибается. Всегда смотрите результат в браузере и не принимайте правки вслепую.
- Игнорирование мобильной версии. Проверяйте сайт на узком экране — там чаще всего ломается вёрстка.
- Забытое SEO. Без мета-тегов, заголовков и осмысленных текстов сайт не выйдет в топ, каким бы красивым он ни был.
- Никаких бэкапов. Подключите Git и сохраняйте версии — Claude Code умеет с ним работать.
Сколько это стоит
Сам по себе подход почти бесплатный — платите вы за подписку на Claude. Ориентир: Pro — около $20 в месяц, Max — примерно $100–200 в месяц для тех, кому нужны большие лимиты. VS Code бесплатен. Базовый хостинг для статичного сайта (Vercel, Netlify, GitHub Pages) тоже можно получить бесплатно — платите вы обычно только за домен.
Цены и условия тарифов меняются — актуальные смотрите на сайте Anthropic перед оплатой.
Итого: запустить простой сайт можно за стоимость месячной подписки и доменного имени. Но заложите в расчёт главное — ваше время на освоение инструментов и доведение результата до приемлемого качества.
AI или агентство: что выбрать
AI отлично закрывает задачи «сделать самому быстро и недорого»: лендинг для теста гипотезы, личное портфолио, сайт небольшого мероприятия. Если у вас есть время и желание разобраться — это реальный и рабочий путь.
Но когда на сайте завязаны деньги и репутация бизнеса, появляются вопросы, которые AI не решит за вас: продуманная структура под продажи, дизайн под ваш бренд, техническое и поисковое SEO под Минск и Беларусь, скорость загрузки, безопасность, интеграции с CRM и оплатой, и главное — ответственность за результат и поддержка после запуска.
Мы в ЯРЧЕ используем те же AI-инструменты внутри своего процесса — это позволяет работать быстрее и дешевле для клиента. Но к этому добавляем то, чего у нейросети нет: опыт, стратегию и гарантию. Часто оптимально комбинировать: прототип набрасываете с помощью AI, а доведение до продакшена, разработку под ключ, продвижение и сопровождение берёт на себя команда. Посмотреть, что у нас уже получалось, можно в кейсах.
Частые вопросы
Можно ли создать сайт с помощью AI без знания программирования?
Да. Claude Code пишет код за вас, а вы ставите задачи обычным языком. Базовое понимание структуры сайта ускорит работу, но писать код самому не требуется.
Claude Code бесплатный?
Нет. Нужна платная подписка Claude (Pro, Max, Team или Enterprise) либо доступ через Anthropic Console. Без неё запустить агента не получится.
Чем это лучше конструкторов вроде Tilda или Wix?
Вы получаете настоящий код, который принадлежит вам: его можно разместить на любом хостинге, дорабатывать без ограничений платформы и не платить ежемесячно за саму платформу-конструктор.
Сколько времени займёт первый сайт?
Простой лендинг реально собрать за несколько часов: установка инструментов — около получаса, остальное — описание задачи и правки.
Будет ли такой сайт продвигаться в поиске?
Да, если заложить SEO: корректные мета-теги, семантическую вёрстку, быструю загрузку и полезные тексты. Технически такой сайт продвигается даже лучше многих конструкторов. Но стратегию продвижения под конкретные запросы (например, «создание сайтов в Минске») лучше доверить специалистам.
Подойдёт ли AI для интернет-магазина?
Для небольшого каталога — да. Для крупного магазина с оплатой, складом и интеграциями надёжнее привлечь команду.
