CanvasForge

Turn page ideas into safe, editable app canvases.

CanvasForge is an AI-assisted product design and code generation workspace for teams that need to turn rough page concepts into structured UI layouts, inspectable previews, and exportable Next.js code. It is designed for founders, product designers, and full-stack teams who want fast iteration without losing control over schema, safety, or code quality.

Business Goals

  • Reach 500 weekly active users within 90 days of launch.
  • Convert at least 20 percent of new signups to a successful first project generation within 7 days.
  • Achieve 35 percent month-1 retention for teams who create at least one project.
  • Keep AI generation cost under 12 percent of revenue through strict token and call budgeting.
  • Export at least 40 percent of active projects to downloadable code within 60 days.

User Goals

  • Generate a valid page layout preview from a prompt in under 60 seconds.
  • Edit copy, colors, and component structure without regenerating the entire page.
  • Preview generated UI in an isolated environment with no access to parent cookies or local storage.
  • Connect an Antigravity account once and reuse its delegated quota safely.
  • Export a clean Next.js codebase that can be handed to engineering with minimal cleanup.

Non-Goals

  • This is not a general-purpose visual website builder with arbitrary drag-and-drop layout editing for every element.
  • This is not a design collaboration suite with comments, approvals, or Figma file import in the first release.
  • This is not a multi-tenant backend for arbitrary user-generated plugins or untrusted third-party scripts.
  • This is not intended to support non-Next.js export targets in the initial version.

Founder Nina, 34 - Nina is a startup founder validating landing pages and product concepts quickly. She needs a way to turn rough ideas into something presentable, safe to demo, and easy to share with her engineer.

Founder Nina, 34

  • As a founder, I want to generate a landing page preview from a simple prompt, so that I can validate an idea before investing in design and implementation.
  • As a founder, I want to export the generated page as production-ready code, so that my team can continue building without rework.
  • As a founder, I want to see remaining AI quota and generation limits, so that I can manage budget and avoid interrupted work.

Product Designer Amir, 29 - Amir uses AI to explore multiple layout directions, but he needs deterministic structure and safe preview rendering. He wants quick text and color edits without waiting for full regeneration.

Product Designer Amir, 29

  • As a designer, I want to inspect the generated component tree, so that I can understand and refine the structure.
  • As a designer, I want to edit typography, labels, and colors in place, so that I can iterate on the visual design quickly.
  • As a designer, I want preview changes to update instantly in a sandboxed canvas, so that I can test ideas safely.

Full-Stack Engineer Priya, 41 - Priya receives AI-generated prototypes from non-technical teammates and needs them to be trustworthy, typed, and easy to integrate. She values strict schemas, predictable outputs, and code export that follows established patterns.

Full-Stack Engineer Priya, 41

  • As an engineer, I want the AI output to be locked to a typed AST schema, so that invalid structures do not break the app.
  • As an engineer, I want deterministic handling of token exhaustion and model call limits, so that the app never crashes on budget boundaries.
  • As an engineer, I want code export to generate clean Next.js files, so that I can review and merge the output quickly.

AI Generation and Schema Safety · High priority

  • Generate page layouts as a strict typed AST and reject malformed or partial structures before they reach the preview or export pipeline.
  • All generation output must conform to the PageLayoutAST schema with no free-form UI payloads.
  • The agent must run with a hard cap on model calls to prevent runaway loops.
  • If output is truncated or resource-limited, the system must return a deterministic recovery state and preserve the last valid AST.
  • Validation failures must be surfaced to the user with actionable error messaging rather than silent fallback.
  • AST fragments must be streamable for progressive rendering without bypassing schema checks.

Budget and Quota Management · High priority

  • Enforce per-user AI usage budgets and surface remaining capacity before and during generation.
  • Support delegated user token usage with account-level quota awareness.
  • Set maximum output tokens based on the user’s remaining budget at request time.
  • Record every generation attempt, token usage estimate, and final consumption in an audit table.
  • Stop generation gracefully on budget exhaustion and provide a retry path after quota replenishment.
  • Show connected account identity and quota status inside the product UI.

Sandboxed Live Preview · High priority

  • Render the canvas preview in a locked-down iframe and isolate runtime communication from the host application.
  • Preview must use iframe sandboxing with scripts allowed but same-origin disabled.
  • Host and preview may communicate only through window.postMessage.
  • All incoming messages must be validated against a Zod schema before being applied.
  • Preview runtime must never access parent cookies, local storage, or DOM.
  • Preview errors must be captured and displayed in a contained error state without affecting the host UI.

Project Workspace and Editing · Medium priority

  • Provide a workspace for managing projects, regenerating pages, and editing content without starting over.
  • Users can create, rename, duplicate, and delete projects.
  • Users can edit page text and selected styling values from an inspector panel.
  • The app should preserve prior generations so users can compare versions.
  • Projects should support incremental updates to the AST rather than full regeneration on every change.
  • The workspace should show generation status, progress, and remaining budget clearly.

Export and Handoff · Medium priority

  • Convert the AST into a clean Next.js codebase and package it for download or handoff.
  • Export should generate page.tsx plus reusable component files and styling config.
  • The exporter should produce lint-friendly, readable code with minimal boilerplate.
  • Zip output should include a project manifest and any required assets.
  • Export must fail gracefully if the AST is incomplete or invalid.
  • The user should be able to trigger export from the project screen after preview approval.

First-Time Onboarding

  • Sign up or log in, then connect an Antigravity account in under 2 minutes.
  • Create a new project by naming the page and describing the goal.
  • Choose a starting template such as landing page, dashboard, or signup flow.
  • Generate the first AST-backed preview and confirm the page skeleton.
  • Review quota, token usage, and validation status before making edits.
  • Target time to first usable preview: under 60 seconds after project creation.

1. Create Project

  • The user starts from a simple project form and provides a prompt, page type, and optional brand cues.
  • Validate required fields before generation begins.
  • Warn if the prompt is too short or ambiguous and suggest examples.
  • Persist the project immediately so the user does not lose work on refresh.

2. Generate Structured AST

  • The system sends the request to the agent worker and streams back a typed page layout tree.
  • Apply strict schema validation to every streamed fragment.
  • Enforce output token limits and max model calls.
  • If the agent stops for resource reasons, preserve partial progress and show a clear recovery message.

3. Preview in Isolated Canvas

  • The generated UI renders inside a sandboxed iframe that the host can inspect but not directly tamper with.
  • Use postMessage for all host-to-preview updates.
  • Reject malformed payloads before they reach the preview runtime.
  • Show a loading state until the preview confirms it is ready.

4. Inspect and Edit

  • The user opens a visual inspector to update text, spacing, and color values without rerunning the full generation.
  • Apply edits locally and sync them to the AST.
  • Highlight unsupported edits and explain why they cannot be applied.
  • Keep version history so users can undo a change quickly.

5. Export and Hand Off

  • Once the user is satisfied, they export a clean code bundle for engineering use.
  • Generate Next.js App Router files with clear structure.
  • Package the project as a zip file with assets and manifest.
  • Block export if the AST fails final validation or required components are missing.

Power User Controls

  • Diff view between generations and manual edits.
  • Quota-aware generation settings for token budget and output length.
  • Partial AST regeneration for selected sections only.
  • Error boundary and recovery mode for resource-exhausted generation.
  • Export presets for starter pages, marketing sites, and dashboard shells.

Product UI Principles

  • Make schema validity visible with clear status badges and inline error summaries.
  • Use a calm, high-contrast interface that supports rapid review and editing.
  • Keep preview performance smooth by streaming updates and avoiding full rerenders.
  • Support keyboard navigation, focus states, and accessible dialog behavior across the workspace.
  • Render heavy preview content in an isolated frame to protect user data and host stability.

Nina has a new product idea and needs a polished landing page for a pitch meeting tomorrow. She writes a short prompt, connects her account, and within a minute sees a structured page preview instead of a blank editor.

She notices one section headline is too generic, so she changes the copy in the inspector and updates the hero color to match her brand. The canvas updates instantly inside a safe sandbox, and she can compare the result without risking the rest of the workspace.

When she is ready, she exports a clean Next.js project and sends it to her engineer. What used to take days of back-and-forth now becomes a fast, controlled workflow that helps the team validate ideas sooner and ship with less rework.

User-Centric Metrics

  • At least 70 percent of new users generate a valid first preview on their first project.
  • Median time from project creation to first preview under 60 seconds.
  • At least 50 percent of active users make one or more inspector edits without regeneration.
  • At least 40 percent of users who preview a project complete an export within the same session.
  • Support ticket rate for generation or preview failures below 3 percent of sessions.

Business Metrics

  • 20 percent of signups convert to a completed first project within 7 days.
  • 35 percent month-1 retention among users who create at least one project.
  • 10 percent of active projects convert to export within the first week.
  • Monthly AI infrastructure cost remains under 12 percent of monthly revenue.
  • Expansion through team usage with at least 15 percent of accounts having 2 or more active collaborators by day 90.

Technical Metrics

  • 99.9 percent uptime for the web app and API gateway.
  • P95 preview update latency under 200 ms for inspector-driven changes.
  • Zero unhandled crashes from StopReason.RESOURCE_EXHAUSTED and StopReason.MAX_OUTPUT_TOKENS_EXCEEDED.
  • All preview communication messages validated before execution, with no cross-origin data leakage incidents.

Tracking Plan

  • Track project_created when a new workspace is initialized.
  • Track antigravity_account_connected when OAuth linking succeeds.
  • Track generation_started with prompt length, template type, and budget metadata.
  • Track generation_completed with final AST size, token usage, and duration.
  • Track generation_failed with stop reason and validation error category.
  • Track preview_edit_applied when a user updates copy or style from the inspector.
  • Track export_requested and export_completed with file count and bundle size.

Technical Needs

  • Next.js 15 App Router with TypeScript strict mode for the web app.
  • A Python FastAPI worker service for agent orchestration and SSE streaming.
  • Pydantic models for PageLayoutAST and UIComponentNode as the canonical schema.
  • PostgreSQL with Drizzle ORM for project, account, and audit data.
  • AES-256-GCM encryption for stored delegated tokens and sensitive account data.
  • Zod validation for all host to iframe message payloads.
  • A job and event stream model for generation state, retries, and partial updates.

Integration Points

  • Antigravity SDK for delegated generation and budget-aware model execution.
  • OAuth 2.0 PKCE for account connection and token delegation.
  • PostgreSQL for persistent storage and audit history.
  • Server-Sent Events for streaming generation progress from worker to web app.
  • Zip packaging utility for exporting finished projects as downloadable archives.

Data Storage & Privacy

  • Encrypt access tokens and refresh tokens at rest using AES-256-GCM with managed key rotation.
  • Store only the minimum account metadata needed to display connection status and quota.
  • Record token consumption and generation audits for debugging and billing without storing unnecessary prompt secrets.
  • Provide delete-project and disconnect-account flows that remove user-linked data according to privacy requirements.
  • Design for GDPR and CCPA readiness with exportable data and deletion support.

Scalability & Performance

  • Stream generation updates to avoid blocking the UI on full completion.
  • Use bounded model call budgets to prevent runaway worker costs and queue pressure.
  • Cache static project metadata and avoid reloading full project trees on minor edits.
  • Support horizontal scaling of the worker service as generation volume grows.

Potential Challenges

  • Risk: partial or malformed AST output breaks preview. Mitigation: validate every fragment and keep the last known valid AST as the render source.
  • Risk: token exhaustion causes confusing failures. Mitigation: compute budget before request, cap max_output_tokens, and show deterministic recovery states.
  • Risk: iframe preview leaks host data. Mitigation: use sandbox without allow-same-origin and restrict communication to validated postMessage events.
  • Risk: export code becomes noisy or hard to maintain. Mitigation: define strict codegen templates and run formatters plus lint checks on exported output.
  • Risk: streaming and regeneration create race conditions. Mitigation: version generation sessions and discard stale events when a newer session starts.

Team & resourcing - Small team - 2 full-stack engineers, 1 product designer, part-time PM, and shared DevOps support.

Phase 1: Foundation and Auth · Weeks 1-2

  • Monorepo scaffold with web app and worker service.
  • Database schema for users, projects, connected accounts, and token audits.
  • OAuth PKCE connection flow for Antigravity accounts.
  • Basic authenticated project dashboard and quota display.

Phase 2: Generation and Schema Locking · Weeks 3-5

  • FastAPI SSE generation endpoint.
  • Typed Pydantic AST models and validation pipeline.
  • BudgetConfig enforcement with max model calls and token limits.
  • Deterministic handling for resource exhaustion and output truncation.

Phase 3: Sandboxed Preview and Inspector · Weeks 6-8

  • Iframe-based sandboxed canvas.
  • postMessage bridge with Zod-validated payloads.
  • Visual inspector for text and color edits.
  • Project version tracking and preview state recovery.

Phase 4: Export and Launch Hardening · Weeks 9-10

  • Next.js code synthesis pipeline.
  • Zip export flow with clean file structure.
  • Telemetry dashboard for generation, preview, and export metrics.
  • Security review, typecheck, lint pass, and release readiness checklist.

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a product called CanvasForge: an AI-assisted page layout workspace that generates strict typed UI from a prompt, previews it safely in a sandboxed iframe, lets users edit text and colors instantly, and exports a clean Next.js App Router codebase.

Core requirements:
Web app in Next.js 15 App Router, TypeScript strict, Tailwind CSS v4, shadcn/ui, Drizzle ORM, PostgreSQL.
Python worker service in FastAPI with SSE streaming.
Use Pydantic models for UIComponentNode and PageLayoutAST as the only allowed generation schema.
Enforce generation budget with max model calls = 3 and max_output_tokens based on remaining user quota.
Handle resource exhaustion and max token stop reasons deterministically without crashing.
Preview must render only inside an iframe with sandbox allow-scripts and no allow-same-origin.
All host-preview communication must use postMessage with Zod schema validation.

Primary screens:
Login and Antigravity account connect screen.
Project dashboard with quota status.
Project generation screen with live AST stream and sandbox preview.
Inspector panel for editing copy and colors.
Export screen to download a zip of Next.js files.

Data model:
users, projects, user_antigravity_accounts, token_consumption_audit.

Build the app with a clean component structure, realistic empty states, loading states, validation errors, and audit logging. Include code for OAuth PKCE flow, SSE proxying, preview sandboxing, AST validation, and export packaging.

Business Idea

- Skema output agen **WAJIB DIKUNCI** menggunakan model Pydantic `PageLayoutAST` (Zero Hallucination). - Wajib menyematkan `BudgetConfig` Antigravity SDK: - `max_model_calls = 3` (Mencegah looping penalaran tanpa akhir). - `max_output_tokens` disesuaikan dengan jatah sisa token akun user. - Tangani `StopReason.RESOURCE_EXHAUSTED` dan `StopReason.MAX_OUTPUT_TOKENS_EXCEEDED` secara deterministik tanpa menyebabkan crash. ### D. Aturan Keamanan Live Preview - Canvas preview wajib dirender di dalam `<iframe>` dengan atribut isolasi: `sandbox="allow-scripts"`. - Dilarang menyertakan atribut `allow-same-origin` guna mencegah akses kode preview ke cookie atau local storage parent window. - Komunikasi antara Host UI dan Iframe hanya diizinkan melalui `window.postMessage` dengan validasi payload skema Zod. --- ## 4. RENCANA EKSEKUSI TAHAP DEMI TAHAP (STEP-BY-STEP) ### Tahap 1: Scaffolding Fondasi Monorepo & UI Baseline 1. Inisialisasi struktur monorepo (`apps/web` dan `apps/agent-worker`). 2. Konfigurasi Next.js 15 App Router, TypeScript Strict, Tailwind CSS v4. 3. Inisialisasi `shadcn/ui` dan unduh komponen dasar: `button`, `card`, `input`, `form`, `badge`, `progress`, `dialog`, `dropdown-menu`, `tabs`, `table`, `separator`. 4. Setup Drizzle ORM dan buat skema tabel: `users`, `projects`, `user_antigravity_accounts`, `token_consumption_audit`. 5. Implementasi utilitas kriptografi `AES-256-GCM` di `apps/web/src/lib/crypto/vault.ts`. ### Tahap 2: Autentikasi & Alur OAuth 2.0 PKCE Antigravity 1. Buat halaman `/login` dan form registrasi dengan shadcn/ui. 2. Implementasi rute OAuth `/api/v1/auth/antigravity/authorize` (Generate code_verifier, code_challenge, state). 3. Implementasi rute callback `/api/v1/auth/antigravity/callback` (Tukar code dengan token, enkripsi AES-256-GCM, simpan ke PostgreSQL). 4. Buat komponen UI `AntigravityConnectCard` untuk menampilkan identitas akun Antigravity yang tertaut dan sisa kuota. ### Tahap 3: Python Agent Worker & Pydantic AST Stream 1. Siapkan environment Python di `apps/agent-worker` dengan `google-antigravity`, `fastapi`, `uvicorn`, `pydantic`. 2. Definisikan model Pydantic `UIComponentNode` dan `PageLayoutAST`. 3. Buat endpoint FastAPI SSE `/agent/generate` yang menginisialisasi Antigravity Agent dengan delegasi user token dan `BudgetConfig`. 4. Buat proxy Route Handler di Next.js `/api/v1/projects/generate` untuk mengalirkan Server-Sent Events (SSE) dari worker ke browser klien. ### Tahap 4: Sandboxed Canvas & Visual Inspector 1. Buat komponen `SandboxedCanvas` menggunakan `<iframe>` aman. 2. Implementasi listener `postMessage` untuk menyuntikkan komponen React/Tailwind dari stream AST ke dalam iframe runtime. 3. Buat panel inspektor visual untuk memungkinkan edit teks dan warna secara instan tanpa regenerasi seluruh halaman. ### Tahap 5: Code Synthesis & Exporter 1. Buat use case untuk mengompilasi AST ke dalam berkas utuh Next.js App Router (`page.tsx`, `components/*`, `tailwind.config.ts`). 2. Buat endpoint ekspor yang mengompresi proyek menjadi file `.zip` siap pakai (*clean code, zero-lockin*). --- ## 5. INSTRUKSI MULAI BEKERJA Mulai pekerjaan sekarang dari **Tahap 1: Scaffolding Fondasi Monorepo & UI Baseline**. Laporkan setiap berkas yang dibuat dan lakukan verifikasi lokal (`npm run typecheck` atau linter) untuk menjamin kode bebas error.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company

    PRD: - Skema output agen **WAJIB DIKUNCI** menggunakan model...