Использовать промпт
Добавьте своё задание
Добавьте контекст ниже. Он будет включён в промпт при копировании или скачивании.
Создайте исследование взаимодействия на HTML/CSS/JavaScript для [PROJECT] и [AUDIENCE] с явно заданными начальным, активным и завершенным состояниями, а также читаемым резервным вариантом для prefers-reduced-motion. Задача: появление типографики первого экрана.
Обязательные контент и структура
Представьте короткий заголовок с помощью сдержанного построчного появления.
Используйте [APPROVED_CONTENT] как источник названий, дат, числовых данных, утверждений и целевых страниц. Перечислите недостающие исходные данные, прежде чем что-либо заменять. Если нужна демонстрация, обозначьте её контент как вымышленный. Не придумывайте отзывы клиентов, рейтинги, логотипы партнёров или возможности продукта.
Направление дизайна
Используйте [BRAND_RULES] и уже выбранную в проекте дизайн-систему. Если система не задана, начните со следующего направления: белый и угольно-серый цвета с ярко-зелеными акцентами; четко обозначенные начальное, переходное и конечное состояния. Соблюдайте единообразие типографики, интервалов и цветовых ролей. Отдавайте приоритет задаче, а не декоративным элементам, и избегайте шаблонного набора несвязанных карточек.
Подготовка контента
Предоставьте короткий заголовок, заданные разрывы строк, тайминг и итоговое читаемое состояние. Оставьте слова выделяемым текстом, а не преобразуйте их в изображение.
Макет и поведение
Используйте сдержанное построчное появление, чтобы выстроить иерархию. Не задерживайте остальную страницу и не скрывайте заголовок за декоративной маской слишком долго.
Проверка критериев приёмки для задачи
- Сохраняйте текст выделяемым и полностью видимым при отключенной анимации.
- Загрузите страницу с ограниченной анимацией, выделите текст и измените размер области просмотра.
- Полный заголовок должен оставаться доступным при сбое скриптов или прерывании анимации.
Реализация и проверка
Оставьте текст редактируемым. Используйте семантическую структуру, понятные элементы управления, видимый фокус клавиатуры и подходящие состояния отсутствия данных и ошибок. Проверьте узкие и широкие макеты. Учитывайте настройку уменьшения движения. Сохраните существующие фреймворк и зависимости проекта; не заменяйте стек без предупреждения. Верните редактируемые файлы и опишите любое неполное поведение или неподдерживаемые исходные данные. Проверьте именно эту задачу, прежде чем предлагать дополнительные функции.
Сделайте всю информацию и действия доступными без анимации. Где уместно, предусмотрите приостановку или закрытие. Задокументируйте триггеры и переходы; не заменяйте фактический прогресс декоративным таймером.
Референс и цель воссоздания
Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии.
Композиция и контент референса
Используйте приложенный файл reference.webp как визуальный референс для появления типографики первого экрана. Перед началом работы определите основные области сверху вниз, их относительную ширину и высоту, выравнивание, интервалы, типографическую иерархию, цвета поверхностей, границы, изображения и повторяющиеся компоненты. Сохраните эти соотношения, не заменяя их типовым шаблоном. Обязательное содержание задачи: представьте короткий заголовок с помощью сдержанного построчного появления. При переносе изображения в редактируемые элементы следуйте этим указаниям по компоновке: используйте сдержанное построчное появление, чтобы выстроить иерархию. Не задерживайте остальную страницу и не скрывайте заголовок за декоративной маской слишком долго.
Визуальное направление из примера проекта
Белый и угольно-серый цвета с ярко-зелеными акцентами; четко обозначенные начальное, переходное и конечное состояния.
Спецификация взаимодействия
Референс — это статическая концепция: описанное ниже поведение необходимо реализовать, но изображение не доказывает, что оно уже работает. Скопируйте адаптированный промпт в рабочий проект. Начните с основной задачи: представьте короткий заголовок с помощью сдержанного построчного появления. Сохраняйте текст выделяемым и полностью видимым при отключенной анимации. Для каждого видимого элемента управления укажите условие срабатывания, затрагиваемое состояние и обратную связь; реализуйте локальные изменения с согласованным состоянием во всех связанных представлениях. Обеспечьте реальные результаты для поиска и фильтров, явно выраженное активное состояние элементов выбора, а для действий сохранения — видимую обратную связь о выполнении, успехе или ошибке, где это уместно. Не добавляйте несвязанные рабочие процессы. Используйте ссылки для навигации, кнопки для действий и доступные названия для элементов управления с иконками. Не создавайте впечатление, что серверная операция выполнена успешно, если изменилось только локальное демо.
Визуальное сравнение и передача результата
- Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента.
- Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей.
- Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.
Скачать промпт и изображение
Содержит полный промпт и полноразмерное референсное изображение. Добавьте оба файла в OpenDesign, чтобы задать направление макета.
Как составить дизайн-промпт появления типографики первого экрана
Используйте этот дизайн-промпт появления типографики первого экрана, чтобы представить короткий заголовок с помощью сдержанного построчного появления.
Референс — концепция, созданная ИИ. Приведённые ниже инструкции описывают, что нужно создать и протестировать; изображение не демонстрирует работающее поведение.
Сохраните заголовок при добавлении движения
Появление заголовка должно расставлять акценты, не задерживая восприятие.
Если скрывать все строки до завершения анимации, первый экран будет зависеть от тайминга и настроек движения. Используйте сдержанное построчное появление, чтобы выстроить иерархию. Не задерживайте остальную страницу и не скрывайте заголовок за декоративной маской слишком долго.
Из промпта
Используйте сдержанное построчное появление, чтобы выстроить иерархию.
Настройте под себя
Показывайте [APPROVED_HEADLINE] строка за строкой с заданными длительностью и задержкой. Сохраняйте итоговые разрывы строк стабильными и сразу отображайте полный заголовок, если запрошено ограничение анимации.
Подготовьте содержимое для появления типографики первого экрана
Активный кадр показывает только часть заголовка поверх той же архитектурной сцены. Задайте последовательность появления, сохраняя размеры макета неизменными на протяжении всей анимации.
Предоставьте короткий заголовок, заданные разрывы строк, тайминг и итоговое читаемое состояние. Оставьте слова выделяемым текстом, а не преобразуйте их в изображение.
Из промпта
Представьте короткий заголовок с помощью сдержанного построчного появления.
Настройте под себя
Для [PROJECT] используйте [APPROVED_CONTENT] как источник материалов для появления типографики первого экрана. Предоставьте короткий заголовок, заданные разрывы строк, тайминг и итоговое читаемое состояние. Оставьте слова выделяемым текстом, а не преобразуйте их в изображение. Определите недостающие исходные данные, прежде чем заменять их демонстрационным содержимым.
Просмотрите первый экран без анимации
В финальном кадре представлен весь заголовок с выделенной зелёной фразой. Убедитесь, что полное сообщение остаётся доступным при отключённой анимации и представляет собой редактируемый текст, а не часть изображения.
Отключите анимацию и убедитесь, что тот же заголовок и действие остаются доступными. Избегайте дублирующихся текстовых слоев, из-за которых вспомогательные технологии могут прочитать сообщение дважды. Загрузите страницу с ограниченной анимацией, выделите текст и измените размер области просмотра. Полный заголовок должен оставаться доступным при сбое скриптов или прерывании анимации.
Из промпта
Сохраняйте текст выделяемым и полностью видимым при отключенной анимации.
Настройте под себя
Проверьте появление типографики первого экрана на соответствие этому требованию: сохраняйте текст выделяемым и полностью видимым при отключенной анимации. Загрузите страницу с ограниченной анимацией, выделите текст и измените размер области просмотра. Полный заголовок должен оставаться доступным при сбое скриптов или прерывании анимации. Сохраните утвержденные материалы и измените только те части, которые не проходят эту проверку.
Проверьте результат появления типографики первого экрана
Предпросмотр представляет собой статичную раскадровку. Он не демонстрирует работающую анимацию, измеренную производительность или доступность. Протестируйте реализованное взаимодействие и режим уменьшения движения.
- Загрузите страницу с ограниченной анимацией, выделите текст и измените размер области просмотра. Полный заголовок должен оставаться доступным при сбое скриптов или прерывании анимации.
Уточняющий промпт
Используйте это после получения первого результата. Так доработка будет сосредоточена на самой важной части задачи.
Доработайте текущее появление типографики первого экрана. Загрузите страницу с ограниченной анимацией, выделите текст и измените размер области просмотра. Полный заголовок должен оставаться доступным при сбое скриптов или прерывании анимации. Сохраните утвержденные материалы и визуальное направление; измените только то, что необходимо для устранения этих проблем.
