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