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 - Главная ценность подхода и выводы