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