Что такое Claude Design — Claude

1Коротко

Claude Design — это место, где вы описываете что-то визуальное (веб-страницу, постер, слайд, экран приложения), Claude рисует это на холсте, а потом вы вместе это дорабатываете.

2Новые слова

Дизайн (Design) — здесь это визуальный макет: где картинка, что написано в заголовке, какие есть кнопки, какие цвета. Не код и не документ.
Холст (Canvas) — большая область справа, где появляется дизайн. Его можно приближать, выделять части и оставлять к ним комментарии.
Артборд (Artboard) — одна рамка на холсте, например «Лендинг — компьютер». В одном дизайне их может быть несколько (компьютер, телефон, постер).
Макет (Mockup) — картинка того, как что-то будет выглядеть, до того как это сделают по-настоящему.

3Зачем это вам

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

4Попробуйте сейчас

(платные тарифы)

Нажмите Design в левой боковой панели. В разделе «Make something new» (Создать новое) нажмите Design.
В поле для сообщения слева напишите: Простой лендинг для маленькой районной пекарни под названием «Пекарня Сэма»: тёплые цвета, одна большая область для фото вверху, короткая приветственная строка, три кнопки (Заказать, Меню, Как нас найти) и раздел с часами работы. Ширина для компьютера.
Подождите около минуты. Затем напишите изменение: Сделай заголовок короче, а кнопки — более круглыми.

5Что вы увидите

Главная страница Design с четырьмя способами начать: Slides, Design, Design in codebase, Design System:

Открывается новый дизайн: слева поле для сообщения, справа пустой холст:

Пустой дизайн с полем для сообщения и холстом

Примерно через минуту страница появляется на холсте, а Claude объясняет, что он сделал и что предположил (примерные часы работы, условный адрес), чтобы вы знали, что заменить:

Готовый лендинг на холсте с объяснением Claude

Сам артборд крупнее:

6Осторожно

Это исследовательская предварительная версия. Кнопки переезжают, функции меняются; если картинки в этой главе отличаются от вашего экрана, суть та же.
Заглушки — это заглушки. Claude придумывает примерные часы и адреса, чтобы макет работал; замените их, прежде чем использовать дизайн.

7Дальше

Попросите второй артборд: Теперь сделай версию этой же страницы для телефона. В главе 3.2 вы сделаете так, чтобы каждый дизайн автоматически использовал ваши цвета и шрифты.