Промптинг для дизайнеров: OpenAI выпустила 20 правил генерации UI в GPT-5.4

OpenAI опубликовала руководство по промптингу для фронтенд-дизайнеров — набор жёстких правил, которые заставляют GPT-5.4 генерировать не типичные «SaaS-шаблоны», а визуально сильные интерфейсы. Документ вышел 20 марта 2026 года на developers.openai.com и уже разошёлся по профильным сообществам.

Проблема знакома каждому, кто пробовал генерировать UI через LLM: без детальных инструкций модель выдаёт «безопасные» макеты — карточки в сетке, фиолетовый акцент, Inter в качестве шрифта, плоский фон. Функционально работает, визуально неотличимо от тысяч других сайтов.

OpenAI решила это системно: компания опубликовала стартовый промпт с набором «жёстких правил» (hard rules) и отдельный Frontend Skill для кодинг-агента Codex.

Что нового в GPT-5.4 для фронтенда

GPT-5.4 обучали с прицелом на генерацию интерфейсов. Три главных улучшения по сравнению с предыдущими моделями:

• Работа с изображениями — модель умеет искать картинки и генерировать их инструментами прямо в процессе дизайна. Можно попросить её сначала собрать мудборд, а потом выбрать финальные ассеты.
• Функциональная полнота — приложения и сайты получаются более завершёнными. Игры и сложные интерактивные интерфейсы, которые раньше требовали десятков итераций, теперь реально получить за один-два хода.
• Computer Use и проверка результата — GPT-5.4 стала первой «основной» моделью OpenAI с поддержкой computer use. Через Playwright она может открывать сгенерированные страницы, проверять их в разных вьюпортах и чинить баги самостоятельно.

20 правил промптинга: полный список

OpenAI предлагает вставить следующие ограничения в системный промпт. Ниже полный перечень правил с нашими пояснениями.

Композиция и hero-секция

1. Одна композиция — первый экран должен читаться как единое целое, а не как дашборд (если это не дашборд).
2. Бренд на первом месте — на брендированных страницах название бренда или продукта должно быть главным сигналом, а не просто текстом в навигации.
3. Тест бренда — если первый экран может принадлежать любому другому бренду после удаления навигации, брендинг слишком слабый.
4. Full-bleed hero — на лендингах hero-изображение должно быть доминантной визуальной плоскостью от края до края. Никаких вставных картинок, боковых панелей и скруглённых карточек.
5. Бюджет hero-секции — первый экран содержит только: бренд, один заголовок, одно короткое предложение, одну группу CTA и одно доминантное изображение. Никаких статистик, расписаний, промо-блоков.
6. Без оверлеев на hero — никаких плавающих бейджей, стикеров, информационных чипов поверх hero-изображения.

Карточки и структура

7. Карточки запрещены по умолчанию — карточки допустимы только как контейнер для пользовательского взаимодействия. Если убрать рамку, тень и фон, и ничего не сломается, значит карточка не нужна.
8. Одна задача на секцию — у каждой секции один смысл, один заголовок и обычно одно поддерживающее предложение.
9. Реальный визуальный якорь — изображения должны показывать продукт, место, атмосферу или контекст. Декоративные градиенты и абстрактные фоны не считаются.
10. Убрать визуальный мусор — долой кластеры пиллов, полоски статистики, ряды иконок, промо-боксы и конкурирующие текстовые блоки.

Типографика, цвет и фон

11. Выразительная типографика — никаких дефолтных шрифтовых стеков вроде Inter, Roboto, Arial, system-ui. Шрифт должен быть продуманным выбором.
12. Нет плоским фонам — вместо однотонной заливки использовать градиенты, изображения или паттерны для создания атмосферы.
13. Продуманный выбор цвета — определить CSS-переменные, выбрать ясное визуальное направление. Никакого «фиолетового по умолчанию» и предвзятости к тёмной теме.

Анимация и интерактивность

14. Анимация для иерархии, а не для шума — минимум 2–3 целенаправленных анимации: вход в hero, эффект при скролле и hover-переход.

Технические требования

15. Адаптивность — страница должна корректно загружаться и на десктопе, и на мобильных.
16. Современные паттерны React — использовать useEffectEvent, startTransition, useDeferredValue. Не добавлять useMemo/useCallback по умолчанию.

Исключение

17. Уважение к существующей дизайн-системе — если работа идёт внутри готового сайта, сохранять установленные паттерны и визуальный язык.

Помимо стартового промпта, OpenAI опубликовала расширенный Frontend Skill для Codex — более подробный набор инструкций, который включает правила для лендингов, приложений, работы с изображениями, копирайтинга и анимаций.

Четыре практики, с которых стоит начать

Если нет времени вникать во весь документ, OpenAI советует начать с четырёх вещей:

1. Выставить низкий уровень reasoning — для простых сайтов повышенный reasoning не помогает, а мешает. Модель начинает «перемудривать». Low и medium дают более чистые результаты.
2. Задать дизайн-систему заранее — типографика, палитра, лейаут. Определить ограничения до генерации, а не после.
3. Приложить визуальные референсы — скриншоты, мудборды, примеры сайтов. Модель лучше считывает ритм лейаута, масштаб типографики и систему отступов из картинки, чем из текстового описания.
4. Продумать структуру контента — организовать страницу как историю: hero, затем поддерживающий блок, детали продукта, социальное доказательство, финальный CTA.

Frontend Skill: расширенный набор инструкций

Кроме стартового промпта, OpenAI опубликовала полноценный Frontend Skill для Codex — файл-инструкцию, который можно установить одной командой.

Skill добавляет несколько слоёв поверх базовых правил:

• Рабочая модель — перед началом работы модель обязана записать «визуальный тезис» (настроение, материал, энергия), контент-план и тезис по анимации.
• Правила для лендингов — последовательность: hero, поддержка, детали, финальный CTA. Бюджет вьюпорта: если используется sticky-хедер, он отнимает место у hero.
• Правила для приложений — «сдержанность в стиле Linear»: спокойная иерархия поверхностей, сильная типографика, мало цветов, высокая плотность информации при читаемости.
• Работа с копирайтом — для продуктовых интерфейсов: утилитарный копирайт вместо маркетингового. «Если предложение могло бы появиться в hero лендинга или рекламе — перепиши его, пока оно не зазвучит как продуктовый UI».
• Чеклист провалов — список типичных антипаттернов, которые модель должна отклонять: карточная сетка SaaS как первое впечатление, слабый бренд при сильном изображении, секции, повторяющие одну и ту же мысль.

Google Stitch: другой подход к той же задаче

Пока OpenAI учит промптить текстом, Google зашла с другой стороны. 18 марта компания обновила Stitch — инструмент для генерации интерфейсов, превратив его в полноценный AI-native canvas.

Чем Stitch отличается от подхода OpenAI:

• Визуальный холст вместо промпта — Stitch работает как бесконечное полотно, куда можно затаскивать изображения, текст и код. Ближе к Figma, чем к терминалу.
• Голосовое управление — можно разговаривать с холстом: просить критику дизайна, генерировать варианты, менять палитру голосом.
• Design-агент — отслеживает развитие проекта, ведёт несколько направлений параллельно. Плюс Agent Manager для организации работы.
• DESIGN.md — формат дизайн-системы в Markdown, удобный для агентов и экспортируемый в другие инструменты.
• MCP-сервер и SDK — Stitch может работать как инструмент для других агентов через Model Context Protocol.

OpenAI и Google решают одну задачу — сделать генерацию UI предсказуемой и качественной, но разными средствами. OpenAI ставит на текстовые ограничения и дисциплину промптов, Google — на визуальный интерфейс и мультимодальное взаимодействие.

Что это значит на практике

Prompting Playbook от OpenAI решает конкретные проблемы, с которыми сталкивается каждый, кто генерирует фронтенд через LLM. Все сайты выглядят одинаково — жёсткие ограничения ломают шаблонность. Hero-секции перегружены — бюджет вьюпорта отсекает лишнее. Карточки лезут везде — запрет по умолчанию заставляет думать, нужна ли карточка вообще. Дефолтные шрифты — явное требование выбирать типографику руками.

Playbook доступен на developers.openai.com. Frontend Skill можно установить в Codex одной командой. Google Stitch доступен в бета-версии на stitch.withgoogle.com.

Читайте также:

• GPT-5.4 от OpenAI: бенчмарки и цены
• Промпт-инжиниринг: как писать запросы к ИИ
• Cursor vs Windsurf vs Zed: ИИ-редакторы кода 2026