Промпты для создания дашборда: от данных до HTML-прототипа

У вас есть выгрузка продаж, рекламный отчёт или таблица обращений, но непонятно, какие показатели вынести на первый экран и как превратить их в наглядный отчёт. Обычный чат с ИИ может помочь пройти путь от описания данных до HTML-прототипа: предложить метрики и диаграммы, составить макет, а затем вернуть текст готового HTML/CSS/JavaScript-кода.

Такой результат остаётся прототипом: чат не обновляет цифры сам, не проверяет код в вашем браузере и не знает бизнес-смысл колонок без пояснений. Поэтому хорошие промпты для создания дашборда разделяют проектирование, генерацию и ручную проверку.

Какой HTML-дашборд можно получить в обычном чате

Чат способен написать один текстовый HTML-файл с карточками показателей, таблицами, фильтрами и интерактивными графиками. Внутри файла размещаются разметка HTML, оформление CSS и логика JavaScript. Пользователь копирует код из ответа, сохраняет его с расширением .html и открывает в браузере.

Важно выбрать один из двух честных сценариев.

Браузерный File API действительно позволяет странице получить файл после явного выбора пользователя и прочитать его содержимое. Это не подключение к диску или корпоративной системе: страница не может сама находить новые выгрузки. Пример такого механизма есть в документации MDN.

Для графиков можно попросить чистый JavaScript и SVG либо библиотеку Chart.js. В стартовом примере Chart.js библиотека подключается через CDN. Такой вариант короче и удобнее, но без интернета графики не загрузятся. Поэтому в промпте нужно заранее указать: допустима ли внешняя библиотека или файл должен работать полностью автономно.

Живой дашборд, который получает сведения из CRM, базы или API и обновляется по расписанию, — другая задача. Ему нужны доступы, серверная логика, защита и обслуживание. Официальное руководство Government Analysis Function также отделяет прототипирование от поддерживаемого дашборда, который регулярно обновляется и имеет доказанную пользовательскую задачу. Для разового обзора иногда достаточно таблицы или отчёта; дашборд стоит создавать, когда пользователю действительно нужны повторные просмотры и взаимодействие с данными.

Что передать в чат до создания дашборда

Не начинайте с команды «сделай красивый дашборд». Сначала дайте модели контракт данных — короткое объяснение того, что означает каждая строка и колонка.

Передайте:

1. Цель: какое решение должен принять пользователь после просмотра.
2. Аудиторию: руководитель, маркетолог, менеджер отдела или клиент.
3. Тип строки: заказ, обращение, рекламная кампания, день или клиент.
4. Схему: названия колонок, их смысл, тип и единицы измерения.
5. Период и фильтры: даты, регионы, каналы, продукты, статусы.
6. Определения метрик: например, выручка только по оплаченным заказам без возвратов.
7. Контрольные значения: число строк, сумма ключевого показателя и известный итог за один период.
8. Образец: 10–30 обезличенных строк либо небольшую полную таблицу.

Если файл велик, не просите чат «прочитать всё и посчитать». Подготовьте агрегаты отдельно или передайте схему, профиль и образец. Чат хорошо проектирует представление, но итоговые суммы по большой выгрузке должны считать Excel, SQL, Python или другой вычислительный инструмент.

Не отправляйте секреты, персональные данные и коммерчески чувствительные поля без разрешения компании. Для макета часто достаточно заменить клиента на Клиент 01, менеджера на Сотрудник A, а реальные суммы — на согласованный тестовый пример.

Сначала согласуйте метрики и макет, затем просите HTML

Первый результат работы с ИИ — не код, а проект экрана. Модель должна объяснить, какой вопрос решает каждый элемент и из каких колонок он рассчитывается.

Выбор графика зависит от отношения, которое нужно показать: динамики, величины, отклонения, распределения или состава. Руководство ONS по выбору диаграмм рекомендует начинать с простого и знакомого представления, а не пытаться совместить несколько сообщений в одной сложной визуализации.

Согласуйте текстовый макет: первый ряд KPI, второй — динамика и сравнение категорий, третий — таблица деталей. Только после этого просите код. Так исправить неправильную метрику можно до того, как она будет повторена в формулах, карточках и графиках.

Короткие промпты для создания дашборда

1. Проверить структуру исходных данных

Я готовлю HTML-дашборд по таблице продаж. Одна строка — один заказ. Колонки: order_id, order_date, region, channel, status, revenue. Цель — показать руководителю динамику оплаченной выручки и различия по регионам. Сначала не пиши код. Проверь, достаточно ли описана схема; перечисли возможные проблемы типов, пропусков, дублей и неоднозначных определений. Верни вопросы и таблицу «Поле / Смысл / Тип / Проверка / Использование в дашборде».

Ожидаемый результат — список уточнений, а не придуманные показатели. Если модель сразу рассчитала выручку без данных и определения статуса, остановите генерацию.

2. Выбрать метрики и диаграммы

По согласованной схеме предложи не более четырёх KPI и трёх визуальных блоков. Для каждого укажи: управленческий вопрос, формулу словами, нужные поля, фильтры, подходящий тип графика и риск неверной интерпретации. Не добавляй метрики, для которых нет колонок. Сначала верни проект; HTML пока не создавай.

Хороший ответ связывает каждый блок с решением. «Количество заказов» без вопроса, периода и статуса — ещё не спецификация.

3. Составить текстовый макет

Собери макет HTML-дашборда для экрана ноутбука. Первый ряд: три KPI-карточки. Второй: динамика выручки слева и сравнение регионов справа. Третий: таблица заказов, попавших в проверку. Опиши иерархию, размеры блоков, фильтры и поведение на узком экране. Не рисуй изображение и не пиши код. Для каждого блока повтори источник данных и формулу.

Такой макет можно согласовать с будущим пользователем обычным текстом.

4. Задать фирменный стиль через CSS

Подготовь дизайн-спецификацию для HTML-дашборда без логотипов и изображений. Цвет фона #FFF7F2, карточек #FFFFFF, основного текста #242424, акцента #F06F52, положительного статуса #247A52, предупреждения #A85B00. Шрифт: Arial, sans-serif. Карточки со скруглением 16 px, мягкой тенью и внутренним отступом 20 px. Вынеси цвета, радиусы и отступы в CSS-переменные :root. Проверь читаемость текста, состояние фокуса и адаптивность. Верни только спецификацию, код пока не пиши.

CSS-переменные хранят повторяемые значения в одном месте, поэтому цвет или радиус легко изменить во всём файле. Этот подход описан в документации MDN.

5. Создать HTML со встроенными данными

Создай один полный HTML-файл по согласованным данным, метрикам, макету и дизайн-спецификации. Включи весь CSS в <style>, а данные и JavaScript — в <script>. Начни с <!doctype html>. Используй только переданный массив данных; не придумывай строки и итоги. Добавь фильтр периода и региона, три KPI, два графика и таблицу исключений. Для каждого KPI покажи период и единицу измерения. Страница должна адаптироваться к мобильному экрану.

Можно использовать Chart.js через официальный CDN; явно напиши перед кодом, что графики требуют интернета. Верни сначала краткий список реализованных функций, затем один цельный кодовый блок без сокращений и многоточий. Не утверждай, что запускал или протестировал код.

В ответе должен быть полный документ, а не набор разрозненных фрагментов.

6. Создать HTML с ручной загрузкой CSV

Создай один HTML-файл, который предлагает пользователю выбрать локальный CSV через <input type="file">. Ожидаемые колонки: order_id, order_date, region, channel, status, revenue; разделитель — запятая, кодировка UTF-8. После выбора файла проверь наличие колонок, покажи число прочитанных и отклонённых строк, затем перестрой KPI, графики и таблицу ошибок. Не отправляй файл на сервер. Текстовые значения выводи безопасно, без вставки через innerHTML. При ошибке покажи понятное сообщение. Верни полный код одним блоком и список ручных тестов.

Так шаблон можно применять к следующей выгрузке, если схема остаётся прежней. Для сложного CSV с кавычками, переносами строк и разными разделителями лучше подключить проверенный парсер, а не писать упрощённый разбор через split(',').

7. Исправить найденную ошибку

Ниже полный HTML-код и точное наблюдение: после выбора региона «Урал» карточка выручки меняется, а линейный график остаётся прежним. Найди причину, перечисли затронутые функции и верни полный исправленный HTML без сокращений. Не меняй дизайн и формулы метрик. Добавь тест: значение карточки и сумма точек графика после фильтра должны совпадать.

Передавайте полный актуальный код и одно воспроизводимое описание дефекта. Фраза «ничего не работает» редко даёт полезную диагностику.

Большой промпт: от данных до HTML-прототипа

Ты помогаешь создать HTML-дашборд в обычном чате. Ты не подключаешься к внешним системам, не запускаешь код и не утверждаешь, что проверил результат.

Цель дашборда: [решение пользователя].
Аудитория: [роль и уровень подготовки].
Одна строка данных означает: [объект].
Схема: [поле / смысл / тип / единица].
Период: [границы].
Определения метрик: [правила].
Контрольные значения: [число строк и известные итоги].
Пример обезличенных данных: [10–30 строк].
Фильтры: [список].
Фирменный стиль: [HEX-цвета, системный шрифт, размеры, отступы].
Режим данных: [встроенный снимок / ручная загрузка CSV].
Интернет: [допустим Chart.js через CDN / внешние зависимости запрещены].

Работай по этапам и жди моего подтверждения после каждого:
1. Проверь схему, определения, пропуски и контрольные значения.
2. Предложи до четырёх KPI и до трёх графиков; свяжи каждый элемент с вопросом и полями.
3. Составь текстовый макет для широкого и узкого экрана.
4. Сформируй дизайн-спецификацию с CSS-переменными.
5. После согласования верни один полный HTML-файл: CSS внутри <style>, данные и логика внутри <script>.
6. Добавь сообщения об ошибках, дату периода, единицы измерения и таблицу исходных значений для проверки.
7. Дай чек-лист ручного тестирования. Не придумывай данные и не заменяй отсутствующие значения без правила.

Главное в этом промпте — остановки между этапами. В одном длинном ответе модель может закрепить неверную формулу ещё до того, как пользователь её заметит.

Системный промпт помощника по HTML-дашбордам

Ты — помощник по проектированию HTML-дашбордов в обычном чате. Сначала выясняй аудиторию, решение, тип одной строки, схему, период, определения метрик, фильтры, контрольные итоги и ограничения на внешние библиотеки. Не начинай с кода.

Отделяй наблюдение в данных от предположения. Не придумывай колонки, формулы, строки и результаты. Сначала предложи метрики, типы графиков и текстовый макет; после подтверждения подготовь дизайн через CSS-переменные без логотипов и изображений. Затем верни один полный HTML-документ с CSS в <style> и JavaScript в <script>.

Помни границу чат-режима: ты возвращаешь текст, не создаёшь файл на устройстве, не запускаешь браузер, не подключаешься к CRM, базе или API и не подтверждаешь работоспособность. Для больших данных проси схему, профиль, агрегаты и обезличенный образец. Всегда добавляй инструкцию сохранения и ручные тесты: контрольные суммы, фильтры, пустые значения, узкий экран, ошибки загрузки и доступность.

Пример первого сообщения

Нужен локальный HTML-дашборд по обращениям поддержки для руководителя отдела. Одна строка — одно обращение. Колонки: ticket_id, created_at, team, topic, priority, status, resolution_hours. Сначала нужно увидеть объём, долю закрытых обращений и медианное время решения по неделям и командам. Данные обновляются раз в месяц; я буду вручную выбирать новый CSV. Внешний CDN допустим. Цвета: #FFF7F2, #242424 и #F06F52, шрифт Arial. Сначала проверь схему и задай вопросы, код не пиши.

Ожидаемый первый ответ — уточнение периода, определения «закрыто», обработки незавершённых обращений и правила медианы. Если чат сразу выдаёт HTML, попросите вернуться к проектированию.

Как сохранить HTML-код и открыть дашборд

1. Скопируйте код целиком — от <!doctype html> до закрывающего </html>.
2. Вставьте его в Блокнот, Visual Studio Code или другой текстовый редактор.
3. Выберите «Сохранить как», укажите имя dashboard.html и кодировку UTF-8. В Блокноте выберите тип «Все файлы», иначе Windows может добавить окончание .txt.
4. Откройте файл в Chrome, Edge или Firefox.
5. Если виден текст кода, проверьте, что настоящее имя файла не dashboard.html.txt.
6. Откройте инструменты разработчика клавишей F12 и проверьте вкладку Console. Текст ошибки скопируйте в чат вместе с полным кодом.

После каждой правки сохраняйте новую версию, например dashboard-v02.html. Не заменяйте единственный работающий вариант непроверенным ответом модели.

Что проверить вручную после генерации

Проверка начинается с чисел, а не с внешнего вида.

Сначала сверяют исходные цифры и совместную работу фильтров, затем проверяют адаптивность и ошибки загрузки.

1. Сверьте число прочитанных строк, минимальную и максимальную дату.
2. Сравните каждый KPI с контрольным расчётом в исходной таблице.
3. Для одного фильтра вручную сложите значения графика и карточки.
4. Проверьте пустые даты, нули, отрицательные значения, неизвестные категории и дубли ID.
5. Убедитесь, что заголовки называют период, единицу и применённый фильтр.
6. Измените ширину окна: карточки не должны перекрываться, а таблица — обрезать данные без прокрутки.
7. Откройте файл без интернета, если обещан автономный режим.
8. Проверьте понятное сообщение при пустом или неправильном CSV.
9. Не кодируйте статус только цветом: добавьте слово или символ. Для обычного текста WCAG 2.2 задаёт минимальный контраст 4,5:1; подробности собраны в руководстве W3C.
10. Для графика на canvas добавьте aria-label или текстовую таблицу: Chart.js предупреждает, что содержимое canvas само по себе недоступно экранному диктору.

Если HTML загружает CSV, текст из ячеек нельзя без проверки вставлять как разметку. OWASP рекомендует избегать вывода непроверенных данных через innerHTML и создавать элементы с безопасным текстовым содержимым. Это особенно важно для комментариев, названий клиентов и других свободных полей.

Что Agent Roi сможет сделать — и чего не сможет

В Agent Roi можно описать задачу, передать небольшой обезличенный фрагмент, согласовать метрики и получить полный текст HTML/CSS/JavaScript. В том же диалоге удобно уточнять макет, цвета, формулировки, фильтры и исправления.

Обычный чат не создаёт файл на вашем компьютере, не открывает его в браузере и не подтверждает, что код работает. В отличие от агента, он не ведёт самостоятельный многошаговый цикл с запуском и исправлением результата: после каждого этапа действие подтверждает пользователь. Чат не подключается к источникам данных и не превращает прототип в автоматически обновляемый сервис. Большая таблица может не поместиться в доступный контекст, поэтому расчёты нужно выполнять и проверять отдельно.

Начните с одного решения, трёх KPI, двух графиков и десяти тестовых строк. После проверки цифр добавляйте фильтры и ручную загрузку CSV. Если прототип стал регулярным рабочим инструментом, его уже стоит передать разработчику или перенести в поддерживаемую систему.

Связанные материалы

• Промпты для очистки таблиц — как подготовить схему, правила и небольшой образец данных.
• ИИ для анализа данных — когда расчёты следует выполнять через SQL или Python.
• Как писать промпты для ИИ — как задавать контекст, ограничения и формат ответа.

Откройте Agent Roi, передайте обезличенную схему и начните с первого промпта на проверку данных. Зафиксируйте метрики и макет до генерации кода — тогда HTML-прототип будет проще проверить и доработать.

Больше материалов по теме — в разделе «Промпты».