Как с помощью Codex создать полноценный дизайн интерфейса или сайта в Figma

С выходом Codex App (февраль 2026) и интеграцией Figma MCP (Model Context Protocol) дизайнеры получили суперсилу: один промпт → живой прототип → готовые редактируемые фреймы в Figma.

Что нужно перед стартом

1. Codex App (macOS) — скачай из официального источника OpenAI (бесплатно для Free/Go, повышенные лимиты на Plus/Pro).
2. Figma MCP Server (remote) — подключается за 1 клик прямо в Codex App через Skills → Figma.
3. Аккаунт Figma с правом редактирования в нужном workspace.

Всё. Больше ничего не нужно.

Мой чек-лист: как я делаю дизайн в Figma через MCP

1. Получаю вводные и референсы от клиента.
2. Фиксирую визуальный язык: цвета, типографика, сетка, UI-паттерны (всё в одном промпте).
3. Через Codex App генерирую код → запускаю локальный сервер → одним кликом отправляю весь UI в новый Figma-файл.

Что требуется

1. Ссылка на Figma-файл с правом редактирования
2. Что именно делаем: тип продукта и главная цель экрана(ов).
3. Список экранов (можно просто названия).
4. Стиль + 1–3 референса (Dribbble, Behance, сайт-конкурент).
5. Ограничения: бренд-цвета, шрифты, «что нельзя», язык текста, размер фрейма (360×780, 1440×900 и т.д.).

Что сильно ускоряет и повышает качество

• Готовые тексты для UI (или разрешение написать драфт самому).
• Бренд-цвета HEX, логотип (SVG/PNG), иконки в наборе.
• Приоритеты: вау-визуал / конверсия / скорость разработки.
• Технические рамки: iOS / Android / Web / Tailwind / React + shadcn и т.д.

Шаблон запроса к клиенту (просто копируй)

1. Продукт: ...

2. Цель: ...

3. Экраны:

1) ...

2) ...

3) ...

4. Размер фрейма: 360×780 (мобильный) / 1440×900 (десктоп)

5. Стиль: современный минимализм / neumorphism / glassmorphism + ссылки на референсы

6. Ограничения: только бренд-цвета #1A1A1A и #00FF99, шрифт Inter, без анимаций в первом варианте, язык — русский

7. Текст интерфейса: приложу / напиши сам

8. Куда класть в Figma: новый файл в моём workspace или вот ссылка ...

Пошаговый процесс

Шаг 1. Фиксируем визуальный язык

В Codex App создаю новый проект и пишу:

Создай дизайн-систему для мобильного приложения финтеха в стиле "quiet luxury + glassmorphism".

Бренд-цвета:

- Primary: #1A1A1A

- Accent: #00FF99

- Background: #0F0F0F с blur

- Text: #FFFFFF / #AAAAAA

Шрифт: Inter, weights 400/500/600

Сетка: 8px

Углы: 16px для карточек, 24px для больших блоков

Эффекты: мягкий backdrop-blur(20px), тонкие бордеры 1px rgba(255,255,255,0.08)

Сгенерируй React + Tailwind компоненты: Button, Card, Input, BottomNav, Header.

Сделай 3 варианта состояний для каждого.

Codex сразу создаёт папку с компонентами.

Шаг 2. Генерируем экраны один за другим

Создай экран Onboarding 1 для приложения инвестиций.

Размер фрейма: 375×812 (iPhone 14 Pro)

Состояние: первый экран после splash

Композиция:

- сверху логотип + progress 1/4

- большая иллюстрация (стиль flat minimal, цвета бренда)

- заголовок: "Инвестируй в будущее уже сегодня"

- подзаголовок: "Простые инструменты для роста капитала"

- кнопка CTA: "Начать" (primary, full width)

- снизу "Уже есть аккаунт? Войти"

Стиль строго по дизайн-системе из предыдущего шага. Auto Layout везде. Используй компоненты.

После генерации запусти локальный сервер и подготовь захват UI в Figma.

Шаг 3. Отправляем в Figma через MCP

После генерации пишу в Codex:

Запусти локальный сервер на порту 3000, открой браузер и захвати весь UI в новый Figma-файл в мой workspace "Client — InvestApp 2026". Назови файл "InvestApp — Mobile Screens v1". Используй remote Figma MCP.

Codex открывает браузер, показывает toolbar захвата — я кликаю "Capture all" → через 10 секунд получаю ссылку на готовый Figma-файл со всеми слоями, Auto Layout, компонентами и вариациями.

Шаг 4. Итерации

Клиент пишет: «Сделай кнопку зеленее и добавь иконку кошелька».

Я просто пишу в Codex:

В Figma-файле InvestApp — Mobile Screens v1 измени кнопку CTA на экране Onboarding 1: цвет #00CC77, добавь иконку wallet слева. После изменений обнови код и сделай новый захват в тот же файл как Page "v1.1".

Готово.

Лучшие практики промптинга (чтобы результат был вау с первого раза)

• Давай точные HEX-цвета, шрифты, радиусы.
• Указывай «используй компоненты из предыдущего шага» — Codex помнит контекст.
• Для сложных экранов делай по одному: сначала структура, потом визуал, потом состояния.
• Используй референсы в промпте: «стиль как в референсе https://dribbble.com/shot/12345678 но с нашими цветами».
• Проси «сделай всё на Auto Layout + Variants + Local Variables».

Заключение

Codex App + Figma MCP — это не замена дизайнеру, а суперсила. Ты всё так же думаешь о пользовательском пути, психологии, конверсии и бренде.