Раньше на простой одностраничный сайт у нас уходила неделя: бриф, макет в Figma, согласование, вёрстка, правки. С появлением Claude Design мы собираем рабочий лендинг за 5 минут — прямо в чате, без кода и шаблонов. В этой статье мы расскажем про разбор интерфейса, готовые пресеты под популярные ниши и чек-лист подготовки ТЗ нейросети, чтобы получить продающий сайт с первой попытки.
Что такое Claude Design и почему на нем стоит делать сайты
Claude Design — это инструмент от Anthropic, запущенный в апреле 2026 года. Он работает по принципу диалога: мы описываем задачу словами, нейросеть собирает сайт, мы даем фидбек прямо в чате. На выходе — рабочий HTML/CSS/JS, который можно сразу залить на хостинг.
В отличие от Tilda, где мы собираем сайт из готовых блоков, Claude Design генерирует уникальную структуру под нашу задачу. И это критично для конверсии: посетитель видит не очередной шаблонный лендинг, а решение, заточенное под его боль.
Ключевые преимущества для быстрых сайтов:
— Экспорт в Standalone HTML
— один файл, работает где угодно
— Web Capture Tool
— захватываем дизайн понравившегося сайта и просим сделать в похожем стиле
— Handoff в Claude Code
— одной командой передаем проект в разработку для деплоя
— Прямая интеграция с Canva — если нужна доработка, открываем макет и редактируем.
Доступ открывается через подписку Claude Pro (~$20/мес). Бесплатный тариф Claude Design не включает.
Быстрый разбор интерфейса: что нужно знать за 2 минуты
Чтобы начать работу, заходим на claude.ai/design и поподаем в главное меню
1. Выбираем Prototype, далее в разделе Projeсt name вводим название нашего проекта, например, сайт – затем нажимаем кнопку Create.
2. Поле промта (внизу). Сюда мы пишем ТЗ для нейросети – наш промпт и нажимаем кнопку Send (отправить). Не нужно следовать шаблону — Claude Design сам задаст уточняющие вопросы про аудиторию, тональность и бренд.
3. Превью-холст (справа). Здесь рендерится живой сайт. Можем кликать по кнопкам, проверять формы, переключать темную/светлую тему и смотреть мобильную версию.
4. Инструмент Comment (комментариев). Кликаем на любой блок прямо в превью — заголовок, кнопку, секцию с тарифами — и пишем правку. Claude видит, что мы выделили, и меняет именно это, не ломая остальное.
Лайфхак: первый промт всегда даем на модели Opus 4.7 — она генерирует базу, от которой потом отталкиваемся. Правки делаем на Sonnet — выходит быстрее и дешевле по токенам.
Еще одна важная функция — загрузка контекста. Перед стартом мы можем перетащить в чат брендбук в PDF, скриншоты конкурентов или дать ссылку на наш существующий сайт. Claude вытащит цвета, шрифты и тон коммуникации, чтобы новый лендинг сразу попал в фирменный стиль.
Три готовых пресета под сайты
Мы тестировали десятки промтов и оставили три, которые работают стабильно для самых частых задач. Просто копируйте и подставляйте свои данные.
Пресет 1. Лендинг для услуги
Создай одностраничный лендинг на HTML для услуги «онлайн-консультации психолога».
Аудитория: женщины 25–40 лет, уставшие от тревожности.
Структура: первый экран с заголовком и кнопкой записи,
блок «3 проблемы, с которыми мы помогаем»,
блок «как проходит сессия» (3 шага с иконками),
отзывы (3 штуки), тарифы (разовая/абонемент), FAQ (5 вопросов), форма записи.
Стиль: тёплый минимализм, бежево-зелёная палитра, читаемая типографика.
Без стоковых улыбающихся лиц.
Подходит для коучей, психологов, репетиторов, юристов — любой экспертной услуги. Структура «проблема → процесс → доказательства → CTA» закрывает базовые возражения.
Пресет 2. Сайт-визитка для специалиста
Сделай одностраничный сайт-визитку для веб-разработчика.
Главная задача — показать кейсы и собрать заявки.
Структура: hero-блок с именем, должностью и кнопкой «Связаться»,
блок «Обо мне» (короткий текст + 3 цифры с достижениями),
портфолио из 6 проектов в виде сетки с превью,
стек технологий (логотипы списком),
блок отзывов от клиентов (3 штуки),
форма обратной связи и контакты.
Стиль: тёмная тема, акцентный голубой, моноширинный шрифт для кода.
Современная анимация при скролле.
Идеален для фрилансеров, дизайнеров, разработчиков, фотографов. Тёмная тема с акцентом смотрится дороже бесплатных шаблонов на CMS.
Пресет 3. Лендинг для онлайн-курса
Создай продающий лендинг для онлайн-курса «Английский для путешествий за 30 дней».
Аудитория: взрослые 30–50, которые путешествуют, но боятся говорить на английском.
Структура: первый экран с обещанием результата и таймером записи,
блок «Кому подойдёт» (3 типажа),
программа курса (4 недели, раскрывающиеся блоки),
автор (фото-плейсхолдер, регалии, опыт),
что получит ученик (5 пунктов с галочками),
сравнение тарифов (3 пакета), отзывы выпускников,
FAQ, форма оплаты с гарантией возврата.
Стиль: яркий, оптимистичный, синий + жёлтый акцент.
Эмодзи флагов в hero-блоке.
Подходит для образовательных продуктов, марафонов, мастер-классов. Конверсия таких лендингов обычно выше за счёт чёткой структуры под продажу инфопродукта.
Чек-лист подготовки ТЗ нейросети
Главная ошибка новичков — давать слишком общий промпт. «Сделай сайт для моего бизнеса» Claude Design не понимает. Перед тем как нажать Enter, проверяем, что в нашем ТЗ есть всё из списка:
— Тип сайта. Лендинг, сайт-визитка, многостраничник, интернет-магазин — от этого зависит структура и логика.
— Аудитория. «Молодые мамы 25–35» и «технические директора 40+» требуют разных решений по тону, цветам и сложности.
— Главная цель. Что должен сделать посетитель: оставить заявку, купить, записаться, скачать материал? Без четкой цели CTA получится размытым.
— Структура блоков по порядку. Перечисляем все секции от первого экрана до футера. Чем подробнее — тем меньше итераций.
— Палитра и стиль. 2–3 цвета максимум, желательно с HEX-кодами. Стиль одним словом: «минимализм», «брутализм», «корпоративный», «уютный».
— Реальные данные или плейсхолдеры. Если есть готовые тексты, имена, цены — даём их сразу. Если нет — пишем «используй плейсхолдеры».
— Что НЕ нужно. «Без стоковых фото», «без бесконечной прокрутки», «без всплывающих окон» — Claude Design слушается отрицаний.
— Адаптивность и формат экспорта. Прямо так и пишем: «адаптивная вёрстка под мобильные», «экспорт в один HTML-файл».
Сохраняйте этот чек-лист и проходите по нему перед каждым запросом. После трех-четырех сайтов выработается автоматизм — мы будем укладываться в 5 минут от идеи до готового HTML.
Что в итоге
Claude Design не заменит студию веб-дизайна на сложных проектах с уникальной анимацией и админкой. Но для теста гипотез, лендингов под рекламу, личных сайтов и MVP — это идеальный инструмент. Один раз настраиваем фирменный стиль, потом штампуем сайты под каждую новую кампанию без ручной работы.
А какие промты для сайтов используете вы? Если материал был полезен — подпишитесь на наш ТГ-канал, впереди еще больше полезных материалов