Оперативное проектирование для дизайнеров: от расплывчатых технических заданий до пригодных для использования результатов работы ИИ.

Если результат работы ИИ выглядит как стоковые фотографии, то ваше задание воспринимается как пожелание.

В этом и заключается вся проблема того, как большинство дизайнеров учились использовать инструменты ИИ. «Создайте мне главное изображение для финтех-стартапа» — это не задание. Это скорее настроение. Задание — это то, что вы бы сказали, если бы составляли бриф для внештатного иллюстратора, который берет 400 долларов в час и задает острые вопросы.

Дизайнеры уже умеют это делать. Вы составляли брифы в школе. Вы составляете брифы на работе каждую неделю. Вы знаете, как выглядят ясность, ссылки и ограничения, когда они записаны. Задания ИИ — это тот же навык, но для другой аудитории.

Задание — это дизайн-бриф в прозе

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

Хороший бриф сообщает создателю, кто он, для чего это нужно, каковы правила, на что ссылаться и как выглядит конечный результат. Если вы пропустите хотя бы один из этих пунктов, вы получите работу, которая технически близка к цели, но эмоционально не соответствует ей. Попросите начинающего дизайнера «разработать логотип для кофейни», и вы получите двенадцать кофейных зерен. Попросите его «разработать логотип для кофейни третьей волны, ориентированной на фрилансеров, используя текстовый знак, геометрический шрифт без засечек, без пиктограмм, вдохновленный сдержанностью Blue Bottle», и вы добьетесь успеха.

Задания работают аналогично. Инстинктивное стремление к расплывчатости, потому что модель умна, — самая дорогая ошибка в работе с ИИ-дизайном. Быть конкретным — это не педантично. Это вся игра.

Хорошее задание читается как дизайн-бриф. Плохое задание читается как пожелание.

Пять частей каждого полезного задания

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

1. Роль. Кем притворяется ИИ? («Вы — старший иллюстратор редакционных материалов с десятилетним опытом работы в The New Yorker.»)
2. Контекст. Для чего предназначено это изображение и для кого? («Это изображение — главный элемент поста в блоге о дизайнерах, которые учатся работать с инструментами ИИ. Целевая аудитория — работающие дизайнеры, первопроходцы, скептики, но любопытные.»)
3. Ограничения. Каковы правила? («Редакционное, а не корпоративное изображение. Компьютеры не видны. Фотографии из фотобанков. Плоский цвет, четкий силуэт, высокий контраст, низкая детализация.»)
4. Референсы. Как это должно выглядеть или ощущаться? («Линейная графика Сола Стейнберга, смешанная со сдержанностью швейцарских туристических плакатов 1960-х годов. Цветовая палитра бренда: фон #080404, акцент #ff6434.»)
5. Технические характеристики. Каковы требования к результату? (соотношение сторон 16:9, 1200x630, PNG, без текста внутри изображения.)

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

| Часть с подсказкой | Что она делает | Что произойдет, если ее пропустить |

|-------------|---------------|------------------------------|

| Роль | Задает вкус и уровень экспертности | Общий результат |

| Контекст | Указывает модели, для чего нужна работа | Решает неправильную проблему |

| Ограничения | Определяет, чего следует избегать | Получает клише, которые вы ненавидите |

| Ссылки | Определяет визуальное или тональное направление | Смещается в сторону средних значений, полученных в ходе обучения |

| Спецификация выходных данных | Контролирует формат и конечный результат | Неправильные размеры, неправильный формат |

Пример работы: создание изображения для главного визуального элемента

Расплывчатая версия, которую хотя бы раз набирал каждый дизайнер:

«Главное изображение для поста в блоге о разработке подсказок для дизайнеров».

Что вы получаете: дизайнер за ноутбуком, или светящийся мозг, или робот с карандашом, или какое-то сочетание всех трех. Шаблон. Мертвый.

Структурированная версия:

Вы — иллюстратор, работающий в The New Yorker и Wired уже десять лет. Создайте главное изображение для поста в блоге под названием «Разработка подсказок для дизайнеров». Целевая аудитория — работающие дизайнеры, которые скептически относятся к ажиотажу вокруг ИИ, но готовы серьезно использовать эти инструменты.

Композиция: слева в кадре — бумажное техническое задание дизайнера, наброски от руки с аннотациями, плавно переходящие в четкий печатный текст справа. Это подразумевает переход от технического задания к структурированному тексту.

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

Источники: линейный рисунок Саула Штейнберга для технического задания. Сдержанный швейцарский туристический плакат для текста. Палитра бренда: фон #080404, акцент #ff6434, нейтральный #d0d3d8.

Вывод: 1200x630, без текста внутри изображения.

Что вы получаете: главное изображение, которое можно реально выпустить, а не переделывать четыре раза.

Разница не в таланте. Разница в структуре.

Пример работы: прототип пользовательского интерфейса в версии 0 или Lovable

Расплывчатое описание:

"Создайте мне целевую страницу для дизайн-агентства."

Что вы получите: шаблон в стиле Tailwind со стандартным градиентом, тремя карточками функций, стандартным заглавным элементом и текстом, который выглядит как у любого другого агентства в интернете.

Структурированное описание:

Создайте целевую страницу для Brainy, дизайн-студии, известной более чем 2 миллионами подписчиков в Instagram и Threads. Целевая аудитория: основатели SaaS-компаний, находящихся на стадии финансирования от серии A до серии C, которым нужны услуги по брендингу, веб-разработке и дизайну. Они видели сайты всех агентств. Они покидают сайт, если он выглядит шаблонным.

Что вы получите: шаблон в стиле Tailwind, с градиентом, тремя карточками функций, стандартным заголовком и текстом, который выглядит как у любого другого агентства в интернете. >

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

Ограничения: никаких градиентов, никаких стоковых изображений, никаких стандартных иллюстраций для заголовка. Только темный режим, фон #080404. Акцент #ff6434. Типографика: один шрифт без засечек для всего, жирный для заголовков, светлый для основного текста. Для всего используется межстрочный интервал 4 пикселя.

Источники: ограничение межстрочного интервала Linear. Типографический вес Vercel. Шаблон бенто-сетки Apple. Не является клоном ни одного из них.

Результат: адаптивные компоненты shadcn, ориентированные на мобильные устройства.

Тот же инструмент. Совершенно другой результат.

Рабочий пример: программист создает компонент

Нечетко:

"Создайте мне компонент кнопки."

Что вы получите: кнопку. Один вариант. Без доступности. Без состояния фокуса. Цвета, которые вы не запрашивали.

Структурированно:

Вы — старший инженер по дизайн-системам. Создайте компонент кнопки в нашей дизайн-системе.

Контекст: эта кнопка заменяет наши старые произвольные стили кнопок, которые разбросаны по двенадцати маркетинговым страницам. Она должна поддерживать основной, дополнительный и «призрачный» варианты, три размера (sm, md, lg), а также состояния загрузки, отключения и фокуса.

Ограничения: используйте существующие токены из tokens.css (не добавляйте новые цвета). Кольцо фокуса должно быть смещено на 2 пикселя --color-accent. Никогда не используйте px для отступов, всегда используйте токены --space. Типографика всегда --font-sans с --text-sm или --text-base в зависимости от размера. В состоянии загрузки отображается индикатор загрузки и отключены клики.

Ссылки: Примитивы Radix UI для шаблонов доступности. Наш существующий компонент Card в /components/Card.tsx для ознакомления со структурой файлов.

Вывод: TypeScript, Tailwind, история Storybook, которая проверяет каждый вариант и состояние. Тесты, охватывающие поведение в состоянии отключения, загрузки и фокусировки.

Дайте это программисту, и вы получите настоящую кнопку. Дайте ему «сделай мне кнопку», и вы получите то, что вы перепишете вручную.

Библиотека ограничений, которую должен украсть каждый дизайнер

Ограничения — это секретное оружие. Это также та часть, которую дизайнеры чаще всего недооценивают. Скопируйте эту библиотеку, вставьте соответствующие строки в свои подсказки, настройте под свой бренд.

| Домен | Ограничения для включения |

|--------|------------------------|

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

| Генерация стиля фотографии | Отсутствие эффекта стоковых фотографий, глянцевого освещения, 3D-рендеринга без запроса, естественная композиция, приветствуются реальные недостатки |

| Генерация пользовательского интерфейса | Использование существующих компонентов, никаких новых цветов вне токенов, приоритет мобильных устройств, обязательное наличие доступности (состояния фокуса, коэффициенты контраста), никаких градиентов, если бренд этого не требует |

| Типография | Один шрифт без засечек для пользовательского интерфейса, шрифт с засечками только если бренд этого требует, не более трех вариантов толщины в композиции, текст без выравнивания по ширине, текст, написанный заглавными буквами, не должен превышать 4 слова |

| Цвет | Использование токенов, а не шестнадцатеричных кодов, никогда не белый текст на чисто черном фоне, никогда не чисто красный на чисто зеленом фоне, минимальный контраст 4,5:1 для основного текста |

| Макет | Масштабирование с отступом 4 или 8 пикселей, выравнивание основного текста по центру, выравнивание по ширине, максимум 75 символов в строке, привязка изображений слева, если композиция не требует иного |

Код | TypeScript строгий, именованные экспорты не по умолчанию, новые зависимости без запроса не добавляются, покрытие тестами для каждого нового компонента |

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

Если вам нужны дополнительные примеры рабочих процессов ИИ, просмотрите остальную часть Brainy Бумага. Если вам нужна настоящая библиотека подсказок, созданная для бренда вашей команды, а не для вашей случайной истории ChatGPT, нанять Brainy.

Как итерировать, не начиная заново

Худшая привычка в разработке подсказок — это удаление всей подсказки и ее переписывание, когда результат не соответствует требованиям. В девяти случаях из десяти подсказка была близка к правильному результату. Одна переменная была неправильной.

Итерации следует проводить хирургическим путем. Меняйте по одному элементу за раз.

1. Запустите запрос один раз. Обратите внимание, что не так.

2. Определите, какая из пяти частей не работает. Если результат слишком общий, ссылки слабые. Если в нем неправильные элементы, в ограничениях отсутствует «нет X». Если он ориентирован на неправильную аудиторию, контекст скуден.

3. Отредактируйте только эту часть. Не переписывайте все целиком.

4. Запустите снова. Сравните с первым результатом. Лучше, хуже, так же?

5. Повторите. Три-пять раундов обычно приводят к результату.

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

Три ошибки, гарантирующие мусор

Три шаблона, которые я вижу каждую неделю, и каждый из них убивает качество результата.

Ошибка 1: «Сделайте лучше». Модель не знает, что значит «лучше» для вас. «Лучше» означает среднее значение «лучше» для модели, то есть регрессия к среднему. Будьте конкретны. «Усильте цветовой контраст». «Сделайте композицию более асимметричной». «Уберите половину деталей с фона».

Ошибка 2: Запрос пяти вариантов сразу. Вы получаете пять посредственных вариантов вместо одного хорошего. Запросите один. Повторите. Примите первый хороший вариант.

Ошибка 3: Отсутствие ссылок. Ссылки определяют вкус модели. Без них вы получаете среднее значение на обучающих данных. С тремя хорошо подобранными ссылками вы получаете что-то близкое к тому, что хотели.

Часто задаваемые вопросы

Является ли разработка подсказок реальным навыком или просто модным веянием?

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

Какой инструмент лучше всего справляется с обработкой подсказок?

Для изображений Midjourney и Gemini Pro лучше всего работают с подробными текстовыми подсказками. Для пользовательского интерфейса v0 и Lovable хорошо реагируют на структурированные ограничения. Для программирования Claude Code и Cursor — самые сильные инструменты, особенно с хорошо написанным файлом CLAUDE.md. Инструмент менее важен, чем качество подсказок.

Стоит ли использовать библиотеку подсказок?

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

Какой должна быть длина задания?

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

Нужно ли мне изучать технические приёмы для заданий, такие как temperature или top_p?

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

Пишите так, как будто вы действительно это имеете в виду

Каждое расплывчатое задание — это десятиминутное отступление, которое приводит к созданию мусора. Каждое структурированное задание — это десятиминутное вложение, которое приводит к выпуску продукта.

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

Вы уже знаете, как писать брифы. Модель — это начинающий специалист на другом конце.

Пишите так, как будто вы действительно это имеете в виду.