How to vibe codeMixo

Prerequisites

• Node.jsfree

  Required runtime for modern full-stack TypeScript web development.

• GitHubfree

  Code repository hosting and seamless integration with deployment platforms.

AI coding tools

• Claude Code

  Executes complex multi-file scaffolding and full-stack iteration directly in the terminal.

• Cursor

  Provides an AI-native code editor to inspect visual component diffs and fine-tune Tailwind styles.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js app with Tailwind CSS, configure Turso for SQLite storage, and set up better-auth tables.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure Turso as the database driver using Drizzle ORM. Define database schemas for 'users', 'sites' (id, userId, title, description, contentJson, subdomain, customDomain, publishedAt), and 'submissions' (id, siteId, email, message, createdAt). Implement better-auth for user authentication with email and password. Ensure all TypeScript types are fully exported and strict mode is enabled. Verify database connection scripts run cleanly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02AI Generation Pipeline

   Implement the core prompt-to-website generation engine using the Vercel AI SDK and Anthropic API.

   Implement an API route in Next.js using the Vercel AI SDK and Anthropic API that accepts a natural language business description. Use structured object generation to return a strict JSON payload representing a complete landing page structure: hero headline, subheadline, features list (title, description), call-to-action text, and color palette preferences. Handle API timeout edge cases, validate the schema with Zod, and save the generated site payload directly into the Turso database linked to the authenticated user.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visual Block Editor UI

   Build an interactive client-side WYSIWYG section editor for tweaking text, swapping images, and adjusting styles.

   Build a responsive visual site editor page in Next.js App Router where users can click on any section of the generated landing page (hero, features, form) to edit inline text, modify color variables, and select stock images. Ensure changes update local React state instantly and provide a 'Save Changes' button that persists the updated JSON content structure back to the database backend API route.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Form Capture and Subscriber Dashboard

   Create public lead capture form handlers and a private dashboard for reviewing submissions.

   Create a public-facing dynamic landing page renderer that reads published site JSON configurations from the database and renders clean Tailwind markup. Include a fully functional contact/waitlist form with built-in client-side validation and anti-spam Honeypot fields. Wire the form submission to a backend API route that stores entries in the 'submissions' table, triggers an optional Resend notification email, and displays a success message. Build a protected dashboard page allowing users to view, filter, and export their site's form submissions as a CSV file.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automatic llms.txt Generation and Publishing

   Implement dynamic generation of llms.txt and llms-full.txt files for AI search engine optimization.

   Implement dynamic API routes for published sites that automatically generate and serve an 'llms.txt' file (providing a concise markdown table of contents with links to page sections) and an 'llms-full.txt' file (containing the complete markdown text representation of the site content) following the official llmstxt.org specification whenever a site is published or updated.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Mixo