ИИ-агенты для дизайнеров: как проектировать и создавать агентные рабочие процессы

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

Вторая версия появилась в ваших инструментах где-то за последние восемнадцать месяцев, и большинство дизайнеров этого до сих пор не заметили. Они набирают промпты в окне чата, копируют ответ, вставляют в Figma и удивляются, почему их рабочий процесс ощущается как чуть более быстрая версия 2023 года. Переход к агентам — это не «улучшенный ChatGPT». Это смена категории.

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

Чатбот, копайлот, агент — и почему разница важна

Три слова используют так, будто они означают одно и то же. Но это не так.

Чатбот работает пошагово. Вы спрашиваете, он отвечает, вы спрашиваете снова. ChatGPT без инструментов, Claude в обычном окне чата, Gemini в приложении. Контекст — то, что вы вставили. Результат — текст.

Копайлот — это встроенная помощь. GitHub Copilot, AI-функции Figma, Notion AI. Он живёт внутри другого инструмента и подсказывает следующий шаг во время работы. Он не выходит за пределы вашего контекста. Он не планирует многошаговую работу.

Агент ориентирован на цель. Вы даёте ему результат, а не следующий шаг. Он сам выбирает инструменты, вызывает их в цикле, проверяет свой прогресс и останавливается, когда цель достигнута или требуется ваш ввод. Самый наглядный современный пример — Claude Code, работающий в вашем терминале с подключёнными MCP-серверами, хотя агентный режим ChatGPT, панель агента Cursor и Anthropic's Computer Use ведут себя точно так же.

Вывод: чатботы отвечают, копайлоты помогают, агенты выполняют.

Агент — это цикл, а не одиночный промпт

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

1. Планирование. Агент читает цель и определяет первый шаг.
2. Действие. Он вызывает инструмент. Читает файл, запрашивает API, выполняет команду, получает URL.
3. Наблюдение. Он читает вывод инструмента и решает, приблизился ли к цели.
4. Итерация. Если не готово — планирует следующий шаг. Если готово — отчитывается.

Этот цикл и есть всё. Магия, которую люди приписывают агентам, — это просто чётко работающий цикл с достаточным количеством подключённых полезных инструментов. Нет цикла — нет агента. Модель, которая отвечает один раз, — чатбот. Модель, которая выполняет цикл с инструментами ради цели, — агент.

Инструментарий агентов для дизайнера в 2026 году

Вам не нужно создавать агента с нуля. В апреле 2026 года полезное агентное пространство для дизайнеров выглядит так.

Claude Code. Живёт в вашем терминале или внутри VS Code. Читает весь ваш репозиторий. Вызывает файлы, выполняет команды, общается с MCP-серверами. Лучший вариант для всего, что касается кода, токенов или репозитория дизайн-системы.

Claude Desktop и ChatGPT с MCP. Оба теперь поддерживают MCP-подключения. Их можно подключить к Figma, Google Drive, Notion, Linear и вашей файловой системе. Лучше подходят для исследований, брифов, написания спецификаций и контентной работы, чем для кодирования.

Cursor в агентном режиме. Агент, встроенный в редактор, для разработки на React, Vue или Svelte. По функциональности близок к Claude Code, но с визуальным интерфейсом вместо терминала.

Figma MCP. Сам по себе не агент. Коннектор инструментов. Превращает Figma в источник данных, который агент может читать. Подключите один раз, и каждый MCP-совместимый агент сможет видеть ваши фреймы. Настройка описана в статье Figma MCP: подключение Figma к Claude Code и ИИ-агентам.

n8n, агенты Zapier и кастомные скрипты. Если вам нужен агент, работающий по расписанию или реагирующий на вебхук (новый комментарий в Figma, новая отправка Google Form, новое письмо в общем ящике), это и есть платформы для размещения. Дизайнеры используют их для «связующих» агентов — тех, что работают в фоне, пока вы спите.

Для большинства дизайнеров правильный стартовый стек — Claude Code плюс Figma MCP плюс одно подключение к Google Drive или Notion. Этого достаточно, чтобы покрыть девяносто процентов агентной дизайн-работы.

Как спроектировать агента (это всё равно бриф)

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

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

1. В чём цель? Одно предложение. «Создать мудборд и короткий креативный бриф на основе транскрипта первичного звонка с клиентом».
2. Какие инструменты нужны агенту? Перечислите их. «Прочитать Google Doc, поискать в интернете, получить изображения, написать в файл Figma, сохранить в папку Google Drive».
3. Какие правила его ограничивают? «Использовать только редакционные источники изображений, а не стоковую фотографию. Никогда не выдумывать бренд. Указывать каждый источник. Всегда создавать бриф в нашем корпоративном формате».
4. Когда он останавливается? «Когда в файле Figma есть фрейм мудборда с не менее чем 12 референсами, а бриф сохранён как PDF в общем Drive».

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

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

Рецепт 1: агент от исследования к мудборду

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

Цель. По транскрипту первичного звонка создать мудборд в Figma и креативный бриф в Google Drive.

Необходимые инструменты. Google Drive MCP (чтение транскрипта, запись брифа), веб-поиск, получение изображений, Figma MCP (запись во фрейм мудборда).

Форма системного промпта. Это инструкция, которую вы даёте агенту один раз в начале сессии.

You are a senior brand strategist at Brainy, a design studio with 2M+
community followers. Your job: turn a discovery call transcript into
a first-pass creative direction.

Goal:
- Read the transcript at the Google Drive URL I give you.
- Extract: client name, industry, audience, brand adjectives (3-5),
  competitors mentioned, any visual references they named.
- Produce two deliverables:
  1. A creative brief, saved as a Google Doc in /Brainy/Briefs/
     using our template at /Brainy/Templates/brief.docx.
  2. A Figma moodboard in the file I specify, populated with at
     least 12 editorial image references (no stock photography).

Rules:
- Use only editorial sources: Are.na, It's Nice That, Brand New,
  museum archives, design studio portfolios. Never Shutterstock,
  Getty, or Unsplash generic.
- Every image needs a source URL captioned on the Figma frame.
- Voice for the brief: Brainy house voice. Opinionated on craft,
  neutral on facts. No corporate filler.
- If the transcript is unclear on an adjective, flag it as "needs
  confirmation" in the brief instead of inventing one.

Stop when:
- Brief is saved, moodboard has 12+ captioned references, and you
  have posted the two URLs back to me.

Это рабочий бриф для агента. Вставьте его в Claude Desktop с MCP-подключениями к Drive и Figma, направьте на транскрипт и проверьте результат.

Что проверяете. Правильно ли подобраны прилагательные? Соответствуют ли референсы бренду и не скатываются ли к очевидному? Действительно ли каждое изображение подписано с указанием источника? Написан ли бриф в корпоративном голосе или он скатился к LinkedIn-английскому?

Итерация. Первый запуск будет грубым. Обновите системный промпт тем, что агент упустил. Запустите снова. После трёх-четырёх циклов агент будет создавать брифы, которые можно передавать стратегу без переработки.

Рецепт 2: агент от спецификации к передаче в разработку

Этот агент закрывает разрыв между «дизайн утверждён» и «разработчик имеет всё необходимое». Он читает файл Figma и пишет документ для передачи разработчикам.

Цель. По URL файла Figma создать документ для передачи разработчикам с инвентарём компонентов, списком токенов, значениями отступов и открытыми вопросами.

Необходимые инструменты. Figma MCP, место для записи результата (Notion, GitHub issue, Google Doc — по вашему выбору).

Форма системного промпта.

You are a senior design systems engineer acting as the bridge
between a design team and a front-end team.

Goal:
- Read the Figma file at the URL I give you.
- Produce a handoff document containing:
  1. Component inventory: every component instance used, counted,
     with Figma component name and closest existing code component
     name from our /components/ directory.
  2. Token usage: every color, spacing, and typography variable
     referenced, compared against /design/tokens.css.
  3. Layout specs: breakpoints used, any auto-layout frames that
     might be ambiguous at edge cases.
  4. Open questions: a bulleted list of anything in the Figma file
     that cannot be resolved from the file alone (missing states,
     unclear interactions, content placeholders).
- Write the output as a Notion page in /Engineering/Handoffs/.

Rules:
- Never invent a component. If a Figma element does not map to an
  existing code component, list it under "new components required"
  with a one-line description.
- Flag every free-form (non auto-layout) frame as a risk.
- Include the Figma node ID for every item so devs can jump to it.
- Do not assume interactions that are not explicitly in the file.

Stop when:
- Notion page is written and you have posted the URL back to me.

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

Где ломается. На захламлённых файлах Figma. Фреймы без auto-layout, непоследовательное использование переменных, случайные одноразовые компоненты. Агент обнажает беспорядок, что либо подарок (теперь вы знаете), либо проблема (теперь нужно это исправить).

Рецепт 3: агент QA дизайна

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

Цель. Сравнить задеплоенный URL стейджинга с эталонным файлом Figma и сообщить о визуальных отклонениях.

Необходимые инструменты. Figma MCP, Playwright (для скриншотов стейджинг-страницы), сравнение изображений (Claude умеет сравнивать изображения нативно в режиме зрения).

Форма системного промпта.

You are a senior product designer doing a pre-release visual QA pass.

Goal:
- Visit the staging URL I give you at three breakpoints: 1440px,
  768px, 375px.
- For each breakpoint, take a full-page screenshot using Playwright.
- Compare each screenshot to the corresponding Figma frame at the
  URL I provide.
- Produce a QA report listing every visual difference, categorized:
  - BLOCKING: wrong components, wrong colors, broken layouts
  - NON-BLOCKING: spacing off by less than 4px, minor type weight
    mismatches, image crops slightly different
  - INFORMATIONAL: intentional differences between design and code
    worth noting

Rules:
- Do not flag differences that are within 2px of intended spacing
  unless they visibly break alignment.
- Include a screenshot-with-annotation for every BLOCKING item.
- Link every item back to the Figma node ID.
- Output as a Markdown file in /qa/reports/ with timestamp.

Stop when:
- Report is saved and you have posted the path back to me.

Почему этот рецепт важен. Большинство команд делают QA дизайна вручную или не делают вовсе. Агент QA запускается на каждом пре-прод деплое. Он ловит 80% отклонений, которые глаза пропускают на третьей странице.

Как дизайнеры его используют. Подключите к CI, чтобы он запускался автоматически при деплое на стейджинг. Или оставьте ручным и запускайте перед выпуском чего-либо видимого. В любом случае вы перестаёте быть узким местом при вопросе «это ушло в прод правильно?».

Что агенты пока не умеют

Будьте честны с собой. Вот где агенты дают сбой в апреле 2026 года.

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

Расплывчатые цели. «Сделайте сайт лучше» — это не цель. Агент зациклится или выдаст обобщённый результат. Если вы не можете сформулировать цель в одном предложении с чётким условием остановки, у агента нет шансов.

Нестандартная стратегия. Агенты превосходно выполняют стратегию, которую вы определили. Они плохо справляются с изобретением её с чистого листа. Позиционирование, архитектура бренда, продуктовые решения с нуля — всё это по-прежнему работа человека.

Долгосрочное суждение. Агент может сказать вам «этот вариант Button не используется». Он не скажет: «Мы скоро запустим страницу с ценами, для которой понадобится четвёртый вариант Button, поэтому не удаляйте его». Агент видит снимок, а не дорожную карту.

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

Правило: агенты занимаются исполнением. Люди занимаются вкусом, стратегией и доверием.

Как мыслить как проектировщик агентов, а не как пользователь агентов

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

Использование агента — это работа с промптами. Написание брифа, проверка результата, итерация.

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

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

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

Второе: они версионируют системный промпт как код. Храните его в файле. Добавьте в git, если можете. Каждый раз, когда агент ошибается по-новому, добавляйте правило. Промпт умнеет со временем, а не засоряется.

Третье: они проверяют каждый запуск в первые десять раз. Никакого доверия по умолчанию. Каждый результат читается, оценивается и используется для обновления промпта. После десяти запусков агент достаточно надёжен для работы в фоне. До десяти запусков — нет.

Если вам нужно больше разборов AI-рабочих процессов, просмотрите остальные Brainy Papers. Если вы хотите, чтобы агентные рабочие процессы были встроены в вашу команду без первых трёх месяцев хаоса, наймите Brainy, и мы поставим весь стек.

Стартовый план дизайнера по агентам

Одна неделя, один агент, один работающий цикл.

• Выберите один рабочий процесс, который вы выполняете регулярно. Не воображаемый. Реальный, который вы делали в этом месяце.
• Запишите на бумаге цель в одном предложении, список инструментов, правила и условие остановки.
• Настройте Claude Code или Claude Desktop с одним MCP-подключением (Figma, Drive или файловая система).
• Вставьте бриф как системный промпт. Запустите агента на реальных входных данных.
• Критически прочтите результат. Оцените его по сравнению с тем, что вы отправили бы сами.
• Обновите промпт тем, что не сработало. Запустите снова.
• Повторите три-пять раз. Отметьте, сколько времени занимает каждый запуск по сравнению с самостоятельным выполнением.
• Сохраните финальный системный промпт. Это ваш первый продакшн-агент.

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

FAQ

Нужно ли уметь программировать, чтобы создать ИИ-агента?

Нет. Каждый рецепт выше настраивается через системный промпт плюс MCP-подключения, которые настраиваются в UI или одной командой. Вы пишете брифы и подключаете инструменты, а не пишете продакшн-код. Если вы умеете настраивать Zapier, вы умеете настраивать агента.

В чём разница между Claude Code и агентом Claude?

Claude Code — это один конкретный агент, живущий в вашем терминале и созданный для работы с кодовыми базами. «Агент Claude» — это любой агент на базе модели Claude: это может быть Claude Code, Claude Desktop с инструментами, кастомный агент через Anthropic API или агент в стиле ChatGPT, использующий Claude под капотом. Claude Code — флагманский агент для работы дизайнера-разработчика в 2026 году.

Сколько стоит запуск агента?

Для индивидуальных дизайнеров подписка Claude Max или ChatGPT Plus покрывает Claude Code и агентный режим соответственно. Это несколько сотен долларов в месяц, и в стоимость входит большинство нужных инструментов. Для команд использование API масштабируется в зависимости от интенсивности работы агентов. Бюджет начинается от 50 до 200 долларов на дизайнера в месяц при интенсивном использовании. Дёшево по сравнению с тем временем, которое это экономит.

Теперь вы управляете небольшой командой

Раньше вы были дизайнером. Вам давали брифы, вы производили работу. Это по-прежнему часть работы.

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

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

Выберите рабочий процесс. Напишите бриф. Выпустите первого агента. Проверьте результат. Повторите в понедельник.