- ■ Build a compact custom HTML-to-HBS converter that can survive deeply nested markup and special characters.
- ■ Design eleven isolated generation modes, from element-level conversion to multi-page boards.
- ■ Keep the visual editor, JSON data, HBS templates, media assets, and Directus storage synchronized.
- ■ Automate screenshots and quality review across desktop, tablet, and mobile viewports with Puppeteer.
A transformation core connected to Directus: raw HTML, HBS templates, JSON models, screenshots, and generated combinations are handled as separate but synchronized layers.
The system supports several entry points—raw HTML, HBS templates, blocks, or JSON content arrays—and routes each one through the right generation mode.
Input injection
SMART build mode
Matrix multiplication
x3 viewport validation
Export and CMS handoff
System architecture
Page Generator demonstrates multimode UI generation and conversion workflows through a controlled factory for generating, converting, and validating interface variants.
Generator interfaces
From CLI utilities to full Web/GUI dashboards for controlling generation workflows and quality checks.
SMART page builder
Full-page workspace for assembling pages from blocks with a two-panel smart editor, source inspectors, JSON/HBS access, and media controls.
Technical specification
HBS + JSON page builder
Data-driven constructor for assembling pages from atomic elements and blocks with direct HTML injection and CRUD operations.
Technical specification
HTML page and block builder
Low-level mode for strict control over raw markup, block CRUD, and DOM-tree structure.
Technical specification
Mass pages from block combinations
Multi-page board mode where HBS blocks are crossed with JSON sets and reviewed in a fast visual grid.
Technical specification
Block page composer
Fast block-oriented constructor with move, duplicate, delete, split-view editing, and data_structure auto-substitution.
Technical specification
Mass blocks: JSON + HBS combinations
Cross-generation mode that mixes old/new HBS templates with JSON structures and presents generated blocks for visual selection.
Technical specification
Mass blocks from JSON/HBS sets
Fast constructor that multiplies every source HBS template by every JSON set, adds suffixes, analyzes output, and builds a dataset library.
Technical specification
Element block grid builder
Bootstrap-style block builder for rows, columns, and atomic elements, including imported grid templates.
Technical specification
Mass elements: JSON + HBS combinations
Element-level cross-generation for buttons, cards, inputs, and other atomic components with wrapper previews.
Technical specification
Mass elements from JSON/HBS sets
Fast element constructor that multiplies atomic templates by datasets and renders original/modified versions side by side.
Technical specification
Content constructor and JSON/graphics library
Independent data core for content primitives, JSON editor, gallery assets, and intelligent content distribution forms.
Technical specification
Generation mode
Conversion layer
Output surface
Conversion layer
Architecture view
Validation pass
What this proves
Backend contract
Uses Puppeteer-based x3 viewport checks to validate generated pages across real browser sizes.
Backend contract
Maps variations, themes, and content sources into controlled interface-generation batches.
Mass Validation (x3vp)
Separates page-level composition, block-level generation, and element-level conversion paths.
Data Core (Content Primitives)
Turns mass UI generation into an auditable workflow with concrete inputs, outputs, and validation steps.
Use the same approach for production systems that need AI acceleration without losing control.
Related materials
Need a controlled UI generation factory instead of one-off prompts?
The same architecture can support page variants, import pipelines, Directus-backed content, QA checkpoints, and repeatable interface production.