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