Перейти к содержимому
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 на мобильном
Мобильная версия

Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.

Есть продукт, который давно пора сделать?Расскажите о нём.

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