Can I vibe code Builder.io?

Build a lightweight, self-hosted visual CMS page builder system for a Next.js (App Router) ecommerce store using TypeScript and Tailwind CSS.

1. DATA MODEL & SCHEMA:
- Create a Postgres schema using Prisma or Drizzle for 'pages' (id, slug, title, status [draft/published], layoutData [JSONB], createdAt, updatedAt).
- Define a strongly-typed JSON schema for page layouts: array of Block objects containing blockId, componentName, props (object), and children (array of Block objects).

2. COMPONENT REGISTRY & RENDERER:
- Build a centralized ComponentRegistry mapping string keys (e.g., 'HeroBanner', 'ProductGrid', 'CallToAction') to React components.
- Build a server component `<PageRenderer layoutData={data} />` that recursively parses the layout JSON array and dynamically renders the matching React component, passing props safely.
- Provide default fallback handling if an unknown or deprecated component key is encountered.

3. VISUAL EDITOR INTERFACE:
- Integrate `@measuredco/puck` or build a minimalist split-screen visual editor under `/admin/builder/[pageId]`.
- Right side: preview iframe loading the live Next.js route with a draft flag.
- Left side: component selector drawer and prop editing forms generated dynamically from component schemas.
- Implement bi-directional communication using window.postMessage to highlight the hovered or selected component inside the preview iframe.

4. PUBLISHING & CACHING:
- Create API routes POST `/api/builder/save` (saves draft JSON) and POST `/api/builder/publish` (promotes draft to published).
- Implement Next.js tag-based cache revalidation (`revalidateTag('page-' + slug)`) triggered on publish events to ensure zero-latency static rendering at runtime.

5. OUT OF SCOPE:
- Multi-tenant enterprise permissions, cross-framework compiler exports, and automated Figma layout conversion.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs