Sketchflow.ai

Sketchflow.ai is an innovative AI-driven Sketch-to-Website platform that allows creators, founders, and engineers to draft web interfaces on a digital whiteboard and immediately compile them into functional React/Next.js components.

By bridging visual blueprints and semantic frontend code, Sketchflow.ai replaces slow, expensive, and manual UI development cycles with a frictionless, instant-feedback drafting environment.

Designed to run reliably across serverless environments, Sketchflow.ai features client-side asset optimization, a resilient multi-tier AI execution pipeline, passwordless biometric security, and an in-memory compiler that bypasses traditional hosting environment restrictions.

Translating design sketches into production code remains a bottleneck in rapid prototyping:

• Serverless Execution Limits: Platforms like Vercel enforce a stateless filesystem. Compiling React files dynamically at runtime usually requires writing to disk, causing errors or requiring slow external compute nodes.
• Upload Sagas and Timeouts: High-resolution canvas drawings are large (often exceeding 4MB). Transmitting raw images over serverless networks frequently triggers 504 gateway timeouts.
• AI Uptime and Availability: Over-reliance on public LLM APIs (like Gemini or OpenAI) exposes applications to rate limits, server outages, and cost spikes, leading to unreliable user experiences.
• Design Translation Accuracy: Standard code generators use absolute pixel positioning (e.g. top: 240px; left: 100px;) instead of generating responsive semantic structures like Flexbox or Grid.

Sketchflow.ai addresses these constraints through a set of unique engineering implementations:

1. Database-Driven Runtime React Compiler

Built a runtime compiler running directly in Next.js. By compiling Supabase-backed code in memory, the platform bypasses the read-only, stateless filesystems of serverless hosting environments, rendering dynamic user components instantly without requiring server restarts.

2. Client-Side Canvas Compression

Slashed payload transit sizes by 97.5% (from 4MB to under 100KB) through client-side downscaling and optimized JPEG compression before transmitting sketch vectors to the API, completely eliminating serverless gateway timeouts.

3. 3-Tier Resilient AI Pipeline

Configured a prioritized AI pipeline utilizing local Ollama SLMs for local execution, OpenRouter APIs for cost-effective models, and Gemini for complex layout tasks. In case of API failures, the platform immediately falls back to a deterministic, rule-based layout engine, ensuring 100% platform uptime.

4. Origin-Agnostic WebAuthn Authentication

Implemented passwordless biometric authentication utilizing the WebAuthn API. Designed an origin-agnostic cryptographic handshake that securely processes authentication challenges on both localhost development and production environments.

5. Spatial Layout Heuristics Engine

Developed a custom spatial parser that parses coordinate bounding boxes of hand-drawn sketches. It translates absolute boundaries into nested, responsive flex layouts composed of standard elements like Navbars, Hero sections, grids, and footers.

Sketchflow.ai is architected with a decoupled structure separating the drawing surface from the compilation runtime:

1. Frontend Canvas Engine

• Vector Tracker: Captures draw paths on an HTML5 Canvas at 60fps.
• Payload Reducer: Resizes visual buffers and performs JPEG compression.
• Biometric Layer: Communicates with the hardware WebAuthn API.

2. Backend & Runtime Compilation

• Spatial Tree Parser: Recursively clusters drawing paths to establish DOM hierarchies.
• Virtual Filesystem: Runs Next.js dynamic code evaluation, avoiding physical disk writes on Vercel.
• AI Router: Determines the fastest/cheapest model to execute, dispatching tasks to Ollama, OpenRouter, or Gemini.

3. Data & Sync Layer

• Supabase DB: Persists workspace designs, user layouts, and WebAuthn credentials.

Core Technologies

• Next.js 14 & React: The framework of choice for building the main application shell and rendering compiled React components dynamically.
• Supabase: Chosen for its speed of integration, built-in real-time subscriptions, and robust PostgreSQL database layer.
• Ollama (Local SLMs): Used during local development and as a low-cost, offline fallback for layout generation tasks.
• WebAuthn API: Provides secure, modern, passwordless authentication using device-level biometrics.
• OpenRouter & Gemini: Provide fallback reasoning models to handle highly complex, unstructured layout diagrams.

Key Technical Decisions

• In-Memory Compiles over Dockerized Microservices: Instead of launching expensive Kubernetes clusters to execute isolated React rendering tasks, I optimized the compiler to dynamically mount code in Next.js memory space. This keeps serverless hosting costs at exactly $0.
• Dynamic Handshake over Environment Isolation: Built origin-checking logic in WebAuthn challenge verifications. This allowed developers to use physical security keys locally without disabling production authentication rules.

1. Smart Whiteboard IDE

A high-performance HTML5 Canvas sketching dashboard where users draw layout boxes, add notes, and structure web pages.

2. Database-Driven Runtime Compiler

Fetches draft source code from Supabase and executes instant compilation and rendering in isolated serverless functions.

3. Multi-Model AI Routing

Dynamically routes user canvas shapes to local SLMs or cloud-based LLMs based on layout complexity, optimizing for cost, latency, and uptime.

4. Passwordless Biometrics

Enables quick workspace access using FaceID, TouchID, or other WebAuthn security keys with no password databases required.

1. Bypassing Serverless Stateless Filesystem Limits

Challenge: Dynamically evaluating code usually requires writing files to the disk. On stateless, read-only platforms like Vercel, this causes crashes during compilation.

Solution: Developed a database-driven runtime React compiler. The system bypasses physical disk read/writes entirely by storing the React components in Supabase, fetching them on-demand, and executing them in-memory via dynamic imports and eval contexts.

2. Mitigating Serverless Network Gateway Timeouts

Challenge: Canvas image buffers frequently exceed 4MB, causing 504 timeouts when uploading them to serverless API routes under low network conditions.

Solution: Slashed upload payloads by 97.5% down to under 100KB. Built client-side pre-processing that downscales drawing coordinates and runs high-efficiency JPEG compression on the client's device before sending the images to server endpoints.

WebAuthn Origin Agnosticism

To maintain security while allowing local testing, the WebAuthn challenge generation parses requesting host headers and formats registration scopes dynamically. This protects users against replay and phishing attacks in production while enabling developers to debug on localhost seamlessly.

Deterministic Layout Fallback

To prevent canvas-to-website downtime when LLM providers fail, the platform routes sketches to a local layout heuristics model. If all AI APIs are unreachable, a deterministic spatial compiler executes, translating coordinate boxes directly into nested Flexboxes with 100% uptime.

• 97.5% reduction in sketch file upload size.
• 100% sketch-to-website uptime using the 3-tier fallback execution engine.
• 0 serverless timeouts recorded after implementing client-side canvas pre-processing.
• Sub-100ms in-memory dynamic code compiling times.

• Optimize at the Edge: Pre-processing assets on the client is always faster and cheaper than handling heavy data compression on serverless runtimes.
• Resiliency is Crucial: API endpoints will fail. Building deterministic algorithmic fallbacks is essential for creating production-ready AI applications.