FlownixДизайн-система «Чертёж» · v1
[01]

Принципы

  1. [01]

    Чертёж проявляется

    Линия, маска, чернила. Без bounce и scale-pop.

  2. [02]

    Скролл ведёт рассказ

    Объясняющие анимации привязаны к скроллу.

  3. [03]

    Одна активная точка

    Охра движется только вместе с фокусом внимания.

  4. [04]

    Тишина в интерфейсе

    Hover и focus ≤ 200 мс, медленные только сцены.

  5. [05]

    Доступность системой

    Reduced motion обрабатывается один раз, в провайдере.

[02]

Цвет

--canvasoklch(0.97 0.006 60)1.00:1 декор
--surfaceoklch(0.995 0.004 60)1.07:1 декор
--surface-sunkenoklch(0.935 0.009 60)1.11:1 декор
--inkoklch(0.225 0.010 55)15.69:1 AA
--mutedoklch(0.465 0.012 55)6.41:1 AA
--faintoklch(0.525 0.013 60)4.95:1 AA
--lineoklch(0.30 0.02 60 / 12%)
--line-strongoklch(0.28 0.025 55 / 24%)
--signaloklch(0.55 0.135 62)4.61:1 AA
--signal-hoveroklch(0.45 0.135 62)7.05:1 AA
--on-signaloklch(0.99 0.004 60)4.89:1 AA
--signal-washoklch(0.80 0.047 62)1.73:1 декор
--ink-filloklch(0.18 0.008 55)17.24:1 AA
--jadeoklch(0.50 0.100 155)5.23:1 AA
--roseoklch(0.545 0.140 20)4.88:1 AA
--skyoklch(0.50 0.090 230)5.37:1 AA
--violetoklch(0.48 0.120 300)6.31:1 AA
[03]

Типографика

Display · Inter Tight 600заглавные · трекинг −0.02em · интерлиньяж 1.0

Опишите продукт — агенты соберут дерево

Describe the product — agents build the tree

Декомпозиция, согласование спецификации, исполнение

Моно · JetBrains Mono

[01] ВВЕДЕНИЕ · [ЛИСТАЙТЕ ДАЛЬШЕ] · [0,544] · AF-TASK-41 · [ДОКИ / HARNESS]

Тикет хранит память агента. MCP-инструменты вместо промптов, скиллы ведут процесс, строгий spec-режим держит спеку рядом с кодом.

[04]

Сетка и рамка

1
2
3
4
5
6
7
8
9
10
11
12
[05]

Компоненты

НачатьУзнать больше
Ожидает одобренияОдобреноОтклонено
[bash]
claude mcp add --transport http flownix https://mcp.flownix.ru/mcp
  • План, память и спека живут в тикетах, а не в голове.

Опишите продукт — агенты соберут дерево

[06]

Моушн

--dur-instant

80ms

--dur-fast

180ms

--dur-base

400ms

--dur-slow

800ms

--dur-intro

1200ms

Курсор · link — наведите
Курсор · scene с подписью
SplitReveal · lines
Опишите продукт — агенты соберут дерево
SplitReveal · words (scrub)
Прямо рядом с вашим кодом
InkReveal · заливка по скроллу
DrawLines · прорисовка
PinnedScene · закреплённая сцена со scrub
[Сцена] Демо · шаг 1 из 3
  1. [01] ИДЕЯ

    Кадр раскадровки.

  2. [02] ДЕРЕВО

    Кадр раскадровки.

  3. [03] ГОТОВО

    Кадр раскадровки.

[07]

Иллюстрации

Примитивы · линии 1 / 1.5 / 2report-serviceAF-EPIC-12AF-TASK-41AF-TASK-42blocks
Сцена · итоговый кадрwebreport-servicegatewayAF-EPIC-12AF-FEAT-31AF-FEAT-32AF-PLAN-7AF-PLAN-8AF-TASK-41todoin_progresstestingdoneAF-TASK-42todoin_progresstestingdoneAF-TASK-43todoin_progresstestingdoneAF-TASK-44todoin_progresstestingdoneAF-TASK-45todoin_progresstestingdoneAF-TASK-46todoin_progresstestingdoneblocksblocksAF-DOC-12 · дельта+ Экспорт отчёта в PDF+ Шаблон с логотипом- Экспорт только в CSV+ Очередь фоновой сборки+ Ссылка живёт 24 часаОЖИДАЕТ ОДОБРЕНИЯОДОБРЕНОarchitect✓critic✗judge[decision] очередь в report-service[progress] лимит 50 МБ[decision] очередь в report-serviceAF-TASK-52rag_query → AF-TASK-43AF-EPIC-12AF-FEAT-31AF-FEAT-32AF-PLAN-7AF-PLAN-8AF-TASK-41AF-TASK-42AF-TASK-43AF-TASK-44AF-TASK-45AF-TASK-46ГОТОВО · 6 задач · 1 дельта · 0 расхождений со спекой

Чертёж строится из scene.data.ts; тот же источник даёт таймлайн сцены и раскадровку.

WaveIllustration

Абстрактная иллюстрация раздела «Для кого»: контур заливается чернилами по прокрутке и откатывается назад, гребень медленно дышит.

[08]

Логотип

Знак Flownix

Ствол и перекладины — дерево работы, смещённый блок с охровой гранью — задача. Изометрия от 32 px, ниже — фасад.

Фасад · 16 / 24 / 32
Flownix
[09]

Голос

Заголовки

ОПИШИТЕ ПРОДУКТ — АГЕНТЫ СОБЕРУТ ДЕРЕВО

DESCRIBE THE PRODUCT — AGENTS BUILD THE TREE

Коротко, заглавными, без точки в конце.

Моно-подписи

[ПЛАТФОРМА] · [ЛИСТАЙТЕ ДАЛЬШЕ]

[PLATFORM] · [SCROLL DOWN]

Существительные в квадратных скобках.

Машинный текст

AF-TASK-41 · architect · report-service

AF-TASK-41 · architect · report-service

Слаги, роли и компоненты не переводятся, всегда моно.

Абзацы

Тикет хранит память агента.

The ticket keeps the agent's memory.

Обычный регистр, одна мысль на предложение.