К содержимому
Claude Code с 0:полный курс
Claude CodeАвтор: Михаил Кузьмицкий

Артефакты в Claude Code: живые страницы из проекта

Коротко

Артефакты Claude Code — живые веб-страницы из твоего кода и разговора: обновляются сами, хранят версии, остаются приватными. Разбираем простыми словами.

Знакомая боль: ты что-то сделал в проекте — разобрал баг, посмотрел пул-реквест, прикинул, какие сервисы откуда импортятся — и теперь всё это нужно кому-то показать. Открываешь мессенджер, начинаешь печатать «короткий» статус, вставляешь скриншоты, копируешь куски кода, рисуешь схему на салфетке. Через двадцать минут у тебя есть сообщение, которое устареет, как только ты поправишь одну строчку в коде.

А теперь представь: ты просто говоришь Claude Code обычными словами — «собери страницу с тем, что мы только что разобрали» — и он отдаёт тебе ссылку. Открываешь в браузере, делишься с командой, а когда правишь что-то дальше — страница обновляется сама. Это и есть артефакты.

Артефакты Claude Code: живые страницы из проекта

Что это и зачем

Артефакт в Claude Code — это живая интерактивная веб-страница, которую Claude собирает прямо в ходе работы. Не файл, который ты выгружаешь и потом вручную раздаёшь, а страница по постоянной ссылке, которая знает контекст твоей сессии: твой код, подключённые источники (коннекторы) и сам разговор с Claude.

Главная идея — превратить техническую работу в наглядный документ, который не нужно собирать руками. Ты не выбираешь «экспорт в PDF», не подключаешь отдельные сервисы и инфраструктуру. Ты просто просишь страницу — а Claude Code лепит её из того, что у тебя уже есть под рукой.

Три вещи делают артефакты по-настоящему удобными:

  • Живые обновления. Поправил артефакт — открытая страница обновилась на месте, команда сразу видит новую версию. И никакого «пришлю апдейт позже».
  • Версии и история. Каждое обновление — новая версия по тому же адресу. Можно посмотреть, что было раньше, и откатиться, если что-то пошло не так. А все твои страницы лежат в одной галерее — удобно листать и наводить порядок.
  • Приватность. По умолчанию артефакт виден только тебе. Делишься — сам, со страницы; и даже тогда его видят только участники твоей организации, которые вошли в аккаунт. Доступом управляет админ.

Чем артефакт отличается от привычных способов

Чтобы стало понятнее, сравним артефакт с тем, как обычно «показывают сделанное».

Способ показать работуОбновляется сам?Кто видитКогда удобнее всего
Сообщение в чатеНет, переписываешь рукамиКто в чатеБыстро бросить одну мысль
Документ / PDFНет, пересобираешь и перезаливаешьКому отправил файлЗафиксировать итог «как есть»
СкриншотыНет, делаешь зановоКому отправилПоказать «вот так выглядит» один раз
Артефакт Claude CodeДа, на месте, с версиямиТолько твоя организация, по ссылкеЖивой статус, разбор, карта, постмортем

Разница не косметическая. Сообщение и PDF — это снимок прошлого: сделал и забыл, через час неактуально. Артефакт — это живая страница, которая идёт в ногу с твоей работой и хранит, как менялась.

Важная деталь: артефакты сейчас в бете и доступны на тарифах Claude Team и Enterprise. Запускать их можно из Claude Code в терминале (CLI) и из десктоп-приложения, а открывается готовая страница в любом браузере. Если у тебя личный аккаунт — пока просто держи в голове, что такое умеет существовать.

Как это работает на практике

Никаких новых кнопок и форм заучивать не надо — ты просто просишь страницу обычными словами. Например:

  • «Собери артефакт с находками по аутентификации из этого ревью — каждую со ссылкой на код».
  • «Нарисуй карту облачных ресурсов из нашего Terraform».
  • «Сделай страницу разбора этого бага: что упало, почему и что я проверял».

Дальше Claude Code берёт контекст прямо из твоей среды: код, который перед ним, разговор, который вы ведёте, подключённые источники. Ему не нужно отдельно «скармливать» данные — он собирает страницу из того, что уже есть. Поправил вывод — версия обновилась, ссылка та же.

Чтобы это перестало быть абстракцией, разберём один маленький путь от запроса до готовой ссылки. Допустим, ты только что закончил ревью пул-реквеста и хочешь оставить понятный разбор для коллеги.

  1. Ты пишешь обычными словами. Прямо в сессии: «собери артефакт-разбор этого PR — что менялось, зачем, и какие тесты я гонял, каждый пункт со ссылкой на строку кода».
  2. Claude Code собирает страницу. Он уже видит дифф, твой разговор и сам репозиторий, поэтому не переспрашивает «а где код?» — он берёт всё из контекста и отдаёт ссылку.
  3. Ты открываешь её в браузере. Это нормальная веб-страница: заголовки, список изменений, ссылки на конкретные места в коде. Не скриншот и не «простыня» текста в чате.
  4. Замечаешь, что забыл про один редкий случай. Дописываешь его в разговоре, просишь обновить — страница меняется на месте, ссылка прежняя, а прошлая версия остаётся в истории.
  5. Кидаешь ссылку коллеге. Он видит ровно ту же актуальную картину, что и ты, без пересылки файлов и без «а это уже устарело».

Весь фокус в том, что ты ни разу не вышел из своего рабочего потока: не открывал редактор слайдов, не возился с экспортом, не собирал схему вручную. Ты описал результат словами — а сборку взял на себя Claude Code.

Кому это пригодится: примеры по ролям

Артефакты — не только для разработчиков. Вот короткая карта «кто что может попросить».

КтоЧто попросить у Claude CodeЧто получится
Инженер«Разбор этого пул-реквеста»Страница: что менялось, зачем, что протестировал
Архитектор«Карта сервисов из реальных импортов»Схема, кто от кого зависит, не нарисованная вручную
Безопасность«Аудит лицензий зависимостей»Список с пометкой проблемных (copyleft) лицензий
Дежурный по инциденту«Страница инцидента»Упавший тест + функция + всплеск ошибок + первопричина
Менеджер«Что сделано за неделю»Сводка из смерженных пул-реквестов, без ручного сбора
Дизайнер«Несколько вариантов этого экрана»UX-варианты, собранные из реальных компонентов

Несколько сценариев чуть подробнее, чтобы почувствовать масштаб.

Разбор бага → готовый постмортем

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

Карта инцидента, которую не стыдно показать руководству

Во время инцидента самое дорогое — время. Артефакт-страница инцидента склеивает воедино упавший тест, конкретную функцию, всплеск ошибок и найденную первопричину. Пока ты копаешь — страница обновляется, и любой, кому ты дал ссылку, видит актуальную картину, а не твой пересказ десятиминутной давности.

Прозрачность для команды и аудита

Поскольку каждая правка — это новая версия по той же ссылке, у тебя автоматически накапливается аудит-след: видно, как менялось решение и почему. Меньше ручных статус-апдейтов, понятнее, кто что решил, и готовая история на случай, когда кто-то спросит «а как мы к этому пришли».

Как выбрать момент и не наделать ошибок

Артефакты — мощная штука, но не серебряная пуля. Несколько типичных промахов новичка:

  • Тащить в артефакт то, что живёт одну минуту. Если нужно бросить одну фразу — это чат, а не страница. Артефакт хорош там, где документ будет жить и меняться.
  • Забывать про приватность. По умолчанию страница видна только тебе — это плюс. Но если ты ждёшь, что команда «вот-вот увидит», а ссылкой не поделился, никто ничего не увидит. Делиться нужно явно.
  • Думать, что увидит кто угодно по ссылке. Нет: страницу видят только вошедшие участники твоей организации. Это не публичный линк в интернет — и это нормально для рабочих данных.
  • Игнорировать версии. Если эксперимент с правками пошёл не туда — не переделывай с нуля, откатись на прошлую версию. История для того и есть.
  • Просить расплывчато. «Сделай что-нибудь по проекту» даст кашу. Чем конкретнее запрос («находки по аутентификации, каждая со ссылкой на код»), тем полезнее страница.

Совет

По гайдам Anthropic, формулируй запрос как готовый результат с источниками, а не как тему. Не «расскажи про безопасность», а «собери страницу находок безопасности — каждую со ссылкой на конкретное место в коде». Claude Code сильнее всего, когда у него есть и контекст (твой код и разговор), и понятная форма ответа.

Чек-лист: когда артефакт — то, что нужно

  • Результат будет жить и обновляться (статус, разбор, карта, постмортем).
  • Его нужно показать команде, а не одному человеку в личке.
  • Важно сохранить историю изменений решения.
  • Данные рабочие и должны остаться внутри организации.
  • Если это разовая фраза или быстрый вопрос — хватит обычного чата.

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

Это безопасно — там же мой рабочий код?

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

Нужно ли подключать какие-то базы и сервисы?

Нет. Claude Code берёт контекст прямо из твоей среды разработки — код, разговор, уже подключённые источники. Отдельно настраивать инфраструктуру под артефакт не требуется.

Что будет, если я поправлю код после создания страницы?

Попроси Claude обновить артефакт — он пересоберёт страницу, и она обновится по той же ссылке. Старые версии остаются в истории, к ним можно вернуться.

Где это доступно и сколько стоит?

Сейчас это бета для тарифов Claude Team и Enterprise. Запускаешь из Claude Code в терминале или из десктоп-приложения, открываешь страницу в любом браузере.

Первоисточник со всеми деталями — статья Anthropic: Artifacts in Claude Code.

Заметка

Материал — по мотивам статьи Anthropic Artifacts in Claude Code. Пересказали по-русски для новичков.

Читайте также

Попробуй на практике

Бесплатные интерактивные курсы по теме — прямо в браузере, с нуля.