Crawbi

Marketing teams at a growing startup were bottlenecked by design and development cycles. Creating a single landing page took 2-4 weeks — from briefing to design approval to implementation to QA. By the time a page shipped, the campaign momentum was often lost.

The team needed dozens of pages per quarter across different campaigns, products, and audiences. Hiring more designers and developers wasn't sustainable. The gap between "idea for a page" and "page live in production" needed to shrink from weeks to minutes.

Design and build a multi-tenant SaaS platform that transforms text prompts into fully designed, responsive landing pages. The system needed to support multiple workspaces with team collaboration, provide a visual drag-and-drop editor for post-generation refinement, and handle one-click deployment to production — all while maintaining the quality bar expected of professionally designed pages.

The core challenge was breaking down landing page generation into steps that an AI could handle reliably. I designed a 6-phase AI pipeline that separates concerns:

1. Content Strategy — Analyzes the prompt to determine target audience, tone, and page structure
2. Copywriting — Generates headlines, body text, and CTAs optimized for conversion
3. Design Tokens — Selects color palette, typography, and spacing based on brand context
4. Component Selection — Picks from 35+ reusable components (hero sections, feature grids, testimonials, pricing tables, etc.)
5. Layout Assembly — Arranges components into a coherent page structure with responsive breakpoints
6. Final Rendering — Generates production HTML/CSS with 16 starter templates as foundations

Each phase uses GPT-5.2 with structured output schemas. The pipeline is sequential but each phase has retry logic and validation gates.

Code validation was critical — AI-generated HTML can contain broken layouts, missing assets, or even injection risks. I integrated E2B (sandboxed cloud runtime) to validate every generated page before it reaches the editor. The sandbox catches structural issues, accessibility violations, and security problems.

The visual editor uses DnD Kit for drag-and-drop with 35+ components, each with responsive variants. Optimistic UI updates keep interactions sub-second. Multi-tenant isolation uses Supabase RLS with workspace-level permissions.

Deployment goes through Cloudflare Workers with custom domain support — users can publish directly from the editor with a single click.

• 35+ drag-and-drop components with responsive variants across all breakpoints
• 16 production-ready templates spanning multiple industries
• Multi-workspace support with team collaboration and role-based permissions
• Sub-second editor interactions with optimistic state management
• E2E test coverage with Playwright for critical generation and editing flows