Codex Desktop → Figma
Генерация дизайна в Codex Desktop и импорт в Figma через MCP-сервер html.to.design
Шаг 1. Установка Codex Desktop
- Скачайте приложение с openai.com/codex
- Установите и войдите в аккаунт
Шаг 2. Подготовка проекта
Создайте пустую папку для проекта в любом удобном месте — например, на Рабочем столе.
Шаг 3. Генерация сайта
- В Codex добавьте папку проекта, созданную на предыдущем шаге
- Напишите промпт:
Создай лендинг для мобильного приложения для учёта финансов.
Используй Tailwind CSS через CDN.
Тёмная тема, современный минималистичный дизайн.
Секции: hero с мокапом телефона, фичи (3 карточки), CTA.- Отправьте промпт и дождитесь завершения генерации
Шаг 4. Просмотр результата
Откройте файл index.html из папки проекта в браузере — вы увидите готовый сайт.
Шаг 5. Доработка дизайна
Результат можно улучшать итеративно — просто пишите в чат, что хотите изменить:
- «Сделай hero-секцию выше, добавь градиент»
- «Добавь секцию с отзывами»
- «Замени иконки на более минималистичные»
После каждого изменения обновляйте страницу в браузере, чтобы увидеть результат.
Шаг 6. Создание проекта в Figma
Откройте Figma и создайте новый проект или откройте существующий, в который хотите импортировать дизайн.
Шаг 7. Настройка плагина html.to.design
- Установите плагин html.to.design
- Запустите его: правый клик на canvas → Plugins → html.to.design
- Перейдите на вкладку MCP
- Активируйте свитчер Enable MCP endpoint
Шаг 8. Подключение Codex к Figma
- В плагине нажмите «How to configure your AI tool?»
- Откройте вкладку Other и скопируйте первую ссылку
- В Codex откройте настройки и перейдите на вкладку MCP servers
- Нажмите + Add Server
- Переключитесь на Streamable Http
- Вставьте URL из плагина и сохраните
- Убедитесь, что в списке инструментов Codex появился html.to.design
Шаг 9. Импорт в Figma
Напишите в Codex промпт:
Перенеси сайт в Figma как единый фрейм.
Дополнительно создай отдельный артборд со всеми стилями сайта:
цвета, шрифты, отступы, радиусы, тени.
Шаг 10. Результат в Figma
Дождитесь завершения импорта. В плагине html.to.design на вкладке Logs можно отслеживать входящие запросы.
Codex может остановиться после экспорта страницы. Если артборд со стилями ещё не создан — попросите продолжить: «Продолжай, создай артборд со стилями».
