РазработкаДизайнDesign Handoff

PlanForge — Design Handoff

Актуально на: 2026-05-26

Документ для внешнего дизайнера. Единая точка входа: цель, скоуп, контекст, ограничения.

Сопутствующие материалы:

  • DESIGN_AUDIT.md — полный инвентарь существующего интерфейса (1191 строка, со сквозным оглавлением). Не читать целиком — открывать по разделам, когда будете работать над конкретной фичей.
  • DESIGN_SCREENSHOTS.md — инструкция по сбору визуального референса (для нашей команды, не для дизайнера).
  • design-screenshots/ — готовый набор скриншотов всех экранов и состояний (будет передан отдельно).

1. Что за продукт

PlanForge — веб-сервис для подготовки бизнес-планов и финансовых моделей с маркетплейсом готовых планов.

Пользователь создаёт бизнес-план в полноэкранном конструкторе (workspace: продукты, персонал, материалы, инвестиции, кредиты, cashflow), может опубликовать его в маркетплейсе для продажи. Покупатели сравнивают и приобретают планы. Ревьюеры модерируют публикации.

Три роли:

  • USER — создаёт планы, покупает в маркетплейсе.
  • REVIEWER — модерирует публикации.
  • ADMIN — управляет пользователями, AI-чатом, Ollama, маркетплейсом.

2. Задача

Полная переделка дизайна с нуля. Сейчас в проекте сосуществуют две дизайн-системы (см. §6 ниже) — нужно создать единый язык. Существующий UI — отправная точка для понимания функциональности, не образец для подражания.

2.1 In scope

Все экраны и состояния, описанные в DESIGN_AUDIT.md:

  • Auth (sign-in, sign-up, forgot-password)
  • App (projects, marketplace, card-builder, my-listings, my-purchases, reviews, admin × 4, profile, settings)
  • Workspace (6 views: hub, chat, keypoints, classic, plan, presentation) и ~48 секций
  • Модалки, drawers, popovers, тосты
  • Иллюстрации для пустых состояний и ошибок
  • Графики и data-viz (см. DESIGN_AUDIT.md §10.10)
  • V2 Collectible Card (коллекционные карточки маркетплейса)
  • Логотип и брендинг (сейчас только текстовый)
  • Иконография (можно оставить Tabler или предложить замену)

2.2 Системные требования

ТребованиеРешение
Mobile-адаптивДа, полный. Целевые брейкпоинты: 360 / 768 / 1024 / 1440 / 1920. Workspace на мобильном тоже нужен (можно с упрощённой навигацией).
Dark modeДа. Светлая + тёмная тема как минимум.
i18nСейчас русский хардкодом. Дизайнить с учётом, что строки могут удлиняться (нем./англ. на 30–40%).
A11yWCAG 2.1 AA как baseline: focus-visible, контрасты текста ≥4.5:1, keyboard-навигация, ARIA-роли.
Print / PDFPresentation-view (cashflow) — желательна печатная вёрстка.

2.3 Out of scope

  • Email-темплейты (отдельная задача позже).
  • Иллюстрации marketing-сайта (если будет).
  • Анимация V2 Collectible Card в текущем виде (7 эффектов: glitch / iridescent / liquid / riso / misregister / spotlight / grain) — можно сохранить как есть или предложить новые. На усмотрение дизайнера.

3. Deliverable

  • Figma-файл — обязательно. Структура: страницы → компоненты → экраны → flows.
  • Design Tokens — желательно. Формат на ваше усмотрение (Figma Variables / Tokens Studio / JSON в W3C-формате). Если не возьмётесь — мы извлечём токены сами из Figma Variables.
  • UI Kit в Figma как library с компонентами и состояниями.
  • Прототип ключевых flows (см. §7) — желательно.

4. Сроки и процесс

TODO — обсудить с дизайнером после знакомства с материалами. Ориентировочные контрольные точки:

  1. Discovery: знакомство с продуктом, вопросы, мудборд / direction.
  2. Design system: токены, типографика, базовые компоненты.
  3. Ключевые экраны: 5–7 шаблонов.
  4. Полное покрытие: все ~25 маршрутов.
  5. Workspace и mobile-адаптив.
  6. Передача и поддержка.

5. Стейкхолдеры

TODO — заполнить именами/контактами.

  • Владелец продукта:
  • Технический контакт (вопросы по реализуемости в Tailwind / Next.js):
  • Доменный эксперт (вопросы по бизнес-логике):

6. Контекст: текущий стек и две дизайн-системы

Стек: Next.js 16 (App Router) + React 19 + TypeScript + Tailwind v4 (токены через CSS-переменные и @theme inline, без tailwind.config). Иконки @tabler/icons-react.

В коде сейчас две дизайн-системы:

  1. PF (PlanForge) — базовая: пастельные акценты, pill-кнопки, soft-shadow, grid-glow + paper-grain фон. 4 цветовые темы (planforge / venture / realestate / slate) переключаются пользователем. Используется в auth/app/workspace/admin.
  2. MK (Marketplace) — премиум: glass, Instrument Serif + Caveat, ambient mesh, holo-ring, категорийные тинты. Скоупом [data-surface="marketplace"]. Используется только в маркетплейсе.

Задача — заменить обе на единый язык. Можно сохранять разные «настроения» (например, маркетплейс премиальнее), но через токены и градации одной системы, а не как два параллельных мира.

6.1 Технические ограничения

  • Tailwind v4 остаётся (CSS-переменные + utility-classes).
  • Можно вводить Radix / Headless UI / shadcn — обсудим перед использованием.
  • Шрифты желательно через next/font (self-hosted), без CDN-импорта.
  • БД хранит UI-настройки пользователя (тема, отступы, hover-эффекты, порядок workspace-views). Если меняете токен-структуру — учитывайте миграцию данных.

7. Ключевые user flows

Для прототипа и проверки логики:

  1. Регистрация и первый план: /sign-up → /projects → создание проекта → workspace (заполнение классики и плана) → /projects/[id]/publish → /my-listings (PENDING_REVIEW).
  2. Ревью: /reviews → /reviews/[id] (6 табов) → Approve или Reject с комментарием → возврат к очереди.
  3. Покупка: /marketplace → фильтры + поиск → pin 2–3 листингов → CompareDock → CompareModal → ListingModal → покупка → /my-purchases.
  4. AI-чат и применение действий: workspace.chat → запрос → ActionsList (карточки insert/update/delete/navigate) → Apply All → проверка результата в classic/plan.
  5. Админ: /admin/marketplace (KPI) → /admin/users (выдать REVIEWER) → /admin/ai (управление чатом) → /admin/ollama (модели).

Дополнительные flows см. в DESIGN_AUDIT.md §4.

8. Доменный глоссарий

Базовые термины из интерфейса. Полные определения — у доменного эксперта (см. §5).

ТерминЧто это в UI
Бизнес-план / финмодельЦентральная сущность. Создаётся в workspace, имеет 6 views (см. ниже).
WorkspaceПолноэкранный конструктор плана. 6 views: Хаб / AI чат / Ключевые моменты / Бизнес-модель (classic) / Бизнес-план (plan) / Презентация.
ЛистингОпубликованный план на маркетплейсе. Имеет статусы: PENDING_REVIEW / APPROVED / REJECTED / SOLD / ARCHIVED.
Копия vs Эксклюзивная передачаДва типа сделки: продажа копии плана vs передача прав целиком (необратимо).
МИКМатериалы и комплектующие. Раздел операционного плана: каталог, спрос, закупки, цены, стоимость закупок.
ФОТ / ПерсоналФонд оплаты труда. Сотрудники, ставки, бонусы, частота выплат.
CashflowОтчёт о движении денег. Три секции: Operating / Investing / Financing + итог.
ИндексацияЕжегодное удорожание (расходов/цен).
Payment timing / frequencyКогда (старт периода / конец / середина) и как часто (месяц / квартал / год / разово) платится статья.
CooldownПериод между публикациями листингов (настройка админа).
Featured / PinnedОсобое выделение листинга в маркетплейсе.
GranularityМесяц / квартал / год — гранулярность таблиц и графиков workspace.
Inv. calendar / GanttИнвестиционный календарь, может рендериться в 4 видах: Table / Gantt / Matrix / Distribution.

9. Системные пробелы — нужно спроектировать с нуля

То, чего в коде нет (помимо общего редизайна):

  1. Error / 404 / 500 / offline страницы — отсутствуют.
  2. Loading skeleton’ы — есть только для /projects и /workspace, для остальных 25+ маршрутов нет.
  3. Единая toast-система — сейчас все feedback inline. Спроектировать toaster + правила использования.
  4. Empty states — несогласованны (эмодзи 🗑/✓ в одних местах, иконки + mesh в других). Нужен единый паттерн с иллюстрацией.
  5. Логотип — сейчас только текстовый PlanForge uppercase. Нужен графический.
  6. Иконография для бизнес-сущностей — МИК / Cashflow / Investment calendar и т.п. сейчас собраны из tabler-набора. Возможно, стоит спроектировать кастомный набор.

10. Что НЕ нужно повторять из текущего дизайна

  • Хардкод цветов вне токенов (десятки #0f172a, #475569, #94a3b8 и пр.).
  • Дублирование тем PF и MK как двух разных миров.
  • Manrope в font-stack без подключения через next/font.
  • Расхождение shadow-soft между PF-globals и auth-layout.
  • Drag-and-drop в workspace-структуре через кнопки ↑/↓ (нужен реальный DnD).
  • Pagination «← N/M →» без jump/perPage.
  • ESC-обработчики, реализованные отдельно в каждой модалке.

11. Открытые вопросы

20 пунктов с конкретикой — см. DESIGN_AUDIT.md §9. По каждому нужно решение, многие можно закрыть единой токен-системой и редизайном.

12. Как пользоваться материалами

  1. Начните с DESIGN_HANDOFF.md (этот файл) — общая картина.
  2. Откройте design-screenshots/ — визуальный референс всех экранов.
  3. Прогуляйтесь по dev-серверу (если получите доступ) — запуск описан в DESIGN_SCREENSHOTS.md §1–2 с тестовыми аккаунтами.
  4. DESIGN_AUDIT.md — справочник, открывается по оглавлению, когда работаете над конкретной фичей. Например:
    • Маркетплейс — §3.5, §5.5, §6 (V2 card), §10.8.
    • Workspace — §4.4, §10.1–10.7, §10.11–10.13.
    • Чат с AI — §5.4, §10.13.
    • Графики — §10.10.
  5. Вопросы по домену — к стейкхолдерам (§5). Не угадывайте бизнес-логику.

13. Чек-лист готовности (для нашей команды)

  • §4 Сроки согласованы
  • §5 Стейкхолдеры заполнены
  • design-screenshots/ собран по DESIGN_SCREENSHOTS.md
  • Тестовый доступ к dev-серверу выдан дизайнеру (опционально)
  • Договорённость по deliverable (только Figma / Figma + tokens) зафиксирована
Фирменная палитраСкриншоты