Урок 3. Код и упаковка
Переносим дизайн-систему в код и упаковываем результат курса в кейс, портфолио и резюме.
Перед занятием
- Готовы экраны в Figma (домашка второго урока).
- Установлен Node.js. Проверка: в терминале Antigravity команда
node -vпоказывает версию. - Под рукой текущее резюме и портфолио (ссылки или PDF).
- Созданы бесплатные аккаунты GitHub и Vercel: на них выложим сайт.
Что будет на занятии
- Дизайн-система в React.
- Кейс для портфолио.
- Сайт-портфолио и резюме.
Дизайн-система в коде
Директива Level_03/directive_react_base.md разворачивает React-проект и переносит туда дизайн-систему один в один: те же имена токенов, компонентов, вариантов и состояний, что и в Figma.
На выходе тестовая страница со всей палитрой, шкалой текста и компонентами. Открывается командой npm run dev по адресу, который покажет агент (обычно http://localhost:5173).
Figma и код остаются зеркальными: меняете компонент в одном месте, агент синхронизирует другое.
Если хочется быстрее, есть
dop/quickstart.md. Это самодостаточная директива, которая сама разворачивает среду и доводит проект до связки «React ↔ Figma».
Кейс для портфолио
Весь кейс уже лежит в папке проекта, его нужно только собрать:
| Раздел кейса | Откуда взять |
|---|---|
| Проблема и задача | brief.md |
| Исследование | конкурентный анализ, personas.md, интервью |
| Решения | mvp_scope.md, PRD, sitemap |
| Дизайн-система | Figma: Foundation и UI Kit |
| Экраны | Figma: Screens |
| Результат | работающее демо в коде |
| Как я работал с ИИ | директивы, где вы принимали решения, что поправили за агентом |
Последний раздел самый важный. Именно он показывает, что вы не просто «сгенерировали картинки», а управляли процессом.
Сайт-портфолио
- Бренд-скиллы (
dop/brand-trio-skills): Creative Director находит идею, Reference Director собирает референсы, Art Director превращает это в визуальную систему. - grab-web (
dop/grab-web) снимает ваше текущее портфолио или сайт-референс: скриншоты, токены, структуру. Это основа для редизайна. - Сайт собирается тем же путём: токены → компоненты → страницы. Потом выкладывается на Vercel.
Резюме AI-native дизайнера
Попросите агента переписать резюме, дав ему текущую версию и папку проекта. Что должно в нём появиться:
- Позиционирование: продуктовый дизайнер, который ведёт продукт от исследования до работающего прототипа с ИИ-агентами.
- Навыки: Claude Code, агентные воркфлоу, дизайн-системы и токены, Figma Variables, Figma MCP, прототипирование в коде.
- Кейс со ссылкой на демо.
Пример строки для опыта:
Провёл продукт от исследования до работающего React-прототипа с дизайн-системой, используя Claude Code и Figma MCP.