Артефакты: документы, код и схемы прямо в чате

Цели урока

• Объяснить, что такое артефакты и когда Claude их создает
• Делиться артефактами с коллегами и публиковать их для общего доступа
• Устранять распространенные проблемы с артефактами

О чём урок

Артефакты — это автономные интерактивные результаты, которые Claude создает в отдельном окне рядом с вашим разговором. Вместо того чтобы получать длинный блок кода или текста, затерянный в чате, вы видите свой контент отображенным и готовым к использованию — будь то работающий веб-сайт, интерактивная диаграмма или документ, который можно немедленно загрузить.

Claude автоматически создает артефакт, когда контент соответствует определенным критериям:

• Он значителен и самодостаточен, обычно более 15 строк
• Это то, что вы, вероятно, захотите редактировать, дорабатывать или повторно использовать
• Он представляет собой сложный контент, который существует сам по себе, не требуя окружающего разговора
• Это контент, на который вы захотите ссылаться или использовать позже

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

• Документы (например, markdown, обычный текст): Отлично подходят для любого текстового контента, который вы захотите экспортировать или продолжить редактировать — например, заметки о встречах, отчеты, планы проектов, посты в блогах и другой письменный контент.
• Фрагменты кода: Рабочий код на любом языке программирования — Python, JavaScript, C++ и других. Вы можете просматривать код, копировать его или загружать для использования в своих проектах.
• HTML-страницы: Полные веб-страницы с HTML, CSS и JavaScript в одном файле. Идеально подходят для целевых страниц, форм, интерактивных демонстраций или быстрых прототипов.
• SVG-изображения: Масштабируемая векторная графика для логотипов, иконок, иллюстраций и других визуальных элементов. Они отображаются непосредственно в окне артефакта, так что вы можете точно видеть, что получаете.
• Диаграммы Mermaid: Блок-схемы, диаграммы последовательности, диаграммы Ганта, организационные диаграммы и многое другое. Опишите отношения, которые вы хотите визуализировать, и Claude создаст диаграмму, которую вы сможете доработать.
• React-компоненты: Интерактивные элементы UI с реальной функциональностью — калькуляторы, дашборды, игры, визуализации данных. Это не просто макеты; они включают фактическую логику и реагируют на ввод пользователя.

Создание артефакта так же просто, как и обычный разговор. Просто опишите, что вы хотите, и Claude определит, следует ли представить это в виде артефакта.

Например, вы можете сказать:

• "Создай блок-схему…

План урока

1. Что такое артефакты?
2. Распространенные типы артефактов
3. Создание вашего первого артефакта
4. Обмен и публикация артефактов
5. Советы по максимально эффективному использованию артефактов
6. Размышления по уроку
7. Что дальше
8. Обратная связь