Использовать промпт
Добавьте своё задание
Добавьте контекст ниже. Он будет включён в промпт при копировании или скачивании.
Создайте адаптивный сайт на HTML, используя существующий стек проекта для [PROJECT] и [AUDIENCE]. Задача: портфолио креативной студии.
Обязательные контент и структура
Представьте три проекта с указанием направления, роли, года и ссылками на кейсы; используйте выразительную типографику и асимметричную сетку изображений.
Используйте [APPROVED_CONTENT] как источник названий, дат, числовых данных, утверждений и целевых страниц. Перечислите недостающие исходные данные, прежде чем что-либо заменять. Если нужна демонстрация, обозначьте её контент как вымышленный. Не придумывайте отзывы клиентов, рейтинги, логотипы партнёров или возможности продукта.
Направление дизайна
Используйте [BRAND_RULES] и уже выбранную в проекте дизайн-систему. Если система не указана, начните со следующего направления: тёплый цвет слоновой кости, угольная типографика и один сдержанный кислотно-зелёный акцент; просторные отступы и асимметричная сетка. Последовательно используйте роли шрифтов, отступов и цветов. Отдавайте приоритет задаче, а не декоративным элементам, и избегайте шаблонного набора несвязанных карточек.
Содержимое проекта
Для каждого из трёх проектов укажите название, бриф из одного предложения, направление, год, роль студии, сведения о соавторах, главное изображение и ссылку на кейс. Начните с самого сильного проекта; двумя другими покажите разнообразие работ. Завершите страницу предоставленным способом связи. Не придумывайте описания кейсов, если адреса назначения отсутствуют.
Макет и поведение
Создавайте асимметрию за счет масштаба и расположения изображений, сохраняя единое выравнивание подписей. Размещайте названия проектов и сведения об авторах за пределами изображений. Сохраняйте исходные пропорции изображений, если кадрирование не согласовано. На мобильных устройствах располагайте блоки в следующем порядке: вступление, главный проект, дополнительные проекты, контакты.
Проверка критериев приёмки для задачи
- Проверьте длинное название, портретное изображение и проект с несколькими участниками.
- Сделайте каждую страницу проекта доступной с клавиатуры и всегда показывайте все сведения об авторах, не скрывая их до наведения.
Реализация и проверка
Оставьте текст редактируемым. Используйте семантическую структуру, понятные элементы управления, видимый фокус клавиатуры и подходящие состояния отсутствия данных и ошибок. Проверьте узкие и широкие макеты. Учитывайте настройку уменьшения движения. Сохраните существующие фреймворк и зависимости проекта; не заменяйте стек без предупреждения. Верните редактируемые файлы и опишите любое неполное поведение или неподдерживаемые исходные данные. Проверьте именно эту задачу, прежде чем предлагать дополнительные функции.
Референс и цель воссоздания
Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии.
Композиция и контент референса
Используйте прикрепленный файл reference.webp как визуальный референс для портфолио креативной студии. Перед началом работы определите основные области сверху вниз, их относительную ширину и высоту, выравнивание, интервалы, типографическую иерархию, цвета поверхностей, рамки, изображения и повторяющиеся компоненты. Сохраняйте эти взаимосвязи, а не заменяйте их универсальным шаблоном. Обязательное содержание: представьте три проекта с указанием направления, роли, года и ссылок на кейсы; используйте выразительную типографику и асимметричную сетку изображений. При преобразовании изображения в редактируемые элементы следуйте этим указаниям по макету: отведите одному проекту главную роль, а двумя другими покажите широту компетенций. Создавайте асимметрию за счет масштаба и расположения изображений, сохраняя единое выравнивание и размер шрифта подписей. Размещайте название проекта, направление и сведения об авторах за пределами изображения, чтобы они оставались читаемыми как на светлых, так и на темных фотографиях. На узком экране переходите к продуманной вертикальной последовательности: вступление, главный проект, дополнительные проекты, затем контакты. Сохраняйте исходные пропорции изображений, если кадрирование не согласовано.
Визуальное направление из примера проекта
теплый фон цвета слоновой кости, крупная угольно-черная швейцарская гротескная типографика, небольшие кислотно-зеленые акценты, много свободного пространства, асимметричная сетка проектов с архитектурными и скульптурными фотографиями и сдержанной кобальтовой панелью. Точный текст первого экрана: 'Good ideas. Carefully made.' Навигация: 'Work', 'About', 'Contact'. Подписи проектов: 'Objects / 2026', 'Spaces / 2026', 'Identity / 2026'. Элегантное профессиональное художественное оформление в редакционном стиле.
Спецификация взаимодействия
Референс — статичная концепция: описанное ниже поведение необходимо реализовать, но изображение само по себе не доказывает, что оно уже работает. Скопируйте адаптированный промпт в проект, в котором хотите создать портфолио. Сначала запросите главную страницу; для страниц кейсов используйте предоставленный контент, а не выдуманные истории проектов. Сделайте каждую страницу проекта доступной с клавиатуры и всегда показывайте все сведения об авторах, не скрывая их до наведения. Для каждого видимого элемента управления укажите событие активации, изменяемое состояние и обратную связь; реализуйте локальные изменения с согласованным состоянием во всех связанных представлениях. Обеспечьте реальные результаты поиска и фильтрации, явно обозначайте активное состояние элементов выбора, а для действий сохранения при необходимости показывайте состояния ожидания, успеха и ошибки. Не добавляйте несвязанные сценарии. Используйте ссылки для навигации, кнопки для действий и доступные названия для элементов управления с иконками. Не создавайте впечатление, что операция на сервере выполнена успешно, если изменилось только локальное демо.
Визуальное сравнение и передача результата
- Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента.
- Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей.
- Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.
Скачать промпт и изображение
Содержит полный промпт и полноразмерное референсное изображение. Добавьте оба файла в OpenDesign, чтобы задать направление макета.
Как составить дизайн-промпт для портфолио креативной студии
Используйте этот дизайн-промпт для портфолио креативной студии, чтобы представить три проекта с указанием направления, роли, года и ссылок на кейсы; примените выразительную типографику и асимметричную сетку изображений.
Увеличенные фрагменты той же концепции, созданной ИИ; это не скриншоты работающего сайта.
Сначала опишите иерархию, затем стиль
“Good ideas. Carefully made.” занимает большую часть левой стороны вступления. Описание студии размещено справа в значительно меньшем блоке; Work, About и Contact остаются сверху. Фон цвета слоновой кости и угольно-черный текст поддерживают эту иерархию, а небольшой зеленый акцент привлекает внимание.
Одно лишь слово «Редакционный» оставляет композицию открытой для интерпретации. Назовите доминирующий элемент, укажите расположение вспомогательного текста и определите, какие детали должны оставаться ненавязчивыми. Отдельно укажите фактический заголовок: слова в примере вымышлены, а для более длинного заголовка потребуются другие переносы строк. Отведите одному проекту главную роль, а двумя другими покажите широту компетенций. Создавайте асимметрию за счет масштаба и расположения изображений, сохраняя единое выравнивание и размер шрифта подписей. Размещайте название проекта, направление и сведения об авторах за пределами изображения, чтобы они оставались читаемыми как на светлых, так и на темных фотографиях. На узком экране переходите к продуманной вертикальной последовательности: вступление, главный проект, дополнительные проекты, затем контакты. Сохраняйте исходные пропорции изображений, если кадрирование не согласовано.
Из промпта
теплый фон цвета слоновой кости, крупная угольно-черная швейцарская гротескная типографика, небольшие кислотно-зеленые акценты, много свободного пространства
Настройте под себя
Используйте [STUDIO_NAME] и [APPROVED_HEADLINE]. Сделайте заголовок доминирующим элементом слева, а краткое представление студии разместите справа. Над ними компактно расположите Work, About и Contact. Используйте теплый цвет слоновой кости и угольно-черный цвет с одним сдержанным акцентом из [BRAND_RULES]. Позвольте заголовку естественно переноситься на новые строки, а не уменьшайте его ради размещения.
Превратите сетку проектов в спецификацию контента
Три изображения создают контраст за счет сюжетов и цветов: светлый скульптурный объект, залитый солнцем интерьер и кобальтовая панель айдентики. Подписи к ним расположены на одной базовой линии под изображениями. Видимый ряд состоит почти из трех равных колонок и не демонстрирует заметно увеличенный главный проект, хотя промпт требует асимметричной иерархии.
Это предложение определяет обязательное содержание результата, а не просто предполагает, что оно появится в убедительно выглядящей галерее. На небольшом концептуальном изображении не видны все требуемые роли и сведения об участниках. Сохраните эти поля в реализации и проверьте их на реальных данных проектов. Также устраните расхождение между референсом и письменным брифом: выберите ряд из трех равных колонок для более точного визуального соответствия или намеренно увеличьте один проект.
Из промпта
Для каждого из трех проектов укажите название, бриф из одного предложения, направление, год, роль студии, сведения об участниках, главное изображение и ссылку на кейс.
Настройте под себя
Используйте только эти три согласованные записи проектов: [PROJECT_RECORDS]. На экранах настольных компьютеров разместите их главные изображения в трех равных колонках, чтобы соответствовать референсу. Оставьте название, направление, год, роль студии и сведения об участниках в виде редактируемого текста под каждым изображением. Для каждого проекта используйте предоставленный URL кейса. Сохраняйте пропорции каждого изображения; не выдумывайте отсутствующие сведения об участниках или целевые адреса.
Опишите поведение, которое невозможно показать на изображении
Надпись “View case study” предполагает переход, но статичное изображение не показывает, куда ведет ссылка, заметен ли фокус при навигации с клавиатуры и что происходит на телефоне. Это необходимо описать в требованиях. Не добавляйте поиск, фильтры или элементы сохранения только потому, что они упомянуты в универсальном промпте: они не относятся к видимой задаче этого портфолио.
Опишите событие и результат: нажатие на название проекта или ссылку на его кейс открывает один и тот же согласованный адрес. Затем задайте порядок чтения на узком экране. Не просите модель выводить мобильный макет из этого изображения настольной версии и не скрывайте важную информацию о проекте до наведения. Оцените страницу глазами потенциального клиента: можно ли понять специализацию студии, определить авторов работы и открыть кейс без наведения? Проверьте длинное название проекта, портретное изображение и проект с несколькими участниками. Затем протестируйте навигацию с клавиатуры и отображение на узком экране. Если первый результат похож на типовую страницу агентства, доработайте иерархию проектов и подписи, прежде чем добавлять эффекты или новые разделы.
Из промпта
Сделайте страницу каждого проекта доступной с клавиатуры и сохраняйте все сведения об авторах видимыми без наведения указателя.
Настройте под себя
Сделайте так, чтобы название каждого проекта и ссылка “View case study” вели на один и тот же согласованный URL. Обеспечьте видимое состояние фокуса при навигации с клавиатуры и всегда показывайте сведения об участниках. На узких экранах расположите вступление, три проекта и контакты в указанном порядке. Разрешите перенос длинных названий. Если URL кейса отсутствует, покажите информацию о проекте без неработающей ссылки и сообщите о недостающих входных данных.
Составьте бриф, затем меняйте по одному решению за раз
Начните с задачи и аудитории, добавьте реальные данные проектов, опишите визуальную иерархию, а затем укажите принципы навигации и поведения на мобильных устройствах. Приложите к тексту референсное изображение. Три приведённых выше фрагмента «Адаптируйте под себя» заменяют соответствующие части полного промпта, а не служат дополнительными инструкциями, которые нужно бездумно добавлять. В частности, если вы выбираете вариант с равными колонками, замените инструкцию об асимметричной сетке.
- Сравните первый результат с референсом: акцент на заголовке, порядок изображений, выравнивание подписей и цвет фона должны быть продуманными.
- Замените демонстрационный контент самым длинным реальным названием проекта и полным списком участников. Убедитесь, что на узком экране ничего не исчезает и не перекрывается.
- Откройте страницу каждого проекта и проверьте навигацию с клавиатуры. Визуально похожий скриншот не доказывает, что эти взаимодействия работают.
Уточняющий промпт
Используйте это после получения первого результата. Так доработка будет сосредоточена на самой важной части задачи.
Доработайте только сетку работ в портфолио. Отведите ведущему проекту чётко обозначенное первое место, затем покажите два дополнительных проекта. Сохраняйте название, направление, год и сведения об участниках каждого проекта видимыми без наведения указателя. Сохраните пропорции изображений и сделайте каждую ссылку на кейс доступной с клавиатуры. На мобильных устройствах используйте тот же порядок чтения в одной колонке. Не изменяйте утверждённые шапку, типографику и раздел контактов.
