раздел 00

Что Claude умеет в дизайне

Claude - это нейросеть от Anthropic, с которой обычно общаются как с чат-ботом: задаёшь вопрос, получаешь текст. Но у Claude есть сильная сторона, про которую многие не знают: он умеет собирать интерфейсы. Вы описываете словами, как должен выглядеть экран, или показываете скриншот - и получаете готовую вёрстку, которую сразу видно и можно потрогать.

Под «Claude Design» обычно понимают не отдельную программу, а именно сильные дизайн-возможности самого Claude: сгенерировать интерфейс, показать его живьём и сразу отдать код.

Три вещи, которые Claude делает с интерфейсом

Генерирует UI
Опишите экран словами - получите готовый макет: карточки, формы, дашборд, лендинг.
Верстает
Превращает макет в реальный код: HTML и CSS или компоненты React. Не картинку, а рабочую страницу.
Читает картинку
Дайте скриншот или фото наброска - Claude разберёт его и соберёт похожий интерфейс.

То есть на входе может быть просто текст («сделай экран профиля с аватаркой и кнопкой выхода») или картинка (скриншот чужого сайта, фото на салфетке, набросок в Фигме). На выходе - не описание, а живой интерфейс и код к нему.

Зачем это невайбкодеру

Допустим, вы не дизайнер и не умеете верстать. Раньше путь был такой: придумать идею, найти дизайнера, дождаться макета, найти верстальщика, дождаться вёрстки. Дни и деньги.

С Claude вы за пару минут получаете рабочий прототип сами:

  • проверить идею - как вообще будет выглядеть экран, удобно ли;
  • показать коллегам или клиенту живой макет, а не описание на словах;
  • собрать первую версию интерфейса для своего проекта, чтобы потом доработать.

Что разберём в курсе

  • 01 - Artifacts: как попросить интерфейс и сразу увидеть его рядом с чатом.
  • 02 - дизайн в код: из текста или скриншота в HTML/React, как задавать стиль.
  • 03 - как перенести результат в свой проект и доработать.
  • 04 - шпаргалка: готовые промпты и чек-лист.