Прототип лендинга за вечер без дизайнера: как дизайнер Anthropic работает в Claude Design

В ролике я обещал запрос для первого экрана лендинга и пять комментариев, которые превращают черновик в чистый макет. Они ниже. Сначала о том, что показали в Anthropic.

Что было в ролике

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

Его путь занял несколько шагов:

1. Открыл вкладку с артефактами и попросил Claude предложить несколько вариантов дизайна.
2. Оставил комментарии прямо на макетах: что работает, что нет.
3. Мелкие детали поправил сам в редакторе, не тратя на них запросы.
4. Попросил кликабельный прототип, чтобы пройти экран как пользователь.
5. И только после этого сказал Claude собирать готовую версию.

Главная мысль ролика: этот быстрый этап дизайна подходит везде, где ты обычно прыгаешь сразу к результату.

Что такое Claude Design

Claude Design превращает описание словами в редактируемый макет: прототип, слайды, одностраничник, макет экрана. Слева чат, справа живой холст. Править можно разговором, комментариями на макете, прямыми правками текста и ползунками, которые Claude создаёт под задачу. Работает на платных тарифах Claude, рядом с Docs и Slides. Про Slides я писал в статье презентации в чате Claude.

Зачем это эксперту

Тебе не нужно приложение. Но первый экран лендинга, страница записи на консультацию, обложка курса или макет лид-магнита устроены так же. Обычно путь такой: ты объясняешь дизайнеру, ждёшь неделю, получаешь один вариант, правишь, ждёшь ещё. Или неделю сидишь в конструкторе и всё равно недоволен.

С Claude Design ты за вечер видишь три разных варианта, выбираешь направление и приходишь к дизайнеру или в конструктор уже с понятным макетом. Или делаешь всё сам.

Запрос для первого экрана лендинга

Сделай три разных варианта первого экрана лендинга для моей консультации. Я [кто ты и чем помогаешь]. Клиент приходит с болью: [одна фраза его словами]. Результат после консультации: [конкретно]. На экране должны быть заголовок, подзаголовок в одну строку, кнопка «Записаться» и моё фото. Варианты должны отличаться стилем: первый строгий и светлый, второй тёплый, третий смелый и контрастный. Мобильная версия важнее компьютерной.

Почему три и почему разные: один хороший вариант ничему не учит. Когда перед глазами три непохожих, сразу видно, какой стиль твой, а какой чужой.

Пять комментариев, которые чистят черновик

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

1. «Оставь один главный акцент, остальное приглуши». ИИ любит делать всё ярким. Взгляд должен падать на заголовок и кнопку.
2. «Сократи заголовок до 7 слов, подзаголовок до одной строки». Длинный текст на первом экране не читают.
3. «Увеличь отступы между блоками в полтора раза». Воздух делает страницу дороже.
4. «Проверь, что кнопку видно без прокрутки на телефоне». Самая частая ошибка: кнопка уезжает вниз.
5. «Убери все декоративные элементы, которые не несут смысла». Иконки, блики, лишние рамки делают макет похожим на шаблон.

Мелочи вроде одного слова в заголовке правь руками в редакторе, как Нейт. Это быстрее, чем объяснять словами.

Прототип перед сборкой

Когда макет устраивает, попроси: «Сделай кликабельный прототип: кнопка ведёт на форму записи, форма на страницу спасибо». Пройди его с телефона как клиент. Часто только здесь видно, что форма слишком длинная или кнопка непонятная.

И только после этого собирай настоящую страницу: в конструкторе, у дизайнера или в Claude.

Чего не ждать

• Claude Design не заменит продуманный оффер. Красивый экран с непонятным предложением не продаёт.
• Фото лучше загружать своё. Сгенерированный портрет эксперта считывается сразу и снижает доверие.
• Проверяй тексты на макете: ИИ иногда вставляет заглушки и выдуманные цифры.

Как я выбираю из трёх вариантов

Когда передо мной три макета, я не выбираю самый красивый. Я задаю три вопроса. Первый: понятно ли за три секунды, кому это и что я предлагаю. Второй: похоже ли это на меня, или на любой другой лендинг из ленты. Третий: захочется ли нажать кнопку человеку, который пришёл из рилса и ещё ничего обо мне не знает. Вариант, который отвечает «да» на все три, беру за основу, а из двух других забираю удачные детали: цвет из одного, расположение фото из другого. Об этом можно прямо написать в комментарии: «Возьми этот макет за основу, а цвет кнопки из второго варианта».

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

Нужно ли уметь работать в Фигме?

Нет. Макет правится словами, комментариями и прямыми правками текста.

Есть ли Claude Design на бесплатном тарифе?

Нет, он работает на платных тарифах Claude.

Можно ли потом собрать настоящий сайт?

Да. Макет можно отдать дизайнеру или попросить Claude собрать по нему страницу.

Продолжение в Telegram

Как я собираю лендинги и воронки на ИИ, от макета до первых заявок, показываю каждый день в Telegram-канале. Подписывайся: t.me/Evgeniy_Tolstobrov