Website Cloner (Ditto)
A design-to-code platform that turns a live Webflow/Framer site into a deployable React/Next.js codebase.
Problem
Turning a Webflow/Framer template into a real, production-ready codebase is normally a slow, manual designer-to-engineering handoff.
Approach
Full-stack platform (separate open-source frontend and backend) powered by Ditto's site-cloning engine: URL to headless browser capture to normalized render IR to deterministic inference to app generation. The frontend is a Next.js UI — submit a URL, pick output framework (Next.js or Vite React) and CSS approach, poll a job queue, download a ZIP. The backend is a proper multi-service platform: a Hono REST API, a queued worker for capture/generation jobs, Drizzle ORM over PostgreSQL, S3/R2-compatible artifact storage, Playwright driving the actual browser capture, a CLI unpacker, and a hosted API with an MCP server for programmatic access.
The number
5 decoupled services (compiler, API, worker, database, storage) orchestrated into one capture-to-code pipeline. This portfolio's own front-end shell was generated by this same tool.