How to vibe codeFramer

Prerequisites

• Node.jsFree

  Required runtime for executing the full-stack TypeScript project build tools.

• GitHubFree

  Source code control and repository management for agentic iterations.

AI coding tools

• Claude Code

  Best-in-class reasoning for bootstrapping complex multi-file full-stack layouts and system logic.

• Cursor

  Ideal for fine-tuning intricate frontend component trees and canvas DOM event handlers.

Build guide

1. 01Initialize Next.js Workspace and Database Schema

   Scaffold the foundational Next.js project with Tailwind CSS and configure the Supabase PostgreSQL connection for users, projects, and CMS collections.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up a Supabase client configuration file using environment variables for SUPABASE_URL and SUPABASE_ANON_KEY. Create database migration schemas for users, workspaces, projects (storing canvas node JSON trees), and cms_collections with fields for title, slug, content, and status. Implement basic type definitions for all models.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement Authentication and Workspace Management

   Configure better-auth to handle user registration, secure session management, and multi-user workspace memberships.

   Install and configure better-auth with email/password and GitHub OAuth providers pointing to the Supabase database. Create protected API routes and a middleware matcher to secure dashboard and editor routes. Build a workspace selector UI component allowing users to create new teams, invite members, and manage roles.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build the Infinite Layout Canvas Core

   Develop a React-based viewport canvas supporting pan, zoom, and node manipulation with properties for layout alignment and dimensions.

   Build an interactive infinite canvas component using React and HTML5/SVG or DOM absolute positioning. Implement mouse-based panning (middle-click or space-drag) and wheel-based zooming with transform matrix calculations. Create a sidebar inspector panel that updates selected node properties (width, height, background color, padding, gap, flex direction) in a central Zustand state store representing the site node tree.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Integrate AI Generation Assistant

   Add an AI prompt interface that consumes Anthropic API tokens to generate structured JSON layout trees directly onto the canvas.

   Create a floating AI prompt bar component in the editor. Implement a Next.js API route that calls the Anthropic API (Claude 3.5 Sonnet) with a system prompt instructing it to output valid JSON layout trees matching our canvas node schema based on user text prompts. Wire the frontend assistant input to send requests, parse the returned JSON layout tree, and merge the generated sections into the current workspace canvas state.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build the CMS and Content Collections Manager

   Implement a structured database content manager for handling dynamic blog posts, case studies, and structured field definitions.

   Build a CMS dashboard view in Next.js allowing users to define custom collections and fields (text, image, rich text, reference). Implement tabular data entry screens with state management, pagination, and Supabase persistence. Create dynamic routing that renders published CMS collection items using custom templates built on the canvas.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Implement Multiplayer Collaboration with Liveblocks

   Add real-time collaborative cursors and shared document state synchronization using Liveblocks infrastructure.

   Integrate Liveblocks into the canvas editor to enable real-time multiplayer collaboration. Configure room presence providers to broadcast active user cursors, user names, and selected canvas element IDs. Synchronize the canvas node tree state via Liveblocks Yjs or room storage so that layout modifications made by one user instantly reflect across all connected peer sessions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Setup Publishing and Site Export Engine

   Implement a publishing pipeline that serializes canvas node trees into production-optimized static HTML/CSS files served via custom subdomains.

   Build a publishing service route that compiles the active project's canvas JSON node tree into static HTML and CSS assets. Store generated static files in Supabase Storage or an S3-compatible bucket mapped to custom user subdomains. Add a publish button in the editor header that triggers the compilation job, updates the deployment status timestamp, and displays a live public preview link.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Framer