frontend-app-builder

Этот официальный навык OpenAI предназначен для новых frontend-приложений, dashboard, игр, creative websites, hero-секций и визуально насыщенных интерфейсов, а также для явного redesign, restyle или modernization. Его задача — связать концепцию, реализацию и browser QA в один workflow. Навык начинает работу с роли senior front-end designer, затем переводит принятую визуальную спецификацию в код. Он не рассчитан на декоративную оболочку вокруг незавершённого продукта: основным результатом должна быть рабочая поверхность с понятной структурой, реальными элементами интерфейса и проверенными состояниями. Главный стандарт требует сначала создать достаточно полный визуальный концепт через Image Gen, если пользователь не отказался от этого шага и если речь не идёт о небольшой правке существующей дизайн-системы. Для полной страницы, приложения, dashboard или игры нужно показать всю запрошенную поверхность: downstream-секции, состояния и responsive continuation, а не только hero. Для длинного сайта источник рекомендует отдельный крупный читаемый скриншот на каждый важный раздел; если текст, кнопки, анатомия карточек, типографика, отступы или цвета неразборчивы, следует сделать новый detail-концепт, а не растягивать маленький общий снимок. В Plan mode сначала создаётся дизайн, затем запрашивается одобрение пользователя, и только принятый концепт становится спецификацией реализации. До coding нужно зафиксировать видимую копию, порядок секций, CTA, proof points, first viewport, responsive-переходы, роли изображений, правила контейнеров, токены цвета, типографику, иконки, варианты компонентов и обязательный core workflow. Для сложных app UI отдельно описываются app shell, навигация, feature-регионы, таблицы, графики, формы и границы responsive-layout. Это защищает от случайного добавления неподтверждённых carousel, pricing blocks, dashboard panels или card grids. Hero не следует перегружать fake metrics, чипами и competing panels; eyebrow, kicker, pretitle, badge или pill над главным заголовком запрещены по умолчанию, если их не запросили и их нет в принятом референсе. Реализация должна точно следовать утверждённому концепту по копии, иерархии, плотности, палитре, градиентам, типографике, spacing, radii, контейнерам, media treatment и порядку секций. Интерфейсный текст, кнопки, формы, таблицы, controls и labels остаются code-native: статичный screenshot не заменяет UI. Нужны настоящие состояния, работающие фильтры, вкладки, редактирование, создание, playback или simulated output там, где этого требует сценарий. Иконки берутся из существующего набора или делаются как аккуратные SVG, а motion должен помогать задаче и учитывать prefers-reduced-motion. Центральные брендовые и фоновые изображения не следует подменять rough CSS drawings, generic gradients или placeholder SVG. QA начинается в Browser или встроенном Browser/IAB; Playwright Chromium используется только если этот путь недоступен или ненадёжен. Проверяются desktop и mobile-sized viewport, первый экран, scroll и core workflow. Затем нужно сопоставить принятую концепцию с последним browser screenshot через view_image, причём сравниваются как минимум copy, layout, typography, palette, asset treatment, spacing/container model и responsive behavior. Отдельный above-the-fold copy diff выявляет добавленный или переставленный текст. Нельзя завершать работу при clipped content, accidental wrapping, mobile overflow, unreadable text, generic assets, browser-default control typography, неработающих controls или визуальном дрейфе. Таким образом, навык задаёт не только стиль, но и строгий цикл concept → implementation → browser verification → visual correction до уровня agency sign-off.