Как пользоваться Claude Artifacts: пошаговый туториал
Полный разбор 12-минутного туториала по Claude Artifacts от Kevin Stratvert: соберите интерактивный дашборд из CSV-файла, доработайте его промптами в чате, поправьте детали инструментом аннотаций, а затем добавьте встроенный ИИ, сохранение данных, коннекторы и Live Artifacts. 14 шагов — с реальным скриншотом в каждом.
Коротко о главном
- Артефакты — это интерактивные мини-приложения (дашборды, инструменты, игры), которые Claude собирает по описанию обычным языком. Чтобы начать, достаточно бесплатного аккаунта Claude.
- Загрузите CSV — и примерно через минуту Claude выдаст рабочий дашборд с графиками, показывающими точные цифры при наведении; каждое дальнейшее изменение — это просто ещё один промпт в чате, без кода.
- Инструмент аннотаций правит один конкретный элемент; ссылка «доступ по ссылке» создаётся в один клик, а закреплённые артефакты всегда остаются вверху библиотеки.
- Артефакты могут обращаться к самому Claude, запоминать данные между сессиями и выходить на Slack или Trello через MCP-коннекторы — а Live Artifacts в десктопном приложении обновляются сами.
How to Use Claude Artifacts (Full Tutorial)
Канал: Kevin Stratvert · 12:42
О скриншотах
Все скриншоты в этом гайде взяты из видео выше и остаются собственностью Kevin Stratvert. Каждый шаг ссылается на точный момент в видео. Пошаговый текст, подписи и FAQ написаны нами самостоятельно.
От CSV до дашборда (шаги 1–10)
- 1
Откройте библиотеку артефактов
Войдите на claude.ai — достаточно бесплатного аккаунта — и нажмите Artifacts в левой панели. Вкладки All и Yours показывают всё, что вы создали, в Shared with you собираются артефакты, которыми с вами поделились, а строка поиска фильтрует всю библиотеку.
Хаб Artifacts: вкладки All, Yours и Shared with you, в углу — New artifact.Смотреть с 0:50 - 2
Нажмите New artifact
Нажмите кнопку New artifact в правом верхнем углу. Claude открывает новую задачу и вместо того чтобы строить вслепую, сначала задаёт вам вопросы. Он называет артефакт «web page» — это просто фундамент, на котором он строит, что бы вы в итоге ни делали.
Один клик запускает управляемую задачу — сначала вопросы, потом код.Смотреть с 1:02 - 3
Ответьте на стартовые вопросы
Для этого дашборда мы выбираем Dashboard, стиль Bold & colorful и фокус Sales & revenue trends. Ваш список вопросов может немного отличаться — это нормально. Отвечайте на то, что актуально, или пропустите вопросы и опишите всё сами одним сообщением.
Тип, стиль, фокус: эти ответы задают направление первой сборки Claude.Смотреть с 1:40 - 4
Прикрепите свой CSV
Когда Claude спросит, откуда брать данные, ответьте, что загрузите свои. Нажмите значок плюса в поле сообщения, выберите Add files or photos (работает и Ctrl U / Cmd U) и укажите свой CSV. Claude изучает колонки и решает, как их визуализировать, ещё до сборки.
Значок плюса → Add files or photos → выберите CSV; Claude изучает файл, прежде чем писать интерфейс.Смотреть с 2:19 - 5
Опубликуйте первую версию
Через минуту-другую Claude публикует артефакт. Дашборд появляется справа — ключевые метрики сверху, графики под ними — а в чате Claude подводит итог: 1,207 заказов по 5 вкусам и 4 регионам, прямо из CSV. Нажмите значок развернуть, чтобы рассмотреть подробнее.
«The Bake Sheet» — KPI-карточки и графики, созданные из одного загруженного CSV.Смотреть с 2:42 - 6
Наводите курсор на графики, чтобы увидеть точные цифры
Это настоящее приложение, а не картинка. Проведите курсором вдоль линии тренда — и подсказка покажет точную выручку по каждому вкусу за тот месяц; столбчатые графики и таблицы реагируют так же. Никто не писал код графиков — Claude собрал всё из файла.
Подсказка за июнь раскладывает выручку по вкусам — интерактив с самой первой публикации.Смотреть с 2:58 - 7
Дорабатывайте в чате, а не кодом
Что-то не нравится? Просто попросите. Хватит фразы «Add a dark mode toggle to the dashboard» — Claude переопубликует обновлённую версию с переключателем солнце/луна в шапке, который меняет всю тему и запоминает выбор. Более крупные переделки заказывайте так же, в том же чате.
Один промпт спустя: переключатель с иконкой луны в шапке и полноценная тёмная тема.Смотреть с 4:02 - 8
Поправьте одну деталь инструментом аннотаций
Чтобы изменить один элемент, откройте инструмент аннотаций в правом верхнем углу артефакта и подсветите точное место — здесь это заголовок «Kevin's Cookie Company». Откроется поле комментария: опишите, что поменять, затем выберите Send to Claude, чтобы применить сразу, или Add comment, чтобы оставить заметку, ничего не трогая.
Подсветите, опишите правку и примените — или оставьте её как комментарий для ревью.Смотреть с 4:50 - 9
Делитесь с любым, у кого есть ссылка
Нажмите Share, поставьте General access на Anyone with the link и выберите, какую версию опубликовать — Claude хранит каждую ревизию, так что можно намеренно поделиться более старым снимком. Copy link выдаёт URL, по которому дашборд работает и остаётся интерактивным в любом браузере.
General access → Anyone with the link; выбор версии решает, что увидят посетители.Смотреть с 5:10 - 10
Закрепите — и храните чат для правок
Вернувшись в библиотеку, наведите курсор на артефакт, откройте меню из трёх точек и выберите Pin — закреплённые элементы собираются в секции Pinned для доступа в один клик. Чтобы позже что-то изменить, заново откройте исходный чат артефакта через Chat and tasks: эта переписка навсегда остаётся его редакцией.
Меню из трёх точек закрепляет карточку; исходный чат остаётся открытым для будущих правок.Смотреть с 5:42
Новый уровень: встроенный ИИ, сохранение данных, коннекторы, Live Artifacts (шаги 11–14)
- 11
Соберите инструмент, который использует самого Claude
Артефакты могут обращаться к Claude напрямую. Создайте новый артефакт, выберите Something else и опишите инструмент — здесь: сотрудники вводят ингредиенты печенья, а Claude генерирует пять идей названия. Без API-ключа и без бэкенда; при первом использовании артефакт просто спрашивает у посетителя разрешение на доступ к Claude.
The Batch Namer: вводите ингредиенты, жмёте Generate 5 names — и получаете варианты от ИИ.Смотреть с 7:02 - 12
Научите его запоминать данные
Попросите Claude добавить избранное — и он сначала уточнит один вопрос дизайна: сохранённое должно быть приватным для этого браузера или общим для всех, кто откроет артефакт? Здесь мы выбираем общее. Сохранённые идеи остаются — закройте вкладку, и завтра помеченные звёздочкой названия будут на месте. Так делают трекеры, списки и лёгкие проектные инструменты.
Приватное или общее сохранение — дальше каждая идея получает звёздочку, которая не исчезает между сессиями.Смотреть с 8:20 - 13
Подключите Slack и не только
Через коннекторы MCP (Model Context Protocol) артефакт может действовать за пределами Claude. Попросите кнопку «поделиться в Slack», одобрьте подключение, выберите канал — и у каждой сохранённой идеи появится кнопка, отправляющая её в команду. Приложения без нативного коннектора по-прежнему доступны через Zapier MCP — тысячи дополнительных действий.
Slack подключён: сохранённая идея теперь сама постится в #new-cookie-ideation.Смотреть с 9:40 - 14
Держите данные свежими с Live Artifacts
В десктопном приложении Claude Live Artifacts подтягивают текущие данные из подключённых приложений и локальных файлов вместо замороженного снимка. Этот торговый дашборд собирается сам из POS-отчётов и таблиц Google Drive; нажмите Reload в его шапке — и он перерисуется с последними цифрами. Соберите один раз — и всегда открывайте актуальный вид.
Кнопка Reload в десктопном приложении заново подтягивает связанные данные по требованию.Смотреть с 12:04