Перейти до вмісту
Silka

Автоматизація процесів2026EN

FLOW

Дванадцять автоматизацій, 4 177 запусків за тридцять днів і прогін, який видно на полотні вузол за вузлом, — включно з тим, що впав.

Відкрити живий сайт
  • SaaS
  • Продуктовий UI
  • Полотно-конструктор
  • Дизайн-система
Огляд FLOW з активними сценаріями, запусками та заощадженим часом
Галузь
Автоматизація процесів
Тривалість
Триває
Команда
1 дизайнер · 2 інженери
Платформи
Вебзастосунок · Полотно-конструктор · Розбір запусків · Бібліотека шаблонів

01

Задача

Інструменти автоматизації продають полотно й ховають наслідки. Зібрати три вузли у щасливий шлях — це легка демонстрація; продукт оцінюють у вівторок, коли прогін падає на шостому кроці з восьми, бо за ніч змінилася форма даних, а інтерфейс відповідає червоною крапкою.

FLOW мав утримати весь цикл: зібрати, перевірити, прогнати на реальних даних, опублікувати версією — і далі жити з тим, скільки це коштує і що ламається. Це вісім розділів плюс конструктор і розбір запуску, і кожен читає ті самі дані про виконання — саме там, де такі продукти зазвичай починають сперечатися самі з собою.

Воркспейс
12 сценаріїв · 8 опубліковано · 2 на паузі
Обсяг
4 177 запусків за 30 днів
Головна складність
Відмову треба спроєктувати не гірше за щасливий шлях

02

Рішення

Полотно несе весь словник продукту: 38 типів вузлів у шести категоріях — тригери, дії, логіка, ШІ, інтеграції, утиліти, — і категорія підписана на самому вузлі, тому форма сценарію читається раніше за його текст.

Прогін — це не лампочка статусу. У кожного виконання лишаються таймлайн, лог і вхід із виходом на кожному кроці, тому відмова відкривається фразою: упав на кроці 6, «Send follow-up», очікувалося, що «amount» — число, а прийшов рядок; вставте вузол Transform перед цим кроком. Спосіб полагодити названо на тому ж екрані, де видно злам.

Публікація — це версія, перед якою стоїть валідація. Середовища розділені, опублікований сценарій можна поставити на паузу, відновити або відкотити, а тест іде на вашому JSON, поки полотно програє виконання вузол за вузлом.

Словник
38 типів вузлів, шість категорій
Діагностика
Таймлайн, лог і вхід/вихід на кроках
Публікація
З валідацією, версіями й відкотом

03

Архітектура

  1. L0
    Оболонка Vite + ReactМаршрути по чанках
  2. L1
    Вісім розділівОгляд → налаштування
    Полотно-конструкторReact Flow
  3. L2
    ВалідаціяПеред публікацією
    Рушій виконанняОбходить граф
  4. L3
    Сервісний шарОформлений як API-клієнт
  5. L4
    Сховище воркспейсуСценарії, запуски, коментарі
    Каталог інтеграцій10 сервісів, мок-OAuth
    ШІ-вузлиАналіз · класифікація · видобування
  6. L5
    localStorageЛокально-перший
Зв’язки (11)
  • Оболонка Vite + React Вісім розділів
  • Оболонка Vite + React Полотно-конструктор
  • Полотно-конструктор Валідація · перед публікацією
  • Полотно-конструктор Рушій виконання · тестовий прогін
  • Вісім розділів Сервісний шар
  • Валідація Сервісний шар
  • Рушій виконання Сервісний шар
  • Рушій виконання ШІ-вузли
  • Рушій виконання Каталог інтеграцій
  • Сервісний шар Сховище воркспейсу
  • Сховище воркспейсу localStorage · збереження
Клієнт, що працює локально. Кожна поверхня ходить через один сервісний шар, оформлений як API-клієнт, тому справжньому бекенду треба замінити лише сховище.

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 днів

97,6% успішних, у середньому 2,81 с

505 год
Знято ручної роботи

≈ 63 робочі дні

Локальний
Стан

localStorage за сервісним шаром у формі API

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

Полотно FLOW зі сценарієм кваліфікації лідів
Полотно-конструктор
Розбір запуску FLOW, що впав, по кроках
Прогін, що впав, розібраний
Аналітика FLOW із запусками, часткою успішних і вартістю
Запуски й витрати
FLOW на мобільному
Мобільна версія

Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.

Є продукт, який давно час зробити?Розкажіть про нього.

Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.