Claude Artifacts как создать небольшой инструмент и проверить его работу

Claude Artifacts помогает превратить запрос в отдельный результат: документ, макет или небольшой интерактивный инструмент. На примере конструктора UTM-меток разберём, как поставить задачу, подготовить контрольные случаи и заметить ошибки до того, как готовой ссылкой воспользуются коллеги.

Что такое Claude Artifacts и для каких задач он подходит

В обычном разговоре с нейросетью вы получаете ответы. У артефакта есть собственное рабочее представление рядом с перепиской: к нему можно вернуться и продолжить правки. На странице продукта Anthropic показывает документы, презентации, дизайн и панели с данными. Для небольшой повторяющейся задачи полезен и интерактивный результат: пользователь меняет значения в полях и сразу видит, что получилось.

Например, маркетологу каждый день нужны ссылки с метками рекламной кампании. Можно всякий раз просить чат собрать адрес. Можно заранее описать правила и получить форму, которая будет выполнять одну и ту же операцию. Второй вариант удобнее, если правила стабильны, а исходные значения постоянно меняются.

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

Здесь полезно различать три ситуации. Для разового объяснения достаточно чата. Для небольшой формы с понятными правилами подойдёт артефакт. Когда нужен полноценный сервис с собственной инфраструктурой, командной разработкой и ответственностью за эксплуатацию, одного удачного диалога уже мало. Прототип помогает уточнить требования, но не заменяет проверку безопасности и дальнейшую поддержку.

Почему старые инструкции по Artifacts могут не совпасть с интерфейсом

В актуальной справке Claude отдельно выделены Legacy Artifacts: артефакты, созданные в чате до 16 сентября 2026 года. Они продолжают работать, их можно распространять, однако создавать новые legacy-артефакты нельзя.

Поэтому инструкция с прежней кнопкой публикации или просмотра кода может относиться к старому результату. На 10 октября 2026 года новые артефакты и legacy нужно рассматривать раздельно. Особенно это важно для экспорта, хранения данных и передачи ссылки другим людям.

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

Что нужно для начала и можно ли пользоваться бесплатно

Создание артефактов в чате предусмотрено на Free, Pro, Max, Team и Enterprise. Требуется включённая возможность Cloud code execution and file creation. Подключение приложений и постоянное хранение данных доступны начиная с Pro. Эти условия приведены в таблице возможностей Artifacts.

Для начала можно попросить нужный артефакт в разговоре. Доступные варианты оформления также представлены во вкладке Artifacts. Не покупайте подписку только ради предположения, что она исправит ошибочную формулу или неработающую кнопку: сначала отделите ограничение тарифа от дефекта самого инструмента. Подробности выбора плана разобраны в статье о подписке Claude и лимитах.

Есть и региональное ограничение. Россия отсутствует в официальном списке поддерживаемых стран и регионов Anthropic. Наличие браузера или оплаченного тарифа само по себе не подтверждает разрешённый доступ. Этот материал не предполагает покупку чужого аккаунта или использование сторонних номеров для регистрации.

Пример задачи конструктор UTM-меток

UTM-метки — параметры адреса, которыми помечают источник перехода, канал и кампанию. В нашем примере utm_source обозначает источник newsletter, utm_medium — канал email, utm_campaign — кампанию autumn. Мы подготовим задание для формы, которая добавляет эти значения к адресу страницы.

Ниже приведены демонстрационное задание и ожидаемые результаты проверок. Мы не запускали этот пример в Claude: это готовая основа для самостоятельного упражнения, а не отчёт о выполненном тесте.

Выберем узкие границы. В форме четыре обязательных поля: адрес страницы, источник, канал и кампания. Инструмент не открывает сайт, не отправляет данные наружу, не сохраняет историю и не подключается к аналитике. Его задача заканчивается на формировании строки, которую пользователь может проверить и скопировать.

Такая постановка полезна сразу по двум причинам. Результат легко сверить вручную, а отсутствие подключений позволяет начать с вымышленных адресов. Для учебного упражнения достаточно example.com. Адреса закрытых документов, ссылки с токенами доступа и данные клиентов не нужны.

Готовый запрос для Claude

Создай интерактивный артефакт — конструктор UTM-меток на русском языке. Он должен собирать ссылку из полей URL, utm_source, utm_medium и utm_campaign. Все четыре поля обязательны. Удаляй пробелы только по краям введённых значений, сохраняй внутренние пробелы и регистр.

Принимай только абсолютные адреса со схемой http или https. Сохраняй существующие параметры, которые не относятся к этим трём UTM-меткам, и сохраняй фрагмент после знака #. Существующие utm_source, utm_medium и utm_campaign заменяй новыми значениями, не создавая дубликатов.

Используй стандартные URL и URLSearchParams для разбора адреса и кодирования значений. Не склеивай URL вручную. Показывай итоговую ссылку и кнопку копирования. Если обязательное поле пустое или адрес недопустим, объясняй ошибку рядом с полем, очищай прежний результат и не позволяй копировать устаревшую ссылку.

Не делай сетевых запросов, не подключай внешние сервисы, не используй аналитику, постоянное хранилище или вызовы ИИ внутри инструмента. Сделай поля с понятными подписями, управление с клавиатуры и удобное отображение на узком экране. Сначала реализуй только перечисленное. После создания кратко перечисли правила обработки входных данных.

Почему в запросе столько условий

Фраза «сделай UTM-конструктор» оставляет модели множество решений. Нужно ли сохранять старые параметры? Что делать с уже существующей меткой? Можно ли принимать адрес без https? Должна ли кнопка копирования работать после появления ошибки? Внешне похожие формы могут отвечать на эти вопросы по-разному.

Требование использовать URLSearchParams делает способ обработки конкретнее. Его метод set заменяет значение параметра и убирает лишние одноимённые значения, как описано в справке MDN. Но упоминание правильного метода в запросе ещё не доказывает, что инструмент использует его правильно. Это и должны показать контрольные случаи.

Имена UTM-полей в задании заданы строчными буквами. Если в реальном процессе встречаются UTM_SOURCE или другие варианты регистра, нужно отдельно решить, как их обрабатывать. Не расширяйте правила молча: добавьте требование и соответствующую проверку.

Пять проверок перед использованием

Проверять стоит не только вид формы. Введите контрольные данные, скопируйте результат и сравните его с ожидаемым. Для каждого случая сохраните вход, фактический ответ и замечание. Не отмечайте проверку успешной по объяснению Claude: важна строка, которую действительно выдаёт инструмент.

1 Базовый адрес без параметров

Входные данные: URL https://example.com/landing, источник newsletter, канал email, кампания autumn.

Ожидаемый адрес:

https://example.com/landing?utm_source=newsletter&utm_medium=email&utm_campaign=autumn

Проверьте, что в адресе один знак вопроса, три нужных параметра и нет потерянных букв. Нажмите копирование и вставьте строку в обычный текстовый редактор: содержимое буфера должно совпадать с показанным результатом. Если скопировалось другое значение, визуально правильная форма всё равно не прошла проверку.

2 Адрес с параметром и якорем

Теперь используйте https://example.com/landing?product=42#prices, сохранив те же три значения UTM.

Ожидается адрес с сохранённым product=42, тремя UTM-метками и фрагментом #prices в конце. Один допустимый вариант:

https://example.com/landing?product=42&utm_source=newsletter&utm_medium=email&utm_campaign=autumn#prices

Порядок параметров может отличаться, если их имена и значения сохранены. Здесь важно другое: метки должны оказаться в части адреса до #prices. Если инструмент просто приписал их после якоря, ссылка может выглядеть правдоподобно, но нужные параметры не попадут в query-часть адреса.

3 Старые UTM и дубликаты

Введите https://example.com/?utm_source=old&utm_source=older&product=42. В поле источника укажите newsletter, остальные значения оставьте email и autumn.

В результате должен остаться ровно один utm_source со значением newsletter. Значения old и older должны исчезнуть, а product=42 — сохраниться. Дополнительно повторите случай со старыми utm_medium и utm_campaign. Это проверяет, что правило реализовано для всех трёх полей, а не только для первого.

Ошибка с дубликатами особенно неприятна: две системы могут по-разному трактовать повторяющийся параметр. Проще сразу получить однозначную ссылку, чем позже выяснять, почему отчёты расходятся.

4 Кириллица и пробелы

В поле кампании введите «осень 2026», без кавычек. В адресе появится закодированная строка. Не требуйте, чтобы кириллица выглядела так же, как в поле: важно, чтобы после декодирования получилось исходное значение.

URLSearchParams при сериализации кодирует специальные символы, а пробел представляет знаком +. Это описано в MDN для toString. Запись пробела как %20 может быть эквивалентной по смыслу, поэтому проверяйте восстановленное значение, а не только внешний вид строки.

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

5 Пустые поля и недопустимые адреса

Сначала получите правильный результат, затем очистите поле кампании и снова запустите сборку. Должна появиться понятная ошибка. Прежняя ссылка должна исчезнуть, а копирование — стать недоступным. Так вы проверите опасный случай, когда форма показывает предупреждение, но продолжает отдавать старый результат.

Отдельно попробуйте адрес без схемы, например example.com/landing, и строку javascript:alert(1). По выбранным требованиям оба варианта должны быть отклонены. Это тестовые строки: переходить по ним не требуется. Затем верните правильный HTTPS-адрес и убедитесь, что форма снова работает, а сообщение об ошибке исчезло.

После этих пяти групп проверьте интерфейс на узком экране. Поля должны иметь видимые подписи, текст ошибки не должен закрывать кнопку, длинная ссылка — вылезать за край страницы. Пройдите поля клавишей Tab. Эти проверки дополняют логику, но не заменяют её.

Как попросить исправить конкретную ошибку

Сообщение «ничего не работает» почти не помогает локализовать проблему. Гораздо полезнее дать короткую воспроизводимую последовательность. Например, если программа добавила второй utm_source:

При вводе https://example.com/?utm_source=old и источника newsletter результат содержит два utm_source. Ожидается один utm_source=newsletter. Исправь замену существующих UTM-параметров без изменения остальных правил. Сохрани product и фрагмент после #. После правки перечисли, что изменилось.

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

В учебном материале Claude Academy также предлагается дорабатывать артефакт последовательными уточнениями и пробовать неудобные входные данные. Для нашего задания разумно менять одно правило за раз. Добавление истории ссылок, новых полей и красивого оформления одновременно усложнит поиск причины сбоя.

После исправления повторите не только неудачный случай, но и остальные проверки. Замена способа сборки ссылки может убрать дубликаты и случайно сломать якорь. Такой повторный прогон показывает, что новая версия сохранила уже работавшие свойства.

Как сохранить результат и не открыть лишние данные

Экспорт зависит от типа артефакта. На странице Artifacts перечислены распространённые форматы, включая HTML, PDF и форматы презентаций. Возможность скачать конкретный мини-инструмент и его поведение за пределами Claude нужно проверить отдельно. Наличие файла не гарантирует, что он будет работать без платформенных функций.

Не смешивайте сохранение себе и предоставление доступа другим. Согласно справке о совместном доступе, новые артефакты изначально приватны. Доступ по ссылке предусмотрен на платных планах; для открытия нового общего артефакта нужен аккаунт Claude. Исключение — опубликованные legacy-артефакты из чата. Поэтому обещание «любому человеку без регистрации» нельзя переносить на новый инструмент.

Для учебного UTM-конструктора публикация вообще не нужна. Сначала проверьте логику на example.com. Перед передачей коллегам пересмотрите содержимое артефакта и настройки доступа. Если добавлены приложения или сохранение данных, выясните, что именно они читают, куда записывают результат и какие сведения видны другим пользователям.

Даже ссылка может содержать секрет: токен входа, идентификатор закрытого заказа или персональные данные в параметрах. Не используйте такие адреса для упражнения. Удаление истории внутри формы тоже не доказывает, что данные исчезли из всех связанных систем.

Когда инструменту можно доверить рабочую задачу

Для начала достаточно небольшой операции с понятным ожидаемым результатом. UTM-конструктор подходит для обучения, потому что каждое правило можно проверить отдельно: сохранность адреса, замена меток, обработка пустых полей и копирование.

Считайте первую версию черновиком. Готовность определяется тем, что контрольные случаи пройдены, ошибки объясняются понятно, а после точечной правки прежние сценарии продолжают работать. Сохраните вместе с инструментом исходное задание и список проверок: они пригодятся при следующем изменении.

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