UX Hero
★ Безкоштовний гайд
Claude Code · Agentic workflow

Армія агентів,
яка збирає компонент сама

Один LEAD-агент у центрі, навколо — команда спеціалістів. Ти ставиш задачу один раз, тиснеш «запустити» — і вони беруть макет із Figma та доводять його до живого React-компонента у Storybook. Без твоєї участі.

Клацай агента, щоб побачити що він робить. Готовий — тисни «Запустити команду».
Пайплайн · від Figma до Chromatic
Як запустити в Claude Code
1
Встав Промпт 1 — Claude створює команду у .claude/agents/ + карту agents.html
2
/agents — бачиш свою команду у списку
3
Встав Промпт 2 — «прожени команду» → агенти працюють самі, ти лише апруваєш на чекпоінтах
★ Третій флагманський курс UX Hero

Усе це і набагато більше —
на курсі Design Engineer

10 лекцій: від git init до прод-PR через AI. Git, React, Figma-токени, Storybook, MCP і власна команда агентів. Для дизайнерів, які вже малюють.

Дізнатись про курс →
UX Hero
Карта команди

Хто що робить

Кожен агент — окремий файл у .claude/agents/ з власною зоною відповідальності. LEAD делегує по черзі.

Команда · 1 LEAD + 5 спеціалістів
★ Третій флагманський курс UX Hero

Збери свою команду агентів
на курсі Design Engineer

Готові промпти, скіли та повний agentic-workflow від Figma до прод-PR — усе в курсі.

Дізнатись про курс →
Промпт · створити команду агентів
Встав у Claude Code → він збере команду у .claude/agents/
Ти — LEAD-агент (оркестратор) для збірки React-компонента з Figma. Сам код не пишеш — створюєш команду і делегуєш їй.

Створи субагентів у .claude/agents/ (кожен — окремий .md з YAML-фронтматтером name + description):
• figma-spec — читає Figma-фрейм через Figma MCP → SPEC.md (усі стани, токени, a11y, edge cases)
• component-builder — React + TS + Tailwind компонент за SPEC, усі стани, тільки токени (без хардкоду)
• storybook — вантажить компонент у Storybook, дає лінк на story, дергає npx chromatic (прев'ю)
• reviewer — read-only рев'ю: стани зі SPEC, токени, a11y → вердикт PASS / FAIL
• shipper — git commit + push + PR; на merge повертає Chromatic live URL

Також створи просту agents.html — карту команди: роль кожного, що робить, послідовність і зона відповідальності.

Покажи /agents і ЗУПИНИСЬ — я гляну команду перед запуском.

Далі я скажу «прожени команду» з посиланням на Figma-фрейм — і ти ведеш пайплайн: spec → builder → storybook → reviewer → shipper, оголошуючи кожен крок і зупиняючись на моє ОК.