Автоматизація процесів2026EN
FLOW
Дванадцять автоматизацій, 4 177 запусків за тридцять днів і прогін, який видно на полотні вузол за вузлом, — включно з тим, що впав.
- SaaS
- Продуктовий UI
- Полотно-конструктор
- Дизайн-система

- Галузь
- Автоматизація процесів
- Тривалість
- Триває
- Команда
- 1 дизайнер · 2 інженери
- Платформи
- Вебзастосунок · Полотно-конструктор · Розбір запусків · Бібліотека шаблонів
01
Задача
Інструменти автоматизації продають полотно й ховають наслідки. Зібрати три вузли у щасливий шлях — це легка демонстрація; продукт оцінюють у вівторок, коли прогін падає на шостому кроці з восьми, бо за ніч змінилася форма даних, а інтерфейс відповідає червоною крапкою.
FLOW мав утримати весь цикл: зібрати, перевірити, прогнати на реальних даних, опублікувати версією — і далі жити з тим, скільки це коштує і що ламається. Це вісім розділів плюс конструктор і розбір запуску, і кожен читає ті самі дані про виконання — саме там, де такі продукти зазвичай починають сперечатися самі з собою.
- Воркспейс
- 12 сценаріїв · 8 опубліковано · 2 на паузі
- Обсяг
- 4 177 запусків за 30 днів
- Головна складність
- Відмову треба спроєктувати не гірше за щасливий шлях
02
Рішення
Полотно несе весь словник продукту: 38 типів вузлів у шести категоріях — тригери, дії, логіка, ШІ, інтеграції, утиліти, — і категорія підписана на самому вузлі, тому форма сценарію читається раніше за його текст.
Прогін — це не лампочка статусу. У кожного виконання лишаються таймлайн, лог і вхід із виходом на кожному кроці, тому відмова відкривається фразою: упав на кроці 6, «Send follow-up», очікувалося, що «amount» — число, а прийшов рядок; вставте вузол Transform перед цим кроком. Спосіб полагодити названо на тому ж екрані, де видно злам.
Публікація — це версія, перед якою стоїть валідація. Середовища розділені, опублікований сценарій можна поставити на паузу, відновити або відкотити, а тест іде на вашому JSON, поки полотно програє виконання вузол за вузлом.
- Словник
- 38 типів вузлів, шість категорій
- Діагностика
- Таймлайн, лог і вхід/вихід на кроках
- Публікація
- З валідацією, версіями й відкотом
03
Архітектура
- L0Оболонка Vite + ReactМаршрути по чанках
- L1Вісім розділівОгляд → налаштуванняПолотно-конструкторReact Flow
- L2ВалідаціяПеред публікацієюРушій виконанняОбходить граф
- L3Сервісний шарОформлений як API-клієнт
- L4Сховище воркспейсуСценарії, запуски, коментаріКаталог інтеграцій10 сервісів, мок-OAuthШІ-вузлиАналіз · класифікація · видобування
- L5localStorageЛокально-перший
Зв’язки (11)
- Оболонка Vite + React → Вісім розділів
- Оболонка Vite + React → Полотно-конструктор
- Полотно-конструктор → Валідація · перед публікацією
- Полотно-конструктор → Рушій виконання · тестовий прогін
- Вісім розділів → Сервісний шар
- Валідація → Сервісний шар
- Рушій виконання → Сервісний шар
- Рушій виконання → ШІ-вузли
- Рушій виконання → Каталог інтеграцій
- Сервісний шар → Сховище воркспейсу
- Сховище воркспейсу → localStorage · збереження
04
UX
Воркспейс відкривається фразою, яка справді потрібна керівнику операцій: 10 активних сценаріїв знімають із команди 505 годин ручної роботи. Поруч — запуски, частка успішних і заощаджений час як тренд, а не як прикраса.
У такому інструменті проводять цілий день, тому глибина відкривається з клавіатури: Ctrl K викликає палітру звідусіль, N додає вузол, R запускає тест, F вписує граф в екран. Нічого важливого не потребує миші.
Поломку показано там, де її лагодять. Сторінка інтеграцій починається з тієї, що потребує уваги, — Stripe, ключ API змінили 15 серпня, — і кнопка «Reconnect» стоїть на картці, а не лишає знахідку прогону, який упаде.
- Вхід
- Що працює і скільки заощадило
- Клавіатура
- Ctrl K · N · R · F · Ctrl S
- Поломки
- Показані там, де лагодяться
05
UI
Приладові поверхні, майже монохром, і єдиний кислотно-лаймовий акцент, який позначає головну дію та живий стан — і більше нічого. Будь-який стан, про який продукт має повідомити — успіх, відмова, виконується, пауза, скасовано, — несе підпис, тому колір ніколи не каже це сам.
Шість категорій вузлів отримують власні відтінки на полотні й ніде більше: це те єдине місце, де шість кольорів виправдані. Світла й темна теми спроєктовані обидві, включно із серіями графіків.
06
Розробка
Усе працює в браузері. Сценарії, запуски, інтеграції та коментарі лежать у localStorage за сервісним шаром, оформленим як API-клієнт, тому заміна мока на бекенд — це зміна однієї функції, а не інтерфейсу.
Рушій виконання, валідатор і аналітика — справжні реалізації над цими даними: тест обходить граф, підставляє змінні на кшталт {{lead.email}} із корисного навантаження, розгалужується на умовних вузлах і пише лог із тривалістю та вартістю по кожному вузлу.
Полотно — React Flow із власними вузлами, зв'язками, нотатками й мінікартою; маршрути розбиті на чанки, тому вагу конструктора не платить той, хто прийшов подивитися один запуск.
07
Що він вміє
Полотно-конструктор
38 типів вузлів у шести категоріях на одному полотні — з прив'язкою до сітки, мінікартою, нотатками й автозбереженням.
Тест до публікації
Прогін на вашому JSON, поки полотно програє виконання вузол за вузлом, у трьох швидкостях.
Валідація і версії
Перед публікацією йде валідація; опубліковані сценарії версіонуються, їх можна поставити на паузу, відновити або відкотити.
Розбір запуску
Таймлайн, повний лог і вхід/вихід на кожному кроці, а на самому запуску — тривалість і вартість.
Діагностика відмови
Прогін, що впав, називає крок, причину і спосіб полагодити та веде прямо до зламаного вузла.
Змінні
Будь-яке значення вище за потоком доступне синтаксисом {{lead.email}}; пікер показує рівно те, що існує на цьому кроці.
Інтеграції
Десять сервісів із мок-OAuth, діями для кожного і карткою, яка чесно каже, коли доступи протермінувалися.
Шаблони й аналітика
20 сценаріїв для форку з кількістю використань і часом налаштування, а також витрати на ШІ, інтеграції та запуски.
08
Інтеграції та стек
Інтеграції
- Slack
- Telegram
- Gmail
- Notion
- Google Sheets
- Stripe
- HubSpot
- OpenAI
- Discord
- Вебхуки
Фронтенд
- React
- TypeScript
- Vite
- Tailwind CSS
Полотно і графіки
- React Flow
- Recharts
- Framer Motion
Продукт
- Рушій виконання
- Валідація
- Локальний сервісний шар
09
Що з цього вийшло
- 38
- Типів вузлів
- 4 177
- Запусків за 30 днів
- 505 год
- Знято ручної роботи
- Локальний
- Стан
Тригери · дії · логіка · ШІ · інтеграції · утиліти
97,6% успішних, у середньому 2,81 с
≈ 63 робочі дні
localStorage за сервісним шаром у формі API
Інструмент автоматизації, який показує свої відмови так само ясно, як успіхи: у кожного прогону лишаються лог, дані й вартість, що його утворили, а спосіб полагодити названо на тому ж екрані, де видно злам.




Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.
Є продукт, який давно час зробити?Розкажіть про нього.
Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.