Как сделать сайт с помощью Claude: пошагово без опыта

В Claude сайт делают двумя способами. Одностраничник (визитку, лендинг, портфолио) собирают прямо в чате на claude.ai: функция Artifacts показывает страницу рядом с перепиской и публикует её в интернете одной кнопкой. Многостраничный сайт удобнее строить в Claude Code. Ниже оба способа по шагам: от первого промпта до рабочей ссылки; опыт программирования не понадобится.

Какой способ выбрать: чат с Artifacts или Claude Code

Claude это нейросеть Anthropic, которая по описанию на русском языке пишет готовый код страницы. Из России claude.ai напрямую не открывается: нужен VPN, а для платного тарифа нужна зарубежная карта. Регистрацию и оплату мы подробно разбирали в статье о подписке Claude в России, здесь повторяться не будем.

• Чат с Artifacts подходит, когда нужна одна страница: лендинг услуги, визитка специалиста, страница мероприятия, портфолио. Ничего устанавливать не нужно: описали и получили страницу в том же окне.
• Claude Code подходит, когда страниц несколько (главная, каталог, контакты), нужен свой домен или сайт будет расти. Работает с настоящими файлами на вашем компьютере.
• Сомневаетесь? Начните с чата: код одностраничника потом можно скачать и продолжить работу в Claude Code.

Способ 1. Одностраничный сайт в чате: пошаговая инструкция

Artifacts: панель рядом с чатом, где Claude собирает страницу и сразу показывает, как она выглядит. Функция доступна в том числе на бесплатном тарифе (анонс Anthropic). Страницы по умолчанию собирает Claude Sonnet 5: актуальная модель, вышедшая 30 июня 2026 года (Anthropic).

1. Подготовьте содержание. Выпишите 5–7 блоков будущей страницы: заголовок, кому и чем вы полезны, услуги с ценами, отзывы, контакты. Тексты: свои, пусть и черновые.
2. Опишите сайт одним сообщением. Например: „Сделай одностраничный сайт кондитера, который печёт торты на заказ в Туле. Блоки: шапка с названием, шесть тортов с ценами, как заказать, отзывы, контакты с телефоном и Telegram. Стиль тёплый, кремовые цвета, адаптивная вёрстка для телефона“.
3. Дождитесь предпросмотра. Рядом с перепиской откроется окно Artifacts с готовой страницей: её можно прокручивать и кликать прямо в чате.
4. Правьте итерациями. Одна правка: одно сообщение: „шапку сделай темнее“, „добавь блок с доставкой“, „вставь мои тексты вместо примерных“. Так проще понять, какой шаг что-то сломал, и откатиться.
5. Опубликуйте или скачайте. Кнопка Publish даст публичную ссылку, кнопка скачивания: файл index.html для любого хостинга. Подробности: в следующих разделах.

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

Как опубликовать страницу из Artifacts

Готовую страницу публикуют кнопкой Publish в окне Artifacts: Claude создаёт публичную ссылку, которая открывается у любого человека без аккаунта (справка Claude). Продолжите править страницу. Повторная публикация обновит ту же ссылку, рассылать новую не придётся.

Ограничение одно, но заметное: адрес будет служебным, на домене Claude, а не вашим. Для проверки идеи, портфолио или страницы события этого хватает. Бизнесу надёжнее скачать код и разместить его на своём домене: варианты ниже.

По теме: Как создать сайт с ИИ через код: вайбкодинг в 2026

Способ 2. Многостраничный сайт в Claude Code

Claude Code: агент Anthropic для работы с файлами: вы ставите задачу текстом, а он создаёт и правит файлы сайта у вас на компьютере. Отдельно покупать его не нужно, доступ входит в подписку Pro за $20 в месяц (тарифы Claude). Запускается из терминала, но пугаться не стоит: общение выглядит как тот же чат, только результат сразу лежит в папке.

1. Установите Claude Code. Пошаговая установка из России: в отдельной инструкции.
2. Создайте папку. Пустую папку для будущего сайта, и запустите в ней команду claude.
3. Опишите сайт целиком. Список страниц, что на каждой, общий стиль; попросите единые шапку и меню для всех страниц.
4. Проверьте результат. Откройте файл index.html из папки в браузере и пройдитесь по всем страницам.
5. Просите правки. „На странице контактов добавь карту“. Claude сам найдёт нужный файл и внесёт изменения.

Как выложить сайт в интернет

Пока страница лежит у вас в папке или в чате, сайта ещё нет. Три рабочих варианта публикации:

• Publish в Artifacts: бесплатно и мгновенно, но адрес служебный. Вариант для теста идеи, портфолио и страниц-однодневок.
• GitHub Pages: бесплатный хостинг статичных сайтов из публичного репозитория (документация GitHub). Файлы можно загрузить прямо через сайт GitHub, а если запутаетесь, спросите у Claude, он распишет шаги под ваш случай.
• Свой хостинг и домен. Платный вариант для бизнеса: файлы из папки сайта загружаются в панель хостинга, адрес получается вида vashsayt.ru.

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

По теме: Как сделать кликабельный сайт в 2026: ссылки, кнопки, телефон

Типичные ошибки

• Один промпт «под ключ». Просят сразу весь сайт со всеми деталями и получают кашу. Рабочая схема: каркас, потом блоки по одному, потом тексты и адаптивность.
• Сайт не проверяют на телефоне. Откройте опубликованную ссылку со смартфона: если блоки разъехались, попросите Claude поправить мобильную вёрстку.
• Оставляют тексты-заглушки. Claude заполняет макет придуманными отзывами и ценами. Перед публикацией замените всё на настоящие данные.
• Правят один чат неделями. В длинной переписке модель начинает путаться в версиях страницы. Начните новый чат и приложите туда актуальный код.

Сколько стоит сделать сайт в Claude

Минимальный бюджет: ноль. Бесплатного тарифа Claude с Artifacts хватает на первый одностраничник (анонс Anthropic), публикация через Publish или GitHub Pages тоже бесплатная. Ограничение бесплатного тарифа: лимиты сообщений. При плотной работе над правками вы в них упрётесь.

Подписка Pro стоит $20 в месяц, при оплате за год выходит дешевле; в неё уже входит Claude Code (тарифы Claude). Российской картой напрямую оплатить не получится. Рабочие способы собраны в статье о подписке.

Частые вопросы

Можно ли сделать сайт в Claude бесплатно?

Да. Artifacts работают на бесплатном тарифе, публикация кнопкой Publish тоже бесплатна (справка Claude). Деньги понадобятся, только если нужен свой домен или перестанет хватать лимитов сообщений.

Нужно ли разбираться в коде?

Для одностраничника: нет. Вы описываете результат словами, код Claude пишет сам. Базовое понимание: что такое HTML-файл и как он попадает на хостинг, появится по ходу работы, и его достаточно даже для Claude Code.

Что выбрать: Claude или конструктор сайтов?

Конструктор даёт шаблоны и хостинг в одном месте, но за регулярную плату и с типовым дизайном. Claude собирает страницу под вашу задачу, код остаётся у вас, ежемесячной платы за сам сайт нет, зато публикацию настраиваете сами. Для нестандартных страниц и прокачки навыка работы с ИИ Claude практичнее.

Потянет ли Claude интернет-магазин?

Каталог с ценами и кнопкой заказа в Telegram да, это всё ещё статичная страница. Полноценный магазин с корзиной и онлайн-оплатой: серверная разработка: стартовать можно в Claude Code, но по сложности это уже не первый проект.

Какие ещё нейросети умеют делать сайты?

Подходы и сервисы для сайтов с ИИ в целом (включая конструкторы и другие модели) мы сравнивали в статье как сделать сайт самому с нуля.