How to vibe codeUnicorn Platform

Prerequisites

• Node.js LTSfree

  Required runtime for executing the Next.js framework and build toolchain.

• GitHubfree

  Version control repository and integration point for deployment pipelines.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding full-stack Next.js applications and iterating on complex component trees.

• Cursor

  Ideal AI-native editor for fine-tuning visual layout components and inspecting component diffs.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database connection via Drizzle ORM, and set up better-auth for user authentication.

   Scaffold a new Next.js project with TypeScript and Tailwind CSS. Set up Turso as the database provider using Drizzle ORM. Define database schemas for `users`, `sites`, `pages`, and `sections`. Each `site` belongs to a user, and each `page` contains a JSON column storing an ordered array of section blocks. Configure better-auth for email/password authentication. Ensure proper environment variable validation and clean project structure.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Component Library and Visual Editor Canvas

   Build a library of modular marketing section components (Hero, Features, Pricing, Testimonials, Footer) and a visual drag-and-drop or reordering editor interface.

   Build a set of responsive landing page section components using Tailwind CSS: Hero, Features grid, Pricing table, Testimonials, and Footer. Create a dashboard editor view where users can select a page, view a live preview of stacked sections, and reorder or delete sections. Store the page layout state as a JSON array of block configurations in the Turso database with optimistic UI updates.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Co-Pilot Integration

   Implement text-prompt generation using the Vercel AI SDK and Anthropic API to generate or modify section content dynamically.

   Integrate the Vercel AI SDK with Anthropic API to create an AI co-pilot panel. Allow users to type a text prompt (e.g., 'Make the hero section punchier for a B2B AI tool'). Use structured object generation to return updated JSON content fields for the active section block. Handle loading states gracefully and let users accept or discard AI-generated copy changes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Blogging and Form Submissions

   Add support for creating blog posts and handling contact form submissions with validation and database storage.

   Add a blogging subsystem allowing users to write markdown-based blog posts associated with their site. Create a public blog index and article view route. Additionally, build a reusable contact form component that submits lead data to a backend API route, validates inputs, stores submissions in a `form_submissions` table, and displays a success notification.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Site Publishing and HTML Export

   Implement publishing logic that compiles stored section JSON trees into static HTML pages and provides an export feature.

   Implement a site publishing mechanism that compiles a site's pages and section JSON trees into static HTML output served on a dynamic route (e.g., `app.yourdomain.com/site/[slug]`). Add an 'Export HTML' button in the dashboard that packages the compiled static HTML, CSS assets, and images into a downloadable zip archive for self-hosting.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Unicorn Platform