Этап 1. Информационная архитектура
~ 60 мин
Берём датасет и описываем контекст: для кого, какие задачи, какие требования к отчёту. Планируем, что и в каком приоритете показывать пользователю.
Agentic Lab · Неделя 4 · Воркшоп
Архитектура, визуализация, Git и деплой
Превращаем данные в интерактивные дашборды, сохраняем код в Git и публикуем проект в интернет.
hands-on workshop
// план воркшопа
Что мы делаем
Четыре этапа — от данных и контекста до публичной ссылки.
Этап 2. Визуализация
~ 60 мин
Шаг за шагом строим интерфейс: выбираем подход к стилю, применяем дизайн-систему, проверяем результат.
Этап 3. Git и GitHub
~ 20–30 мин
Устанавливаем Git, инициализируем репозиторий, создаём ветку, пушим на GitHub.
Этап 4. Деплой на Vercel
~ 20–30 мин
Публикуем проект в интернет, получаем публичную ссылку с HTTPS.
+ перерыв · вопросы по всем темам
// этап 1
Данные → Информационная архитектура
Берём датасет и информацию по теме, описываем контекст и задачи пользователя, планируем что и в каком приоритете показывать в отчёте. Это фундамент — без него дизайн будет угадыванием.
Подготавливаем датасет
Два варианта взять датасет:
- Свой датасет из вашего проекта.
- Тестовый датасет для примера — от Димы.
Поток работы
Сырые данные → обработкаCSV / JSON / SQLAI агентДашбордВизуализацияGitДеплой
Создаём информационную архитектуру
Задачи отчёта
Контекст использования отчёта
Первое, что нужно определить: кто будет пользоваться отчётом, его цели и контекст, в котором отчёт будет жить. Берём это из PRD продукта или описываем здесь. Ниже — примеры того, что стоит описать.
Для кого
Целевая аудитория: роль, уровень экспертизы в теме, что им важно увидеть.
Какие задачи решает
Конкретные вопросы, на которые отвечает отчёт. Принимаемые решения.
Как им будут пользоваться
Паттерны взаимодействия: смотрят сами, показывают другим, делают скриншоты.
В каком контексте
Рабочая ситуация: до встречи, во время презентации, в фоне на экране.
С какого устройства
Desktop, ноутбук, планшет, телефон, проекция, TV. Влияет на компоновку.
Сценарии использования
Выберите один или несколько основных сценариев — под них и будет строиться компоновка дашборда.
5 минут — беглое чтение
Самое ключевое сразу на виду. Заголовки, итоговые числа, главные графики выше сгиба.
Подробное изучение
Фильтры, срезы, таблицы, выгрузка. Возможность копаться в данных.
Комбинированный
И обзор сверху, и детали ниже / по клику. Прогрессивное раскрытие.
>_Промпт — описать контекст агенту
Контекст моего отчёта: — Для кого: [роль, уровень экспертизы] — Какие задачи решает: [список вопросов / решений] — Как им будут пользоваться: [сценарии взаимодействия] — В каком контексте: [рабочая ситуация] — С какого устройства: [desktop / mobile / tablet / TV] — Основной сценарий: [5-минутное чтение / подробное изучение / комбинированный]
Требования к отчёту
Когда контекст ясен — формулируем требования к самому отчёту: какую информацию из данных нужно вывести, какие зависимости и паттерны хотим увидеть, как переключаться между разными графиками и срезами. Это и есть план визуализации.
>_Промпт — план визуализации
Вот мой датасет (описание данных). Сделай интерактивный дашборд, который покажет основные зависимости и паттерны в данных: [перечислите, что важно увидеть]. Я хочу интерактивно переключаться между [графиками / срезами / фильтрами]. Сначала напиши план дашборда — какие графики, какие срезы, какая компоновка — а потом, после моего ОК, начни делать.
Попросите агента сначала написать план, а не сразу делать. Так вы скорректируете подход до начала работы.
Не знаете, какие графики нужны? Советуйтесь с агентом — опишите, что хотите понять из данных, и он сам подберёт подходящие типы визуализации.
Автоматические инсайты
Когда визуализация уже построена — попросите агента добавить блок с автоматическими выводами.
>_Промпт для агента
Добавь на дашборд блок с автоматически генерируемыми инсайтами: самое большое и самое маленькое значение, средние, аномалии, ключевые корреляции. Пусть инсайты обновляются при фильтрации.
Загрузка новых данных★ опционально
Если захочется — сделайте так, чтобы можно было загружать новые данные (CSV, JSON или другой структурированный формат), и дашборд перестраивался автоматически. Структура данных должна совпадать, но сами данные могут обновляться. Это не обязательный шаг — основная история уже работает без него.
>_Промпт для агента
Добавь возможность загрузки новых данных (CSV, JSON) через drag-and-drop или кнопку. При загрузке данные должны обновляться: перестраиваться графики, пересчитываться инсайты, обновляться таблица.
Это примеры. У вас свои данные и свои требования — адаптируйте промпты под свою задачу. Главное — описывайте, что хотите видеть, на естественном языке.
// этап 2
Визуализация
Шаг за шагом строим визуализацию: выбираем подход к стилю, применяем дизайн-систему, проверяем результат. Четыре подхода к стилю по нарастающей сложности — плюс блок валидации в конце.
① Без стилизации (baseline)
Не говорим про дизайн вообще — просто описываем, что нужно сделать, и смотрим, как агент справится «из коробки». Полезно как отправная точка: понимаете, какой у агента «дефолтный вкус» и чего от него ждать.
Можно задать одно-два общих требования, если они важны: «тёмная тема», «минималистично», «современно». Никакой дизайн-системы и референсов не подгружаем.
>_Промпт — без референса
Сделай интерактивный дашборд по моему датасету (см. контекст и требования выше). По дизайну — на твоё усмотрение. Цель: чтобы было читаемо и приятно глазу. Если есть выбор — тёмная тема.
Этот вариант хорош, чтобы быстро получить работающий прототип и понять, нужна ли вам отдельная стилизация. Часто базового результата уже достаточно.
② Frontend skill агента
У Anthropic есть официальный skill frontend-design — инструкция, которая заставляет агента делать интерфейсы с характером, а не «AI-slop»: без шаблонных Inter/Roboto, фиолетовых градиентов и одинаковых карточек. Активируется автоматически, когда речь о frontend.
В Claude Code ставится одной командой:
Установка в Claude Code
/plugin install frontend-design
Тот же самый skill — файл SKILL.md можно использовать для Cursor и Codex.
③ Описание визуального стиля в MD-файле
Описываем желаемый визуальный стиль в отдельном .md файле — палитра, типографика, настроение, общая эстетика — и отдаём агенту. Это не дизайн-система с компонентами, а именно описание стиля, на который агент будет ориентироваться.
SuperDesign — галерея готовых стилей
SuperDesign — набор визуальных стилей, которые можно посмотреть глазами на примерах. Если стиль нравится — оттуда копируется готовый MD-файл с описанием, и по нему агент создаёт похожий дизайн уже для вашего проекта.
Поток: выбрали стиль глазами на app.superdesign.dev → скопировали MD-описание → отдали агенту → он применил к проекту.
>_Промпт — применить стиль из MD-файла
Вот описание визуального стиля ([вставьте содержимое .md]). Примени этот стиль к моему проекту: палитра, типографика, общее настроение. Не пытайся копировать конкретные компоненты — ориентируйся на эстетику.
④ Повтор реального сайта
У вас есть конкретный сайт, который нравится — копируем его стиль. Три формата ввода: URL, скриншот, готовый HTML.
URL сайта
Агент сам открывает страницу, анализирует палитру, шрифты, компоненты.
Скриншот / картинка
Самый универсальный формат — работает, даже если сайт за авторизацией.
Готовый HTML
Самый точный — агент видит реальную разметку и стили, копирует один-в-один.
>_Промпт — стиль из URL
Возьми этот URL: [вставьте ссылку]. Проанализируй его дизайн: цвета, типографику, отступы, стиль карточек и компонентов. Создай дизайн-систему в виде HTML-файла с компонентами и описанием стилей — чтобы можно было визуально посмотреть результат. Затем примени эту дизайн-систему к моему проекту.
Совет: если даёте агенту URL — попросите сначала исследовать сайт и подготовить дизайн-систему отдельным шагом, до применения к проекту. HTML с компонентами — лучший промежуточный формат: визуально понятно и человеку, и AI.
Скиллы для извлечения и применения дизайн-системы
Скилл extract-design-system — реверс-инжиниринг публичного сайта → токены дизайн-системы (цвета, типографика, отступы, радиусы, тени).
Скилл tailwind-design-system — берёт дизайн-токены и собирает на их основе production-ready Tailwind CSS v4 дизайн-систему.
DESIGN.md — инструкция к стилю
Зачем
DESIGN.md — это коммуникационный слой между вами, агентом и дизайн-системой. Один файл, который агент читает каждый раз, чтобы интерфейсы не разъезжались по стилю от сессии к сессии.
Это бриф для агента: что можно и что нельзя.
Структура файла
1 и 8 пункт — самые важные.
- Общее описание визуального стиля — какое настроение и атмосфера.
- Цвета — палитра с ролями цветов (основной, дополнительные).
- Типографика — иерархия и логика заголовков и текстов.
- Сетка — сетка, ритм отступов, ширины контейнеров.
- Иерархия элементов — тени, слои, что должно ощущаться выше/ниже.
- Формы — радиусы углов, формы кнопок и карточек.
- Компоненты и состояния — компоненты и их состояния: default, hover, focus, disabled.
- Что можно и что нельзя — в самом конце. «Никогда не используем градиенты», «не ставим иконки в заголовках». Самая ценная часть — границы вкуса.
Готовый pipeline:
→ URL / скриншот / HTML реального сайта
→ extract-design-system извлекает токены
→ DESIGN.md — просим агента описать файл по референсу
→ tailwind-design-system собирает токены в проект (или агент пишет HTML/CSS напрямую из DESIGN.md)
Все скиллы доступны для Claude, Cursor, Codex.
Figma и Pencil Dev. Изучите Figma и Pencil Dev в связке с MCP. Агент может переносить дизайн из Figma в код и обратно — вы управляете этим процессом, в том числе для своих визуализаций и дашбордов.
Где брать референсы
Галереи дизайна — берёте скриншот или URL и отдаёте агенту:
| Ресурс | Что там |
|---|---|
| Dribbble | Дизайн-концепты, UI-кейсы, дашборды |
| Mobbin | Реальные экраны мобильных и веб-приложений |
| Minimal Gallery | Минималистичные сайты и лендинги |
| Framer Templates | Готовые шаблоны сайтов (образование и не только) |
| Подборки стилей сайтов, мудборды |
⑤ Валидация стиля
Когда визуализация готова — проверяем её перед тем, как отдать пользователю.
Целостность стиля
>_Промпт
Сверь дизайн сайта с design.md, найди что выбивается.
Точечные дефекты вёрстки
>_Промпт
На скриншоте [приложить скриншот] поплыли отступы, наезжают элементы, обрезается текст — что-то пошло не так. Исправь.
Доступность
>_Промпт
Проверь сайт на WCAG и a11y.
Адаптивность
>_Промпт
Найди дефекты верстки на экранах разного размера: мобильный телефон, планшет, ноутбук.
// справочник
Стартовый набор библиотек
Библиотеки, которые можно явно указать агенту. Но помните: агент и сам может подобрать оптимальный стек под вашу задачу.
🛠 Два подхода к работе с агентом
Подход 1 — вы указываете технологии явно. Например: «Используй Next.js, Recharts, shadcn/ui». Подходит, когда вы знаете, что хотите.
Подход 2 — агент подбирает сам. Просто опишите задачу и попросите агента предложить стек. Агент отлично разбирается в современных библиотеках и подберёт оптимальный набор под вашу задачу.
Если не знаете, какие технологии использовать — не указывайте. Опишите, что хотите получить, и агент сам подберёт подходящие библиотеки. Список ниже — на случай, когда хочется задать стек руками.
| Библиотека | Что делает | Когда использовать |
|---|---|---|
Recharts | React-компоненты для графиков | Стандартные графики в React-проектах |
D3.js | Низкоуровневая визуализация (SVG) | Кастомные, нестандартные графики |
Chart.js | Простые графики на Canvas | Статический HTML без React |
TanStack Table | Headless-таблица с сортировкой, фильтрами | Интерактивные таблицы данных |
Papa Parse | Парсинг CSV в JavaScript | Загрузка и обработка CSV-файлов |
shadcn/ui | Готовые UI-компоненты | Быстрая сборка интерфейса — shadcn.com |
Tailwind CSS | Utility-first CSS | Стилизация без написания CSS |
Next.js | React-фреймворк | Полноценные веб-приложения |
Рекомендованный стек: Next.js + Tailwind + shadcn/ui + Recharts + TanStack Table. Покрывает 90% задач по визуализации.
// этап 3
Git и GitHub
Сохраняем проект в систему контроля версий и публикуем на GitHub.
📚 Что такое Git и GitHub
Git — инструмент на вашем компьютере, который позволяет отслеживать версии проекта, «сохраняться» в процессе разработки и возвращаться к рабочим версиям, если что-то сломалось. Git работает локально.
GitHub — онлайн-хранилище кода, работающее на технологии Git. Позволяет хранить проект в облаке, делиться с командой и сообществом. github.com
Альтернативы GitHub: GitLab, Bitbucket, Gitea (self-hosted).
⏱ Установка Git
Проверьте, установлен ли Git
Terminal
git --version # git version 2.xx.x ← если видите версию, Git установлен
Если не установлен
Скачайте с официального сайта: git-scm.com
macOSmacOS
brew install git
PowerShell
winget install Git.Git
📋 Команды Git
| Команда | Что делает |
|---|---|
git init | Создаёт репозиторий — начинает отслеживать проект |
git status | Показывает, что изменилось, добавлено или удалено |
git add <файл> | Добавляет изменения для следующего коммита |
git add . | Добавляет все файлы в папке |
git commit -m "описание" | Сохраняет контрольную точку проекта |
git branch <имя> | Создаёт новую ветку |
git checkout -b <имя> | Создаёт ветку и переключается на неё |
git merge <ветка> | Объединяет изменения из ветки в текущую |
git remote add origin <URL> | Подключает проект к GitHub |
git push origin main | Отправляет код на GitHub |
git pull origin main | Загружает изменения с GitHub |
✏️ Упражнение
Войдите в проект, который вы создали на этапе 1 (дашборд), и выполните следующие шаги.
Инициализация и первый коммит
Инициализируйте Git, добавьте файлы и сделайте первый коммит.
init → add → commit
# Инициализируем репозиторий git init # Проверяем статус — видим неотслеживаемые файлы git status # Добавляем все файлы git add . # Сохраняем контрольную точку git commit -m "первый коммит: дашборд визуализации" # Проверяем, что всё закоммитилось git status
Ветка, изменение, мерж
Создайте ветку, внесите изменение (например, добавьте новый график или фильтр), и если результат понравится — влейте в основную ветку.
branch → edit → merge
# Создаём ветку и переключаемся git checkout -b new-feature # ... вносим изменения через агента ... # Добавляем и коммитим git add . git commit -m "добавил новый график" # Понравилось? Вливаем в main git checkout main git merge new-feature # Не понравилось? Удаляем ветку # git branch -d new-feature
Публикация на GitHub
Создайте репозиторий на github.com/new, скопируйте URL и подключите.
remote → push
# Подключаем к GitHub git remote add origin https://github.com/ваш-юзернейм/ваш-проект.git # Отправляем код git push origin main
VPN для GitHub из России. Если github.com не открывается — включите VPN. Для push/pull через терминал VPN тоже должен быть включён.
Золотое правило: коммитьте после каждого нового функционала. Лучше 10 маленьких коммитов, чем один огромный. Каждый коммит — точка, к которой можно вернуться.
// этап 4
Деплой на Vercel
Публикуем проект в интернет за пару команд. Получаем публичную ссылку с HTTPS.
⚡ Что такое Vercel
Vercel — облачная платформа для деплоя веб-приложений. Бесплатный тариф, автоматический HTTPS, мгновенные обновления. Нативная поддержка Next.js, но отлично работает и со статическими HTML.
Альтернативы: Netlify, GitHub Pages, Railway.
⏱ Деплой через CLI
Установка Vercel CLI
Terminal
npm i -g vercel
Авторизация
Terminal
vercel login # Откроется браузер для авторизации
Деплой
Terminal
# Preview-деплой vercel # Продакшн-деплой vercel --prod
Что вы получаете: публичный URL вида ваш-проект.vercel.app, автоматический HTTPS, CDN. Для статического HTML никаких конфигов не нужно — просто запустите vercel в папке с index.html.
🔁 Обновление сайта
Внесли изменения и хотите обновить сайт? Два способа:
Через CLI
Просто запустите vercel --prod ещё раз из той же папки. Сайт обновится по тому же адресу.
Terminal
# Внесли изменения → деплоим заново на тот же адрес vercel --prod
Через агента
Можно попросить агента задеплоить за вас. Он запустит vercel --prod и вернёт ссылку.
>_Промпт для агента
Задеплой мой проект на Vercel на продакшн. Если проект уже был задеплоен ранее — обнови по тому же адресу.
// итоги
Чеклист воркшопа
Отмечайте выполненные задания. Цель — пройти все шаги за время воркшопа.