раздел 01

Artifacts: живой предпросмотр

Artifacts - это панель в Claude.ai (в браузере или приложении), которая открывается сбоку от чата. Когда вы просите Claude сделать интерфейс, он не вываливает простыню кода в переписку, а собирает результат в Artifacts и сразу его запускает. Слева - ваш диалог, справа - живой работающий интерфейс.

Главная польза Artifacts: вы видите не описание и не код, а сам интерфейс - кликабельный, с настоящими кнопками. Можно ткнуть и проверить, удобно или нет.

Как попросить интерфейс

Откройте Claude.ai, начните новый чат и просто опишите, что хотите. Например:

Сделай страницу профиля пользователя: аватарка, имя, email,
кнопка «Редактировать» и список последних действий.

Claude соберёт интерфейс, и справа появится панель Artifacts с готовой страницей. Её сразу видно, по кнопкам можно кликать.

Опишите экран словами

Что за страница, какие блоки, какие кнопки. Чем конкретнее, тем точнее результат.

Claude собирает в Artifacts

Справа открывается панель с готовым интерфейсом - он запущен, а не показан картинкой.

Трогаете и оцениваете

Кликаете по кнопкам, проверяете на телефоне, смотрите, удобно ли.

Просите поправить

Пишете в чат, что изменить - Claude обновляет тот же интерфейс.

Итерации: правим словами

Самое удобное - менять интерфейс репликами в чат, не трогая код. Примеры:

Поменяй основной цвет на тёмно-зелёный.
Сделай адаптивно: чтобы на телефоне блоки шли в одну колонку.
Добавь сверху меню с тремя пунктами.
Кнопку сделай крупнее и выровняй по центру.
Шрифт заголовков сделай покрупнее, а отступы между карточками - больше.

После каждой реплики Claude обновляет тот же Artifact, и вы сразу видите новый вариант. Не нравится - откатываете на словах: «верни как было» или «предыдущий вариант был лучше».

Хорошо для Artifacts

Лендинги, карточки, формы, дашборды, калькуляторы, небольшие интерактивные демо - всё, что укладывается в одну страницу.

Менее удобно

Большое приложение со множеством экранов и сложной логикой - его собирают уже в проекте (см. раздел 03).