SYNTHESIS · Справка

F1 · /help

К редактору

Запуск

Synthesis — локальный фронтенд-прототип. После установки зависимостей редактор доступен по адресу /editor.

npm install
npm run dev
# → http://localhost:3000/editor
  • • Корневой маршрут / редиректит на редактор.
  • • Справка: /help или клавиша F1.
  • • AI-ключи (опционально) — в .env.local или в настройках Синта.
Production-сборка: npm run build && npm start

Интерфейс

UI минималистичный: почти нет постоянных боковых панелей. Контекст появляется рядом с действием.

Верхняя панель

Название кампании, heatmap, данные, шаблоны, Синт, undo/redo, сохранение, экспорт, справка.

Контекстный пузырь

ПКМ или long-press на пустом месте — добавить текст, фигуру, изображение, Data-to-Design.

Панель свойств

Справа в Micro: стиль, текст, эффекты, привязки к бренд-движку.

Нижняя панель

Переключение Macro / Meso / Micro и зум холста.

Три режима

Synthesis масштабирует смысл: от бренд-ДНК до конкретного пикселя.

MacroБренд-ДНК

Граф знаний и слайдеры игривости / интеллекта / B2B↔B2C. Двойной клик по узлу применяет стиль и открывает Micro.

MesoКампания

Горизонтальный сториборд артбордов. Синхронизация общих элементов (логотип, headline). Добавление форматов Instagram / Story / Email / Reels.

MicroДизайн

Konva-холст: перемещение, трансформер, таймлайн keyframes, heatmap и когнитивная нагрузка.

Pinch out → Macro, pinch in → Micro. Двойной тап циклически переключает режимы. Сильный zoom-out на холсте тоже уводит в Meso.

AI-ассистент «Синт»

Синт — co-pilot дизайна. По умолчанию работает локальный rule-based интерпретатор. Можно подключить DeepSeek или OpenAI в настройках (⚙ в панели Синта).

Примеры команд

  • • «Сделай как Apple, но теплее, добавь воздуха»
  • • «Минималистично» / «Строже, B2B»
  • • «Сгенерируй 3 варианта с повышенным CTR»

Провайдеры: local (правила), deepseek, openai. Ключи — через UI или NEXT_PUBLIC_* в окружении.

Бренд-движок

Параметры бренда мгновенно пересчитывают стили объектов с привязками (bindings).

Игривостьскругления, вес шрифта, тени, насыщенность
Интеллектвоздух, interline, уменьшение декора
Аудитория B2B↔B2Cпалитра от строгой к яркой, формальность
В панели свойств → вкладка «Связи» привяжите скругление к игривости или interline к интеллекту. В Meso включите синхронизацию, чтобы логотип обновлялся на всех артбордах.

Экспорт

Кнопка «Экспорт» в TopBar открывает модалку форматов.

  • • PNG / JPEG — реальный снимок Konva Stage (toDataURL).
  • • SVG / MP4 / GIF — прототипные заглушки (метаданные JSON).
  • • Сохранить — кампания в localStorage через StorageService.
Автосейв включён по умолчанию (~каждые 30 секунд).

Горячие клавиши

ДействиеКлавиша / жест
Открыть справкуF1
Зум холстаCtrl / ⌘ + колесо
МультивыборShift + клик
Контекстное менюПКМ / long-press
Переключение режимовДвойной тап / кнопки внизу
Pinch → Macro / MicroДва пальца
Онбординг: далее / пропускEnter / Esc

FAQ

Сервер открылся на порту 3001?+

Уже был запущен другой next dev. Остановите старый процесс или используйте актуальный URL из терминала.

Синт не меняет дизайн?+

Проверьте провайдер в AI-настройках. В режиме local срабатывают ключевые слова. Для DeepSeek/OpenAI нужен валидный API-ключ.

Слайдеры бренда ничего не делают?+

Привязки должны быть включены у объекта (вкладка «Связи»). Seed-объекты уже имеют часть bindings.

Где хранятся проекты?+

В localStorage браузера (StorageService). Экспорт файла кампании — JSON через Save/Export.