М3: Artifacts — мини-приложения прямо в чате

Уровень: Free Длительность: ~15 минут Что нужно: Бесплатный аккаунт claude.ai

Что ты получишь

• Создашь мини-приложение (калькулятор, лендинг или дашборд) за 5-10 минут без кода.
• Поделишься им с клиентом по ссылке Claude или выложишь на бесплатный хостинг.
• Узнаешь 6 категорий Artifacts и когда использовать каждую во фрилансе.

К концу модуля у тебя будет реальный опубликованный Artifact — готов для предложения клиенту.

Что такое Artifact

Artifact — самодостаточный блок контента, который Claude генерирует в отдельной панели рядом с чатом: компонент React, SVG, HTML-страница, код, Markdown-документ или CSV. С мая 2025 можно опубликовать нажатием «Publish» — получаешь публичную ссылку claude.ai/share/... без логина.

6 категорий Artifacts

1. React-компоненты — интерактивные мини-приложения с состоянием и кнопками.
2. SVG — векторная графика: иконки, диаграммы, инфографика.
3. HTML — полные статичные страницы: лендинги, страницы благодарности.
4. Code — сниппеты на любом языке.
5. Markdown — длинные документы: договоры, брифы, отчёты.
6. CSV/текст — табличные данные, прайс-листы.

Кейсы для фрилансеров LATAM

• SMM: карусель из 7 слайдов в SVG с размерами для Instagram.
• Дизайн: калькулятор бюджета в реальном времени для клиента.
• Копирайтинг: HTML-страница благодарности после оплаты.
• Маркетинг: React-дашборд с метриками.

Шаг за шагом: создать первый Artifact

1. Попроси Claude создать Artifact

«Создай Artifact React с калькулятором бюджета для SMM-услуг. Входы: часы в месяц и ставка за час. Выход: итог в месяц и год с визуальным разбивкой.»

2. Редактировать Artifact

В боковой панели видишь код и превью. Проси изменения в чате:

«Смени основной цвет на #D97148. Добавь поле для скидки в процентах.»

3. Опубликовать Artifact

Кнопка «Publish» в верхнем углу панели. Получаешь ссылку claude.ai/share/....

Мини-задание (15 минут)

1. Попроси Claude сделать Artifact для твоего кейса.
2. Внеси 2 итерации с конкретными изменениями.
3. Опубликуй и поделись ссылкой.

Текущие ограничения

• Free: Artifacts и Publish доступны.
• Размер: очень сложные компоненты (>500 строк) могут обрезаться.
• Внешние API: React Artifacts не могут делать fetch к внешним API из браузера (CORS).