Создание адаптивного фронтенда по скриншотам с помощью Codex
Описание промпта
Преобразуйте скриншоты и визуальные референсы в адаптивный интерфейс с визуальной проверкой результата.
Codex можно использовать для того, чтобы превратить скриншоты, дизайн-описания и референсы в рабочий код, который соответствует дизайн-системе текущего проекта. После этого через Playwright можно открыть страницу в браузере, сравнить результат с эталоном на разных разрешениях и при необходимости доработать вёрстку и поведение интерфейса.
Инструкция по использованию промпта
Какие инструменты использовать
Playwright
Нужен для того, чтобы Codex мог открыть приложение в реальном браузере, проверить, как выглядит интерфейс, и при необходимости скорректировать реализацию. Это особенно полезно, когда одной только генерации кода недостаточно и нужно визуально сверять результат с референсом.
Если у вас есть скриншоты, короткое описание дизайна или несколько удачных референсов, Codex может собрать по ним адаптивный интерфейс, не игнорируя уже существующие правила проекта.
Если подключён Playwright, Codex может открыть приложение в реальном браузере, сравнить реализацию с вашими скриншотами на разных размерах экрана и затем скорректировать вёрстку или поведение элементов, чтобы результат стал ближе к целевому.
Playwright
Нужен для того, чтобы Codex мог открыть приложение в реальном браузере, проверить, как выглядит интерфейс, и при необходимости скорректировать реализацию. Это особенно полезно, когда одной только генерации кода недостаточно и нужно визуально сверять результат с референсом.
Если у вас есть скриншоты, короткое описание дизайна или несколько удачных референсов, Codex может собрать по ним адаптивный интерфейс, не игнорируя уже существующие правила проекта.
Если подключён Playwright, Codex может открыть приложение в реальном браузере, сравнить реализацию с вашими скриншотами на разных размерах экрана и затем скорректировать вёрстку или поведение элементов, чтобы результат стал ближе к целевому.
Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.
Текст промпта
ChatGPT
Войти для копирования
Реализуй этот интерфейс в текущем проекте, используя предоставленные мной скриншоты и заметки как основной источник истины.
Требования:
Используй существующие компоненты и токены дизайн-системы проекта.
Переводи интерфейс со скриншотов в паттерны, утилиты и компоненты этого репозитория, не создавая параллельную систему.
Максимально точно воспроизведи отступы, компоновку, визуальную иерархию и адаптивное поведение.
Соблюдай принятую в проекте архитектуру маршрутизации, управления состоянием и загрузки данных.
Сделай страницу адаптивной для десктопа и мобильных устройств.
Если какая-то деталь на скриншоте неоднозначна, выбери самое простое решение, которое не ломает общий замысел, и кратко зафиксируй это допущение.
Проверка результата:
Сравни итоговый интерфейс с предоставленными скриншотами как по внешнему виду, так и по поведению.
Используй Playwright для визуальной проверки и при необходимости дорабатывай реализацию, пока результат не станет максимально близким к референсу.Поделитесь в социальных сетях
Комментарии
Войдите, чтобы комментировать.
Комментариев пока нет.