Google AI Studio + Figma Make + Codex: связка, в которой дизайн и код перестают быть разными этапами

## Логика связки: три фазы с одним контекстом

Старый workflow выглядел так: дизайнер делает → передаёт разработчику → разработчик переспрашивает → дизайнер объясняет заново. Каждый переход — потеря контекста и времени.

Новый выглядит иначе:

1. AI Studio — формируем идею, проектируем сценарии и генерируем первый UI через Gemini
2. Figma Make — доводим визуал, итерируем внутри дизайн-системы
3. Codex — получает код из обоих источников, запоминает правила один раз, дальше работает самостоятельно

Ключевое: на каждом шаге артефакты одного инструмента становятся входными данными следующего. Никакого «объясни мне всё с нуля».

## Шаг 1 — Google AI Studio: сценарии и первый UI

Google AI Studio — это не дизайн-инструмент в привычном смысле. Это среда для работы с Gemini, в которой можно не только генерировать текст, но и строить интерактивные прототипы через Canvas, проектировать user flows и сразу получать рабочий код.

На практике здесь происходит две вещи одновременно:

Проектирование логики. Прежде чем рисовать экраны, в AI Studio удобно проработать сценарии — что происходит когда пользователь нажимает кнопку, какие состояния есть у компонента, какая ошибка появляется при неверном вводе. Gemini держит весь этот контекст в разговоре и помогает не упустить edge cases ещё до того, как вы открыли Figma.

Генерация UI через Canvas. AI Studio Canvas позволяет получить работающий прототип интерфейса прямо в браузере — с реальным кодом за каждым элементом. Это не картинка для передачи дизайнеру. Это HTML/CSS/JS, который можно сразу экспортировать или использовать как референс для Figma Make.

На этом этапе не нужна пиксельная точность. Нужен ответ на вопрос: «правильно ли я понимаю, что должен делать этот продукт?»

## Шаг 2 — Figma Make: от черновика к дизайн-системе

Figma Make — AI-агент внутри Figma на базе Claude Sonnet 4. Его задача — не генерировать с нуля, а итерировать поверх того, что уже есть, в рамках вашей дизайн-системы.

Сюда попадают два типа входных данных:

• Скриншоты и описания из AI Studio — как визуальный и смысловой референс
• Прямой контекст через Figma MCP — если AI Studio уже сгенерировал код, Figma Make видит его структуру и может работать с ней, а не угадывать

Figma Make умеет то, что AI Studio не умеет: держать компонентную архитектуру, работать с Auto Layout, соблюдать токены, управлять состояниями. «Добавь тёмную тему», «сделай мобильную версию этого экрана», «приведи все кнопки к единому стилю» — всё это Make делает в контексте реального проекта, а не абстрактного холста.

Результат этого шага — не просто красивые экраны. Это структурированный дизайн с именованными компонентами, правильными слоями и экспортируемым кодом через Dev Mode. Именно это Codex получит на вход.

## Шаг 3 — Codex: правила один раз, дальше сам

Здесь начинается самое важное. Codex — агентная система, которая запускает задачи в изолированном облачном окружении с вашим репозиторием внутри. Задача может занять от одной до тридцати минут; Codex возвращает логи и результаты тестов для проверки.

Codex получает на вход код из двух источников:

• Из Figma Make — через Figma MCP Server, который даёт Codex прямой доступ к компонентной иерархии, токенам дизайна и Code Connect маппингу реальных компонентов кодовой базы. Не PNG и не Zeplin-аннотации — живая структура.
• Из AI Studio — экспортированный код прототипа как структурный референс и описание сценариев.

Но одноразовой передачи недостаточно. Главное — зафиксировать правила так, чтобы Codex их помнил.

### AGENTS.md: память агента

AGENTS.md — файл в корне репозитория, который Codex читает перед каждой задачей. Здесь фиксируются все соглашения: кодовые конвенции, архитектурные правила, тестовые требования и — что важно для дизайна — визуальные правила.

Пример секции дизайна в AGENTS.md:

## UI & Design System
- Follow ./DESIGN.md for all visual decisions
- Use only components from /src/components — never create inline styles
- Button variants: primary, secondary, ghost — no custom variants
- Spacing scale: 4, 8, 12, 16, 24, 32, 48 (no arbitrary values)
- Dark mode via CSS variables, not duplicate components

Это не нужно повторять в каждом промпте. Codex читает файл при старте каждой задачи — правила всегда с ним.

DESIGN.md в той же директории описывает визуальную систему в токенах. AGENTS.md ссылается на него — и агент работает в рамках вашего бренда автоматически.

### Навык (Skill) для повторяющихся задач

Если какой-то процесс повторяется — например, «добавить новый экран в соответствии с дизайн-системой» — его можно упаковать в Skill: файл SKILL.md плюс опциональные скрипты. Skill загружается агентом и применяется без дополнительных инструкций.

### Двунаправленный цикл

Интеграция Figma + Codex работает в обе стороны. Если разработка изменила компонент — изменения можно вернуть на Figma-канвас через generate_figma_design и проверить в дизайне перед следующей итерацией. Дизайн и код остаются синхронизированными не только на старте, но и по ходу работы.

## Как это выглядит на практике

Конкретный кейс: делаете SaaS-дашборд с нуля.

1. В AI Studio проговариваете с Gemini основные сценарии: что видит пользователь сразу после входа, какие действия доступны, как выглядит пустое состояние. Canvas генерирует черновой прототип — видно, что работает логически.

2. Открываете Figma. Figma Make видит структуру через MCP, вы добиваете визуал: цвета из дизайн-системы, типографика, состояния компонентов. На выходе — готовый экран с чистыми слоями и Dev Mode.

3. В Codex: создаёте AGENTS.md с правилами один раз. Закидываете код из Figma Make. Ставите задачу: «реализуй этот экран, следуй AGENTS.md». Codex работает в изолированном окружении, возвращает PR с кодом и логами тестов.

4. Нужно изменение — правите в Figma Make, передаёте обновление в Codex через MCP. Контекст не теряется, объяснять с нуля не нужно.

Общая экономия времени на хендоффе — существенная. По данным практиков, работающих с похожими стеками, цикл от дизайна до рабочего компонента сокращается с дней до часов.

## Честно о том, где связка не идеальна

Figma MCP требует настройки. Нужен Dev Mode и правильно настроенный Code Connect — без этого Codex получает менее структурированный контекст. Для команд с устоявшейся Figma-организацией это несложно. Для нового проекта — небольшой upfront cost.

AI Studio Canvas — не Figma. Экспортированный код из Canvas это стартовая точка, не финал. Иногда требует чистки перед передачей в Codex.

AGENTS.md работает ровно настолько, насколько хорошо написан. Поверхностный файл с тремя правилами даёт незначительный прирост. Хорошо проработанный — меняет качество кардинально. Вложите время один раз.

Codex пока лучше на задачах до 30 минут. Большие рефакторинги он делит на подзадачи, но очень длинные сессии требуют надзора.

## Для кого эта связка

Подходит:

• Дизайнерам, которые хотят видеть свой дизайн в живом коде — не в хендофф-спеке
• Соло-разработчикам, которым нужно закрыть и дизайн, и реализацию
• Небольшим продуктовым командам без отдельных дизайнера и фронтендера

Не подходит:

• Командам с устоявшимся process-heavy workflow — здесь слишком много смены привычек сразу
• Проектам без базовой Figma-гигиены: именованных компонентов, токенов, нормальных слоёв. Codex работает хорошо только с хорошей структурой на входе

## Вывод

Три инструмента, одна идея: контекст не должен теряться при переходе между дизайном и кодом.

AI Studio формирует логику и черновой UI. Figma Make доводит визуал до production-качества внутри дизайн-системы. Codex получает этот результат через MCP, запоминает правила через AGENTS.md и дальше строит код, который соответствует дизайну — не потому что разработчик держит его в голове, а потому что правила зафиксированы в репозитории.

Это не «дизайн помогает коду» и не «код помогает дизайну». Это одна непрерывная работа.