A two-tier Claude-based architecture that generates professional documents by rendering each section as raw SVG inside exact pixel bounding boxes. Structured intelligence at generation, visual intelligence at render time.
Existing AI writing tools generate text content. They do not know how wide a column is. They do not know what font is being used, or how tall a heading will render at a given font size. The result is content that is placed into design tools by hand — the AI is a copywriter, not a designer.
Layout engines solve this partially — they know the space and they can place text with precision. But they cannot generate creative visuals. A stat row, a custom chart, a decorative background — these require a human or a specialised tool.
The gap: no single system combines a layout engine's knowledge of pixel-precise bounds with a language model's ability to generate visual content. NGT closes that gap.
NGT uses a two-tier model architecture. The responsibilities are separated by capability and by cost efficiency.
clipPath set to the computed section rectangle. Anything outside the bounds is invisible. This means the model can design confidently to the edges without risking overflow into adjacent sections.The key insight in NGT's architecture is using the layout engine's computed bounding rectangles as a generation contract passed to the AI model.
When Haiku receives a section to render, it knows exactly what it is working with:
The model generates SVG elements with full creative freedom — gradients, custom shapes, decorative geometry, data visualisations — but is constrained by the pixel boundary enforced by the clip path. This produces results that neither a pure layout engine nor a pure language model could achieve alone.
Because each section is independently rendered, any section can be regenerated without touching the rest of the document. The user hovers a section in the preview, clicks Regenerate, optionally types an instruction ("add a gradient background", "increase whitespace", "make the numbers larger"), and only that element is redrawn.
The regeneration call sends the same context as the initial generation, plus the instruction. The model receives the current element's bounding box, full document palette and typography, and one-line summaries of all neighbouring sections so it can maintain visual consistency.
The NGT API exposes the full pipeline as REST endpoints authenticated by API key. Each endpoint maps to one stage of the architecture.
POST /api/ngt/generate — prompt → complete document spec (JSON). Uses Claude Sonnet.POST /api/ngt/edit — spec + instruction → mutation array. Apply changes without regenerating the whole document.POST /api/ngt/element — section + bounds + palette → SVG fragment. Uses Claude Haiku. The per-element renderer exposed as a primitive.POST /api/ngt/validate — spec → warnings array. Font size, overflow risk, colour contrast, table structure. Local computation, no AI.NGT's two-tier architecture demonstrates a production-quality pattern for combining Claude Sonnet's reasoning with Claude Haiku's speed inside a hard technical constraint — the pixel bounding box. It is a concrete, novel use of both models working at different capability tiers for cost efficiency.
The document spec is model-agnostic. The AI layer in ai.js is a thin adapter — swapping the underlying model is a one-line change. The architecture is equally compatible with Gemini, GPT-4, or any instruction-following model with a sufficient context window.
What we are looking for: API credits partnership, co-marketing opportunity, early access to upcoming model releases, and potential integration as a design generation layer in existing document or productivity tools.
Contact: zlatans1987@gmail.com · nextgentext.online
7-day free trial. No credit card required.