PlanForge — Инструкция по снятию скриншотов

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

Документ для подготовки визуального референса под дизайн-задачу. Цель — собрать набор скриншотов всех экранов и состояний, который дополнит текстовый DESIGN_AUDIT.md.

1. Запуск dev-сервера

pnpm install
pnpm prisma:generate
pnpm dev

Откроется на http://localhost:3000.

Требования к окружению:

Node.js (версия из package.json / .nvmrc если есть).
PostgreSQL (URL в .env, переменная DATABASE_URL).
Перед первым запуском применить миграции: pnpm prisma migrate deploy (или dev если локально).

2. Тестовые аккаунты (demo seed)

Скрипт: scripts/seed-marketplace-demo.mjs.

Запуск:

node scripts/seed-marketplace-demo.mjs

Аккаунты после seed (пароль у всех — demo123):

Email	Имя	Роль
`anna@demo.test`	Анна	USER
`boris@demo.test`	Борис	USER
`elena@demo.test`	Елена	REVIEWER
`dmitry@demo.test`	Дмитрий	ADMIN

Демо-проекты и листинги создаются автоматически.

3. Настройки окна для скриншотов

Разрешение: 1440×900 (стандарт для дизайн-макетов) — основной набор.
Доп. набор: 1920×1080 для широких таблиц workspace.
Mobile-набор (опционально): 390×844 (iPhone 14).
Браузер: Chrome / Edge, режим без расширений, обычный (не инкогнито — чтобы сохранялась тема).
DevTools закрыт.
Zoom 100%.
Без курсора или с курсором — на ваше усмотрение, но для hover-состояний курсор должен быть в кадре.

4. Список маршрутов и состояний

Снимать каждое состояние отдельным файлом. Имя файла: {маршрут}_{состояние}.png, слеши заменять на - (например marketplace_loading.png, projects_table-view.png).

4.1 Auth (без логина)

Маршрут	Состояния
`/sign-in`	default · с введёнными данными · error-баннер (неверный пароль) · pending (после Submit)
`/sign-up`	default · все поля заполнены · error-баннер · pending
`/forgot-password`	default (заглушка)

4.2 App (логин `anna@demo.test`)

Маршрут	Состояния
`/projects`	карточки (default) · карточки (пустой список) · таблица · модалка «Создать проект» · модалка «Переименовать» · confirm «Архивировать» · confirm «Удалить» · архивный режим
`/projects/[id]/publish`	default · валидация (плохая цена) · warning «План пуст» · pending · error
`/marketplace`	default · loading (6 skeleton) · empty (нет результатов) · с pinned карточкой · с открытым CompareDock (2 листинга) · фильтры применены · hover на ListingCard · SpotlightCard крупно
`/marketplace/card-builder`	empty · с одной карточкой · с пресетом «Все эффекты» · разные палитры (default / dark / glass / riso / midnight) · разные размеры (xs / sm / md / lg)
`/my-listings`	loading · empty · с листингами разных статусов (PENDING_REVIEW / APPROVED / REJECTED / SOLD / ARCHIVED) · открытый ProjectDetailModal · модалка resubmit · confirm archive · развернутые reviews
`/my-purchases`	loading · empty · с заказами · search · no-results
`/profile`	default (заглушка)
`/settings`	default (заглушка)

4.3 Workspace (логин `anna@demo.test`, проект из seed)

View	Состояния
`hub`	default
`chat`	empty (EmptyState с hint-pills) · с сообщениями (user + assistant) · с pending actions (ActionsList) · с ContextIndicator <70 / 70-90 / 90+ · ModelDropdown открыт (только admin) · DebugPanel открыт (admin) · markdown-сообщение от ассистента
`keypoints`	default с KPI
`classic`	project-title · project-products (форма + список) · product-form-modal · general-expenses (settings / schedule / table) · general-expense-form-modal · financing-loans (designer / table) · investment-calendar (Table / Gantt / Matrix / Distribution) · investment-calendar-form-modal · investment-calendar-schedule-modal
`plan`	ops-sales (canvas / revenue table / revenue chart) · ops-mik (catalog / demand / procurement / pricing / purchase-costs) · ops-personnel (employees / center: settings / schedule / table) · ops-production (norms / volumes)
`presentation`	results-cashflow со всеми тремя секциями · с развёрнутой строкой (mini-spark) · с разной granularity (month / quarter / year) · с разной unit-mode (ones / thousands / millions)
Сквозное	StructureDrawer открыт (Только ★ on / off) · Workspace SettingsModal открыт · Dual-view split-pane (если применимо) · Workspace footer крупно

4.4 Reviews (логин `elena@demo.test`)

Маршрут	Состояния
`/reviews`	loading · empty · с очередью
`/reviews/[id]`	каждая из 6 вкладок (info / products / calendar / personnel / expenses / history) · sticky action-bar крупно · reject-modal · approve успешный · error

4.5 Admin (логин `dmitry@demo.test`)

Маршрут	Состояния
`/admin/marketplace`	loading · с данными (KPI-grid) · saving (cooldown) · ok/error toast
`/admin/users`	loading · с данными · search · updating (роль меняется) · pagination
`/admin/ai`	загрузка · KPI · табы «По моделям» / «По пользователям» · confirm-modal «Очистить» · глобальный toggle включён/выключен
`/admin/ollama`	offline · online + список моделей · pulling-progress · test-result panel · raw-modal · удаление

4.6 Сквозные элементы (любой роут)

UiSettingsShell header крупно.
UserMenu открыт (портал).
NotificationBell открыт (с уведомлениями + empty).
Footer workspace.
Все 4 темы (planforge / venture / realestate / slate) на одном экране (например /projects) для сравнения.
Кастомный accent через color picker.
Custom padding / gap settings.

4.7 Анимации (записать как GIF / MP4)

V2 Collectible Card: tilt по курсору, hover, holo-ring вращение.
Эффекты V2: glitch, iridescent, liquid, riso, misregister, spotlight, grain — по 1 ролику на каждый.
CompareDock появление (mk-dock-in spring 440ms).
Marketplace listing-card hover (mk-card spring 380ms, lift -3px).
Modal open/close (где useModalAnimation: listing-modal, compare-modal).
ChatView: split-fade вход dual-view, quick-actions fade-in.
Sidebar marketplace: фильтры применяются.

5. Графики workspace (отдельный набор)

Скриншот каждого SVG-графика крупно с легендой и hover-состоянием:

general-expenses-section — multi-line + area.
results-cashflow-section — mini-spark в строке.
ops-personnel-center-panel — schedule line-chart.
ops-mik-pricing-chart-panel — line + area gradient.
ops-sales-revenue-chart-view — stacked line.
ops-sales-plan-canvas-panel — plan canvas (line + rect).
ops-mik-demand-view — bar / heatmap.
ops-mik-procurement-view — area / bar.
ops-mik-purchase-costs-view — line.
ops-production-volumes-section — line + area + circles.
financing-loans-section — designer balance + draggable tranches.
investment-calendar-gantt-rows — gantt.
chat/context-indicator — donut (все три цветовые зоны).

6. Структура итогового набора

Рекомендованная папка:

design-screenshots/
├── 01-auth/
├── 02-app-projects/
├── 03-marketplace/
├── 04-card-builder/
├── 05-my-listings/
├── 06-my-purchases/
├── 07-workspace/
│   ├── hub/
│   ├── chat/
│   ├── keypoints/
│   ├── classic/
│   ├── plan/
│   └── presentation/
├── 08-reviews/
├── 09-admin/
├── 10-modals/
├── 11-themes/        (одна страница в 4 темах)
├── 12-charts/
└── 13-animations/    (GIF / MP4)

К каждому файлу — короткое имя из таблицы выше.

7. Что НЕ снимать (нерелевантно)

app/page.tsx — серверный редирект, UI нет.
app/analytics-*.tsx — невидимые провайдеры.
app/App.jsx — рудимент, не подключён к роутам.
/admin — серверный редирект на /admin/marketplace.

8. После сбора

Положить в репо или в облако (TODO — куда именно).
Обновить DESIGN_BRIEF.md §19 — отметить чекбокс «Скриншоты собраны».
Передать ссылку дизайнеру вместе с DESIGN_BRIEF.md + DESIGN_AUDIT.md.

Design Handoff Обзор