Four stages. Zero compromise. True code sovereignty.
A technical and architectural deep dive into the four stages of Qanvas: Blueprint, Design, Code, and Export. Built for engineers, founders, and studios who value real code over proprietary runtimes.
Blueprint: Real-World Specifications for Human Teams
Transforming raw product intent into living engineering contracts before touching code.
Most visual builders dive straight into premature canvas dragging, resulting in disjointed interfaces that lack underlying product coherence. Qanvas treats software development with professional discipline: before writing a line of code, conversational intent is synthesized into living, human-readable specifications.
Instead of trapping context inside ephemeral AI prompt histories, Qanvas produces canonical Product Requirements Document (PRD) and Technical Design Document (TDD) Markdown files in your project folder. Product personas, core value propositions, and technical contracts are structured so your entire team—designers, engineers, and stakeholders—operates from one single source of truth.
Human Engineering HandoffLiving Markdown specifications in your local project folder provide immediate architectural clarity for human teams.
- Synthesizes formal PRD and TDD Markdown specs directly from discovery.
- Provides clear architectural contracts ready for human engineering review.
- Documentation lives in your project folder and evolves with your product.
Design: Project-Aware AI, Conversational Refinement & Visual Control
A local agent runtime powered by your own BYOK AI provider, grounded in your active project context and paired with direct visual editing.
Qanvas embeds a local, project-aware agent runtime powered directly by your choice of AI provider—bringing your own API key from Google AI Studio, Anthropic, or OpenAI with zero token markup. Instead of an isolated prompt box or brittle one-shot generator, the agent operates inside your local workspace, reading your active route tree, content, assets, and design tokens.
This deep project awareness enables an ongoing, iterative collaboration. You can explore alternate design directions, refine messaging, and test layout modes across successive conversations without starting over from scratch. Every proposed change is bound by deterministic technical guardrails: edits are verified against site schemas and machine-checked component contracts (.qanvas/contracts/components/), repairing near-miss values and rejecting invalid props before touching your draft.
Crucially, conversational iteration works hand-in-hand with direct visual control. When you want to fine-tune typography, layout modes, surface bands, spacing, or color tokens directly, the zero-latency visual inspector lets you make point-and-click adjustments immediately—saving AI tokens for high-leverage strategic work.
Iterative Design & Direct ControlA local agent runtime powered by your own AI key (BYOK) works directly with your active project context, while the visual inspector provides instant point-and-click control with zero wasted tokens.
- Powered directly by your own API key (Google AI Studio, Anthropic, or OpenAI) with zero token markup.
- Agent reads active routes, design tokens, and project assets for continuous conversational refinement.
- Machine-checked component contracts (
.qanvas/contracts/) validate edits, while the visual inspector gives zero-latency manual control.
Code: See the Exact Next.js Project
A read-only view of every file your export will contain: standard Next.js, React and token-driven CSS.
Unlike closed visual tools that store your designs in proprietary cloud databases or spit out mangled HTML wrappers, Qanvas operates directly on your local file system at localhost:7140.
Every drag, click, and prompt updates your project's draft, and the Code view shows the resulting TypeScript and React files exactly as they will be exported: typed props, plain components, and CSS driven by your design tokens.
What You See Is What You OwnReadable TypeScript and React code, shown file by file before you export.
- Deterministic TypeScript and React generation without proprietary runtime wrappers.
- Token-driven CSS—no obfuscated modules or proprietary style runtime.
- Every exported file is previewed in the Code view first.
Export: Zero Runtime Lock-in, Host Anywhere
Deploying unencumbered, standard production repositories wherever you choose.
When your pages are finished, there is no proprietary export barrier, locked hosting runtime, or download fee. Export downloads a ZIP containing a complete Next.js project.
Run standard Next.js build commands, push to your choice of Git remote, and deploy freely to Vercel, Cloudflare Pages, AWS Amplify, or custom Docker containers. Qanvas leaves behind zero platform SDKs or runtime dependencies.
Pure Platform IndependenceZero vendor hosting lock-in. Build with standard tooling and host anywhere Next.js runs.
- Zero proprietary runtime packages or locked hosting middleware.
- Deploy to Vercel, Cloudflare Pages, AWS, or any Node.js hosting platform.
- Complete repository ownership forever with zero recurring platform tax.