Documentation & Toolchain Guide
Comprehensive user guide for agency sales, intake briefs, spatial node design, reactive AI component synthesis, visual editing, and client collaboration.
Platform Overview & Quickstart
End-to-end Agency Prototyping & AI Code Synthesis Toolchain
Imagin8n is an integrated design-to-code workspace purpose-built for design agencies, web studios, and product teams. It replaces static PDF pitch decks and fragmented AI prompt tools with a unified workflow spanning intake briefs, spatial node design, reactive AI component synthesis, visual property editing, and tokenized client review.
Core Architecture & Workflow
Unlike traditional website builders that lock client code behind proprietary subscription taxes, or raw LLM chatbots that require manual code slicing, Imagin8n maintains a dual-module architecture. The Design Studio lets you visually map brand identity, colors, and layout structures, while the AI Build Engine compiles standard TypeScript JSX and Tailwind CSS directly inside your browser.
1. Intake Brief Wizard
Capture business goals, target industry, color directions, and required page architecture in a structured 3-step setup before running generation.
2. Spatial Design Canvas
Organize visual reference moodboards, extract style DNA tokens, and connect restyle nodes visually on an infinite XYFlow canvas.
3. Pre-Gen Intent Clarification
Surface targeted layout choice chips before consuming generation credits to guarantee high-trust draft #1 accuracy.
4. In-Browser Compilation
Sandpack & Babel service workers compile production-grade React components with instantaneous live preview.
5. Visual Edit Tool & AST Patching
Perform minor tweaks (colors, text, spacing) with 0 AI tokens, or apply surgical AST code diffs for complex modifications.
6. Client Review & Clean Export
Share tokenized public links for inline client feedback pins, then download 100% clean React source code with zero vendor lock-in.
Quickstart Guide (First 5 Minutes)
Follow this simple progression to turn a new client discovery call into a live interactive prototype:
Step 1: Open the Brief Wizard
From the dashboard or playground, select 'New Project Brief'. Enter the business name, industry vertical, primary conversion goal, and desired aesthetic (e.g. Dark & Premium, Clean & Modern).
Step 2: Define Required Pages
Check off required page blueprints (Home, Features, Pricing, About, Case Studies). The brief automatically generates a structured context schema for the AI engine.
Step 3: Run Initial Generation
Enter your initial prompt or click 'Generate from Brief'. If the prompt is ambiguous, the Intent Clarification panel will present quick options to lock in your preferred layout grid.
Step 4: Refine & Share for Review
Use the Visual Edit Tool to adjust colors or copy instantly. Then click 'Share Review Link' to generate a passwordless, tokenized URL for client feedback.