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