Codex 
OpenDesign Как проектировать интерфейсы с OpenAI Codex в OpenDesign: настройка, одна полная задача от брифа до проверенного файла и ограничения, которые нужно знать перед началом.
«Более спокойная доска проекта.
Ясные приоритеты. Пространство для фокуса.»
ТРИ СТРАНИЦЫ О CODEX
Это руководство: бриф, референсы, правила дизайна и проверенный результат в HTML.
Читать это руководство ПЛАГИНЫ И УСТАНОВКАПосмотрите дизайн-плагины или инструкции по установке OpenDesign.
Перейти к ресурсам ДРУГОЙ РЕЗУЛЬТАТДля слайд-презентаций есть отдельное руководство со своим рабочим процессом.
Открыть Codex SlidesОдна завершённая дизайн-задача Codex
Одна задача, показанная от начала до конца: бриф и ограничения, которые вы передаёте, артефакт, который получаете на выходе, и проверки, которые вы всё равно проводите перед завершением. Интерфейс ниже — иллюстративный пример, созданный для этой страницы, а не запись реального запуска Codex.
БрифСпроектируйте доску прогресса проекта для небольшой продуктовой команды. Общий прогресс, следующая веха и блокированные задачи должны быть видны с первого взгляда. Задачи перемещаются между колонками «К выполнению», «В работе» и «Готово». Доска должна работать на десктопе и на мобильном.
data-od-idПишете бриф, выбираете дизайн-систему и определяете критерии приёмки.
Планирует макет, пишет HTML, CSS и JavaScript, запускает файл и вносит правки по запросу.
Предоставляет дизайн-систему и skill, рендерит превью и сохраняет каждую версию как файл в проекте.
Перед передачей проверяются визуальная иерархия, отступы по сетке 8px, оба брейкпоинта и каждое взаимодействие.
Сайдбар, заголовок, статистика и колонки выстроены по сетке 8px; ничего не перекрывается ни при 1440, ни при 390.
Прогресс, следующая веха и количество блокировок важнее заголовков колонок; акцентный цвет отмечает только одну метку вехи.
Колонки превращаются в сегментированный переключатель; полоса вех остаётся; сайдбар сворачивается в панель вкладок.
Переключайте предпросмотр между десктопом и мобильным здесь. В своём собственном артефакте откройте задачу и проверьте фильтры, навигацию с клавиатуры и поведение фокуса.
Fit
Совместимость
В этом руководстве рассматривается локальный Codex. Другие режимы имеют другую настройку и биллинг. Опубликованные источники проверены 11 сентября 2026 года.
OpenAI Codex, агент для кода — не устаревшая модель автодополнения кода. Эта страница о проектировании интерфейсов с помощью Codex, а не о UI самого приложения Codex. В заметках по настройке OpenDesign Codex указан среди доступных агентов.
Для локального Codex войдите через ChatGPT или используйте API-ключ OpenAI. У них разный биллинг и разные последствия в отношении политики. Следуйте инструкциям OpenAI по аутентификации; эта страница не обещает конкретную квоту или цену.
Сборки для десктопа см. на странице загрузки. Требования к Node.js и pnpm в быстром старте из исходников относятся к запуску из исходного кода, а не к установке десктопного пакета. Минимальная совместимая версия Codex: здесь не проверялась.
Следуйте инструкциям по подключению, показанным в вашей установленной версии, затем выполните небольшую задачу. Убедитесь, что задачу обработал нужный агент и что артефакт открывается. Одной загрузки недостаточно для подтверждения работающего подключения.
Начните с десктопного приложения
Сначала загрузите приложение, завершите настройку Codex для установленной версии, затем проверьте небольшой результат. Для этого пути вам не нужно собирать OpenDesign из исходников.
Выберите пакет для вашего компьютера, установите его и откройте приложение.
Скачать OpenDesignСледуйте инструкциям по Codex в вашей установленной версии. Для локального Codex завершите вход через ChatGPT или аутентификацию по API-ключу, прежде чем отправлять задачу.
Читать заметки об аутентификации CodexИспользуйте небольшой бриф, чтобы оценить весь цикл, включая одну доработку.
Создайте экран настроек с формой профиля и подтверждением сохранения. Используйте мои правила дизайна. Проверьте на ширинах для десктопа и мобильных устройств.
Чтобы запустить из исходного кода, воспользуйтесь техническим quickstart. Чтобы установить плагин в Codex, используйте запись об установке ниже.
Рабочий процесс дизайна в Codex
Одна и та же задача из progress-board, от брифа до проверенного файла. Каждый шаг описывает, что предоставляете вы, что делает Codex, что даёт OpenDesign и что нужно проверить.
Простой язык, от трёх до шести строк. Укажите аудиторию, задачу экрана и платформы.
AGENTS.md проекта; уточняет, если что-то неоднозначно.Дизайн-система и несколько строгих правил. Именно это отличает результат в стиле бренда от универсального вида.
Codex пишет самодостаточный HTML-файл: разметку, стили, взаимодействия и стабильные хуки.
Файл отображается внутри OpenDesign при указанных вами ширинах. Именно здесь оценивается дизайн.
data-od-id для комментариев и правок.Запрашивайте изменения, указывая на элементы в предпросмотре. Каждая правка — это новый файл; ничего не перезаписывается тихо.
Ресурсы
Простой текстовый адрес с инструкциями по установке для чтения Codex, а не визуальный учебник. Скопируйте промпт в Codex, и он сам прочитает запись.
Установите OpenDesign в Codex, изучив https://open-design.ai/codex-plugin/ и следуя инструкциям по установке. Спрашивайте разрешение перед изменением конфигурации.
Плагины для фронтенда и дизайн-систем для Codex, каждый со своим исходным кодом и инструкциями по настройке.
Типы продуктов, которые Codex может создавать в OpenDesign, один skill на тип.
Токены бренда и компоненты, которые нужно привязать перед тем, как Codex что-либо сгенерирует.
У презентаций отдельное руководство; результат и рабочий процесс отличаются от продуктового UI.
Ограничения
Вопросы и ответы
Начните с небольшой задачи, оцените результат обмена, а затем переходите к реальному брифу. Выберите вариант, соответствующий вашей настройке; страница не определяет её автоматически.