AI-агенти для дизайнера: що це і як зібрати першого з Claude Code

Коротка відповідь: AI-агент - це AI, який не просто відповідає в чаті, а сам виконує кроки: читає файли, запускає команди, перевіряє результат і робить наступний крок, поки задача не буде виконана. Для дизайнера найпростіший спосіб зібрати першого агента - описати його одним Markdown-файлом у папці .claude/agents/ проєкту в Claude Code. Почніть з маленької повторюваної задачі, наприклад перевірки, що в коді немає кольорів поза токенами.

Я Дмитро Ніколаєнко, засновник UX Hero. Сайт, CRM і платформа курсів у нас працюють з допомогою кількох агентів, а випускники курсу Design Engineer збирають власні пайплайни. Нижче пояснюю без зайвої теорії, що це таке і з чого почати.

Чим агент відрізняється від звичайного чату з AI?

У чаті ви ставите питання і отримуєте відповідь. Далі все робите самі: копіюєте код, вставляєте у файл, перевіряєте, повертаєтесь з помилкою. Агент закриває цей цикл сам. У нього є інструменти (читати і змінювати файли, запускати команди, ходити в браузер чи Figma) і він працює в петлі: зробив крок, подивився на результат, вирішив, що далі.

Claude Code - це вже агент. Коли ви просите його «зроби кнопку зі станами і покажи в Storybook», він сам створює файли, запускає Storybook, бачить помилку і виправляє. Тому коли говорять «зібрати свого агента», зазвичай мають на увазі спеціалізованого помічника всередині Claude Code: з вузькою роллю, своїми інструкціями і обмеженим набором дій.

Агент, Skill, MCP і CLAUDE.md: що є що?

Ці слова плутають навіть досвідчені люди, тому коротка таблиця:

Що	Простими словами	Приклад для дизайнера
CLAUDE.md	загальні правила проєкту, які Claude читає завжди	«використовуй тільки токени з tokens.css»
Skill	інструкція під конкретний тип задачі, підтягується, коли потрібна	як писати UI-тексти в нашому тоні
MCP	підключення до зовнішнього інструмента	Claude бачить ваш Figma-файл
Агент (субагент)	окремий виконавець з власною роллю і контекстом	рев'юер, який перевіряє UI-зміни перед PR

Детальніше про Skills є в статті Claude Skills для дизайнера, а про правила проєкту для дизайн-системи в матеріалі AGENTS.md для дизайн-системи.

Навіщо дизайнеру власні агенти?

Агент корисний там, де є повторювана робота з чіткими правилами, яку ви зараз або робите руками, або взагалі не робите, бо немає часу. Типові приклади з дизайнерської практики:

• Рев'юер UI. Перевіряє зміну перед pull request: кольори з токенів, стани на місці, контраст, адаптив.
• Синхронізатор токенів. Порівнює експорт змінних з Figma з токенами в коді і показує розбіжності.
• Документатор. Дописує Storybook-сторінку для нового компонента: варіанти, стани, приклади використання.
• Редактор текстів. Проходиться по всіх UI-рядках і перевіряє тон, довжину і термінологію.

Ось два реальні приклади моїх студентів. Аляксандр після курсу Design Engineer зібрав пайплайн Figma → Storybook → pull request, у якому працюють п'ять агентів. Антон зробив з Claude Code агента, який допомагає йому шукати роботу. Обидва почали не з архітектури, а з однієї задачі, яка їх дратувала.

Як зібрати першого агента: покроково

Зберемо рев'юера UI-змін. Він не пише код, тільки перевіряє і звітує, тому ризик зламати щось мінімальний. Ідеальний перший агент.

1. Оберіть одну задачу. Не «помічник з дизайну», а «перевіряє UI-зміни на відповідність дизайн-системі».
2. Опишіть вхід і вихід. Вхід: змінені файли в поточній гілці. Вихід: список проблем з файлом і рядком, або «все чисто».
3. Створіть файл агента. У папці проєкту створіть .claude/agents/ui-reviewer.md. Можна попросити Claude Code зробити це за вас, показавши опис нижче.
4. Обмежте інструменти. Рев'юеру потрібно тільки читати файли і шукати по них. Без права редагувати він нічого не зламає.
5. Запустіть і подивіться. Попросіть Claude Code: «запусти ui-reviewer на поточних змінах». Перевірте звіт: що він знайшов, що пропустив, де помилився.
6. Допрацюйте чекліст. Кожна пропущена проблема - новий пункт в інструкції. Через кілька ітерацій агент ловить те, що ви раніше бачили тільки на рев'ю.

Ось як може виглядати файл такого агента:

---
name: ui-reviewer
description: Перевіряє UI-зміни на відповідність дизайн-системі.
  Використовуй перед створенням pull request.
tools: Read, Grep, Glob
---
Ти рев'юер інтерфейсу в команді дизайн-системи.
Перевір змінені файли за чеклістом:
1. Кольори, відступи і радіуси тільки через токени
   з tokens.css. Сирі hex і px - помилка.
2. Інтерактивні компоненти мають стани hover, focus,
   disabled. Focus видимий.
3. Тексти не захардкоджені англійською.
4. Не створено дубль існуючого компонента з /components.
Формат звіту: файл, рядок, проблема, як виправити.
Якщо проблем немає, напиши «Все чисто».

Як агенти працюють разом

Коли один агент працює стабільно, з'являється бажання зібрати ланцюжок. Наприклад, один агент читає компонент з Figma через MCP, другий пише код на токенах, третій оформлює Storybook, четвертий рев'ює, п'ятий готує pull request з описом. Це не опис пайплайну Аляксандра, а загальна ілюстрація того, як розкладають такі процеси.

Головне правило: кожен агент має одну відповідальність і зрозумілий результат, який можна перевірити. Якщо ви не можете сформулювати, що саме агент повертає, він ще не готовий.

Ризики і як їх уникнути

• Агент робить більше, ніж просили. Обмежуйте інструменти і пишіть, чого робити не можна.
• Доступ до чутливого. Не давайте агентам ключі від продакшну, платіжних систем чи особистих даних клієнтів. Секрети живуть у змінних середовища, а не у файлах, які читає агент.
• Людина випадає з процесу. Все, що йде в продакшн, проходить через pull request і ваш погляд. Агент пришвидшує, а не замінює рішення.
• Агент на кожну дрібницю. Якщо задача трапляється раз на місяць, простіше написати промпт. Агент окуповується на повторюваному.

Якщо агенту треба бачити ваш Figma-файл, почніть з матеріалу Figma MCP сервер: дизайн у код.

Ідеї для другого і третього агента

Коли рев'юер працює, ось що зазвичай додають далі:

• Агент для Storybook. Отримує назву нового компонента і пише для нього stories з усіма варіантами і станами за шаблоном вашої системи.
• Агент для UI-текстів. Перевіряє всі рядки в змінених файлах на тон, довжину і словник термінів. Особливо корисний, якщо продукт двомовний.
• Агент синхронізації токенів. Порівнює свіжий експорт змінних з Figma з tokens.css і пропонує зміни окремим pull request.
• Агент-документатор змін. Перед релізом збирає зі змерджених pull request список змін у дизайн-системі людською мовою для команди.

Кожен з них - той самий Markdown-файл з роллю, інструментами і чеклістом. Різниця лише в задачі.

Ідеї для другого і третього агента

Коли рев'юер працює, ось що зазвичай додають далі:

• Агент для Storybook. Отримує назву нового компонента і пише для нього stories з усіма варіантами і станами за шаблоном вашої системи.
• Агент для UI-текстів. Перевіряє всі рядки в змінених файлах на тон, довжину і словник термінів. Особливо корисний, якщо продукт двомовний.
• Агент синхронізації токенів. Порівнює свіжий експорт змінних з Figma з tokens.css і пропонує зміни окремим pull request.
• Агент-документатор змін. Перед релізом збирає зі змерджених pull request список змін у дизайн-системі людською мовою для команди.

Кожен з них - той самий Markdown-файл з роллю, інструментами і чеклістом. Різниця лише в задачі.

Порада з практики: тримайте файли агентів у репозиторії разом з кодом. Тоді вся команда користується тими самими агентами, а зміни в їхніх інструкціях проходять рев'ю, як і будь-який інший код. Агент, який живе тільки на вашому ноутбуці, зникає разом з вашою відпусткою.

Часті питання

Що таке AI-агент простими словами?

AI-агент - це AI, який сам виконує кроки для досягнення мети: читає файли, запускає команди, перевіряє результат і вирішує, що робити далі. На відміну від чату, де ви копіюєте відповіді руками, агент працює з вашими файлами і інструментами напряму. Claude Code - приклад такого агента.

Як дизайнеру створити свого AI-агента?

У Claude Code створіть Markdown-файл у папці .claude/agents/ проєкту: назва, опис, коли його використовувати, список дозволених інструментів і інструкція з чеклістом. Почніть з агента, який тільки перевіряє і звітує, наприклад рев'юера UI-змін на відповідність токенам дизайн-системи.

Чим агент відрізняється від Claude Skill?

Skill - це інструкція під тип задачі, яку Claude підтягує, коли вона потрібна, у тій самій розмові. Агент (субагент) - окремий виконавець з власною роллю, контекстом і обмеженим набором інструментів, якому основний Claude делегує задачу і отримує результат.

Чи треба вміти програмувати, щоб робити агентів?

Ні. Агент у Claude Code описується звичайним текстом у Markdown-файлі. Важливіше вміти чітко сформулювати задачу, вхід, вихід і чекліст перевірки. Базове розуміння Git і структури проєкту допомагає, тому що агенти працюють з файлами.

---

Агенти - не магія і не окрема професія. Це спосіб один раз описати, як ви робите повторювану роботу, і більше не робити її руками. Почніть з одного рев'юера, і за тиждень ви побачите, скільки дрібниць він ловить.