| 1 | # CIDE Visual Design System (VDS) v1 |
| 2 | |
| 3 | **Статус:** v1 (visual projection of ADR — не дублирует норматив) |
| 4 | **Дата:** 2026-07-11 |
| 5 | **Аудитория:** дизайнер, UX, разработка (Skia/AXAML) |
| 6 | |
| 7 | **Роль:** VDS переводит уже принятые ADR и handbook в **проверяемые визуальные DoD**. Новую продуктовую философию не вводит. |
| 8 | |
| 9 | **Старт:** [cide-design-handbook-v1.md](cide-design-handbook-v1.md) · **Референсы (explore):** agent-notes `cide-vds-reference-matrix-v1.md` |
| 10 | |
| 11 | --- |
| 12 | |
| 13 | ## Design thesis |
| 14 | |
| 15 | Классические IDE заточены под **написание кода**; сопутствующая информация (решения, intent, «почему так») живёт сбоку и читается плохо. В agentic-цикле **авторинг в основном у агента**; человеку остаётся **восприятие, направление и фиксация решений**. Редактор — по reveal, для проверки и точечных правок. |
| 16 | |
| 17 | VDS переводит это в визуальные правила: **бюджет полировки на Surface** (Intercom — читать, ориентироваться, ветвить), chrome и редактор — тихие и периферийные, пока оператор не запросил код. Подробнее: [0172](../adr/0172-conversation-first-habitat.md) · KB `kb-cide-brand-positioning-v1.md`. |
| 18 | |
| 19 | --- |
| 20 | |
| 21 | ## 1. Принципы (сжатие ADR) |
| 22 | |
| 23 | | ID | Инвариант | Смысл | ADR / design | |
| 24 | |----|-----------|-------|--------------| |
| 25 | | **I1** | **Chrome peripheral** | Оболочка IDE не конкурирует с Forward; объёмные/сложные элементы хрома оттягивают внимание | [0021](../adr/0021-pfd-mfd-cockpit-attention-model.md), [0066](../adr/0066-cockpit-ui-vs-ide-presentation-layer.md) | |
| 26 | | **I2** | **Quiet normal** | В норме тишина; salience только при отклонении. Не «новогодняя ёлка» | [flat-chrome-dark-cockpit-v1.md](flat-chrome-dark-cockpit-v1.md), [0064](../adr/0064-deck-primitives-visual-language-render-layer-and-palette.md) | |
| 27 | | **I3** | **Surface-first** | Бюджет читаемости и полировки — Intercom (чтение, навигация, обсуждение), не редактор | [0120](../adr/0120-primary-work-surface-intercom-or-editor.md), [0170](../adr/0170-intercom-feed-readability-mlp.md), [0172](../adr/0172-conversation-first-habitat.md) | |
| 28 | | **I4** | **Editor on reveal** | Редактор — инструмент по attach/reveal, не дефолтный центр внимания | [0120](../adr/0120-primary-work-surface-intercom-or-editor.md), [0128](../adr/0128-intercom-attachment-anchors-and-code-references.md) | |
| 29 | | **I5** | **Layers don't mix** | Chrome, Surface (Skia), Instrument (deck) — три палитры/ритма; не один «Figma на всё» | [0066](../adr/0066-cockpit-ui-vs-ide-presentation-layer.md), handbook §8.1 | |
| 30 | |
| 31 | **Одной строкой:** тишина в норме; внимание на коммуникацию и картину; хром и код — по запросу. |
| 32 | |
| 33 | --- |
| 34 | |
| 35 | ## 2. Три слоя VDS |
| 36 | |
| 37 | ```text |
| 38 | Surface VDS Intercom feed, composer, worklines, scope, tree/timeline |
| 39 | Skia-first · приоритет полировки · [0117](../adr/0117-ide-skia-kit.md), [0123](../adr/0123-intercom-full-skia-surface-evolution.md) |
| 40 | |
| 41 | Chrome VDS Shell, MFD pages, modals, settings, toolbars |
| 42 | Приглушённый · тонкие границы · [ide-chrome-tokens-v1.md](ide-chrome-tokens-v1.md) |
| 43 | |
| 44 | Instrument VDS Deck primitives, health, annunciator, semantic map |
| 45 | Salience on deviation · [0064](../adr/0064-deck-primitives-visual-language-render-layer-and-palette.md) |
| 46 | ``` |
| 47 | |
| 48 | | Слой | Код | Когда ярко | |
| 49 | |------|-----|------------| |
| 50 | | Surface | `Views/SkiaKit/`, `Views/Chat/Skia/` | Активная workline, head ветки, открытый batch | |
| 51 | | Chrome | `Views/UiKit/`, `Features/UiChrome/`, `CascadeTheme.*` | Focus ring, modal, редко | |
| 52 | | Instrument | `Cockpit/PrimitivesKit/` | Warning / alert / EICAS | |
| 53 | |
| 54 | --- |
| 55 | |
| 56 | ## 3. Visual DoD (проверка глазами) |
| 57 | |
| 58 | ### 3.1 Quiet normal (I2) |
| 59 | |
| 60 | | ✓ Норма | ✗ Нарушение | |
| 61 | |---------|-------------| |
| 62 | | Фон и chrome в одной тёмной семье, низкий контраст между панелями | Glow, градиенты, неон на chrome | |
| 63 | | Один акцентный hue (активная линия / ветка) | Rainbow hero cards, «ёлка» на весь экран | |
| 64 | | Иконки мелкие, приглушённые (sidebar dimmer) | Крупные цветные CTA без причины | |
| 65 | | Power PNG — **alert/demo**, не baseline UI | Сравнение реального UI с Power poster как acceptance | |
| 66 | |
| 67 | ### 3.2 Surface-first (I3) |
| 68 | |
| 69 | | ✓ | ✗ | |
| 70 | |---|---| |
| 71 | | Prose measure cap, comfortable metrics [0170] | Full-width cards без measure | |
| 72 | | Flat feed, role rail, без пузырей | Bubble chat как default | |
| 73 | | Worklines = строки (title + meta) [0172 S3] | Hero cards overview | |
| 74 | | Scope читается без скролла (когда есть data) | Только лента без tree/scope (moat loss) | |
| 75 | |
| 76 | ### 3.3 Chrome peripheral (I1) |
| 77 | |
| 78 | | ✓ | ✗ | |
| 79 | |---|---| |
| 80 | | Forward ~90% conversation-first canvas | SE/Terminal забирают Forward после `load_solution` [0172 S6] | |
| 81 | | MFD — осознанное переключение | Постоянный «второй спектакль» панелей | |
| 82 | | Compact tier — обычная IDE плотность [0171] | Cockpit колонки на 1–2 мониторах без tier | |
| 83 | |
| 84 | --- |
| 85 | |
| 86 | ## 4. Anti-patterns (стоп-кран) |
| 87 | |
| 88 | Совпадают с [0172 §6](../adr/0172-conversation-first-habitat.md) и handbook: |
| 89 | |
| 90 | - Detail = только flat feed (паритет с линейным agent chat) |
| 91 | - Topics = New Chat |
| 92 | - Hero cards на wide canvas |
| 93 | - Glow/неон на chrome как default |
| 94 | - Poster frame (concept PNG) как **единственный** критерий приёмки G1 |
| 95 | |
| 96 | --- |
| 97 | |
| 98 | ## 5. Референсы Phase 0 (вне репо) |
| 99 | |
| 100 | Матрица продуктовых референсов и ссылок на скрины — в KB: |
| 101 | |
| 102 | `agent-notes/knowledge/work/projects/door-to-singularity/cascade-ide/cide-vds-reference-matrix-v1.md` |
| 103 | |
| 104 | **За I1–I3:** Slack flat density, Linear calm UI, Mattermost scanability. |
| 105 | **Паттерны, не клон:** Cursor/Windsurf attach, VS Code sessions. |
| 106 | **Не baseline:** Power concept glow, Windsurf agent-sidebar-only. |
| 107 | |
| 108 | --- |
| 109 | |
| 110 | ## 6. Implementation map (куда кодить) |
| 111 | |
| 112 | | VDS элемент | Канон кода / токены | |
| 113 | |-------------|---------------------| |
| 114 | | Chrome colors, radii | `CascadeTheme.*`, `Themes/*.json`, `App.axaml` | |
| 115 | | Intercom feed / composer | `SkiaChatTheme`, `SkiaKitPaintTheme`, [0170](../adr/0170-intercom-feed-readability-mlp.md) | |
| 116 | | Section / inset / chip | `Views/UiKit/`, `cascadeSection`, `cascadeInset` | |
| 117 | | Deck lamps / bars | `Cockpit/PrimitivesKit/`, `DeckPrimitiveKind` | |
| 118 | | Habitat wireframes | `cide-session-graph-habitat-concept-v2.png` (north-star), [0172](../adr/0172-conversation-first-habitat.md) ladder G1–G4 | |
| 119 | |
| 120 | **Разрыв сегодня:** `concept-to-implementation-map-v1.md` §4.1 — Fluent tree, плотность Power PNG vs runtime. VDS приоритизирует **Surface** над выравниванием всего chrome под poster. |
| 121 | |
| 122 | --- |
| 123 | |
| 124 | ## 7. Фазы VDS (после principles) |
| 125 | |
| 126 | | Фаза | Deliverable | Связь ADR | |
| 127 | |------|-------------|-----------| |
| 128 | | **V0** | Principles + matrix (этот doc + KB) | — | |
| 129 | | **V1** | Token sheet v2 (type + spacing + Surface mirror) | [0086](../adr/0086-ui-theme-toml-canonical-json-mcp-wire.md) | |
| 130 | | **V2** | 12 named components (message row, workline row, scope strip, …) | [0117](../adr/0117-ide-skia-kit.md) | |
| 131 | | **V3** | 2 эталонных экрана: Intercom comfortable + MFD settings | handbook §8.4 | |
| 132 | | **V4** | Chrome spike (Semi vs Fluent) — один экран | [0171](../adr/0171-presentation-tiers-compact-vs-cockpit.md) | |
| 133 | |
| 134 | **Не блокирует moat:** G2–G4 session graph [0172] важнее pixel-polish chrome. |
| 135 | |
| 136 | --- |
| 137 | |
| 138 | ## 8. Связанные документы |
| 139 | |
| 140 | | Документ | Роль | |
| 141 | |----------|------| |
| 142 | | [cide-design-handbook-v1.md](cide-design-handbook-v1.md) | Принципы и маршрут дизайнера | |
| 143 | | [ide-chrome-tokens-v1.md](ide-chrome-tokens-v1.md) | Chrome tokens v1 | |
| 144 | | [intercom-design-hub-v1.md](intercom-design-hub-v1.md) | Intercom D1–D9 | |
| 145 | | [concept-to-implementation-map-v1.md](../ui-ux/concept-to-implementation-map-v1.md) | Концепт PNG vs XAML | |
| 146 | | [0172](../adr/0172-conversation-first-habitat.md) | Habitat north-star + implementation ladder | |
| 147 | |
| 148 | --- |
| 149 | |
| 150 | *VDS v1 — projection layer. Норматив поведения остаётся в ADR; при споре с инженерами — ADR wins.* |
| 151 | |