M3: Artifacts — міні-застосунки прямо в чаті

Рівень: Free Тривалість: ~15 хвилин Потрібно: Безкоштовний акаунт на claude.ai (з першого модуля)

Що ти зробиш

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

Наприкінці ти матимеш реальний опублікований Artifact, готовий для пропозиції клієнту.

Що таке Artifact

Artifact — це будь-який самодостатній блок контенту, який Claude генерує і який може існувати поза чатом: інтерактивний React-компонент, SVG, HTML-документ, блок коду, таблиця в CSV або довгий текст на кшталт договору.

Головне не те, що Claude їх генерує — а те, що він генерує їх у окремій боковій панелі, з попереднім переглядом у реальному часі. А з травня 2025 року можна публікувати їх одним кліком на claude.ai/share/... (публічне посилання, без логіну).

6 категорій Artifacts

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

Кейси для українських фрилансерів

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

Покроково: створити перший Artifact

1. Попроси Claude створити Artifact

Claude автоматично визначає, коли результат має бути Artifact. Але можна попросити явно:

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

2. Редагувати Artifact

У боковій панелі ти бачиш код і прев'ю. Проси зміни в чаті:

«Зміни основний колір на #D97148. Додай поле для знижки у відсотках.»

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

Кнопка «Publish» у верхньому куті панелі. Claude генерує посилання claude.ai/share/..., яке будь-хто може відкрити без логіну.

Міні-вправа (15 хвилин)

1. Попроси Claude зробити Artifact для твого кейсу (калькулятор, міні-лендінг, інтерактивний FAQ).
2. Зроби 2 ітерації з конкретними змінами.
3. Опублікуй кнопкою Publish.
4. Поділись посиланням із кимось із команди або вкинь у тестовий DM.

Поточні обмеження

• Free: Artifacts доступні, Publish доступний.
• Розмір: дуже складні компоненти (>500 рядків) можуть обрізатись.
• Зовнішні API: React Artifacts не можуть викликати зовнішні API з браузера (CORS). Щоб підключити реальні дані, fetch має йти із сервера.