У Claude от Anthropic есть функция, которой нет у большинства других ИИ-чатботов: артефакты. Самодостаточный код, HTML, React-компоненты, диаграммы Mermaid и SVG, которые отображаются прямо в чате как отдельные блоки.
При правильном использовании артефакты превращают Claude в инструмент для быстрого прототипирования. При неправильном — они лишь приукрашенные блоки кода. Вот полное руководство.
Что такое артефакт на самом деле
В документации Anthropic артефакты называют «существенным самодостаточным содержимым, которое пользователи, скорее всего, будут изменять, дорабатывать или выносить за пределы беседы». На практике существует шесть типов:
- Код — Python, TypeScript, Rust, Go и т. д. Отображается с подсветкой синтаксиса.
- Документы Markdown — длинные тексты, отчёты, черновики.
- HTML-страницы — одностраничные лендинги, дашборды, прототипы.
- React-компоненты — компоненты с полной реактивностью, отображаемые в реальном времени.
- Диаграммы Mermaid — блок-схемы, диаграммы связей, диаграммы последовательностей. Отображаются как встроенный SVG.
- SVG-изображения — векторная графика, созданная по запросу.
Claude решает, что сделать артефактом, исходя из объёма и самодостаточности. Вы можете повлиять на это, сказав «сделай это артефактом» или «как самодостаточный компонент».
Почему артефакты важны для экспорта
Артефакт имеет собственный жизненный цикл:
- Он отображается отдельно от основного текста беседы.
- Вы можете редактировать его в строке (попросите Claude «доработай артефакт»).
- У него есть стабильный идентификатор, сохраняющийся при редактировании.
Это усложняет экспорт. Если ваш инструмент экспорта просто выгружает беседу в Markdown, артефакт оказывается либо (а) встроенным блоком кода без возможности отображения, либо (б) отсутствует вовсе.
Хорошие инструменты экспорта рассматривают артефакты как полноценные объекты.
Как ChatExport AI обрабатывает артефакты
Три режима, выбираемые при каждом экспорте:
Режим 1: Встроенный (по умолчанию для PDF, Word)
Содержимое артефакта встраивается в текст беседы в том месте, где оно появилось. Код сохраняет подсветку синтаксиса. Диаграммы Mermaid отображаются как встроенный SVG. HTML-страницы — как скриншот отрисованной страницы.
Лучше всего подходит для: передачи экспорта тому, кто просто хочет прочитать беседу.
Режим 2: Отдельные файлы (по умолчанию для ZIP, Markdown)
Артефакт сохраняется как отдельный файл:
- Код →
chat/<artifact-name>.py(или .ts, .rs и т. д.) - HTML →
chat/<artifact-name>.html - React →
chat/<artifact-name>.jsx - Mermaid →
chat/<artifact-name>.mmd+chat/<artifact-name>.svg - SVG →
chat/<artifact-name>.svg
В тексте беседы каждый артефакт указывается в виде относительной ссылки.
Лучше всего подходит для: передачи артефакта разработчику, который хочет запустить или изменить код.
Режим 3: Оба
В режиме ZIP сохраняется и транскрипт для чтения (с встроенными артефактами), и отдельные файлы для запуска.
Лучше всего подходит для: архивации. Через полгода вы будете рады, что есть оба варианта.
Подводные камни артефактов
Множественные версии
Если вы дорабатываете артефакт («сделай кнопку больше»), Claude обновляет его на месте. Старые версии исчезают из окна беседы, но их можно восстановить через панель истории артефакта.
ChatExport AI захватывает текущую версию каждого артефакта на момент экспорта. Если нужны все версии, попросите Claude «покажи v1, v2, v3 артефакта» перед экспортом; тогда история версий попадёт в экспорт как отдельные блоки кода.
Незавершённые артефакты
Если Claude ещё не закончил генерацию, когда вы нажимаете «Экспорт», частичный артефакт включается как есть. Дождитесь окончания стриминга перед экспортом.
Зависимости React-артефактов
React-артефакты могут импортировать из небольшого белого списка (React, Tailwind через classnames, иконки lucide-react). Экспорт захватывает исходник JSX; потребителю нужно настроить те же зависимости, чтобы запустить их локально.
Экспорт ChatExport AI включает README.md внутри ZIP для React-артефактов с указанием необходимых зависимостей и фрагментом, показывающим, как создать проект Vite + React для запуска артефакта.
Диаграммы Mermaid при офлайн-рендеринге
Экспорт SVG диаграммы Mermaid полностью самодостаточен — открывается в любом браузере без интернета. Экспорт исходника .mmd позволяет редактировать и перерендеривать позже.
Рабочий процесс: от прототипа в Claude до запущенного кода
Наилучший для меня сценарий:
- Прошу Claude собрать прототип как React-артефакт. Вношу 2–3 правки в строке.
- Экспортирую беседу в ZIP. Транскрипт объясняет принятые решения; файлы артефактов готовы к запуску.
- Переношу артефакт в настоящий проект Vite. Добавляю указанные зависимости. Компонент работает как есть.
- Заменяю комментарии в стиле промпта на полноценный JSDoc. Добавляю тесты. Релиз.
Общее время от запроса до запуска локально: ~5 минут. Экспорт — то, что делает это быстрым: он мост между «Claude это сделал» и «это в моём репозитории».
Попробуйте
Откройте Claude. Попросите его: «создай самодостаточную HTML-страницу с диаграммой Mermaid для потока регистрации пользователя». Когда артефакт отобразится, экспортируйте беседу в ZIP через ChatExport AI. В ZIP будут транскрипт, отдельный .html, исходник .mmd и отрисованный .svg.
Это полный рабочий процесс с артефактами Claude.
Связанное
- Руководство по экспорту Claude.
- Claude в Markdown — только Markdown, артефакты как отдельные файлы.
- Разработчикам — рабочие процессы экспорта ИИ с точным сохранением кода.