Гайд · Даниил Шишко

Карта процесса
дизайнера
с AI-⁠агентом

Восемь приёмов от брифа до прототипа и готовая инструкция, с которой агент поможет пройти весь процесс.

Этапы
8
Запросы
Готовые
Скилл
Бесплатно
Агент
Любой

О гайде

Где AI уже упрощает работу дизайнера

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

В каждом приёме — два-⁠три действия, готовый запрос агенту и описание результата. Копируешь запрос, подставляешь свою задачу и отправляешь. В конце этапа объясняю, для чего этого приёма достаточно, а где понадобится больше подготовки.

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

Для запросов из гайда подойдут ChatGPT, Claude или Codex. Здесь я называю агентом AI-⁠помощника, которому ты поручаешь задачу и даёшь материалы для работы.

Удобнее проходить этапы в одном чате или проекте: тогда у агента под рукой будут бриф, разбор конкурентов и остальные результаты. Но каждый приём можно использовать отдельно. Начинай с того этапа, на котором у тебя больше всего рутины.

Почему так

Агент выдаёт не то, когда сам выбирает, как решать задачу

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

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

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

  1. Опиши задачу одной строкой

    Так, как она пришла от заказчика или из таск-трекера. Специально готовить описание не нужно.

  2. Попроси агента задать вопросы

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

    Запрос для агента

    Я дизайнер. Моя задача: [одна строка]. Пока не предлагай решений — помоги собрать бриф. Задавай вопросы от общего к частному: что за продукт и для кого, как люди решают эту задачу сейчас, какие есть ограничения и как мы поймём, что всё получилось. Задавай не больше трёх вопросов за раз. Если я не знаю ответа, добавляй вопрос в список «Вопросы заказчику». Не придумывай ответ за меня. В конце собери бриф из моих ответов и отдельный список вопросов заказчику.

  3. Отвечай, пока не разберёте задачу

    Обычно хватает нескольких раундов. Если агент начал предлагать решения раньше времени, верни его к вопросам.

Что получишь

Бриф и список конкретных вопросов, с которым можно идти к заказчику.

Где потолок. Бриф пока остаётся в переписке. Если работаешь с агентом в папке проекта, сохрани его отдельным файлом и указывай на него в следующих задачах. Так агенту будет проще опираться на договорённости. На курсе мы выстраиваем весь процесс с такими файлами.

  1. Сделай скриншоты экранов 3–⁠5 конкурентов

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

  2. Попроси разобрать каждый экран

    Что помогает пользователю и стоит взять, что мешает и почему.

    Запрос для агента

    Вот экраны конкурентов на шаге [каком]. Разбери каждый экран: что помогает пользователю и стоит взять в наш продукт, что мешает и чего лучше избегать. Объясни причины. В конце предложи три решения для нашего продукта и объясни, чем каждое полезно.

Что получишь

Три решения для своего экрана с понятным объяснением, зачем их использовать.

Где потолок. Здесь мы разбираем один шаг. Чтобы сравнить продукты целиком, понадобятся общие критерии оценки и источники, на которые можно опереться. Такое исследование собираем на курсе.

  1. Попроси агента сыграть твоего пользователя

    Возьми описание из брифа: кто этот человек, чем занят и с какими проблемами сталкивается.

    Запрос для агента

    Сыграй пользователя из брифа: [кто это]. Я проведу с тобой интервью. Отвечай естественно: можешь сомневаться, путаться и давать короткие ответы. Когда я напишу «стоп», выйди из роли и разбери мои вопросы. Покажи, какие вопросы подсказывали желаемый ответ, и предложи, как их переформулировать.

  2. Проведи интервью по своему сценарию

    Задавай вопросы по одному, как в разговоре с человеком.

  3. Напиши «стоп» и посмотри разбор

    Агент покажет, где формулировка подталкивала собеседника к определённому ответу, и предложит более нейтральный вариант.

Что получишь

Сценарий интервью с исправленными наводящими вопросами.

Где потолок. Ответы агента не заменяют исследование с реальными пользователями. Это репетиция твоих вопросов, которая помогает лучше подготовиться к разговору.

  1. Попроси описать основной сценарий пользователя

    От первого входа до результата, ради которого человек пришёл в продукт.

    Запрос для агента

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

  2. Проверь, что происходит вне основного сценария

    Что увидит человек при ошибке? Куда вернётся по кнопке «Назад»? Что будет на экране, пока данных нет? Именно в таких ситуациях обычно и обнаруживаются забытые экраны.

Что получишь

Список экранов и состояний с объяснением, зачем нужно каждое.

Где потолок. Без брифа агент предложит привычный набор экранов для похожего продукта. Чем подробнее вы разобрали задачу на первом этапе, тем точнее будет список.

  1. Дай агенту эталонный экран

    Выбери экран своего продукта, на который стоит ориентироваться. Можно прислать скриншот.

  2. Попроси описать правила оформления

    Сетка, отступы, шрифты, цвета, акценты, устройство карточек и кнопок. Проверь описание до того, как агент начнёт собирать новый экран.

    Запрос для агента

    Вот эталонный экран нашего продукта. Сначала опиши правила его оформления: сетку, отступы, шрифты и размеры текста, цвета, акценты, устройство карточек и кнопок. Покажи мне эти правила и дождись моего «ок». Только после этого собери экран [какой] по согласованным правилам.

  3. После проверки попроси собрать новый экран

    Если что-⁠то выбивается из стиля, покажи агенту конкретное расхождение: например, другой размер заголовка или отступ между карточками.

Что получишь

Новый экран, который выглядит частью твоего продукта.

Где потолок. Одного эталона может хватить для отдельного экрана. Для сорока экранов нужна дизайн-система: общие компоненты и правила, к которым агент обращается при сборке. Её создаём на курсе. Если результат выглядит шаблонно, загляни в гайд «Как убрать AI-⁠слоп из дизайна».

  1. Дай экран и опиши, что на нём делает человек

    Приложи скриншот или опиши экран словами. Укажи, какую задачу пользователь здесь решает.

  2. Попроси написать весь набор текстов

    Заголовок, кнопки, подсказки, сообщения об ошибках и тексты для случаев, когда данных ещё нет.

    Запрос для агента

    Вот экран: [скриншот или описание]. Здесь пользователь [что делает]. Напиши все тексты для этого экрана: заголовок, кнопки, подсказки, сообщения об ошибках и тексты для пустых состояний. Используй понятные пользователю слова. В тексте кнопки называй действие. В сообщении об ошибке объясняй, что случилось и что делать дальше. Если сомневаешься в формулировке, предложи два варианта.

Что получишь

Все тексты экрана, включая ошибки и пустые состояния.

Где потолок. Если не описать тон продукта, агент выберет его сам. Чтобы тексты звучали одинаково на всех экранах, один раз запиши правила тона и передавай их вместе с задачей.

  1. Один раз опиши стиль по общей схеме

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

    Запрос для агента

    Подготовь шаблон запроса для генератора картинок в формате JSON. Отдельно опиши параметры: объект, окружение, свет, фактура, палитра, композиция и ракурс. Заполни шаблон под наш стиль: [опиши стиль или приложи пример]. Затем сделай пять вариантов. В каждом меняй только объект из этого списка: [список объектов]. Остальные параметры оставь одинаковыми.

  2. Меняй только объект

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

Что получишь

Серию иллюстраций в одной манере.

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

  1. Попроси собрать прототип

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

    Запрос для агента

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

  2. Сам пройди сценарий

    От начала до конца, как пользователь: нажимай кнопки, заполняй поля, переходи между экранами.

  3. Если что-⁠то мешает, пришли скриншот

    Обведи нужное место и одной фразой объясни, что исправить.

Что получишь

Прототип, который можно показать заказчику или пользователям.

Где потолок. Указание «меняй только отмеченное» помогает удержать правки в нужных границах. Как опубликовать прототип по ссылке и подключить аналитику, чтобы видеть, где пользователи застревают, показываем на курсе.

Скилл — это папка с инструкцией для агента. В приложениях, которые поддерживают скиллы, агент может использовать её для подходящей задачи. Внутри этого скилла описано, что делать на каждом этапе, когда остановиться и дождаться твоего решения и как проверить результат.

Пишешь «Начнём с брифа» — и агент начинает задавать вопросы по инструкции.

Что в архиве

design-process-⁠mapПапка скилла. Переносить её нужно целиком.
SKILL.mdИнструкция: восемь этапов, порядок действий, места для твоих решений и проверки результата.
README.mdИнструкция по установке в Claude Code, Codex и приложение Claude.

Как поставить

  1. Скачай архив

    Внутри папка design-process-⁠map с файлами SKILL.md и README.md. Для приложения Claude архив распаковывать не нужно.

  2. Подключи скилл к своему агенту

    Claude Code: распакуй архив и положи папку design-process-⁠map в .claude/skills внутри своего проекта. Итоговый путь: .claude/skills/design-process-⁠map/SKILL.md. Codex: положи эту же папку в .agents/skills внутри проекта. Итоговый путь: .agents/skills/design-process-⁠map/SKILL.md. Приложение Claude: открой Customize → Skills → Upload a skill и загрузи ZIP-⁠архив. ChatGPT: используй файл как инструкцию в чате. Распакуй архив, прикрепи SKILL.md к сообщению и напиши: «Работай по этому файлу».

  3. Назови этап и задачу

    Если не укажешь этап, агент покажет карту процесса и спросит, с чего начать.

    Запрос для агента

    Начнём с брифа: [задача одной строкой].

Скилл задаёт порядок работы. Решения на каждом этапе принимаешь ты.

Бонус

Два приёма на весь процесс

Диктуй голосомГолосом часто проще подробно рассказать о задаче: что нужно сделать, почему и какие есть ограничения. Агент получит больше полезных деталей, чем из короткого сообщения. Для этого можно использовать голосовой ввод в приложениях ChatGPT и Claude.
Одна задача за разБольшую задачу разбивай на шаги. Например, сначала собери экраны, потом свяжи их переходами. Так проще проверить каждый результат, а агент реже меняет то, что уже готово.

Вопросы

Частые вопросы

01Какой агент нужен?
Любой: ChatGPT, Claude или Codex. Запросы написаны без привязки к инструменту. Для этапов со скриншотами нужен агент, который принимает картинки, это умеют все три.
02Это бесплатно?
Гайд, запросы и скилл бесплатные. Чтобы попробовать приёмы, хватит бесплатного тарифа ChatGPT или Claude. Для постоянной работы над проектом нужна подписка.
03Что делать, если агент всё равно выдаёт не то?
Проверь, остановился ли он там, где просит запрос: «дождись моего ок», «после слова стоп». Если проскочил, верни его к этой точке и продолжи с неё. Если не то выходит на экранах, начни с пятого этапа: эталон и правила решают больше, чем формулировка задачи.
04Почему на одном экране всё работает, а на всём проекте начинает расползаться?
Приём даёт результат один раз. Чтобы он держался на всём проекте, агенту нужна система: файлы проекта, дизайн-система и правила, которые он читает перед каждой задачей. Её и собираем на курсе.

Курс

Зачем идти на курс AI Native Designer

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

01

AI Strategist

Исследования до начала дизайна: анализ конкурентов, модели пользователей для проверки предположений и разбор экранов. Агент помогает собрать результаты и требования в документы, на которые можно опираться дальше.

02

System Architect

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

03

Visual Engineer

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

04

AI Prototyper & Agents

Создаём работающие прототипы на тех же технологиях, которые используют твои разработчики. Подключаем панель с метриками, чтобы проверять гипотезы. Собираем свои скиллы и настраиваем рабочее пространство агента под дальнейшие проекты.
ФорматУроки в записи, нагрузка — 5–⁠7 часов в неделю. Доступ к материалам и обновлениям — 12 месяцев. Практикуешься на своих рабочих задачах, в конце каждого модуля — курсовая работа.
ПоддержкаЧерез бота в Telegram можно задать вопрос мне и менторам. После каждого модуля проводим живой эфир с разбором вопросов.

Промокод

PROCESSMAP39

Тем, кто дочитал до конца, дарю промокод на скидку 39%. Смотри программу и бронируй место.