Использовать промпт
Добавьте своё задание
Добавьте контекст ниже. Он будет включён в промпт при копировании или скачивании.
Создайте редактируемую композицию HTML/CSS с выделяемым текстом и таблицей стилей для печати; используйте любую растровую иллюстрацию как отдельный локальный ресурс для [PROJECT] и [AUDIENCE]. Задача: обложка редакционной статьи.
Обязательные контент и структура
Передайте основной конфликт статьи с помощью оригинального сдержанного визуального образа, оставив место для заголовка.
Используйте [APPROVED_CONTENT] как источник названий, дат, числовых данных, утверждений и целевых страниц. Перечислите недостающие исходные данные, прежде чем что-либо заменять. Если нужна демонстрация, обозначьте её контент как вымышленный. Не придумывайте отзывы клиентов, рейтинги, логотипы партнёров или возможности продукта.
Направление дизайна
Используйте [BRAND_RULES] и уже выбранную в проекте дизайн-систему. Если система не предоставлена, начните со следующего направления: кремовый, угольно-серый и оливково-зеленый цвета; асимметричная редакционная иерархия с большим количеством свободного пространства. Сохраняйте единообразие типографики, интервалов и ролей цветов. Отдавайте приоритет задаче, а не декоративным элементам, и избегайте универсальной подборки несвязанных карточек.
Подготовка контента
Прочитайте основную аргументацию статьи и определите её главный конфликт. Предоставьте точный заголовок, предполагаемое кадрирование и все ограничения бренда или издания.
Макет и поведение
Выберите одну визуальную метафору, которая поддерживает аргументацию. Намеренно оставьте место для заголовка вместо того, чтобы объединять в иллюстрации все ключевые слова.
Проверка критериев приёмки для задачи
- Избегайте буквального коллажа из всех ключевых слов и сохраняйте уместность метафоры.
- Посмотрите на обложку без статьи и проверьте, отражает ли она нужную тему.
- Протестируйте расположение заголовка и масштаб миниатюры; сложность декоративных элементов не должна затруднять восприятие редакционной идеи.
Реализация и проверка
Оставьте текст редактируемым. Используйте семантическую структуру, понятные элементы управления, видимый фокус клавиатуры и подходящие состояния отсутствия данных и ошибок. Проверьте узкие и широкие макеты. Учитывайте настройку уменьшения движения. Сохраните существующие фреймворк и зависимости проекта; не заменяйте стек без предупреждения. Верните редактируемые файлы и опишите любое неполное поведение или неподдерживаемые исходные данные. Проверьте именно эту задачу, прежде чем предлагать дополнительные функции.
Сохраните точный текст и обязательные сведения в виде редактируемого текста. Если требуемые размеры не указаны, запросите их. Не создавайте вымышленные работающие QR-коды, штрихкоды, подписи или официальные печати.
Референс и цель воссоздания
Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии.
Композиция и контент референса
Используйте прикреплённый файл reference.webp как визуальный референс для обложки редакционной статьи. Перед началом работы определите основные области сверху вниз, их относительные ширину и высоту, выравнивание, интервалы, типографическую иерархию, цвета поверхностей, границы, изображения и повторяющиеся компоненты. Сохраните эти соотношения, а не заменяйте их универсальным шаблоном. Обязательное содержание задачи: преобразуйте главное противоречие статьи в оригинальный сдержанный визуальный образ, оставив место для заголовка. При преобразовании изображения в редактируемые элементы используйте следующие указания по макету: выберите одну визуальную метафору, которая поддерживает аргументацию. Намеренно оставьте место для заголовка вместо того, чтобы объединять в иллюстрации все ключевые слова.
Визуальное направление из примера проекта
кремовый, угольно-серый и оливково-зеленый цвета; асимметричная редакционная иерархия с большим количеством свободного пространства.
Результат и редактируемость
Воссоздайте готовую графику в виде редактируемых слоёв текста, фигур и изображений. Референс представляет собой композицию, а не интерфейс редактора; не добавляйте отсутствующие в нём навигацию, формы или виджеты панели управления. Выберите одну визуальную метафору, которая поддерживает аргументацию. Намеренно оставьте место для заголовка вместо того, чтобы объединять в иллюстрации все ключевые слова. Уточните требуемые размеры и сохраните текстовую иерархию при адаптации изображения. Избегайте буквального коллажа из всех ключевых слов и сохраняйте уместность метафоры.
Визуальное сравнение и передача результата
- Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента.
- Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей.
- Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.
Скачать промпт и изображение
Содержит полный промпт и полноразмерное референсное изображение. Добавьте оба файла в OpenDesign, чтобы задать направление макета.
Как написать дизайн-промпт для обложки редакционной статьи
Полезный дизайн-промпт для обложки редакционной статьи описывает аргументацию, композицию и порядок восприятия, а не только настроение. В этом примере крупный заголовок с засечками сочетается с городским пейзажем в круге и тёмным каменистым передним планом. В приведённом ниже разборе эти визуальные решения преобразованы в инструкции, которые можно адаптировать к своей статье.
Три приведённых ниже детальных вида — это фрагменты одного и того же референса, созданного ИИ. Они поясняют композицию и типографику и не являются скриншотами рабочего интерфейса.
Постройте одну визуальную метафору вокруг темы статьи
Город показан не как обычная фотография линии горизонта. Он расположен внутри большого светлого круга, а горные хребты и дымка смягчают его очертания. Справа, ближе к зрителю, на скале сидит маленькая фигура. Вместе с вымышленным заголовком «A Quieter Progress» это создаёт возможное противоречие между ростом города и более медленным, созерцательным взглядом. Такое прочтение — лишь интерпретация композиции; для реальной статьи может потребоваться другая метафора.
Начните промпт для обложки редакционной статьи с центрального вопроса статьи, а затем назовите несколько визуальных элементов, которые его выражают. Формулировка «Сделайте вдумчиво и в редакционном стиле» не определяет тему, масштаб и взаимосвязи. Референс конкретнее: далёкий город, маленькая фигура, большая скала и одна круглая рамка. Их относительный размер так же важен, как и их содержание. Не добавляйте часы, диаграммы, листья или другие символы лишь потому, что они упоминаются в статье. Каждый дополнительный объект конкурирует с центральной идеей. Если в вашей статье рассматривается другое противоречие, замените метафору, прежде чем сохранять эту композицию.
Из промпта
Выберите одну визуальную метафору, которая поддерживает аргументацию.
Настройте под себя
Статья рассматривает [CENTRAL_QUESTION]. Выразите противоречие между [IDEA_A] и [IDEA_B] через одну сцену: [DISTANT_SUBJECT] внутри большого круглого поля и [FOREGROUND_SUBJECT] на переднем плане в нижнем правом углу. Сохраните небольшой масштаб деталей, связанных с человеком, и спокойный фон. Оставьте левую часть для утверждённого заголовка. Избегайте дополнительных символических объектов, если они не нужны для пояснения аргументации.
Задайте иерархию заголовка и переносы строк
Заголовок занимает бо́льшую часть левой половины. «A» расположено на отдельной строке, «Quieter» выделено оливковым цветом, а «Progress» снова набрано угольным. Контрастные буквы с засечками формируют композицию; расположенный ниже короткий вопрос прописными буквами набран со значительным межбуквенным интервалом и в гораздо меньшем размере. Такая иерархия создаёт чёткий первый и второй уровни восприятия. Это не шаблон, по которому любой заголовок нужно разбивать на три строки: для более длинного утверждённого заголовка потребуются другие переносы и, возможно, больше места по горизонтали.
Отдельно укажите модели точный заголовок, вспомогательное предложение и название издания. Затем опишите их роли и относительный масштаб. Просьба использовать «красивую типографику» не объясняет модели, какой текст должен доминировать. Укажите редактируемый текст, крупный заголовок с засечками, компактную вспомогательную строку без засечек и один сдержанный акцентный цвет. Проверьте фактический текст в предполагаемом размере обложки: тонкие штрихи шрифта с засечками могут исчезнуть на маленькой миниатюре, а длинные слова — столкнуться с изображением. Скорректируйте переносы строк или область заголовка, прежде чем пропорционально уменьшать весь текст. Вымышленный текст на этом изображении служит референсом композиции и не является утверждённым текстом вашего издания.
Из промпта
Передайте основной конфликт статьи с помощью оригинального сдержанного визуального образа, оставив место для заголовка.
Настройте под себя
Используйте точный заголовок [APPROVED_HEADLINE] как редактируемый текст в левой области. Наберите его контрастным шрифтом с засечками с плотным, но удобочитаемым межстрочным интервалом. Выбирайте переносы строк с учётом смысла слов; не разрывайте слова. Выделите акцентным цветом только [KEY_PHRASE]. Разместите ниже [SUPPORTING_LINE], набранную шрифтом без засечек меньшего размера и со значительным межбуквенным интервалом. Сохраните название издания визуально второстепенным и оставьте явный промежуток между заголовком и круглой иллюстрацией.
Опишите цвета, слои и итоговое кадрирование
Тёплое кремовое поле образует самую большую цветовую область. Оливковый используется в выделенном слове заголовка и плавной форме под изображением; угольный закрепляет композицию в заголовке и скале. Скала на переднем плане перекрывает круглый пейзаж, а не остаётся внутри него. Это наложение связывает геометрическую рамку с нижним краем обложки. Небольшие обозначения издания расположены рядом с полями, но не конкурируют с заголовком или основной сценой.
Названия цветов — лишь отправная точка. Назначьте каждому цвету функцию и опишите порядок слоёв: кремовый холст, вспомогательная оливковая форма, светлый круглый пейзаж, тёмная скала на переднем плане, затем редактируемая типографика. Это даёт более воспроизводимый результат, чем запрос в расплывчатом минималистичном стиле. Также укажите размеры результата и безопасную область до начала генерации. В референсе используется горизонтальный холст с соотношением сторон 3:2. Для квадратного кадра в социальных сетях или вертикальной обложки потребуется заново скомпоновать макет, а не обрезать его по центру, отсекая заголовок. В масштабе миниатюры основной силуэт и заголовок должны оставаться читаемыми, даже если небольшие обозначения у полей исчезают.
Из промпта
кремовый, угольно-серый и оливково-зеленый цвета; асимметричная редакционная иерархия с большим количеством свободного пространства.
Настройте под себя
Создайте обложку редакционной статьи размером [WIDTH] × [HEIGHT]. Используйте тёплый кремовый цвет для холста, угольный — для основного текста и переднего плана, а приглушённый оливковый — для одного акцентного слова и одной вспомогательной кривой. Разместите круглый пейзаж позади изображения переднего плана, чтобы скала перекрывала его край. Разместите весь утверждённый текст в пределах [SAFE_MARGIN]. Для квадратной или вертикальной версии заново скомпонуйте заголовок и изображение как отдельные слои; не обрезайте готовую горизонтальную обложку и не объединяйте текст с изображением в один слой.
Проверьте результат обложки редакционной статьи
Сравните результат с референсом при одинаковом соотношении сторон, а затем проверьте его в размере, в котором читатели действительно увидят обложку. Проверьте, передан ли смысл статьи, прежде чем дорабатывать детали оформления. Изображение — это визуальная концепция; в передаваемых файлах также необходимо проверить редактируемость текста, итоговые размеры и права на использование ресурсов.
- Смысл: скройте заголовок. Передаёт ли оставшаяся сцена центральное противоречие статьи или подразумевает утверждение, которого в статье нет?
- Иерархия: посмотрите на маленькую миниатюру. Можно ли сразу распознать основной заголовок и силуэт? Удалите конкурирующие детали, прежде чем увеличивать все элементы.
- Композиция: убедитесь, что у заголовка есть собственное пространство, круг остаётся узнаваемым, а наложение переднего плана выглядит намеренным. Сравнивайте обложку целиком, а не отдельные декоративные детали.
- Текст и передача материалов: проверьте точность заголовка, пунктуации и указания издания. Убедитесь в редактируемости текста, наличии отдельных слоёв изображений, соблюдении запрошенных размеров и наличии всех альтернативных вариантов кадрирования.
Уточняющий промпт
Используйте это после получения первого результата. Так доработка будет сосредоточена на самой важной части задачи.
Доработайте текущую обложку редакционной статьи. Посмотрите на обложку без статьи и проверьте, отражает ли она нужную тему. Протестируйте расположение заголовка и масштаб миниатюры; сложность декоративных элементов не должна затруднять восприятие редакционной идеи. Сохраните утверждённые материалы и визуальное направление; измените только то, что необходимо для устранения этих проблем.
