How to vibe codeVistaCreate

Prerequisites

• Node.jsfree

  Runtime environment for frontend and backend tooling

• GitHubfree

  Source control and deployment pipeline integration

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack features and complex canvas state logic

• Cursor

  Ideal for fine-tuning intricate UI components, canvas event handlers, and styling tweaks

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure better-auth with Turso sqlite database, and set up the base project structure.

   Initialize a new Next.js project with TypeScript and Tailwind CSS v4. Set up better-auth connected to a Turso database using libSQL. Create database tables for users, projects (storing canvas JSON state as a text column), and brand_kits (storing primary colors, font families, and logo URLs as JSON). Implement basic user signup and login routes with better-auth, and construct a clean dashboard page showing a grid of the user's saved design projects with a 'Create New Design' action button.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Canvas Editor Core

   Integrate a canvas library (Fabric.js or Konva.js) into a dedicated editor workspace view with a toolbar for adding shapes, text, and images.

   Build the core graphic design editor page in Next.js using Fabric.js. Create a responsive canvas workspace centered on the screen with a left sidebar for adding text, vector shapes (rectangles, circles), and uploaded images, and a top toolbar for alignment, layer reordering (bring forward/send backward), opacity adjustment, and color picking. Implement real-time canvas state serialization so that modifications update a React state object and auto-save to the backend database every 30 seconds.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Templates & Preset Layouts

   Build a template picker modal and system to load pre-designed canvas JSON layouts into the editor workspace.

   Create a template selection drawer/modal within the editor that displays pre-built layout cards categorized by format (Instagram Post, YouTube Thumbnail, Flyer). Store template structures as predefined JSON files containing Fabric.js object configurations. When a user clicks a template card, load its JSON structure onto the active canvas, scaling elements proportionally to fit the current canvas dimensions while preserving layer hierarchy and styling.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Image Generation & Background Removal

   Implement server actions connecting to fal.ai for text-to-image generation and background removal utilities.

   Add an AI tools panel to the editor sidebar containing an 'AI Image Generator' tab and an 'Object/Background Remover' tab. Create Next.js server actions that securely call the fal.ai API (using Flux Schnell or equivalent) to generate images from text prompts, returning the resulting image URL so it can be added directly onto the active canvas as an image object. Add a background removal utility action that processes selected raster images and replaces them on the canvas with their transparent cutout versions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Brand Kits & Color Styles

   Build a brand kit management settings page and apply saved brand colors and typography styles directly inside the editor.

   Build a Brand Kit settings page where users can define custom brand color palettes (hex codes), upload brand logos, and select preferred font pairings. Expose these brand assets directly inside the editor's color picker and text style menus so users can apply their brand palette to selected canvas shapes or text elements with a single click. Ensure brand kit records are properly linked to the user account in the Turso database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export Pipeline & Polish

   Implement high-resolution image export and project download functionality along with final UI polish.

   Implement an export modal in the editor allowing users to download their canvas design as a high-resolution PNG, JPG, or PDF file. Utilize Fabric.js canvas export methods configured with custom scale multipliers (e.g., 2x or 3x scaling) to ensure crisp HD quality outputs. Add loading spinners, error boundaries, toast notifications for auto-saves, and responsive layout styling across the entire application interface.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for VistaCreate