Cоздаем дизайн-систему в Codex за 15 минут!
В этом видео показываю, как с помощью Codex и Figma MCP можно собрать дизайн-систему почти с нуля для реального бизнеса.
В качестве примера я взял сайт Казанского хлебозавода. Сайт уже довольно старый, поэтому я использовал его как отправную точку: Codex проанализировал визуальный стиль компании, собрал дизайн-систему в Figma, создал базовые переменные, стили, компоненты и помог на их основе собрать CRM для учета и управления хлебозаводом.
Главная идея ролика в том, что Codex не просто генерирует отдельные макеты, а может вести процесс через вопросы. Я задавал промпты так, чтобы Codex сам уточнял нужные детали, а я отвечал и направлял его. В итоге агент сам собрал стартовую дизайн-систему, рабочие CRM-экраны и новый лендинг на тех же компонентах.
Это не финальный коммерческий дизайн, а мощный старт внутри Figma, который дизайнер может дальше доработать, улучшить и использовать в реальном процессе.
Тайм-коды:
00:00 - Что будем создавать в ролике
00:54 - Что нужно настроить перед началом: Codex, skills и Figma MCP
01:22 - Как подготовиться к созданию дизайн-системы
04:24 - Первый промпт: как заставить Codex самому вести процесс
05:46 - Анализ сайта Казанского хлебозавода
06:38 - Создание нового файла Figma для работы
07:16 - Что Codex сгенерировал в Figma
07:59 - Примитивы, цвета и семантические токены
10:10 - Фундамент дизайн-системы: палитра, типографика, отступы, радиусы
10:34 - Базовые компоненты: кнопки, input, select, checkbox и таблицы
11:19 - Создание CRM-экранов на основе дизайн-системы
12:15 - Исправление компонентов и привязка к дизайн-системе
13:03 - Публикация дизайн-системы как библиотеки Figma
13:37 - Создание нового лендинга на тех же компонентах
15:25 - Главная ценность подхода и выводы