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

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

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

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

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

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

Чтобы собрать одностраничник, опишите страницу в чате: Artifacts покажет её рядом с перепиской. Создавать артефакты в чате можно на всех тарифах, включая Free. Если панель не появляется, проверьте, включён ли пункт «Code execution and file creation» в Settings > Capabilities (справка Claude). На октябрь 2026 года самая новая модель линейки Sonnet, Claude Sonnet 5.5, вышла 28 сентября.

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

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

По теме: Claude Design и дизайн через ИИ: как использовать в 2026

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

Для публикации нового одностраничника скачайте файл и разместите его на хостинге. Кнопка Publish, которая даёт публичную ссылку без требования аккаунта Claude, осталась только у прежних артефактов, созданных в чате до 16 сентября 2026 года. У новых артефактов кнопка Share: на Free ссылку для других получить нельзя, а на Pro и Max можно выбрать «Anyone with the link», но, по справке Claude на октябрь 2026 года, зрителю всё равно нужен аккаунт (правила доступа).

У ссылки на новый артефакт несколько ограничений: адрес на claude.ai, на Free поделиться им нельзя, а зритель должен войти в Claude. Такую ссылку удобно отправить знакомым или заказчику, чтобы показать черновик. Сайт для клиентов надёжнее скачать и разместить на хостинге со своим доменом.

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

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

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

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

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

• Ссылка на артефакт. На Pro и Max можно поделиться им через Share, но открыть ссылку смогут только люди с аккаунтом Claude. Это подходит для показа черновика. Прежние артефакты, созданные в чате до 16 сентября 2026 года, по-прежнему публикуются кнопкой Publish (справка Claude).
• GitHub Pages бесплатно размещает статичные сайты из публичного репозитория на GitHub Free (документация GitHub). Файлы можно загрузить прямо через сайт GitHub. Для включения публикации откройте в репозитории Settings → Pages, в разделе «Build and deployment» выберите для Source значение «Deploy from a branch», затем ветку, папку / (root) и нажмите Save. Адрес будет вида имя.github.io или имя.github.io/репозиторий. Если запутаетесь, спросите у Claude, он распишет шаги под ваш случай.
• Свой хостинг и домен. Платный вариант для бизнеса: файлы из папки сайта загружаются в панель хостинга, адрес получается вида vashsayt.ru.

GitHub Pages размещает статичные сайты на HTML, CSS и JavaScript; собственный серверный код там не работает. По правилам GitHub Pages этот хостинг нельзя использовать для интернет-бизнеса, интернет-магазина или сайта, который в основном служит для продаж; передавать через него пароли и номера карт тоже нельзя. Портфолио, визитка или страница события подходят, а коммерческому сайту бизнеса лучше свой хостинг. Для сбора заявок кнопка на сайте может вести в Telegram или на форму стороннего сервиса.

По теме: Как использовать Claude в 2026: с чего начать, проекты, файлы и лимиты

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

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

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

Сделать первый одностраничник можно бесплатно. Artifacts доступны на Free (справка Claude), публикация на GitHub Pages тоже бесплатная. На бесплатном тарифе действуют лимиты сообщений, в которые можно упереться при плотной работе над правками.

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

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

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

Да. Страницу можно собрать в чате на Free, скачать файлом и бесплатно разместить на GitHub Pages. Платить придётся, если нужен Claude Code: он входит в платные тарифы, а Pro стоит $20 в месяц (тарифы Claude). Для ссылки на новый артефакт через Share с доступом «Anyone with the link» нужен Pro или Max, а зрителю нужен аккаунт Claude (справка Claude). Деньги также понадобятся, если нужен свой домен или перестанет хватать лимитов сообщений.

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

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

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

Конструктор удобен, если нужны шаблоны и хостинг в одном месте; у конструкторов бывают и бесплатные тарифы с ограничениями. Например, у Tilda на Free можно создать один сайт с базовым набором блоков, а свой домен и полный набор блоков доступны с Personal за 500 ₽ в месяц при оплате за год (тарифы Tilda). Claude собирает страницу под вашу задачу, код остаётся у вас, ежемесячной платы за сам сайт нет, зато публикацию настраиваете сами. Для нестандартных страниц и прокачки навыка работы с ИИ Claude практичнее.

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

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

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

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