С чего начать в соцсетях→
AI-инструменты

Claude Code Artifacts: работа Клода как живая веб-страница

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

Разберёшься за 10 минут. Код писать не нужно. Нужен только вход в аккаунт Claude и свежая версия Claude Code. Внутри пошаговый запуск и три готовых промпта, которые собирают дашборд, отчёт и статус-борд с первого вставления.

Иди по порядку. Сначала проверяешь доступ (тариф, вход, версия), потом одной фразой просишь Claude собрать артефакт и жмёшь Yes на публикацию, дальше учишься держать страницу живой и делиться ссылкой. В конце три готовых промпта под конкретные сценарии, бери любой, подставляй своё и вставляй в Claude.

Что такое артефакт на самом деле

Это не файл, не скриншот и не приложение. Это одна живая веб-страница, которую Claude публикует прямо из твоей рабочей сессии на приватный адрес на claude.ai.

  • Claude собирает страницу из всего, до чего дотягивается в сессии: твой код, данные из подключённых сервисов, история вашего разговора.
  • Ты открываешь её в браузере по ссылке. Пока Claude продолжает работать над задачей, страница обновляется прямо на глазах, в том же адресе.
  • Каждая публикация становится отдельной версией. Есть история версий, можно откатиться назад, и есть галерея всех твоих артефактов на claude.ai.
Важное ограничение честно: артефакт фиксирует работу как страницу, полноценным приложением он не становится. Это одна самодостаточная страница без базы данных на бэкенде. Она не хранит то, что ввели в форму, и не тянет данные из интернета напрямую. Живые данные приходят только через подключённые сервисы (об этом в конце). Если нужен полноценный внутренний сервис с базой, его поднимают отдельно, артефакт для другого.

Шаг 1. Проверь доступ

Функция вышла в бете. На момент ролика она была доступна для тарифов Claude Team и Enterprise. Сейчас Anthropic открыла её также на Pro и Max. Проверь, что у тебя сходятся четыре условия, иначе Claude просто напишет локальный HTML-файл без ссылки.

  1. Тариф Pro, Max, Team или Enterprise. На Team функция включена по умолчанию. На Enterprise её включает владелец в админ-настройках claude.ai. На Pro и Max артефакт по умолчанию виден только тебе, пока сам не поделишься.
  2. Вход именно через аккаунт Claude, команда /login в Claude Code. Если сессия работает на API-ключе или токене-шлюзе, публикация не сработает, это частая причина осечки.
  3. Claude Code версии 2.1.183 или новее, либо десктоп-приложение Claude. Старые версии функцию не знают.
  4. Провайдер Anthropic API. На Amazon Bedrock, Google Vertex и Microsoft Foundry не работает. Также недоступно, если в организации включены CMEK, HIPAA или режим Zero Data Retention.
Быстрая самопроверка: если после просьбы собрать артефакт Claude выдал ссылку вида claude.ai/code/artifact/... и открыл браузер, доступ есть. Если написал локальный html-файл без ссылки, значит одно из условий выше не выполнено.

Шаг 2. Создай первый артефакт

Отдельной кнопки нет. Ты просто просишь Claude обычными словами собрать страницу вместо вывода текста в терминал. Хорошая заявка, это всё, что удобнее посмотреть глазами, чем читать построчно: дашборд, разбор изменений, набор вариантов рядом.

  1. Напиши Claude в сессии, что хочешь получить именно артефакт-страницу. Пример простой фразы: «Собери артефакт-дашборд по нашим задачам за неделю и держи его в актуальном состоянии, пока работаешь».
  2. Claude запишет страницу в HTML или Markdown файл в твоём проекте и спросит разрешение на публикацию. Он покажет что-то вроде «Claude wants to publish ... to a private page on claude.ai».
  3. Нажми Yes. Claude напечатает ссылку, браузер откроется на новой странице. Всё, артефакт живой.
  4. Чтобы в любой момент заново открыть последний артефакт из терминала, нажми Ctrl и правую квадратную скобку.
Claude сам придумывает заголовок страницы и иконку для вкладки браузера. Хочешь конкретный заголовок, попроси прямо в промпте. Повторная публикация уже одобренного артефакта разрешения больше не спрашивает.

Шаг 3. Держи страницу живой и делись

Сила артефакта в том, что он обновляется сам и живёт по одной ссылке. Вот как этим управлять.

  1. Обновление. Просто попроси Claude переделать страницу, например «Добавь разбивку по регионам под сводным графиком и опубликуй заново». Claude правит тот же файл и публикует в тот же адрес. Каждый, у кого открыта страница, видит изменение сразу.
  2. Обновление из другой сессии. Дай Claude ссылку на артефакт и попроси обновить: «Обнови https://claude.ai/code/artifact/... сегодняшними цифрами». Без ссылки новая сессия создаст новый артефакт вместо обновления старого.
  3. Как поделиться. Открой артефакт в браузере и нажми Share в шапке страницы. Там же видно, кто автор, и ссылка на твою галерею всех артефактов.
С кем можно делиться, зависит от тарифа. На Team и Enterprise даёшь доступ конкретным людям из твоей организации или всей организации разом, они заходят под своим аккаунтом claude.ai и видят приватную страницу. На Pro и Max единственный способ поделиться, это публичная ссылка, которую откроет кто угодно без входа. Приватная командная ссылка из ролика, это возможность именно Team и Enterprise. На Team и Enterprise коллегу можно сделать не только зрителем, но и редактором.
С чего начать в соцсетях

Три готовых промпта под реальные задачи

Бери любой, подставь своё в квадратные скобки, вставь целиком в Claude Code в нужном проекте. Каждый собирает готовую страницу с первого раза.

Дашборд статуса проекта

Живая панель, которая сама ведёт статус вместо того, чтобы руками писать апдейты. Claude берёт задачи и изменения из кода и истории сессии и держит страницу актуальной по ходу работы.

Живой отчёт клиенту

Страница-отчёт понятным языком для человека без технического бэкграунда. Наполняется по мере работы, клиенту уходит одна ссылка вместо длинных писем.

Статус-борд команды

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

1. Дашборд статуса проекта. Собирает панель, которая обновляется сама.

Промпт
Ты работаешь в моём проекте в Claude Code. Собери артефакт-дашборд статуса проекта [название проекта]. Возьми данные из репозитория и из истории нашей сессии. Покажи на одной странице четыре блока: 1) список задач со статусом (сделано, в работе, ждёт) и прогрессом в процентах, 2) последние изменения в коде за неделю коротким списком, 3) риски и блокеры, 4) что делаем следующим шагом. Оформи чисто, цифры крупно, заголовки понятные. Обновляй эту страницу по мере работы и каждый раз публикуй в тот же адрес. Заголовок страницы: Статус проекта [название проекта].

2. Живой отчёт клиенту. Пишет простым языком, наполняется по ходу.

Промпт
Собери артефакт-страницу отчёта для клиента по проекту [название] за [период]. Клиент не программист, пиши простым человеческим языком, без технического жаргона. Раздели на блоки: 1) что сделали за период, понятными формулировками списком, 2) что это даёт клиенту на деле, 3) что в планах на следующий период, 4) экран с ключевыми цифрами крупно. Оформи наглядно и спокойно, без пестроты. По мере работы обновляй страницу и публикуй в тот же адрес, чтобы клиент открывал одну ссылку и видел свежее. Заголовок: Отчёт по проекту [название].

3. Статус-борд команды. Чеклист, который сам отмечает выполненное.

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

Живые данные и границы страницы

Чтобы страница при каждом открытии показывала свежие данные, есть один рабочий приём. И пара честных ограничений, чтобы ты не ждал от артефакта лишнего.

Живые данные через подключённые сервисы. Артефакт может дёргать твои подключённые коннекторы (например GitHub) каждый раз, когда кто-то открывает страницу. Тогда там всегда актуальные цифры на момент открытия. Назови коннектор прямо в промпте:

Промпт
Собери артефакт-дашборд наших открытых пулл-реквестов, который подтягивает живой список через мой коннектор GitHub при загрузке страницы. Добавь запасное сообщение в каждый живой блок с названием коннектора, который ему нужен, на случай если у зрителя он не подключён.
Тонкость про зрителей: живые данные тянутся через аккаунт того, кто открыл страницу, под его собственным входом. Значит у каждого зрителя должен быть свой такой же подключённый коннектор, и claude.ai один раз спросит у него разрешение. Поэтому запасное сообщение в промпте выше не лишнее.
  • Одна страница без бэкенда. Форму она не сохранит, внешние запросы к сторонним сайтам закрыты политикой безопасности, картинки и стили Claude вшивает прямо внутрь.
  • Размер страницы до 16 МБ. Если публикация падает по размеру, обычно виноваты тяжёлые встроенные картинки, попроси заменить их на схемы или лёгкую графику.
  • Файл только .html, .htm или .md. Markdown отрисуется как оформленная страница.
Итог. Артефакт закрывает ровно ту боль, с которой начинали: показать работу живой страницей и держать её в актуальном виде по одной ссылке, без ручных апдейтов. Проверь доступ, попроси Claude собрать первый дашборд по промпту выше и нажми Yes.
Следующий шаг
Хочешь так же, но под свой блог и продукт?

Я собрал систему, по которой обычный человек запускает блог с нуля и набирает аудиторию без съёмок, монтажа и команды. Внутри разбор, с которого стартовал сам.

Открыть разбор: с чего начать→