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