Автоматизация процессов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
Инструмент автоматизации, который показывает свои отказы так же ясно, как успехи: у каждого прогона остаются лог, данные и стоимость, которые его породили, а способ починки назван на том же экране, где виден слом.




Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.
Есть продукт, который давно пора сделать?Расскажите о нём.
Опишите, что должно измениться в вашем бизнесе. Мы разберёмся, что для этого действительно нужно — даже если нужно меньше, чем кажется.