Claude Code Artifacts: интерактивная доска решений для продакта
Создай из заметок интерактивный разбор продуктовых гипотез: готовый промпт, фильтры, проверка чисел и доступ по ссылке.
Перед встречей у продакта бывает список идей, который трудно обсуждать в чате: непонятно, какие варианты уже выбраны, где нужны данные и что команда отложила. Соберём в Claude Code интерактивную доску из трёх учебных гипотез. Результат — страница с фильтром и основаниями решений, а не ещё один длинный ответ.
1. Проверь доступ к Artifacts
Открой обычную интерактивную сессию Claude Code. Для публикации Artifacts требуется вход через аккаунт Claude командой /login и подходящий план: Pro, Max, Team или Enterprise. Вход только по API-ключу не подходит. В организации функция также зависит от политики администратора. Если опубликованная страница недоступна, проверь официальные требования, а не меняй настройки наугад.
Не обязательно читать или писать код. Задачу можно поставить обычным сообщением в Claude Code Desktop или терминале. Если Claude создал только локальный HTML, это ещё не ссылка на опубликованный Artifact. Сохрани файл, но отдельно выясни, почему публикация недоступна.
2. Передай конечный набор данных
Скопируй эту таблицу в сессию. Все значения учебные. «Упоминания» здесь — количество интервью, где встретилась проблема; выборка маленькая и не измеряет спрос на рынке.
| ID | Гипотеза | Упоминания из 10 интервью | Следующий шаг |
|---|---|---|---|
| H1 | Подсказка при приглашении коллеги | 6 | Проверить |
| H2 | PDF-экспорт отчёта | 3 | Позже |
| H3 | Тёмная тема | 1 | Нужны данные |
Данные специально короткие: каждую карточку можно сопоставить с исходником глазами. Для первого прохода не подключай аналитику или CRM. Иначе будет трудно отличить ошибку интерфейса от ошибки загрузки данных.
Отправь вместе с таблицей:
Создай Artifact «Разбор гипотез онбординга» из учебной таблицы выше.
Нужна одна интерактивная страница для продуктовой встречи.
На каждой карточке покажи ID, гипотезу, число упоминаний и следующий шаг.
Добавь фильтр по следующему шагу и кнопку «Показать всё».
Числа показывай как «6 из 10 интервью», без прогнозов выручки.
Вверху напиши «Учебный пример. Не данные реального продукта».
Не меняй исходные значения, не добавляй приоритеты и сроки.
Не подключай внешние сервисы и не сохраняй действия посетителей.
Опубликуй Artifact с доступом только для меня и верни его ссылку.3. Проверь страницу до улучшения дизайна
Открой полученную ссылку. Пройди четыре проверки, не ориентируясь на заверение модели «всё готово»:
| Действие | Ожидаемый результат |
|---|---|
| Открыть страницу | Три карточки с H1, H2, H3 |
| Выбрать «Проверить» | Видна только H1 с 6 из 10 |
| Нажать «Показать всё» | Вернулись все три карточки |
| Открыть узкое окно | Текст и фильтр доступны без обрезки |
Особенно проверь знаменатель. Шесть упоминаний нельзя превращать в «60% пользователей хотят функцию»: у нас только десять учебных интервью, а не репрезентативная аналитика. Не складывай упоминания в единую «оценку продукта» — в реальном исследовании один человек может назвать несколько проблем.
Если фильтр оставляет пустой экран, отправь точный дефект: «При выборе Проверить исчезают все карточки; должна остаться H1». Это полезнее просьбы «почини приложение». Для более сложных критериев пригодится введение в eval.
4. Внеси одно изменение и сохрани адрес
После проверки попроси: «Обнови этот же Artifact: добавь под H1 вопрос “Что мешает пригласить коллегу?”. Остальные данные и фильтры сохрани». Снова пройди проверки. Не отправляй сразу пять стилистических и смысловых изменений: при ошибке будет трудно понять её причину.
По документации Claude Code обновляет Artifact по тому же URL. В новой сессии передай этот URL явно, чтобы помощник работал с существующей страницей. Сам Artifact — отдельная страница; он не заменяет полноценный сервис с серверной логикой. Наш фильтр предназначен для обсуждения готового набора данных, а не для ведения общей базы решений.
Моя рекомендация: сначала доведи до надёжной работы фильтр и исходные цифры. Цвета карточек и анимации стоит обсуждать после этого — на встрече ошибка в числе опаснее скучного оформления.
5. Открой доступ осознанно
До отправки ссылки посмотри Share в заголовке страницы и выбранную аудиторию. Для рабочего разбора нужны только участники встречи; доступность вариантов зависит от плана и настроек организации. Проверь ссылку от имени предполагаемого читателя. Сам факт, что она открылась у автора, не доказывает доступ коллеги.
Для следующего упражнения можно передать собственные обезличенные гипотезы и повторить тот же контроль. Зафиксируй отдельно, что решила команда: интерактивная доска показывает материал, но не подтверждает решение без обсуждения.
Проверка материала: официальная документация сверена 14 октября 2026 года. Сценарий учебный; действия в аккаунте или на устройстве пользователя не выполнялись.
Освоить рабочие сценарии с ИИ можно на курсе AI Product Club.
Собери своего ИИ-агента и проверь результат
«AI Agents: от vibe coding к AI-команде»: desktop agents, MCP, skills, evals и harness. Отдельные воркшопы — от подключения инструментов до контроля качества.
7 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗