Премиум-дашборд через Claude за 30 минут: 7 промптов

Дашборд для своих цифр (продажи, охваты, заявки, расходы) Claude собирает за полчаса, если давать задачи по одной. Ниже семь промптов в порядке запуска и два способа выложить готовую панель по ссылке.

Внутри: что подготовить, 7 промптов целиком, как подключить свои данные из таблицы, публикация через артефакт Claude или GitHub Pages.

Подготовка, 5 минут

Открой claude.ai, новый чат. Дашборд появится справа как артефакт, его видно и можно кликать сразу.
Выгрузи свои данные в CSV из Google Таблиц или Excel: «Файл», «Скачать», «CSV». Столбцы с понятными названиями: дата, сумма, источник.
Прикрепи CSV к первому сообщению.

7 промптов по порядку

1. Спланируй сборку

Я делаю дашборд для [что показывает: продажи, охваты, заявки]. Данные в прикреплённом CSV. Изучи столбцы и предложи структуру: какие 4 ключевые цифры сверху, какие графики ниже, какие фильтры (период, источник). Не пиши код, пока я не подтвержу план.

2. Живые графики

План утверждён. Собери дашборд одним HTML-файлом на React с Recharts. Графики с плавной анимацией при загрузке и подсказкой при наведении. Подписи читаются, цвета из одной палитры в 4-5 оттенков, без перегруза. Данные из CSV встрои в код.

3. Тёмная тема

Добавь тёмную тему с переключателем в правом верхнем углу. Контраст текста не ниже 4.5:1, цвета графиков тоже меняются под тему. Выбор темы запоминается.

4. Боковое меню

Добавь слева боковое меню с разделами [перечисли]. Оно плавно сворачивается в иконки по кнопке. На экране уже 768 px меню уходит в кнопку-гамбургер.

5. Пустые состояния

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

6. Скелетоны загрузки

Пока данные грузятся, показывай серые заготовки в форме будущих карточек и графиков с мягкой пульсацией. Задержка загрузки 800 мс для проверки.

7. Сведи всё вместе

Проверь весь дашборд как дизайнер: отступы по сетке 8 px, единый шрифт и размеры, выравнивание, цвета, поведение на ширине 375, 768 и 1440 px. Дай список правок по пунктам и внеси их все одним финальным файлом.

Как выложить по ссылке без оплаты хостинга

Артефакт Claude

Справа над дашбордом кнопка «Publish». Получаешь публичную ссылку, её можно отправить команде. Данные, встроенные в код, увидит каждый, у кого есть ссылка.

GitHub Pages

Попроси Claude: «Дай финальный дашборд одним файлом index.html». Создай репозиторий на github.com, загрузи файл, в Settings, Pages выбери ветку main. Через минуту дашборд доступен по адресу вида имя.github.io/репозиторий.

Не публикуй по открытой ссылке персональные данные клиентов. Для внутренних цифр держи ссылку только у команды.

С чего начать в соцсетях

Как обновлять цифры

Раз в неделю выгружаешь свежий CSV и пишешь в тот же чат: «Замени данные на прикреплённые, структуру не трогай». Через минуту дашборд обновлён.

Следующий шаг

Хочешь так же, но под свой блог и продукт?

Я собрал систему, по которой обычный человек запускает блог с нуля и набирает аудиторию без съёмок, монтажа и команды. Внутри разбор, с которого стартовал сам.

Открыть разбор: с чего начать→