Ядро дизайн-системи для невеликого продукту коштує близько 250-350 годин роботи без AI (приблизно $9 000 за середньої ставки $30/год) і 80-120 годин з AI (близько $3 000). Система для SaaS на 50-100 екранів - $20-25 тисяч проти $6-9 тисяч з AI, а мультибрендова на кілька платформ починається від $60 000. AI знімає 60-70% годин на малих і середніх системах, бо забирає рутину: аудит, токени, стани, документацію і перенесення в код. Рішення, узгодження і підтримку він не прискорює, тому їх треба закладати окремо.
Нижче - три масштаби систем, розкладка по етапах у годинах, приховані витрати, про які забувають у кошторисі, і проста формула, як порахувати окупність для своєї команди. Цифри - мої орієнтири з проєктів UX Hero і ринкових ставок, а не ціна з прайсу агенції.
Від чого залежить вартість дизайн-системи?
Вартість дизайн-системи = кількість годин × ставка команди, а години визначають п'ять факторів:
- Кількість компонентів. 15 базових (кнопка, поле, селект, чекбокс, картка, модалка) - це зовсім інший обсяг, ніж 60 з таблицями, датапікерами і графіками.
- Кількість станів. Кнопка з default і hover - година роботи. Кнопка з hover, focus, active, disabled, loading і трьома розмірами - день.
- Теми і бренди. Темна тема додає 15-25% до роботи з токенами, кожен додатковий бренд - ще стільки ж.
- Платформи. Тільки веб - одна кодова бібліотека. Веб + iOS + Android - три.
- Чи доходить система до коду. Система лише у Figma коштує вдвічі дешевше, але без коду це, по суті, UI-kit з документацією. Різницю детально розбирали в матеріалі дизайн-система vs UI-kit.
Скільки коштує дизайн-система: три масштаби
Розрахунок за середньою змішаною ставкою $30/год (дизайнер + фронтенд-розробник рівня middle/senior на українському ринку). Для західних команд множте на 2-3.
| Масштаб | Що входить | Без AI | З AI |
|---|---|---|---|
| Ядро (MVP, до 30 екранів) | токени, 15-20 компонентів, одна тема, CSS-змінні | 250-350 год · ~$9 000 · 6-8 тижнів | 80-120 год · ~$3 000 · 1-2 тижні |
| Продуктова (SaaS, 50-100 екранів) | 40+ компонентів, світла і темна тема, React + Storybook, документація | 650-850 год · $20-25 тис. · 3-4 місяці | 200-300 год · $6-9 тис. · 4-6 тижнів |
| Мультибрендова (кілька продуктів і платформ) | 60+ компонентів, 2+ бренди, веб і мобайл, версіонування, процес змін | 2 000-3 000 год · $60-90 тис. · 6-12 місяців | 1 300-2 000 год · $40-60 тис. · 4-8 місяців |
Для порівняння: західні студії зазвичай оцінюють проєкт «токени + компоненти» в $8-25 тисяч і 4-10 тижнів, агенції - до $50 тисяч. Тобто наш рядок «Продуктова без AI» плюс-мінус збігається з ринком, а з AI той самий обсяг стає доступним для невеликої команди чи навіть одного дизайнера.
Скільки часу AI економить на кожному етапі?
Ось де саме зникають години на прикладі продуктової системи. Інструменти - Claude Code, Figma MCP і Figma Variables.
| Етап | Без AI | З AI | Що робить AI |
|---|---|---|---|
| Аудит наявних екранів | 3-5 днів | 1 день | збирає всі кольори, шрифти, відступи і дублі компонентів з файлу |
| Primitive-токени | 3-5 днів | 0,5-1 день | зводить 40-60 відтінків до палітри, будує шкали |
| Semantic-токени + темна тема | 1-2 тижні | 1-2 дні | пропонує ролі, перевіряє контраст, генерує другий режим |
| Компоненти зі станами | 3-4 тижні | 4-6 днів | генерує матриці станів і варіантів, ви ревʼюїте |
| Документація | 2-3 тижні | 1-2 дні | пише чернетки «коли використовувати / коли ні» |
| Код: токени, React, Storybook | 4-6 тижнів | 1-2 тижні | експорт токенів у CSS, компоненти і Storybook-сторі за специфікацією |
| Правила для AI-агентів | - | кілька годин | AGENTS.md, щоб наступна генерація коду спиралась на систему |
Детально кожен етап з промптами і порядком дій - у покроковому гайді, як зібрати дизайн-систему з AI. А живі збірки систем я показую на YouTube-каналі UX Hero.
Де AI нічого не економить?
Це важливо, щоб не повірити в «систему за вихідні». AI прискорює виконання, але не рішення:
- Продуктові рішення. Скільки варіантів кнопки потрібно, що вважається помилкою, як поводиться порожній стан - вирішуєте ви.
- Ревʼю. Кожну матрицю станів і кожну чернетку документації треба перевірити очима. Закладайте на це 20-30% зекономленого часу.
- Узгодження з командою. Зустрічі з розробкою, продактом і брендом займають стільки ж, скільки й раніше.
- Міграція старих екранів. Перевести продукт на нову систему - окремий проєкт, часто більший за саму систему.
Саме тому на великих системах економія падає до 30-40%: там узгоджень і процесів більше, ніж рутини.
Які приховані витрати забувають закласти?
- Підтримка - 10-20% від вартості створення на рік. Нові компоненти, оновлення токенів, версії пакета.
- Власник системи. Хтось має вирішувати, що потрапляє в систему. Без власника система за рік-півтора деградує назад у кит. Як це влаштувати - у матеріалі governance дизайн-системи.
- Онбординг команди. 1-2 дні на кожного нового розробника і дизайнера, поки документація не стане звичкою.
- Підписки. Figma з Variables, Claude, хостинг Storybook. Для невеликої команди - $50-150 на місяць.
Коли дизайн-система окупається?
Формула окупності: вартість системи ÷ (години, зекономлені командою за тиждень × ставка) = кількість тижнів до окупності.
Приклад. Команда: 2 дизайнери і 4 розробники. Без системи кожен втрачає щонайменше 3 години на тиждень на перепитування «а який тут відступ», переробки після QA і дублі компонентів. Це 18 годин, або близько $540 на тиждень. Продуктова система з AI за $7 500 окупається приблизно за 14 тижнів, тобто за квартал. Без AI та сама система за $22 000 окупалась би понад 9 місяців.
Є ще один фактор, якого не було кілька років тому: код дедалі частіше пише AI. Без системи Claude чи Cursor вгадують кольори й відступи, і кожен згенерований екран трохи інший. З токенами і правилами агент з першого разу генерує код, який збігається з дизайном. Тому в 2026 році система окупається швидше, ніж у старих розрахунках, - вона економить години не тільки людям, а й на переробках після AI.
Це і є наш кут у UX Hero. Згенерувати гарну кнопку вміє будь-яка нейромережа. Довести сотню екранів до продакшну так, щоб вони виглядали як один продукт, вміє тільки система, зібрана дизайнером, який розуміє код.
Як не переплатити за дизайн-систему?
- Почніть з аудиту, а не з компонентів. Один день аудиту показує реальний обсяг. Як це зробити - у матеріалі аудит дизайн-системи за один день.
- Будуйте ядро, а не «повну» систему. 15-20 компонентів покривають 80% екранів. Решту додавайте, коли вони реально потрібні.
- Токени до компонентів. Перша ж темна тема без токенів змушує перемальовувати все.
- Одразу ведіть систему в код. Система тільки у Figma - половина вартості за чверть користі.
- Віддайте рутину AI, рішення залиште собі. Так ви платите за думання, а не за перейменування шарів.
Часті питання
Скільки коштує дизайн-система у 2026 році?
Залежить від масштабу. Ядро для MVP чи невеликого продукту (токени і 15-20 компонентів) - приблизно 250-350 годин без AI, тобто близько $9 000 за середньої ставки $30/год, і 80-120 годин з AI, близько $3 000. Система для SaaS на 50-100 екранів - $20-25 тисяч без AI і $6-9 тисяч з AI. Мультибрендова система для кількох платформ - від $60 000 і вище.
Скільки часу економить AI при створенні дизайн-системи?
На малих і середніх системах AI знімає 60-70% годин: аудит, перейменування токенів, матриці станів, чернетки документації і перенесення в код. На великих мультибрендових системах економія ближче до 30-40%, бо там більшу частину часу займають рішення, узгодження і процес змін, які AI не прискорює.
Скільки коштує підтримка дизайн-системи після запуску?
Закладайте 10-20% від вартості створення на рік: нові компоненти, оновлення токенів, версії пакета, міграція старих екранів. Система без власника і бюджету на підтримку за рік-півтора перетворюється назад на UI-kit, який ніхто не оновлює.
Коли дизайн-система окупається?
Порахуйте так: години, які команда щотижня витрачає на перепитування, переробки і дублі компонентів, помножте на ставку. Якщо команда з 6 людей економить хоча б 3 години на людину на тиждень, це 18 годин або близько $540 на тиждень, і система за $7 500 окупається приблизно за 14 тижнів.
Чи можна зібрати дизайн-систему самому, не наймаючи агенцію?
Так, якщо ви дизайнер, який готовий працювати з токенами і Claude. Ядро системи на базі наявного кита реально зібрати за 1-2 тижні. Саме цьому вчить курс UX Hero «Дизайн-система з AI» від Dmytro Nikolaienko: 7 модулів від аудиту і Figma Variables до компонентів з 10 станами, документації і пайплайну до Storybook.
Дизайн-система - не витрата на красу, а інвестиція в швидкість. У 2026 році AI зробив її у 3 рази дешевшою, але не безкоштовною: платити тепер треба не за години рутини, а за рішення і за людину, яка за системою дивиться.