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