Промптинг UI в GPT-5.4: как применять руководство OpenAI

OpenAI 20 марта 2026 года опубликовала руководство Designing delightful frontends with GPT-5.4. Его легко пересказать как список запретов: не ставьте hero в карточку, не делайте всё фиолетовым, не лепите бейджи поверх обложки. Для разработчика важнее другое: OpenAI показала, как переводить вкус, композицию и визуальную дисциплину в проверяемые инструкции для модели.

По состоянию на 6 мая 2026 года этот материал уже нельзя читать как общий обзор линейки OpenAI. В актуальном каталоге моделей OpenAI советует начинать самые сложные задачи с GPT-5.5, а GPT-5.4 описывает как более доступную модель для кодовых и профессиональных задач. Поэтому ценность страницы теперь не в ответе на вопрос «какую модель выбрать», а в более узком наборе правил для UI: как заставить LLM строить интерфейс не как шаблонный SaaS, а как продукт с композицией, реальным контекстом и обязательной проверкой в браузере.

Это и есть фокус второго прохода: не общий обзор промптинга и не ревью GPT-5.4 вообще, а практический разбор фронтенд-руководства OpenAI, где важны визуальные ограничения, структура секций, мудборд, выбранный уровень reasoning и связка с инструментами проверки.

Где проходит граница этой страницы

Коротко: что изменилось

Почему старый промпт даёт одинаковые сайты

Если написать модели «сделай современный лендинг», она обычно выбирает самый безопасный путь: сетка карточек, крупный hero, абстрактный градиент, несколько плашек со статистикой, стандартный шрифт и фиолетовый акцент. Такой результат может быть рабочим, но он плохо проходит проверку на узнаваемость: замените название продукта, и первый экран подойдёт почти любому SaaS.

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

Для редактора или продакта это важный сдвиг. Хороший промпт для UI теперь похож не на вдохновляющую брифовку, а на короткий арт-дирекшн с критериями отказа: что считать провалом, какие элементы запрещены по умолчанию и когда можно нарушать правило.

Что забрать из руководства OpenAI

В официальном тексте есть быстрый старт, набор «hard rules», техники для дизайна и отдельный Frontend Skill для Codex. Называть это ровно «20 правилами» неаккуратно: OpenAI не оформляет документ как финальную нумерованную двадцатку. Практичнее сгруппировать рекомендации по проблемам, которые они решают.

1. Первый экран должен быть композицией, а не складом блоков

Для лендинга OpenAI предлагает жёсткий бюджет hero-секции: бренд или продукт, один заголовок, короткая поддерживающая фраза, группа действий и один доминирующий визуальный образ. Статистика, расписание, промо-плашки и второстепенные карточки должны переехать ниже.

Смысл не в минимализме ради минимализма. Первый экран отвечает за распознавание: кто говорит, что обещает и почему это выглядит иначе, чем соседний сайт. Если модель тратит первый экран на пять равноправных блоков, она снимает напряжение, но убивает иерархию.

2. Карточки не должны быть дефолтом

Самая полезная мысль руководства: карточка нужна, когда она помогает взаимодействию или пониманию. Если рамку, фон, тень и скругление можно убрать без потери смысла, это не карточка, а визуальная привычка.

Для LLM это особенно важно. Карточная сетка остаётся удобным универсальным ответом, поэтому модель использует её слишком часто. В промпте лучше явно написать: «По умолчанию используй секции, колонки, списки и разделители; карточки только для интерактивных объектов или повторяемых сущностей».

3. Изображения должны быть носителями смысла

OpenAI предлагает просить модель опираться на визуальные референсы: скриншоты, мудборд, продуктовые фотографии, материалы бренда. Референс задаёт ритм, масштаб, плотность, типографику и настроение лучше, чем длинное текстовое описание.

4. Reasoning надо подбирать под задачу

В статье OpenAI есть контринтуитивная рекомендация: для простых сайтов начинать с низкого уровня reasoning. Логика здесь практическая: для визуально ясной задачи лишний анализ может привести к перегруженной структуре. Модель добавляет слои, объяснения, альтернативные сценарии и сложные паттерны там, где нужен один сильный экран.

Практическое правило такое: low или medium для лендинга, промо-страницы и простого интерфейса; high для сложной логики, множества состояний, проверки доступности, адаптивности с нетривиальными сценариями или интеграции в существующую дизайн-систему.

5. Проверка в браузере входит в промпт

OpenAI отдельно выделяет computer use и Playwright: модель должна открыть страницу, проверить разные размеры экрана, пройти ключевой пользовательский сценарий, найти наложения текста и сломанные состояния. Если этого нет в задании, генерация UI остаётся «картинкой в ответе», а не инженерной работой.

Матрица: как чинить типичные провалы UI

Мини-шаблон промпта для фронтенда

Ниже не перевод официального промпта OpenAI, а рабочая адаптация под русскоязычную команду. Её можно вставлять в системную инструкцию для задачи, где модель генерирует лендинг, приложение или прототип.

Задача: сделать интерфейс, который выглядит как осознанный продукт, а не как шаблон.

Перед версткой зафиксируй:
- визуальную гипотезу: настроение, материал, энергия;
- структуру: hero, поддерживающий блок, детали, финальное действие;
- ограничения дизайн-системы: шрифты, палитра, сетка, отступы, состояния.

Правила:
- первый экран должен быть одной композицией;
- бренд или продукт должен считываться без навигации;
- карточки запрещены по умолчанию, кроме интерактивных или повторяемых объектов;
- hero не содержит статистику, бейджи, промо-плашки и вторичные блоки;
- изображения должны показывать продукт, контекст или атмосферу, а не быть абстрактной заливкой;
- каждая секция отвечает за одну мысль;
- не используй Inter/Roboto/system-ui и фиолетовый акцент как дефолтный выбор;
- проверь desktop и mobile, исправь наложения текста и переполнение.

Если работа идёт внутри существующей дизайн-системы, её правила важнее этих дефолтов.

Где не надо копировать OpenAI буквально

Есть риск превратить руководство в новый шаблон. Если каждый промпт будет запрещать карточки, требовать full-bleed hero и бороться с Inter, через месяц мы получим другой набор одинаковых сайтов. Правила OpenAI полезны как антидот к частым провалам, но они не заменяют дизайн-контекст и не отменяют базовый промпт-инжиниринг.

Для внутренних инструментов, CRM, аналитических панелей и админок hero вообще не нужен. Там важны плотность, предсказуемая навигация, состояния таблиц, фильтры, пустые состояния и быстрые действия. Для медиа, портфолио, игр и промо-страниц, наоборот, визуальный якорь и композиция могут быть главной частью задачи.

Поэтому правильный порядок такой: сначала тип интерфейса и пользовательский сценарий, потом правила композиции. Не наоборот.

Google Stitch: та же проблема, другой интерфейс

Google 18 марта 2026 года представила обновлённый Stitch как AI-native software design canvas. В официальном блоге Google описывает бесконечный холст, дизайн-агента, голосовое управление, интерактивные прототипы, формат DESIGN.md и связку с инструментами разработки через MCP Server и SDK.

Разница между подходами заметна. OpenAI делает ставку на текстовые ограничения, skill-файлы и проверку результата инструментами. Google переносит большую часть работы в визуальную среду: пользователь говорит с холстом, агент помнит развитие проекта, а дизайн-система может экспортироваться в текстовый файл для дальнейшей разработки. Если вашей команде важнее именно инженерный рабочий контур вокруг LLM, полезнее держать рядом и более широкий материал про ИИ для разработчиков.

Практический вывод

Руководство OpenAI полезно не потому, что даёт универсальный «красивый промпт». Оно показывает, как формализовать вкус: задать пределы первому экрану, запретить слабые дефолты, потребовать реальные изображения, вынести дизайн-систему в явные токены и сделать браузерную проверку обязательной частью работы.

Если вы генерируете интерфейсы через LLM, начните не с полного копирования Frontend Skill, а с трёх вещей: опишите тип продукта и пользовательский сценарий, приложите визуальный референс, добавьте 5–7 запретов против конкретных провалов вашей команды. После этого проверяйте результат как обычный фронтенд: mobile, desktop, состояния, клики, переполнение текста и доступность.

В этом смысле GPT-5.4, Codex и Stitch сходятся в одном: дизайн с ИИ перестаёт быть одноразовым запросом. Это управляемый цикл, где промпт, визуальные референсы, дизайн-система и проверка в браузере важны не меньше самой модели.

Источники и дата проверки

Факты перепроверены 6 мая 2026 года по официальным источникам: OpenAI Developers: Designing delightful frontends with GPT-5.4, OpenAI API: Models, OpenAI API: GPT-5.4 model, OpenAI API: Prompting, Google Blog: Introducing vibe design with Stitch.

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

• Промпт-инжиниринг: как писать запросы к ИИ
• Системные промпты: продвинутый гайд
• Как выбрать языковую модель
• ИИ для разработчиков