Первый пост серии был про Code-to-Chart – код вместо картинки для точных графиков. Второй – про SVG для редактируемых схем и таймлайнов. Третий приём закрывает случай, который ни код, ни SVG не решают: интерактивность.
Ситуация. Руководитель проекта готовит статус-встречу. Нужна сводка: 12 задач, у каждой – ответственный, статус, дедлайн, процент готовности. Просит ИИ нарисовать дашборд. Получает картинку: красиво, но данные нечитаемы при увеличении, ничего нельзя отсортировать, а одну цифру ИИ перепутал.
HTML-артефакт – это когда ИИ генерирует рабочую веб-страницу вместо изображения. Claude показывает её прямо в окне чата (Artifacts), ChatGPT – в Canvas. Страница интерактивная: столбцы таблицы можно сортировать кликом, на графики наводить курсор для точных значений, фильтры переключать.
Где это работает лучше картинки и лучше кода:
– дашборд проекта с фильтрацией по статусу или ответственному
– сравнительная таблица, которую нужно сортировать по разным колонкам
– диаграмма Ганта, где при наведении видны точные даты
– любой визуал, где зритель захочет «покрутить» данные
Промпт, который можно вставить прямо сейчас:
Создай интерактивный HTML-дашборд статуса проекта. Данные:
| Задача | Ответственный | Статус | Дедлайн | Готовность |
|---|---|---|---|---|
| Дизайн интерфейса | Алексей | Готово | 15 мая | 100% |
| Бэкенд API | Мария | В работе | 30 мая | 65% |
| Мобильное приложение | Дмитрий | В работе | 10 июня | 40% |
| Нагрузочное тестирование | Ольга | Не начато | 20 июня | 0% |
| Документация | Алексей | В работе | 25 июня | 20% |
Требования:
– Таблица с сортировкой по клику на заголовок столбца
– Цветовая индикация статуса (зелёный/жёлтый/серый)
– Полоса прогресса в колонке «Готовность»
– Фильтр по статусу (все / готово / в работе / не начато)
– Сводка вверху: общий прогресс, количество задач по статусам
– Чистый деловой стиль, без внешних библиотек
– Один HTML-файл, весь CSS и JS внутри
Claude и ChatGPT создадут рабочую страницу за один запрос. Результат можно открыть в браузере, показать на встрече через демонстрацию экрана или сохранить как HTML-файл и переслать коллегам – откроется без установки чего-либо.
Проверка та же, что и с Code-to-Chart: откройте код, найдите массив данных и сверьте числа с вашими. В HTML это обычно массив объектов в начале скрипта – найти легко.
Ограничение: HTML-артефакт живёт в браузере. Вставить его в PowerPoint или PDF нельзя – для этого остаются SVG и Code-to-Chart. Три приёма закрывают три ситуации: точные графики для отчётов – код, редактируемые схемы для презентаций – SVG, интерактивные сводки для встреч и рассылки коллегам – HTML.
