Заповеди хорошего UI от OpenAI

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

Интересно то, что вместе с галереей работ компания явно пытается занять место среди решений для веб-разработчиков и дизайнеров. LLM — новая Тильда.

Ссылка тут https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4

🎨 Без референсов — одинаковый мусор

OpenAI прямо пишут: если промпт размытый, модель скатывается в «типовые паттерны из обучающих данных». Слабая иерархия, безликая структура, блоки карточки.

💡 Проблема AI-интерфейсов не в том, что модель «не умеет верстать». А в том, что ей дали слабое художественное ТЗ.

Писал ранее где искать референсы для лендосов: @countwithsasha444

🖼 Сначала мудборд, потом код

Просить сразу «сделай лендинг» — слабая практика. Новый порядок: модель генерирует визуальные варианты, вы выбираете направление, потом — реализация.

Пайплайн: мудборд - направление - референс дизайна - генерация экрана - проверка в браузере.

Вот мудборды раньше не делал, а идея хорошая. Вместо готового экрана, делаем много с правом на ошибку, выбираем один.

🧠 Меньше ризонинг эффорт = красивее

Самый контринтуитивный совет: для фронтенда низкий уровень рассуждений часто даёт лучший результат. Модель не передумывает, не переусложняет, делает проще — выходит чище.

Высокие рассуждения хороши для логики. Для визуала — путь к переусложнению.

🤔 Лично у меня так не работает, низкий эффорт приводит только к боле быстрому результату. Качество проработки хуже.

🚫 Что запрещать модели явно

OpenAI собрали анти-паттерны, которые модели лепят по умолчанию, я отмечу пару которые мне кажутся релеватными:

🔸 Шрифты Inter/Roboto/Arial — выбирать выразительную типографику. Вот это прям пунктик и я всем вайбкодерам советую подобрать свои любимые наборы шрифтов. Мне нравятся Unbounded, RF Dewi, кстати иногда Inter.
🔸 Первый экран забит статистикой и промо — оставить бренд, заголовок, одну кнопку. Минимализм на первом экране всегда хорошо. К слову модели от Гугла это как будто знают из коробки.
🔸 Фиолетовый на белом — дефолтная палитра, от которой пора уходить. Это как Lovable что ли?

📐 Ограничения до генерации, а не после

Один H1, максимум 6 секций, два шрифта, один акцентный цвет, один призыв к действию. Чем жёстче рамки — тем точнее результат.

По сути OpenAI описали в материале набор правил, превращающий генерацию из лотереи в управляемый процесс. Даже опубликовали промпты, которые можно забрать и собрать скиллы.

Если занимаетесь веб-разработкой, расскажите, уже начали использовать ИИ для полной генерации лендингов/сайтов от прототипа до релиза? Лично мне очень понравился интернет магазин из референсов:

----

Поляков считает — AI, код и кейсы