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