Дизайн-промпт главной страницы редакционного журнала

Создайте адаптивный HTML-сайт с использованием существующего стека проекта для [PROJECT] и [AUDIENCE]. Задача: главная страница редакционного журнала.

Обязательные контент и структура

Создайте главный материал, тематические разделы, подписи авторов и сбалансированную сетку статей.

Используйте [APPROVED_CONTENT] как источник названий, дат, числовых данных, утверждений и целевых страниц. Перечислите недостающие исходные данные, прежде чем что-либо заменять. Если нужна демонстрация, обозначьте её контент как вымышленный. Не придумывайте отзывы клиентов, рейтинги, логотипы партнёров или возможности продукта.

Направление дизайна

Используйте [BRAND_RULES] и уже выбранную для проекта дизайн-систему. Если система не предоставлена, придерживайтесь следующего направления: выразительная чёрная типографика, тёплые жёлтые панели и чёткие геометрические композиции; контролируемый контраст. Обеспечьте единообразие шрифтов, интервалов и цветовых ролей. Отдавайте приоритет задаче, а не декоративным элементам, и избегайте шаблонного набора не связанных между собой карточек.

Подготовка контента

Выберите главный материал и соберите заголовки статей, имена авторов, темы, даты, изображения и краткие описания. Определите, какие повторные появления являются намеренным перекрёстным продвижением, а какие — дублирующими записями.

Макет и поведение

Создайте выразительный главный материал, за которым следуют тематические группы с единообразным оформлением авторства и удобными для чтения аннотациями. Варьируйте масштаб изображений, чтобы обозначить приоритеты, сохраняя понятный порядок чтения статей.

Проверка критериев приёмки для задачи

• Не представляйте одну и ту же статью как несколько не связанных между собой материалов.
• Проверьте длинные заголовки и материалы без изображений.
• Читатель не должен принимать несколько размещений одной статьи за разные материалы, а порядок на мобильных устройствах должен сохранять редакционные приоритеты.

Реализация и проверка

Оставьте текст редактируемым. Используйте семантическую структуру, понятные элементы управления, видимый фокус клавиатуры и подходящие состояния отсутствия данных и ошибок. Проверьте узкие и широкие макеты. Учитывайте настройку уменьшения движения. Сохраните существующие фреймворк и зависимости проекта; не заменяйте стек без предупреждения. Верните редактируемые файлы и опишите любое неполное поведение или неподдерживаемые исходные данные. Проверьте именно эту задачу, прежде чем предлагать дополнительные функции.

Референс и цель воссоздания

Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии.

Композиция и контент референса

Используйте приложенный файл reference.webp как визуальный ориентир для главной страницы редакционного журнала. Перед началом работы определите основные области сверху вниз, их относительную ширину и высоту, выравнивание, интервалы, типографическую иерархию, цвета поверхностей, границы, изображения и повторяющиеся компоненты. Сохраните эти взаимосвязи, а не заменяйте их универсальным шаблоном. Обязательное содержание задачи: создайте главный материал, тематические разделы, указания авторства и сбалансированную сетку статей. При преобразовании изображения в редактируемые элементы следуйте этим рекомендациям по компоновке: создайте выразительный главный материал, за которым следуют тематические группы с единообразным оформлением авторства и удобными для чтения аннотациями. Варьируйте масштаб изображений, чтобы обозначить приоритеты, сохраняя понятный порядок чтения статей.

Визуальное направление из примера проекта

выразительная чёрная типографика, тёплые жёлтые панели и чёткие геометрические композиции; контролируемый контраст.

Спецификация взаимодействия

Референс представляет собой статичную концепцию: описанное ниже поведение необходимо реализовать, но изображение не подтверждает, что оно уже работает. Скопируйте адаптированный промпт в свой рабочий проект. Начните с основной задачи: создайте главный материал, тематические разделы, указания авторства и сбалансированную сетку статей. Не представляйте одну и ту же статью как несколько не связанных между собой материалов. Для каждого видимого элемента управления укажите событие активации, затрагиваемое состояние и обратную связь; реализуйте локальные изменения с согласованным состоянием во связанных представлениях. Обеспечьте реальные результаты поиска и фильтрации, явно обозначайте активное состояние элементов выбора, а для действий сохранения при необходимости показывайте состояния ожидания, успеха и ошибки. Не добавляйте несвязанные сценарии. Используйте ссылки для навигации, кнопки для действий и доступные названия для элементов управления со значками. Не создавайте впечатление, что серверная операция завершилась успешно, если изменились только данные локальной демонстрации.

Визуальное сравнение и передача результата

1. Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента.
2. Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей.
3. Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.