Как сделать лендинг с помощью Claude без навыков про­грам­мирования

Шаг 2. Оплатите подписку. Базовыми функциями Claude можно пользоваться бесплатно, но Claude Design доступен только в платных тарифах.

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

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

Российские банковские карты сервис не принимает. Купить подписку можно через иностранные банки и платежные системы либо с помощью специализированных сервисов. Подробнее об оплате зарубежных сервисов рассказывали в этой статье.

Шаг 3. Откройте Claude Design. Его можно запустить в веб-версии либо в десктопном приложении. Я использовал инструмент в браузере — для этого достаточно перейти по прямой ссылке или нажать на кнопку Design на левой панели на главной странице Claude.

Чтобы создать проект, можно написать запрос в поле, при желании выбрать шаблон — презентация, прототип сайта, документ, анимация, — а затем модель и нажать кнопку со стрелкой.

Но проще начать с нуля. Для этого нажмите «start a blank project». Откроется рабочее пространство. Экран делится на две части: слева расположен чат, где вы пишете инструкции, справа — холст, на котором Claude строит макет. Именно в поле чата слева нужно писать запросы. Больше ничего перед стартом настраивать не нужно.

Покажу, как устроена работа в Claude Design, на примере лендинга, который я собирал для этой статьи. В качестве тестового проекта я выбрал сайт вымышленной финансово-консалтинговой компании.

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

Шаг 1. Сформулируйте задачу и подготовьте материалы. На старте нейросети важно дать как можно больше конкретики. Claude соберет красивую страницу и без этого, но тогда результат будет непредсказуемым.

Вот что полезно сделать перед началом работы:

1. Кратко описать свой проект. Достаточно двух-трех предложений: кто вы, чем занимаетесь и кому это нужно. Например: «Я кондитер из Верхней Пышмы, пеку пирожные на заказ, средний чек — 2 500 ₽. Заказы принимаю через Telegram».
2. Продумать структуру страницы. Классический лендинг — это главный экран с основной информацией, блок «Что вы получите», примеры работ или тарифы, отзывы, ответы на частые вопросы и контакты. Если не знаете, какие разделы нужны именно вам, можно прямо спросить об этом Claude — он предложит свои варианты.
3. Собрать информацию. Реальные отзывы, цены, фотографии, тексты, контакты, ссылки на соцсети лучше подготовить заранее. Claude способен придумать недостающий контент самостоятельно, но без контекста это будут ИИ-галлюцинации.
4. Подготовить изображения. В Claude Design можно загружать собственные фотографии. Если этого не сделать, сервис использует изображения-заглушки или создаст графику самостоятельно.
5. Подобрать референсы. Это могут быть, например, скриншоты понравившихся вам сайтов или просто словесное описание стиля — например, «минимализм, много свободного пространства, темный фон, крупная типографика».

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

Шаг 2. Напишите запрос. Когда все материалы подготовлены, их следует передать Claude. Перетащите в окно чата слева все собранные данные — Claude Design поддерживает загрузку изображений, текстовых документов, аудио и других файлов. После этого напишите свой запрос — он может быть как очень подробным, так и весьма общим.

Для своего тестового проекта я специально не готовил материалы и ограничился только размытым описанием. Так проще оценить, насколько инструмент может быть самостоятельным.

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

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

Шаг 3. Внесите правки. После генерации начинается основная работа — доведение макета до ума. Есть несколько способов редактирования результата. Самый простой — описывать правки словами прямо в чате. Например: «поменяй порядок блоков», «удали модуль с отзывами», «сделай шапку полупрозрачной». Claude пересоберет макет с учетом замечаний и покажет обновленную версию.

Более удобно работает режим комментариев к конкретным элементам. Можно нажать на кнопку Comments справа вверху, а затем кликнуть по нужному блоку прямо на макете и оставить замечание именно для него. Claude поймет, какую часть страницы требуется изменить. Это решает одну из главных проблем классического вайбкодинга — вместо длинных объяснений вроде «третья кнопка справа под заголовком» достаточно просто указать нужный объект мышкой.

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

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

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

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

Кроме того, необходимо проверить, как ваш сайт будет выглядеть на разных устройствах. Claude Design по умолчанию создает адаптивный макет. Чтобы посмотреть его мобильную версию, достаточно написать запрос вроде «Покажи, как сайт будет выглядеть на смартфоне». Claude подготовит отдельное представление страницы внутри рамки iPhone и других популярных моделей устройств.

Шаг 4. Сохраните результат. Для этого нажмите на кнопку Share в правом верхнем углу, в выпавшем меню перейдите во вкладку Export и выберите пункт Standalone HTML.

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

Кроме HTML страницу можно сохранить в формате PDF, экспортировать как презентацию PowerPoint или выгрузить все связанные с проектом файлы архивом ZIP. Также результат можно передать Claude Code, если есть необходимость продолжить разработку уже в формате полноценного веб-приложения.

Важно понимать, что через Claude Design не получится опубликовать сайт в интернете. После экспорта файл придется самостоятельно размещать на хостинге.

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

Но Claude Design производит впечатление очень удобного инструмента для создания лендингов, промостраниц и прототипов. Он не заменяет полноценную веб-разработку, но позволяет быстро получить результат там, где раньше требовались либо технические навыки, либо бюджет на подрядчика. Вот что мне понравилось.

✅ Практически нулевой порог входа. За все время работы я ни разу не открывал код и не сталкивался с техническими деталями разработки.

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

✅ Возможность оставлять комментарии прямо на макете. Когда можно просто ткнуть в нужный элемент и написать «сделай иначе», работа идет гораздо быстрее.

✅ Оптимизация работы. Понравилось, что при обсуждении получившегося макета Claude предлагает перейти в новый чат, чтобы не перегружать модель обработкой чрезмерно объемного контекста и сэкономить токены.

А вот что не понравилось.

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

❌ Типичный «нейросетевой» дизайн. Если не дать референсы, собственные фотографии и четкие указания по стилю, результат получится аккуратным, но безликим. Таких сайтов сейчас в интернете тысячи.

❌ Сложно обновлять контент. Claude Design создает именно статическую страницу. Это не аналог Tilda или полноценной CMS с панелью управления. Если через месяц понадобится поменять цену или описание услуги, придется возвращаться в Claude, вносить изменения и заново экспортировать сайт.

❌ Нет бэкенда. Claude Design хорошо справляется с интерфейсом, но не умеет самостоятельно добавлять серверную логику. Поэтому любые функции, которые должны что-то делать «за кулисами», потребуют дополнительной разработки. Это касается, например, форм обратной связи, приема платежей и других подобных функций.

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