Artifacts в Claude — это расширенная версия чата, в которой создается что-то, что можно пощупать, например, опрос, лендинг, шаблон документа и так далее. Фактически это первая ступенька к созданию полноценных приложений, требующая минимального уровня знаний.
Главное отличие от обычного ответа в том, что Artifact можно использовать. Не "вот вам код, скопируйте и запустите у себя", а "вот рабочая штука прямо в браузере, она уже работает". Экран при этом делится на две части: слева — чат, а справа — то, что вы создаете.
Начинается все с выбора создаваемого артефакта. Claude предлагает создать сайт, документ, игру или начать с нуля. Если вы пойдете по одному из предложенных вариантов, то Claude задаст заготовленные вопросы, которые ему помогут собрать первый прототип.
Для примера создадим профориентационный тест, который помогает определиться с профессией. Пока без
дополнительных уточнений, посмотрим на то, что сделает нам Claude. И уже дальше доработаем.
На этом этапе Claude формирует план и, возможно, задает уточняющие вопросы:
Отличная идея — короткий профориентационный тест хорошо заходит как лид-м
План теста «Какая digital-профессия тебе подходит?»
Формат: 5 вопросов, каждый ответ начисляет баллы нескольким профессиям. В
Профессии на выходе (6 вариантов):
- Frontend-разработчик - Backend-разработчик - Data Analyst / аналитик данных - QA-инженер (тестировщик) - DevOps-инженер - UX/UI-дизайнер
5 вопросов (каждый раскрывает одну ось склонностей):
- Что тебе ближе по складу ума? — визуальное/эстетика vs. логика/данные v - Как ты любишь работать? — в одиночку глубоко vs. в команде vs. на стыке - Что приносит удовольствие? — видеть результат сразу vs. находить ошибки - С чем готов возиться часами? — интерфейсы vs. цифры и закономерности vs - Какая задача звучит интереснее? — конкретные мини-кейсы под каждую проф
Результат: карточка с профессией, 2–3 предложения «почему это про тебя», Технически: интерактивный артефакт — кликабельные карточки ответов, прогр Подходит под твое видение? Скажи, если что-то поменять — например, добави
Если хочется, можно внести уточнения и/или попросить показать результат. Когда Claude начнет реализацию задачи, справа будет видно, как он пишет код, используя HTML, CSS и Javascript. В следующих уроках мы немного познакомимся с этими технологиями, но прямо сейчас достаточно говорить, что мы хотим, без вникания в то, как оно устроено под капотом.
Когда Claude закончит, справа появится готовый результат, с которым можно взаимодействовать. На этом этапе можно проверить, как все работает, и дать дальнейшие указания агенту.
Версионирование
Каждый раз, когда вы просите Claude поправить Artifact, он создает новую версию. Старые не пропадают. В правом верхнем углу панели Artifact есть стрелочки и счетчик версий. Можно отлистать назад, посмотреть, как было раньше, и при необходимости откатиться.
Это удобно, когда вы экспериментируете. Попросили добавить фичу, получилось плохо, откатились на предыдущую версию и попробовали по-другому. Никаких git-команд, все доступно прямо в интерфейсе.
Тонкость в том, что Artifact версионируется поверх одного диалога. Если вы открыли новый чат и попросили "продолжи мой калькулятор", Claude его уже не помнит. Поэтому работа над одним Artifact обычно идет внутри одного разговора, который вы потом можете найти в истории слева.
Публикация Кроме того, получившийся результат можно опубликовать в интернете, чтобы поделиться с кем-нибудь. В верхней части Artifact есть кнопка Share. После нажатия Claude создает публичную ссылку, которую можно отправить кому угодно. Никакого хостинга подключать не нужно — Claude сам это все держит у себя. Бесплатные тарифы дают ограниченный лимит на публичные артефакты, но для прототипа этого хватает.
Главный смысл Artifacts в том, что они закрывают самый первый этап вайбкодинга. Идея есть, времени мало, нужно проверить. Открываете claude.ai, описываете задачу, через минуту смотрите на работающий результат. Если стало понятно, что идея рабочая, переходите к более серьезным инструментам. Если нет, выкинули и пробуете дальше.
Самостоятельная работа В этом уроке проходим на одной задаче весь цикл работы с Artifacts: первая версия, несколько правок, откат к ранней версии и ветка от нее, публикация.
Первая версия
Откройте новый чат и дайте такой запрос. Тему берите свою, в которой разбираетесь и могли бы реально дать команде или клиентам.
Сделай профессиональный тест из 10 вопросов по основам интернет-маркетинга. Варианты ответа, подсчет результата в конце и кнопка «пройти заново».
Справа должна открыться панель Artifact, в которой тест запускается. Если Claude вставил тест прямо в сообщение чата, попросите его явно: «оформи это как Artifact», после этого тест выносится в боковую панель.
Еще пара версий
Несколькими сообщениями доработайте тест. Каждый запрос создает новую версию.
Добавь таймер на весь тест, 5 минут.
После неправильного ответа показывай короткое пояснение, в чем ошибка.
После каждого ответа смотрите на счетчик версий в правом верхнем углу панели: число растет, а прежние версии никуда не пропадают.
Откат и ветка от старой версии
Стрелками рядом со счетчиком отлистайте версии назад и откройте одну из ранних, например ту, где еще не было таймера. Посмотрите, как переключается содержимое панели. Прямо с этой ранней версии дайте новый запрос.
Сделай вопросы по очереди, по одному на экране, с кнопкой «дальше».
Так вы увидите, что работа пошла веткой от старого состояния, а не от последней версии. Это удобно, когда одна из правок увела тест не туда: возвращаетесь на хорошую версию и продолжаете от нее.
Публикация
Когда довольны результатом, опубликуйте тест и получите публичную ссылку. Откройте ее в режиме инкогнито или на телефоне и убедитесь, что тест работает без вашего аккаунта. Никакого хостинга подключать не нужно, ссылку можно сразу отправить коллеге или клиенту. Это та точка, с которой прототип можно развивать дальше.
Дополнительные материалы Что такое HTML и зачем он нужен Что такое CSS