How to vibe codeDuda

Prerequisites

• Node.jsfree

  Required runtime environment for building the full-stack TypeScript web application.

• GitHubfree

  Source code management and CI/CD deployment pipeline triggers.

• Anthropic API KeyPay-as-you-go

  Powers the AI assistant features for conversational site generation and code writing.

AI coding tools

• Claude Code

  Essential for multi-file architectural scaffolding, writing complex React state logic, and debugging tricky layout engine code across the terminal.

• Cursor

  Best-in-class for iterative visual component editing, fine-tuning UI states, and reviewing complex diffs in the editor canvas.

Build guide

1. 01Project Scaffolding and Multi-Tenant Database Schema

   Initialize the Next.js project with Tailwind CSS and configure Supabase with multi-tenant tables for agencies, workspaces, sites, and page collections.

   Initialize a new Next.js project using the App Router and TypeScript. Configure Tailwind CSS and set up a Supabase client connection utility. Create a robust database schema in SQL for a multi-tenant agency platform with tables: `agencies` (id, name, created_at), `workspaces` (id, agency_id, name), `sites` (id, workspace_id, name, subdomain, settings jsonb, published boolean), and `pages` (id, site_id, title, slug, content_json jsonb). Implement strict Row Level Security (RLS) policies ensuring users only access data belonging to their authorized agency workspace. Add better-auth configuration for email/password authentication linked to agency users.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Agency Dashboard & Workspace Management

   Build the core agency dashboard view where team members can manage multiple client sites, view high-level analytics counters, and switch workspaces.

   Build an agency dashboard UI in Next.js featuring a sidebar navigation layout (Dashboard, Sites, Collections, Team, Settings). Create a sites overview page that fetches all sites belonging to the active agency workspace from Supabase, displaying status badges (Published vs Draft), last modified timestamps, and quick action buttons (Edit, Preview, Settings). Implement a workspace switcher dropdown in the header that allows users to toggle between different client accounts or agency branches. Ensure all components use Tailwind CSS with a clean, professional, enterprise-grade aesthetic.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Drag-and-Drop Editor Canvas

   Implement a simplified WYSIWYG layout canvas enabling users to add, reorder, and configure structural page sections and widgets.

   Build a visual website editor interface featuring a left sidebar containing draggable component blocks (Hero Section, Text Block, Image Gallery, Pricing Table, Footer), a central interactive canvas area displaying the live DOM preview across responsive viewports (Desktop, Tablet, Mobile), and a right property inspector panel for editing selected element attributes (padding, background color, typography, text content). Store the page layout state as a hierarchical JSON tree structure. Implement click-to-select and drag-and-drop reordering logic, updating the component tree state in real time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Site Generation Assistant

   Integrate the Anthropic API to allow users to generate multi-page site layouts and content automatically via natural language chat prompts.

   Implement an AI site generation modal in the dashboard where users enter a business name, industry, and description. Connect an API route using the Anthropic API (Claude Sonnet) that takes these inputs and outputs a structured JSON object matching our page component tree schema (including generated hero text, feature lists, and appropriate stock image URLs). Upon successful generation, automatically create a new site record in Supabase with the generated pages and redirect the user directly into the visual editor canvas with the new site loaded.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Dynamic Data Collections & Programmatic Pages

   Build a data collections module allowing users to define structured datasets and generate dynamic pages in bulk.

   Build a 'Collections' management module within the dashboard where users can create custom data schemas (e.g., Real Estate Listings, Team Members) with fields like text, image, and rich text. Implement a spreadsheet-like data entry grid for managing collection items. Create a dynamic page routing mechanism in Next.js ([siteSlug]/collection/[itemSlug]) that automatically renders template pages bound to individual collection items using mustache-style data placeholders (e.g., {{title}}, {{price}}).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Publishing Engine & Static Export Pipeline

   Develop the site compilation and publishing workflow that renders tenant database configurations into clean HTML/CSS outputs.

   Implement a site publishing workflow. When a user clicks 'Publish' in the editor, write a server action that compiles the page JSON tree structure into clean, accessible HTML and Tailwind CSS classes, saving the compiled output and static asset manifests to Supabase Storage. Create a catch-all dynamic route handler ([subdomain].yourdomain.com/[[...slug]]) that reads published site configurations directly from the database or edge cache, rendering the generated site instantly to public visitors with auto-generated sitemap XML and OpenGraph meta tags.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Duda