Первый пост серии был про 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.

В этом посте были ссылки, но мы их удалили по правилам Сетки