Ваш менеджер тратит полдня на то, чтобы собрать в Excel таблицу для расчёта стоимости ремонта? Или вам нужно быстро сделать лендинг для акции, а дизайнер занят на две недели? Есть способ решить это за час без единой строчки кода, написанной вручную.
Речь об Artifacts - функции в Claude (это AI-помощник от Anthropic). Она превращает обычный чат в среду, где AI пишет код, а вы сразу видите результат. Не нужно настраивать сервер, ставить программы или разбираться в вёрстке. Просто описываете задачу - и получаете готовый инструмент.
Разберём на примере стройфирмы (это пример, не реальный кейс). У вас есть прайс на отделочные работы и типовой договор подряда. Клиенты постоянно просят рассчитать смету - менеджеры отвечают вручную, ошибаются, теряют заявки. Artifacts позволяют за час сделать калькулятор, который сам считает стоимость по вашим ценам.
Что такое Artifacts и когда Claude их создаёт
Artifacts - это отдельная панель справа от чата. Когда вы просите Claude сделать сайт, таблицу или схему, AI не просто пишет текст, а выводит готовый результат в этой панели. Вы можете нажимать кнопки, заполнять поля, смотреть, как всё работает - прямо в браузере.
Механизм прост. Как только Claude понимает, что вы просите создать что-то с кодом (страницу, калькулятор, диаграмму), он активирует Artifacts. Код отправляется в боковую панель и сразу отображается в виде готового интерфейса. Не нужно копировать, вставлять, запускать - всё готово.
Раньше код смешивался с текстом, и его приходилось собирать вручную. Теперь Artifacts показывают результат как готовый файл. Вы можете кликать по кнопкам, проверять адаптивность, вносить правки - и всё это в одном окне.
Claude создаёт артефакт в трёх случаях:
- Вы просите сделать веб-интерфейс: лендинг, форму, панель управления.
- Нужна графика или схема: векторная иконка, блок-схема, архитектурный план.
- Нужны структурированные данные: таблицы, спецификации, документы.
Важно: Artifacts поддерживают итерации. Вы можете сказать «сделай кнопку зелёной» или «добавь столбец с НДС» - Claude обновит код, не переписывая всё с нуля.
HTML-артефакты: одностраничные инструменты и калькуляторы
HTML-артефакты - это готовые страницы, которые работают в браузере. Никаких серверов, баз данных или сложных настроек. Claude генерирует чистый код, который можно сразу сохранить и запустить.
Разберём на примере стройфирмы. Вам нужен калькулятор стоимости ремонта. Достаточно описать формулу и интерфейс: «Сделай калькулятор, где клиент выбирает тип работ (штукатурка, покраска, укладка плитки), площадь помещения, и получает итоговую стоимость с учётом материалов». Claude выдаст готовый инструмент с ползунками, валидацией и обновлением цены в реальном времени. Никакого JavaScript вручную.
Интерактивные диаграммы - тоже через HTML. Claude может встроить лёгкие библиотеки вроде Chart.js или написать код на SVG (векторная графика). Это позволяет строить графики, которые реагируют на действия пользователя. Если нужно сделать дашборд для отслеживания бюджета стройки - модель свяжет таблицу ввода данных с графиком.
Особое внимание - обработке ошибок. Claude добавляет проверки, чтобы калькулятор не выдавал бесконечность или NaN (не число). Можно попросить предусмотреть граничные случаи: деление на ноль, отрицательные значения в полях, где их быть не должно.
Генерация форм - ещё один сценарий. Анкеты для клиентов, конвертеры величин, генераторы промптов - всё работает мгновенно. Данные не покидают браузер, что важно для конфиденциальности.
Для внешнего вида Claude использует CSS. Можно задать цветовую схему, тени, скругления - инструмент будет корректно отображаться и на телефоне, и на компьютере.
Экспорт готового решения - пара секунд. Кнопка скачивания даёт файл .html. Его можно отправить коллеге, открыть на любом компьютере или разместить на хостинге. Поддержка localStorage (локальное хранилище в браузере) позволяет сохранять данные между сессиями - превращает простой скрипт в мини-приложение.
SVG и диаграммы: визуализация данных без дополнительных инструментов
Artifacts превращают Claude в генератор векторной графики. Вместо поиска картинок или использования редакторов вы получаете чистый код SVG, который сразу отображается в панели. Это идеально для иконок, логотипов, схем процессов и диаграмм - они масштабируются без потери качества.
Достаточно описать задачу на естественном языке. Укажите тип данных, стилистику и ключевые элементы. Claude сгенерирует код, где каждый прямоугольник, линия и круг описаны программно. Правки вносятся быстрее, чем в графическом редакторе. Нужно изменить цвет гистограммы или добавить подпись к оси? Просто попросите.
Интерактивные SVG - новые возможности. CSS-анимации и JavaScript прямо в артефакте оживляют диаграммы. Можно сделать анимированную диаграмму, где столбцы растут при загрузке, или схему, реагирующую на наведение курсора. Элементы меняют цвет, размер, прозрачность - данные становятся наглядными для презентаций.
Практическое применение: визуализация бизнес-процессов. Опишите этапы воронки продаж или оргструктуру - Claude создаст блок-схему с соединительными линиями и подписями. Векторный рисунок весит минимум и идеально смотрится на любых экранах.
Генерация иконок для интерфейса - за секунды. Задайте единый стиль (толщина обводки, скругления, цвета) - и получите набор иконок без дизайнера.
Для работы с результатом используйте кнопку копирования кода. Вставьте SVG напрямую в HTML сайта или сохраните как файл .svg. Возможность редактировать код вручную даёт полный контроль.
React-компоненты в браузере: живые превью без деплоя
Artifacts превращают Claude в среду для разработки React-интерфейсов. Не нужно настраивать Webpack, Vite или локальный сервер. Пишите код - получайте результат. Идеально для прототипирования, создания виджетов или проверки идей.
Система поддерживает современный синтаксис: хуки, функциональные компоненты, базовую стилизацию через Tailwind CSS (библиотека готовых CSS-классов). Просто попросите Claude создать компонент. AI сгенерирует код, отобразит его в боковой панели и позволит мгновенно редактировать.
Попробуйте создать интерактивный элемент: счётчик кликов или форму с валидацией. Claude напишет компонент, используя useState (хук для управления состоянием). Результат появится справа - работающий интерфейс, реагирующий на действия. Никаких задержек на пересборку.
Если результат не подходит, укажите в чате: «Сделай кнопку синей» или «Добавь поле для email». Claude обновит код, и Artifacts перерисуют компонент. Это итеративный процесс, занимающий секунды.
Для стилизации удобно использовать Tailwind. Claude понимает утилитарные классы и применяет их без настройки. Запросите карточку товара с тенью, скруглениями и адаптивной сеткой - получите готовый макет.
Artifacts поддерживают работу с несколькими файлами. Можно попросить разбить компонент на части: вынести логику в отдельный хук, данные в константу. Claude создаст структуру, аналогичную реальному проекту, без настройки файловой системы.
Это отличный способ обучаться. Изучайте хуки, пропсы и контекст на практике. Claude объяснит код, а Artifacts покажут, как он работает в реальном времени.
Используйте эту функцию для создания лендингов, дашбордов, мини-приложений или элементов UI. Получите рабочий прототип за минуты.
Markdown-артефакты: структурированные документы и шаблоны
Markdown-артефакты подходят для создания технической документации, инструкций и шаблонов. Артефакт открывается в отдельном окне, что позволяет сосредоточиться на структуре и форматировании. Особенно полезно для длинных списков, таблиц или кода.
Для создания документа попросите Claude сформировать артефакт. Система применит базовое форматирование, но его можно улучшить. Используйте заголовки разного уровня для иерархии, списки для перечислений и таблицы для структурирования данных. Например, при составлении спецификации к проекту удобно разбить информацию на разделы: цели, сроки, участники, требования.
Шаблоны документов ускоряют работу. Если вам часто нужны однотипные отчёты или письма, создайте один раз структуру и сохраните как артефакт. В будущем можно обновлять данные, не меняя формат. Claude умеет генерировать шаблоны на основе описания. Достаточно написать: «Создай шаблон еженедельного отчёта с разделами для прогресса, проблем и планов».
Таблицы в Markdown-артефактах выглядят чётко и читаемо. Они подходят для сравнения характеристик, расписаний или финансовых данных. Для выравнивания столбцов используйте двоеточия в строке разделителя. Например, :--- выровняет текст по левому краю, ---: по правому, а :---: по центру.
Кодовые блоки с подсветкой синтаксиса делают технические документы понятнее. Укажите язык программирования после тройных обратных кавычек, чтобы включить подсветку. Это полезно для примеров скриптов, конфигураций или фрагментов кода.
Ссылки и изображения делают документы интерактивными. Добавляйте ссылки на внешние ресурсы или внутренние разделы с помощью якорей. Изображения можно вставлять через URL или загружать как вложения.
Для совместной работы артефакты можно экспортировать в формате MD или PDF. Это позволяет делиться документами с коллегами, которые не используют Claude. Также можно копировать содержимое артефакта в буфер обмена для вставки в другие приложения.
Markdown-артефакты поддерживают математические выражения через LaTeX. Это удобно для научных отчётов или технических расчётов. Формулы отображаются чётко и могут быть скопированы вместе с текстом.
Используйте артефакты для создания регламентов, инструкций, шаблонов писем, технических заданий и любой другой структурированной информации.
Редактирование артефакта: итерации через чат
Работа с артефактом не заканчивается на первой генерации. Настоящая сила инструмента - в доработке через диалог. Панель предпросмотра реагирует на изменения в реальном времени, что превращает чат в среду разработки.
Для изменения дизайна используйте прямые указания. Попросите сменить цветовую гамму на тёмную тему, добавить тени к карточкам или изменить шрифт заголовков. Claude понимает контекст: запрос «сделай стиль более корпоративным» автоматически скорректирует палитру и отступы без необходимости писать CSS вручную.
Структурные правки выполняются так же просто. Если таблица слишком широкая, попросите разбить её на две части или добавить горизонтальную прокрутку. Для многостраничных сайтов команда «добавь раздел с отзывами» создаст новый блок и интегрирует его в существующую вёрстку, сохранив единый стиль.
Логика и интерактивность обновляются через текстовые описания. Чтобы превратить статичный список в фильтруемый каталог, напишите: «сделай так, чтобы при клике на категории оставались только нужные товары». Claude добавит необходимый JavaScript и обновит HTML, не нарушая работу остальных элементов.
При работе с кодом можно использовать конкретные технические запросы. Укажите фреймворк, например Tailwind, или попросите оптимизировать структуру HTML. Если результат выглядит некорректно, опишите проблему: «кнопка перекрывает текст» или «на мобильном версия плывёт». AI проанализирует разметку и предложит исправление.
Метод итераций позволяет быстро приходить к нужному результату. Сначала получите базовую версию, затем уточняйте детали шаг за шагом. Каждый запрос сохраняется в истории, поэтому можно вернуться к предыдущей версии, если новое направление не подошло.
Экспорт и использование артефактов за пределами Claude
Артефакты существуют внутри изолированной среды, но их содержимое легко переносится на локальный компьютер или веб-сервер. Самый простой способ получить код - нажать кнопку копирования в углу окна предпросмотра. Это действие помещает весь код в буфер обмена. Для HTML-документов достаточно создать на компьютере файл с расширением .html, вставить туда содержимое и открыть его в любом браузере. Сайт запустится локально, сохраняя стили и интерактивность.
Если проект состоит из нескольких файлов (например, стили CSS или скрипты JS), удобнее использовать функцию скачивания. Кнопка экспорта позволяет сохранить текущий код в виде файла на диск. При работе со сложными инструментами лучше скачивать каждый компонент отдельно, сохраняя правильную структуру папок. Убедитесь, что пути подключения файлов в HTML соответствуют их реальному расположению на вашем компьютере.
Для публикации в интернете файлы нужно загрузить на хостинг. Статические сайты на HTML и CSS идеально подходят для GitHub Pages, Netlify или Vercel. Процесс прост: загрузите файлы в репозиторий или через интерфейс панели хостинга. Сервис автоматически определит настройки и выдаст готовую ссылку. Динамические элементы на JavaScript будут работать, если они не требуют серверной части.
При создании таблиц или данных в формате CSV Claude формирует структурированный текст. Скопируйте содержимое артефакта и вставьте его в Excel или Google Таблицы. Программы распознают разделители и автоматически строят колонки. Для редактирования кода используйте VS Code или Sublime Text. Откройте скачанный файл в редакторе, внесите правки и сохраните изменения. Обновлённый файл можно снова загрузить в Claude для доработки или сразу запустить в браузере.
Артефакты с диаграммами часто используют в презентациях. Если код генерирует SVG-графику, её можно сохранить как векторное изображение. Откройте HTML-файл в браузере, нажмите правой кнопкой мыши на диаграмму и выберите «Сохранить как». Это позволит вставить качественную графику в PowerPoint или Figma без потери чёткости.
Ограничения Artifacts: что нельзя сделать
Artifacts не работают с внешними серверами. Код внутри артефакта выполняется исключительно в браузере пользователя. Это означает полную невозможность прямого подключения к базам данных, таким как PostgreSQL или MySQL. Нельзя отправлять запросы к сторонним API, требующим секретных ключей на серверной стороне, так как эти ключи станут видны в исходном коде. Любая логика, связанная с безопасной обработкой платежей или авторизацией через OAuth, требует бэкенда, а здесь его нет.
Артефакты изолированы от файловой системы. Скрипт не может прочитать файл с жёсткого диска пользователя или сохранить данные в папку на компьютере. Доступно только использование LocalStorage или IndexedDB, но это ограничено объёмом и конкретным браузером. Если задача требует генерации PDF-файла и его автоматического сохранения на рабочий стол, это придётся делать через ручные действия пользователя, так как автоматический доступ к файловой системе закрыт.
Нет поддержки долгоживущих процессов. Artifacts предназначены для статического контента или реактивных интерфейсов, которые отвечают на действия пользователя. Нельзя создать бота, который будет мониторить изменения на сайте каждые пять минут. Таймеры и интервалы работают только пока открыта вкладка с артефактом. Закрытие страницы останавливает любой процесс. Фоновые задачи или веб-хуки здесь невозможны.
Ограничены вычислительные ресурсы. Сложные 3D-сцены с физикой или обработка тяжёлых видеофайлов могут привести к зависанию вкладки. Браузер накладывает лимиты на память и процессорное время. Если алгоритм требует интенсивных вычислений, например, рендеринг видео в реальном времени, Artifacts не справятся. Это инструмент для интерфейсов, а не для тяжёлой вычислительной нагрузки.
Невозможна полноценная работа с электронной почтой. Артефакт не может отправить письмо напрямую, используя SMTP. Единственный выход - использование протокола mailto, который открывает почтовый клиент пользователя, но это требует вмешательства человека. Автоматическая рассылка уведомлений недоступна.
Отсутствие поддержки серверных языков. Внутри артефакта не запустить Python, PHP или Java код. Только технологии, работающие в браузере: HTML, CSS и JavaScript. Даже если Claude напишет код на Python для визуализации, он будет либо преобразован в JavaScript, либо запущен через PyScript, что снижает производительность и добавляет ограничения.
Артефакты не имеют собственного домена. Они живут внутри интерфейса Claude. Это значит невозможность настройки SSL-сертификатов или кастомных DNS-записей. Проект нельзя опубликовать в интернете по прямому адресу без предварительного экспорта кода и размещения на хостинге.
Частые вопросы
Почему у меня нет вкладки Artifacts?
Вкладка Artifacts доступна в интерфейсе Claude 3.5 Sonnet и появляется автоматически при создании контента. Убедитесь, что используете актуальную версию модели и поддерживаемый браузер. Если функция не отображается, проверьте настройки аккаунта или обратитесь в поддержку.
Можно ли добавить внешние CSS-библиотеки в HTML-артефакт?
Да, можно подключать внешние CSS-библиотеки через тег link внутри head. Для этого используйте CDN-ссылки на нужные ресурсы, например Bootstrap или Tailwind. Убедитесь, что библиотека поддерживает работу в изолированной среде артефакта.
Как сохранить созданный артефакт на компьютер?
Нажмите кнопку скачивания в правом верхнем углу окна артефакта. Выберите нужный формат файла, например HTML для сайтов или CSV для таблиц. Файл автоматически сохранится в папку загрузок вашего компьютера.
Артефакты работают без подключения к интернету?
Артефакты выполняются локально в браузере и не требуют постоянного интернет-соединения после генерации. Однако для создания и редактирования контента доступ к сети необходим. Все данные обрабатываются на стороне клиента, что обеспечивает автономность готовых элементов.
Что делать дальше
Попробуйте прямо сейчас: откройте Claude и попросите сделать калькулятор для вашего бизнеса. Например: «Сделай калькулятор стоимости ремонта с выбором типа работ и площади». Через 5 минут у вас будет работающий инструмент. Сохраните его как HTML и используйте на сайте или отправляйте клиентам.
Если хотите больше конкретных схем для бизнеса без программиста - подпишитесь на канал. Там разбираем реальные инструменты и кейсы, которые можно внедрить за вечер.
AI Компас (t.me/kosmoslab_ai) - канал для предпринимателей в РФ и СНГ, которые применяют AI в своём бизнесе без программиста. Разбираем инструменты и схемы - без курсов и теории.