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

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

Продемонстрируйте токены, типографическую шкалу, компоненты и примеры макетов из существующей дизайн-системы.

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

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

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

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

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

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

Перейдите от основ к компонентам, а затем к собранному экрану. Покажите, как один и тот же токен влияет на несколько компонентов, вместо набора несвязанных образцов цветов.

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

- Сохраните предоставленные названия токенов и отделите примеры от экспортируемых компонентов.
- Сопоставьте названия и значения с предоставленным источником.
- Проверьте длинные подписи, состояния фокуса и отключённые элементы управления; визуальный пример не следует представлять как экспортированную библиотеку компонентов.

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

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

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

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

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

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

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

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

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

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

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

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