Если вы собираете интерфейсы, делаете пет-проекты или просто любите навайбкодить что-то в браузере, то это прям кайф. Говорю из личного опыта и боли от кривой верстки, которую иногда выдают модели без нормального контекста.
Короче, забираем в закладки:
https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4
А ниже — мой конспект главных правил оттуда. Чтобы не читать всё целиком, а сразу применять.
---
Что нового в GPT-5.4 для фронта
Три конкретных улучшения, которые меняют процесс:
- **Понимание картинок.** Модель умеет работать с изображениями на всех этапах: от мудборда до финального результата. Можно попросить сгенерить варианты визуалов, выбрать лучший и вставить.
- **Завершённость.** Раньше модель часто бросала на полпути. Теперь выдает более цельные приложения за 1–2 итерации.
- **Самопроверка.** GPT-5.4 — первая модель, обученная на computer use. Умеет запускать Playwright, смотреть на результат и фиксить баги самостоятельно.
---
4 главных правила (Quick Start)
Если взять из гайда только четыре вещи:
1. Начинай с низкого reasoning. Для простых сайтов «меньше думать» = лучший результат. Модель не переусложняет.
2. Опиши дизайн-систему заранее. Типографика, палитра, лейаут — всё до первого промпта.
3. Дай визуальную референсию. Скриншот, мудборд, скетч — что угодно. Модель считывает ритм, масштаб и стиль.
4. Задай нарратив. Не «сделай лендинг», а «расскажи историю: герой → доказательство → CTA».
---
Hard Rules: жёсткие ограничения
Эти правила OpenAI рекомендует вставлять в системный промпт:
- **Один экран = одна композиция.** Первый viewport должен читаться как постер, а не как дашборд.
- **Бренд — главный элемент.** Если убрать навигацию и первый экран можно спутать с другим брендом — иерархия слабая.
- **Типографика — не Inter.** Используй выразительные шрифты. Избегай дефолтных стеков (Inter, Roboto, Arial, system).
- **Фон — не плоский цвет.** Градиенты, паттерны, изображения — всё лучше, чем однотонная заливка.
- **Hero на всю ширину.** Полноэкранное изображение по умолчанию. Не inset, не side-panel, не rounded card.
- **Бюджет hero:** бренд + один заголовок + одно предложение + одна CTA + одна картинка. Всё. Никаких статистик, расписаний, промо-блоков.
- **Нет карточек по умолчанию.** Карточки только если они — контейнер для интерактива. Если убрать border, shadow и radius и ничего не потеряется — это не карточка.
- **Одна задача на секцию.** Один заголовок, одно поддерживающее предложение, один смысл.
- **Не больше двух шрифтов.** Не больше одного акцентного цвета.
- **Никакого фиолетового по умолчанию.** Никакого purple-on-white и dark mode bias.
---
Структура лендинга
OpenAI предлагает думать о странице как о нарративе:
1. Hero — идентичность и обещание
2. Support — одна конкретная фича, оффер или proof point
3. Detail — атмосфера, workflow, глубина продукта
4. Final CTA — конверсия
Правило проверки: если убрать картинку из hero и страница по-прежнему работает — картинка слишком слабая.
---
Анимации: 2–3 осмысленных движения
Не шум, а иерархия:
- **Одна входная анимация** в hero
- **Один scroll-эффект** (sticky, parallax, fade)
- **Один hover/reveal** для усиления affordance
Правила: заметно в быстрой записи экрана, плавно на мобиле, быстро, сдержанно, консистентно. Если анимация декоративная — удалить.
---
Копирайтинг в UI
- Пиши языком продукта, а не дизайн-комментарием.
- Заголовок несёт смысл. Подзаголовок — одно короткое предложение.
- Если удалить 30% текста и страница станет лучше — продолжай удалять.
- Для дашбордов и приложений: никаких hero-секций и маркетинговых лозунгов. Только статус, действие, ориентация.
---
Чеклист перед отправкой
- Бренд узнаваем с первого экрана?
- Есть сильный визуальный якорь?
- Страницу можно понять, прочитав только заголовки?
- У каждой секции одна задача?
- Карточки действительно нужны?
- Анимация улучшает иерархию?
- Дизайн останется премиальным, если убрать все декоративные тени?
---
🛠 Open-source скилл: генератор дизайн-брифа
На основе этого гайда я собрал open-source скилл, который генерит дизайн-бриф по правилам OpenAI — с токенами, типографикой, анти-паттернами и структурой. Задаёт 4 вопроса, выдаёт готовый промпт на 100+ строк (design.md).
Копипастишь в Lovable (Stitch, v0 и пр) → получаешь не шаблон, а дизайн.
Ещё буду докручивать. Но уже можно тестить.