govard.
Обсудить проект
Mass UI Generation & Conversion Engine

Page Generator v2.0

Среда для высокоскоростной сборки страниц с кастомным движком конвертации HTML -> HBS и встроенным Puppeteer-пайплайном.

Project Init sys_vars.json
Контекст
SYS>При массовом создании сайтов возникает потребность управлять комбинациями блоков и данных, сохраняя строгую семантику. Изначальные эксперименты с Pug оказались неудачными из-за невозможности работы со сложным кодом с глубокой вложенностью и спецсимволами. Поэтому основным движком шаблонизации стал Handlebars (HBS).
Роль
USR>Fullstack Architect / AI Tools Builder
Проблема
ERR>Существующие визуальные конструкторы ограничены рамками одного файла. Требовался масштабный фронтенд-апп, тесно интегрированный с бэкендом (Directus), способный перемножать JSON-наборы на HBS-шаблоны, делать скриншоты всех комбинаций, а главное — конвертировать сырой HTML в HBS-шаблоны.
Жизненный Цикл Генерации в Page Generator

Система предлагает не линейный процесс, а матрицу возможностей в зависимости от точки входа: сырой HTML, готовый блок или голый массив JSON-контента.

Step 01

1. Инжекция (Input Phase)

Импорт сырого HTML, выбор базового HBS-шаблона или подгрузка массива 'Интеллектуальных контент-форм' из локальной JSON-базы.
Step 02

2. SMART / Режим сборки

Визуальное распределение блоков по сетке (доски-страницы) с параллельным редактированием HBS/JSON в боковых панелях (split-view).
Step 03

3. Матричное перемножение (Mass-Gen)

Скрещивание шаблонов: 'ВСЕ исхHBS x ВСЕ наборJSON'. Система генерирует десятки уникальных комбинаций блоков с авто-суффиксами.
Step 04

4. Пайплайн валидации (x3vp & Puppeteer)

Автоматический рендер и снятие скриншотов в 3-х вьюпортах (Desktop, Tablet, Mobile) для каждой сгенерированной комбинации.
Step 05

5. Экспорт и CMS (Artifacts)

Отбор удачных комбинаций через визуальный грид-превью и сохранение артефактов в базу Directus и файловую систему через MCP.

Архитектура Системы

Детерминированный пайплайн мультирежимной генерации. Данные (JSON) и структура (HBS/HTML) обрабатываются изолированными ядрами, объединяясь на этапе рендеринга для снятия скриншотов.

flowchart TD
  %% HUID Styling
  classDef huidInput fill:#050b14,stroke:#00f0ff,stroke-width:1px,color:#00f0ff,font-family:monospace
  classDef huidCore fill:#0a1929,stroke:#00ff9d,stroke-width:2px,color:#ffffff,font-family:monospace
  classDef huidData fill:#120524,stroke:#b200ff,stroke-width:1px,color:#e0c3fc,font-family:monospace
  classDef huidAction fill:#1c2105,stroke:#e5ff00,stroke-width:1px,color:#fcffc2,font-family:monospace
  
  subgraph InputLayer ["INPUT DATASPACE"]
    HTML["Сырой HTML"]:::huidInput
    HBS["HBS Шаблоны"]:::huidInput
    JSON["JSON Наборы"]:::huidData
    PRIM["Content Primitives"]:::huidData
  end

  subgraph MatrixCore ["MASS MATRIX KERNEL"]
    SMART["SMART Builder Engine"]:::huidCore
    MASS_PG["Масс-Страницы / Доски"]:::huidCore
    MASS_BL["Масс-Блоки (HBS x JSON)"]:::huidCore
    MASS_EL["Масс-Элементы (HBS x JSON)"]:::huidCore
  end

  subgraph ExecutionLayer ["VALIDATION & RENDER"]
    PUPP["Puppeteer Pipeline x3vp"]:::huidAction
    GRID["Visual Selection Grid"]:::huidAction
    DIR[("Directus CMS")]:::huidData
    FS["Local FS / MCP"]:::huidData
  end

  HTML --> SMART
  HBS --> MASS_PG & MASS_BL & MASS_EL
  JSON --> MASS_PG & MASS_BL & MASS_EL
  PRIM --> JSON
  
  SMART --> PUPP
  MASS_PG --> PUPP
  MASS_BL --> PUPP
  MASS_EL --> PUPP
  
  PUPP --> GRID
  GRID -- "Save Action" --> DIR & FS
Matrix Engine x3vp Render Content Primitives

Интерфейсы генераторов

От терминальных CLI-утилит до полноценных Web/GUI дешбордов для управления процессом генерации и контроля качества.

wpage-gen2.png
SMART Builder Конструктор страницы
Page Level

SMART Builder Конструктор страницы

Интеллектуальная среда для сборки полноформатных страниц из блоков. Двухпанельный 'Smart редактор' позволяет править структуру, а встроенный инспектор обеспечивает прямой доступ к исходным JSON, HBS и медиа-ресурсам.

Техническая Спецификация

Ключевые возможности
Структурное превью x3vp Редактирование JSON/HBS Авто-скачка артефактов 2 режима сохранения
Architecture Layer: Smart Composition
wblock-page-gen3.png
HBS+JSON Конструктор страницы
Data Level

HBS+JSON Конструктор страницы

Продвинутый конструктор, оперирующий сырыми данными. Позволяет собирать страницы из атомарных элементов и блоков (CRUD-операции) с возможностью прямой инъекции и редактирования HTML-кода.

Техническая Спецификация

Ключевые возможности
Сборка из элементов CRUD блоков Редактирование HTML Скриншотинг x3vp
Architecture Layer: Data Injection
wblock-html-gen.png
HTML-Конструктор страницы и блоков
Low Level

HTML-Конструктор страницы и блоков

Базовый low-level режим сборки. Разработан для случаев, когда требуется строгий контроль над сырой разметкой. Включает CRUD-систему для управления блоками и элементами на уровне DOM-дерева.

Техническая Спецификация

Ключевые возможности
Прямая правка разметки Глубокий анализ Визуальное превью
Architecture Layer: DOM Manipulation
wblock-gen2-r2-combi.png
Масс-Страницы из комбинаций блоков
Mass Generation

Масс-Страницы из комбинаций блоков

Интерфейс мульти-сборки ('Доски-страницы'). На одном холсте создаются сразу несколько вариантов страницы. Блоки комбинируются через HBS+JSON, а встроенный грид позволяет быстро отбирать лучшие итерации.

Техническая Спецификация

Ключевые возможности
Множественная сборка Управление блоками на досках Грид превью Масс-скриншотинг
Architecture Layer: Multi-Board Engine
wblock-gen2-r4-sokr.png
Конструктор страницы из блоков
Composition

Конструктор страницы из блоков

Классический режим конструктора с упором на быстрые действия (перемещение, дублирование, удаление). Редактирование копий происходит с разделением экрана (слева исходник). Поддерживает авто-подстановку данных (data_structure).

Техническая Спецификация

Ключевые возможности
Групповые операции Info-поля CSS+JS превью Авто-подстановка
Architecture Layer: Quick Actions
wblock-gen2-2.png
Масс-блоки: Комбинации JSON+HBS
Cross-Gen

Масс-блоки: Комбинации JSON+HBS

Режим перекрестного скрещивания (Cross-Gen). Берет исходный/новый HBS и скрещивает с JSON-структурами. Интерфейс выводит грид сгенерированных блоков для визуального отбора (Tinder-like) перед сохранением.

Техническая Спецификация

Ключевые возможности
Перекрест HBS x JSON Грид отбора Превью блоков
Architecture Layer: Matrix Combination
wblock-gen2-r3-content.png
Масс-блоки: Наборы JSON+HBS
Fast Constructor

Масс-блоки: Наборы JSON+HBS

Масштабный Fast-Конструктор. Перемножает ВСЕ исходные HBS на ВСЕ наборы JSON из библиотеки. Автоматически проставляет суффиксы, проводит авто-анализ и создает библиотеку с просмотром наборов данных.

Техническая Спецификация

Ключевые возможности
ВСЕ x ВСЕ матрица Библиотека наборов Отдельный грид отбора
Architecture Layer: Bulk Processor
welem-gen2-r2-combi.png
BS-Конструктор блоков из элементов
Grid Builder

BS-Конструктор блоков из элементов

Интерфейс Bootstrap-подобной сборки (Bootstrap-style). Позволяет конструировать блоки с нуля из рядов (rows), колонок (columns) и атомарных элементов. Поддерживает импорт шаблонов сеток из файлов.

Техническая Спецификация

Ключевые возможности
Управление контейнерами Шаблоны сеток x3vp превью Сохранение с анализом
Architecture Layer: Structural Grid
welem-gen.png
Масс-элементы: Комбинации JSON+HBS
Micro-Gen

Масс-элементы: Комбинации JSON+HBS

Микро-генерация. Спускает логику перекрестного скрещивания (исх/нов HBS x JSON) на атомарный уровень компонентов (кнопки, карточки, инпуты). Включает создание превью с обертками.

Техническая Спецификация

Ключевые возможности
Элементный перекрест Скрины с обертками Грид элементов
Architecture Layer: Component Level
welem-gen2.png
Масс-элементы: Наборы JSON+HBS
Live Preview

Масс-элементы: Наборы JSON+HBS

Fast-Конструктор элементов. Перемножение всех атомарных шаблонов на наборы данных. Включает Live-превью, где бок о бок рендерятся оригинал и его модификации.

Техническая Спецификация

Ключевые возможности
Live-превью Авто-суффиксы Библиотека примитивов
Architecture Layer: Atomic Bulk
graphics.png
Конструктор контента & Библиотека (json / graphics)
Data Core

Конструктор контента & Библиотека (json / graphics)

Независимое ядро данных. Управляет библиотекой 'примитивов' и наборами контента через специализированный JSON-редактор и галерею. Оснащен интеллектульными формами распределения контента (public/data/content-primitives).

Техническая Спецификация

Ключевые возможности
Библиотека примитивов Интеллект-формы База в JSON-файле
Architecture Layer: Content Primitives

Эволюция Мультирежимной Системы (AI-Assisted)

01

Атомарный Фундамент (welem/wblock)

Настройка среды Nuxt 3 и создание low-level интерфейсов (HTML-Конструктор, BS-Конструктор) для управления DOM-узлами. Внедрение Puppeteer API для базовых скриншотов элементов. (Отражено в component-architecture.md).
02

Ядро Данных и AI-рефакторинг (Stage 1-2)

Осознание необходимости отделения контента от разметки. Создание библиотеки wjson. AI-агенты провели глубокий рефакторинг, устранив дублирование стейта Pinia и решив проблемы SSR/гидратации Nuxt (документировано в ssr-fix.md и fixes-stage2.md).
03

Пайплайны Масс-Генерации и Маппингов

Разработка алгоритмов 'Матричного перемножения'. ИИ-агенты спроектировали структуры маппингов для тем, контента и вариаций (advanced-theme-mappings.ts). Сборка интерфейсов для скрещивания сотен комбинаций с авто-суффиксами.
04

Уровень Страниц и Умный UX (Stage 3)

Поднятие архитектуры до 'Досок-страниц' (wpages). Внедрение компактного UX 'SMART Builder': скрытие элементов управления при наведении, split-view редакторы, интеграция 3-х вьюпортов (welem-gen2-advanced-features.md).
05

Интеграция Инфраструктуры

Сведение всех 11 интерфейсов в экосистему с локальным Directus для хранения артефактов и ручным запуском MCP Filesystem Server, открывающим доступ к файлам локальным AI-агентам.
Project Conclusion

Что это доказывает

Матричная Архитектура UI

Успешная реализация нелинейного 'Matrix Combination' подхода, когда десятки страниц рождаются не через промптинг, а через математическое перемножение HBS-макетов на JSON-словари.

Детерминированность поверх AI

Отказ от 'галлюцинирующей' сборки интерфейсов в пользу строгих HBS-шаблонов. Осознанный переход от Pug к Handlebars доказал, что для сложной вложенности требуется более прозрачная и предсказуемая шаблонизация.

Mass Validation (x3vp)

Архитектура позволяет на лету валидировать адаптивность. Puppeteer-пайплайн обеспечивает мгновенную визуальную обратную связь в Desktop, Tablet и Mobile (x3vp) для гридов отбора.

Data Core (Content Primitives)

Создание изолированной библиотеки `content-primitives` доказывает понимание концепции 'Headless Data' — контент существует независимо от визуального отображения.

Эта детерминированная архитектура лежит в основе наших продуктов.

Хотите внедрить похожий гибридный пайплайн в ваш продукт?

Объединяем визуальные конструкторы, AI-генерацию и строгую HBS-шаблонизацию.