Тема 13 — Создание Dashboard с помощью MCP

Доступ к полному просмотру и файлам открыт только для активных участников ИИшенка Pro.

Практический урок на 7 минут: по макету в Figma строится kanban-дашборд для Trello-подобного приложения на Next.js. Figma MCP читает дизайн, ShadCN MCP ставит готовые компоненты, а весь процесс идёт через спецификацию и план.

Чему научишься

Копировать ссылку на артборд в Figma и отдавать её Claude Code для анализа дизайна через Figma MCP
Называть элементы в макете так, чтобы они соответствовали компонентам ShadCN
Просить ShadCN MCP устанавливать готовые компоненты вместо того, чтобы создавать их с нуля
Идти по процессу: спецификация, план в режиме планирования, сохранение в папку Plans, реализация
Переключаться между режимами по Shift+Tab, коммитить изменения перед реализацией и перезапускать dev-сервер для проверки результата

Тайм-коды

00:00Задача: страница дашборда в приложении-аналоге Trello
00:30Макет в Figma и почему важны компоненты ShadCN
02:01Копирование ссылки на артборд в Figma
02:31Промпт для спецификации: Figma MCP и ShadCN MCP
03:32Claude Code читает дизайн и создаёт спецификацию
04:02Планирование по спецификации и режим планирования
04:34Сохранение плана в папку Plans
05:34Коммит и переход к реализации плана
06:04Перезапуск сервера и проверка дашборда

Проверяем доступ...