the vibecoded list/website-builders/landingi

Can I vibecode Landingi?

price $29/moyou'd save $348/yrbuild time weekend to multi-daycategory website-buildersreplaced by 0 people

KINDA

MOATexecution polishinfrastructure scale

The visible landing-page platform loop is buildable, but a credible replacement needs more than the first screen. Landingi earns its keep through editor, CMS, hosting, polish, so expect a weekend or multi-day build and a narrower personal scope.

In-List Ad$79/30 days

promote your product in the vibecoded list

The Build Prompt

copy it and go build

ready to paste · 3,673 chars

open in Claude Code open in Codex open in Cursor

Act as an expert Next.js (App Router), React, and TypeScript developer. Your mission is to build a robust, single-user, locally-hosted Landing Page Builder platform—a focused clone of the core features of "Landingi". This application will allow users to visually design, customize, and publish high-converting landing pages.

### Core Architecture & Tech Stack
Use Next.js 15, TypeScript, Tailwind CSS, and a local SQLite database (using Prisma or Drizzle as the ORM). State management should be handled natively using React Context or Zustand if complex. Do not use third-party backend-as-a-service like Firebase or Supabase.

### 1. Drag-and-Drop Visual Editor (WYSIWYG)
Implement a robust drag-and-drop canvas where users can construct pages without code.
- Support core elements: Text, Images, Buttons, Forms, Spacers, Dividers, and Video embeds.
- Each element should have a settings panel to adjust typography, colors, padding, margins, borders, and alignment using a visual UI (not just text inputs for CSS).
- Ensure the canvas has a responsive toggle to preview the page in Desktop, Tablet, and Mobile views, allowing device-specific style adjustments.

### 2. Smart Sections & Global Components
Allow users to create "Smart Sections" (e.g., headers, footers, or CTA blocks) that can be saved and reused across multiple pages. When a Smart Section is updated, it should reflect across all pages that include it.

### 3. Template Library & Initialization
Provide a built-in gallery of at least 3 distinct landing page templates (e.g., "Lead Generation", "Product Launch", and "Webinar Registration"). The user can select a template to initialize a new page or start from a blank canvas.

### 4. Lead Generation & Form Builder
Include a dynamic Form Builder element.
- Users can add fields (Text, Email, Dropdown, Checkbox).
- Forms must be functional, capturing submissions into the local SQLite database.
- Create a "Submissions" dashboard where users can view and export (CSV) leads collected from their pages.

### 5. Pop-ups and Lightboxes
Add functionality to attach modal pop-ups to buttons or set them to trigger on time-delay or exit-intent. These pop-ups should be designed using the same visual editor as the main pages.

### 6. Publishing & Exporting
Implement a seamless publishing workflow.
- Generate highly optimized, static HTML/CSS/JS for the published pages.
- Allow the user to download a `.zip` archive of the static site so they can host it anywhere (e.g., Netlify, Vercel, or their own FTP).
- Serve a "live" local preview via a distinct route (e.g., `/live/:page-id`).

### 7. Custom Code Injection
Provide a safe modal for advanced users to inject custom HTML, CSS, or JavaScript into the `<head>` or `<body>` of specific pages (useful for adding external analytics scripts like Google Analytics or custom styles).

### 8. Analytics Dashboard
Provide a simple built-in analytics dashboard that tracks page views and form conversion rates. Since this is local, simulate the tracking by intercepting views on the live preview routes and logging them in SQLite.

### 9. Application Foundation
- Start with a completely empty folder and generate the entire repository.
- Include all necessary setup scripts (`npm run dev`, `npm run build`, `npm run db:setup`).
- Ensure accessible UI components with proper ARIA attributes, keyboard navigation, and focus states.
- Provide a `README.md` detailing the architecture, how to run the app, and how to export pages.
- Handle all loading states, empty states (e.g., no pages created yet), and validation errors gracefully.

Do not fake integrations; stick to what can be achieved locally in this stack.

In-List Ad$79/30 days

promote your product in the vibecoded list