Codex для дизайну.

Чим насправді є OpenAI Codex (і чим він не є)

Спершу — уточнення, яке збиває з пантелику майже всіх, хто шукає «Codex». Початковий OpenAI Codex був моделлю автодоповнення коду 2021 року, що живила ранній GitHub Copilot і була виведена з експлуатації у 2023 році. Ця сторінка не про неї. Сьогоднішній Codex — це агентний інструмент кодування від OpenAI: він планує, пише, виконує й перевіряє код за завданнями природною мовою.

Сучасний Codex постачається на чотирьох поверхнях: термінальний CLI (переписаний на Rust, під ліцензією Apache-2.0), розширення IDE для VS Code, Cursor і Windsurf, хмарний/вебдосвід для делегованих асинхронних завдань і десктопний застосунок із вбудованим браузером та Computer Use.

• Модель за замовчуванням: Станом на середину 2026 року рекомендована модель — gpt-5.5, а gpt-5.4 — це модель, яку OpenAI явно тренувала для фронтенду й роботи з комп'ютером.
• Файл інструкцій: Codex читає файл AGENTS.md у вашому проєкті (міжінструментальний стандарт) для правил проєкту — природне місце, щоб закодувати ваші дизайн-конвенції.
• Пісочниця: Він працює в пісочниці рівня ядра (workspace-write за замовчуванням), тож агент, що редагує ваш UI, не може вийти за межі проєкту.

• Постачальник: OpenAI
• Облікові дані: API-ключ OpenAI (BYOK) або підписка ChatGPT (Free / Go / Plus / Pro / Business / Enterprise)
• Ліцензія CLI: Apache-2.0, відкритий код

Чому Codex тепер добрий у дизайні

На початку 2026 року зійшлися три речі, що зробили Codex справжнім дизайн-інструментом, а не загальним генератором коду.

• Модель, натренована для фронтенду: OpenAI випустила GPT-5.4 — свою першу основну модель, натреновану для фронтенду й роботи з комп'ютером, із набагато кращим розумінням зображень у дизайн-процесі та сильнішою самоперевіркою. Вона навіть може генерувати mood-борди та візуальні варіанти перед тим, як обрати фінальні ассети.
• Офіційний frontend skill: Каталог openai/skills постачає кураторський frontend-skill, що нав'язує реальний смак: розкладки без карток, повноширинні hero-блоки, ієрархія за брендом, стриманий рух, щонайбільше два шрифти й один акцентний колір — і змушує Codex написати візуальну тезу перед побудовою.
• Перевірка в браузері: Зі skill-ом Playwright Codex відкриває справжній браузер, змінює розмір під брейкпойнти й порівнює свій вивід із референсом, а не лише перевіряє, що збірка проходить.

Урок за всіма трьома: Codex не має смаку за замовчуванням. Він створює добрий дизайн, коли ви даєте йому обмеження — дизайн-систему, естетичний skill і конкретні референси. Open Design упаковує саме ці вхідні дані, тому ці двоє пасують одне одному (далі — детальніше).

Налаштуйте Codex для дизайну, з нуля

Ось повний шлях від чистої машини до Codex, який може будувати й перевіряти UI.

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp

• Закодуйте свої дизайн-правила: Помістіть свої tokens, примітиви та конвенції в AGENTS.md або DESIGN.md і вкажіть на них Codex, щоб вивід відповідав бренду, а не звертався до загального вигляду.
• Виберіть правильний рівень міркування: OpenAI зазначає, що низький-середній рівні міркування часто дають сильніші фронтенд-результати, ніж найвище налаштування.

Робочий процес «скриншот → UI»

Найрезультативніший дизайн-цикл із Codex — перетворити референсне зображення на робочий, адаптивний UI та ітерувати, доки воно не збіжиться. Власні рекомендації OpenAI зводяться до п'яти кроків.

1. Починайте з найчіткіших візуальних референсів, які у вас є, — і включайте кілька станів (десктоп і мобільний, hover, порожній, завантаження), а не лише один hero-кадр.
2. Будьте конкретні в промпті; розпливчасті промпти дають загальний UI.
3. Підготуйте дизайн-систему й скажіть Codex, де живуть tokens і канонічні примітиви.
4. Увімкніть інтерактивний skill Playwright, щоб Codex рендерив у справжньому браузері й змінював розмір під брейкпойнти.
5. Ітеруйте, змушуючи Codex порівнювати свою реалізацію зі скриншотами — а не лише підтверджувати, що збірка проходить.

Подавайте зображення, перетягуючи скриншот у термінал або через прапорець зображення, а потім задавайте промпт із конкретними обмеженнями:

codex -i reference-desktop.png -i reference-mobile.png \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

Запускайте dev-сервер у другому терміналі, тримайте промпти невеликими й сфокусованими та комітьте вдалі ітерації / відкочуйте невдалі (кажучи Codex, коли ви відкочуєте), щоб кожен прохід будувався на чистій основі.

Codex + Figma: двосторонній обмін дизайн ↔ код

У лютому 2026 року OpenAI і Figma оголосили про офіційне партнерство, перетворивши попередню бета-версію Figma MCP на першокласну двонапрямлену інтеграцію. Вона працює в обидва боки.

• Дизайн → Код: Скопіюйте «link to selection» фрейму у Figma, вставте його в Codex із get_design_context і попросіть реалізувати дизайн із вашою наявною бібліотекою компонентів.
• Код → Дизайн: Інструмент generate_figma_design («Code to Canvas») перетворює живий робочий UI назад на редаговані фрейми Figma — увесь екран, вибраний елемент або цілий файл.

Figma MCP працює як віддалений сервер і звільнений від лімітів швидкості. Додайте його одного разу, і він стане доступним для Codex, Claude Code, Cursor, VS Code тощо — саме той тип переносної, мультиагентної можливості, яку Open Design створено оркеструвати.

Codex проти Cursor проти Claude Code для дизайну

Єдиного переможця для дизайн-роботи немає — у кожного агента своя сильна сторона, і досвідчені команди поєднують їх. Чесне резюме:

Сталий вердикт спільноти такий: смак походить від людей — усі три за замовчуванням тяжіють до загальної естетики без skill-ів, референсів і обмежень. Це і є справжня проблема, яку треба розв'язати — і вона має форму дизайн-інструмента, а не моделі.

Пастки та як уникнути вигляду «AI slop»

Найпоширеніша скарга на дизайн, згенерований Codex, — що він виглядає загальним: м'які градієнти, плаваючі панелі, завеликі заокруглені кути, драматичні тіні, вайб «Inter-і-фіолетовий», який «кричить, що це зробив ШІ». Серед інших повідомлених проблем — поламані мобільні розкладки, інструкції, що протікають у текст UI, та швидке досягнення лімітів використання.

• Встановіть frontend skill: Кураторський естетичний skill змушує Codex обрати реальний напрямок замість вигляду за замовчуванням.
• Увімкніть перевірку Playwright: Змусьте Codex рендерити й самоперевірятися на різних брейкпойнтах, щоб розкладки не ламались на мобільному непомітно.
• Надайте tokens і референси: Реальні дизайн-tokens і референсні скриншоти — найпотужніший важіль якості виводу.
• Закодуйте правила в AGENTS.md: Помістіть правила штибу «без hero-карток, максимум два шрифти, ієрархія за брендом» туди, де агент читає їх щоразу.

Зверніть увагу: кожен спосіб пом'якшення зводиться до надання агенту кураторського дизайн-контексту. Підтримувати цей контекст вручну для кожного проєкту — це рутина, яку усуває Open Design.

Дизайн із Codex всередині Open Design

Open Design — це той дизайн-шар з відкритим кодом, якого постійно потребує наведений вище процес. Він трактує Codex як власний адаптер і обгортає його кураторською бібліотекою skill-ів і дизайн-систем, структурованим конвеєром рендерингу та локальним десктопним UI — щоб дизайн-контекст, який робить Codex добрим, був на місці з першого запуску, а не збирався вручну щоразу.

1. Встановіть Open Design і виберіть Codex як свого агента.
2. Автентифікуйтеся своїм API-ключем OpenAI (BYOK) або підпискою ChatGPT — облікові дані залишаються на вашій машині й ніколи не проксіюються через нас.
3. Виберіть дизайн-систему та skill, а потім генеруйте презентації, прототипи й лендинги з послідовним смаком.
4. Кожен артефакт і файл DESIGN.md живе у вашому власному репозиторії, а не в розміщеній хмарі.

Той самий агент Codex, той самий ключ — плюс реальний, переносний дизайн-процес з відкритим кодом навколо нього. Він local-first і Apache-2.0, тож ніщо у вашій роботі чи облікових даних не залишає вашу машину.

Часті запитання

1. 01 Чи справді OpenAI Codex може виконувати дизайн-роботу? +

   Так — із frontend skill, дизайн-системою та реальними референсними зображеннями в контексті Codex (особливо на GPT-5.4) створює UI продакшн-якості, адаптивний, і може перевірити його в браузері. Без цього контексту він тяжіє до загального вигляду — і саме цю прогалину закриває Open Design.

2. 02 Це плагін OpenAI Codex Product Design? +

   Ні. Open Design — незалежний проєкт з відкритим кодом, який інтегрує Codex як агента. Він доповнює власний інструментарій OpenAI local-first відкритою бібліотекою skill-ів і дизайн-систем.

3. 03 Чи потрібна мені підписка ChatGPT, щоб проєктувати з Codex? +

   Ви можете використовувати або API-ключ OpenAI (BYOK), або свою підписку ChatGPT. Вхід через ChatGPT зазвичай дає щедріші ліміти; у будь-якому разі Open Design ніколи не проксіює ваші облікові дані.

4. 04 Codex чи Claude Code для фронтенд-дизайну? +

   Обидва сильні. Claude Code відомий конкретними дизайн-рішеннями з урахуванням кодової бази; Codex має сильне візуальне опрацювання після GPT-5.4 й чудово справляється з делегованими збірками в пісочниці. Багато команд використовують обидва — Open Design дозволяє перемикати агентів без зміни дизайн-процесу.

5. 05 Як підключити Codex до Figma? +

   Додайте офіційний сервер Figma MCP (codex mcp add figma --url https://mcp.figma.com/mcp). Тоді ви зможете реалізовувати фрейми Figma в коді за допомогою get_design_context і відправляти робочий UI назад у редаговані фрейми Figma за допомогою generate_figma_design.

6. 06 Як уникнути загальної естетики «AI slop»? +

   Встановіть frontend skill, надайте реальні дизайн-tokens і референсні скриншоти, закодуйте правила бренду в AGENTS.md та увімкніть перевірку Playwright. Open Design постачає це як кураторську бібліотеку, щоб ви пропустили налаштування для кожного проєкту.

7. 07 Чи пов'язаний Open Design з OpenAI? +

   Ні. Codex — продукт OpenAI; Open Design — незалежний проєкт з відкритим кодом, який підтримує його як власний адаптер. OpenAI і Codex — торгові марки OpenAI.

8. 08 Чи мої файли й облікові дані в безпеці? +

   Так — Open Design local-first. Ваші файли, артефакти й DESIGN.md залишаються у вашому власному репозиторії, а ваші облікові дані OpenAI використовуються безпосередньо вашим агентом і ніколи не маршрутизуються через сервери Open Design.