AI Sketch-to-Component Workbench (Enterprise Edition)

🌐 imagicasite.xyz

Imagica is an elite, industrial-grade, AI-powered developer workbench that transforms hand-drawn sketches, structural wireframes, and UI screenshots into high-performance, responsive, production-ready web components. Inspired by the sleek, minimalist labs theme of Google AI Studio, Imagica integrates state-of-the-art vision models, secure authentication, live sandbox preview frames, and an optimized, token-efficient refinement chatbot.

Professional output quality

• Rewrote Gemini generation prompts to target production-grade SaaS aesthetics (Linear / Stripe / Vercel style) instead of flashy gradient-heavy templates
• Default styling baseline applied when no custom instructions are provided — restrained zinc/indigo palette, 8px spacing grid, subtle borders
• Live preview shadcn/ui stubs upgraded to match professional zinc design tokens

Marketplace & billing

• Design Marketplace — list, browse, and buy sketch layouts with Imagica Credits
• Seller dashboard with 60% Credits / 40% Cash revenue split
• Pricing plans (weekly, monthly, yearly) with credit redemption and Stripe checkout simulation
• Wallet sidebar showing credits, cash balance, and active plan badge

Bug fixes & reliability

• Synced OpenAPI PaymentPlanStatus schema with backend (credits, cash, bank details, plan tiers)
• Fixed sketch workbench crashes from invalid analysis JSON parsing
• Generation stream errors now surface via toast notifications
• Live preview iframe refreshes during code refinement
• Preview page handles invalid sketch IDs gracefully
• Root pnpm run typecheck fixed for Windows monorepo paths
• Added Stripe dev dependency for API server type safety

Repository: github.com/itzzSPcoder/Imagica

1. Use style instructions on the Convert page — e.g. "Professional dark dashboard, zinc palette, indigo accents, like Linear"
2. Pick React + shadcn/ui for the most polished component output
3. Use Gemini Refiner Chat to iterate — "Increase whitespace", "Use subtle borders instead of shadows", "Make typography more minimal"
4. Choose Hi-Fi Vision mode when layout fidelity from the original sketch matters more than token savings

Imagica is architected as a high-performance pnpm monorepo workspace. The entire ecosystem is divided into three distinct layers:

1. Frontend Layer: The developer workbench interface and sandbox preview frame.
2. Backend Services Layer: The Express API gate, database schema engines, and SSE stream handlers.
3. Shared Monorepo Libraries: Reusable packages for Zod schemas, DB connections, API client generators, and Gemini SDK integrations.

This diagram illustrates the monorepo structure and how individual applications depend on shared type-safe library workspace layers:

graph TD
    classDef app fill:#4f46e5,stroke:#818cf8,stroke-width:2px,color:#fff;
    classDef lib fill:#0d9488,stroke:#2dd4bf,stroke-width:2px,color:#fff;
    classDef db fill:#d97706,stroke:#fbbf24,stroke-width:2px,color:#fff;
    classDef ai fill:#7c3aed,stroke:#a78bfa,stroke-width:2px,color:#fff;

    %% Applications
    SubComponent["💻 sketch-to-component (React Workspace App)"]:::app
    MockupSandbox["🔬 mockup-sandbox (Preview Frame App)"]:::app
    ApiServer["⚙️ api-server (Node/Express Backend Service)"]:::app

    %% Shared Packages
    ApiClient["📦 api-client-react (Auto-Generated Hooks)"]:::lib
    ApiZod["📦 api-zod (Type-safe Zod Schemas)"]:::lib
    ApiSpec["📦 api-spec (OpenAPI Spec Definitions)"]:::lib
    Database["🗄️ db (Drizzle Schema & SQLite Migration)"]:::db
    GeminiClient["🧠 integrations-gemini-ai (Gen AI Wrapper)"]:::ai

    %% Dependencies Flows
    SubComponent -->|Uses queries/mutations| ApiClient
    ApiClient -->|Generates endpoints from| ApiSpec
    ApiServer -->|Validates requests with| ApiZod
    ApiServer -->|Queries and persists to| Database
    ApiServer -->|Triggers multimodal LLMs via| GeminiClient
    SubComponent -->|Embeds preview iframe of| MockupSandbox

Here is the step-by-step pipeline when a user uploads a hand-drawn sketch. Notice the recursive Gemini Fallback Models Loop and Exponential Backoff Retry Gate that ensure zero downtime:

sequenceDiagram
    autonumber
    actor User as 👤 Developer / Designer
    participant UI as 💻 Front-End App (React)
    participant Server as ⚙️ Express Backend (api-server)
    participant Auth as 🔐 Clerk Authentication
    participant Gemini as 🧠 Google Gemini Vision API
    participant DB as 🗄️ Database (Drizzle SQLite)

    User->>UI: Upload hand-drawn UI sketch & select framework
    UI->>Auth: Validate user session token
    Auth-->>UI: Session token valid
    UI->>Server: POST /api/sketches (base64 image, framework, styling instructions)
    Note over Server: Server reads x-gemini-api-key header<br/>Falls back to environment keys if empty.

    rect rgb(30, 27, 75)
        Note over Server: [Model Fallback Loop & Retry Gate]
        Server->>Gemini: Attempt 1: gemini-2.0-flash (Upload base64 image + layout prompt)
        alt Case A: 429 Rate Limit / Quota Exhausted on Flash 2.0
            Gemini-->>Server: Error 429 (Resource Exhausted)
            Server->>Server: catch 429 -> Try next candidate model
            Server->>Gemini: Attempt 2: gemini-2.5-flash (Execute stream compilation)
        else Case B: Transient 503 / Network Timeout
            Gemini-->>Server: Error 503 (Service Overloaded)
            Server->>Server: withRetry helper waits 2s -> 4s -> 8s (Exponential Backoff)
            Server->>Gemini: Retry Attempt
        end
    end

    Gemini-->>Server: 200 OK: Complete React/HTML structured markup stream
    Server->>DB: Save Sketch details (generatedCode, framework, layout analysis JSON)
    DB-->>Server: Record created successfully
    Server-->>UI: HTTP 201 Created: Hydrated sketch state
    UI->>User: Launch code inside Developer Workbench (Interactive Live Sandbox)

Unlike baseline sketch tools that upload giant base64 image payloads (~300,000+ tokens) on every single chat turns, Imagica implements a 95%+ token-saving strategy that completely bypasses free-tier TPM (Tokens Per Minute) quotas:

graph TD
    classDef regular fill:#ef4444,stroke:#f87171,stroke-width:2px,color:#fff;
    classDef optimized fill:#10b981,stroke:#34d399,stroke-width:2px,color:#fff;
    classDef text fill:#0d9488,stroke:#2dd4bf,stroke-width:2px,color:#fff;

    %% Input Trigger
    UserPrompt(["💬 Chatturn: 'make it scrollable nd add light theme'"]) --> Choice{Prompt Structure}

    %% Regular Path
    Choice -->|Baseline Compilers| Baseline["⚠️ Verbose Payload <br/> (Sends user text + complete code + base64 image)"]:::regular
    Baseline -->|Token Consumption| HeavyTokens["💥 ~350,000 Tokens <br/> (Rate limit hit after 2 requests!)"]:::regular
    HeavyTokens -->|Result| QuotaError["🚨 HTTP 429: Rate Limit Reached"]:::regular

    %% Optimized Path
    Choice -->|Imagica Refiner Engine| Imagica["✅ Optimized Payload <br/> (Sends user text + current working code only)"]:::optimized
    Imagica -->|Token Consumption| LightTokens["⚡ ~5,000 Tokens <br/> (Incredibly light, no image upload!)"]:::optimized
    LightTokens -->|Result| FastStream["🚀 5x Faster SSE Streaming Refinement"]:::optimized

    classDef result fill:#1e1b4b,stroke:#818cf8,stroke-width:2px,color:#fff;
    FastStream -->|Writes updates chunk-by-chunk| CodeUpdate["📝 Dynamic Code Sandbox Repersistence"]:::result

├── artifacts/
│   ├── api-server/              # Express API Server (ports, DB controllers, Gemini routers, fallback loops)
│   │   ├── src/
│   │   │   ├── routes/          # Express route definitions (sketches stats, messages, refinement streams)
│   │   │   ├── lib/             # Drizzle SQLite database configurations and Drizzle client connectors
│   │   │   └── index.ts         # Server entry point
│   ├── mockup-sandbox/          # Iframe Sandboxing server compiling user components for preview
│   └── sketch-to-component/     # Front-end workbench dashboard React client
│       ├── src/
│       │   ├── components/      # UI components (Header layout, settings modal, system statistics)
│       │   ├── pages/           # Pages (Landing page, Convert workbench, sketch details, preview tabs)
│       │   └── index.css        # Core custom-themed CSS and custom animation transitions
├── lib/
│   ├── api-client-react/        # Auto-generated Tanstack Queries hooks querying the server
│   ├── api-spec/                # Monorepo OpenAPI contracts and Orval configurations
│   ├── api-zod/                 # Shared data validation Zod schemas (CreateSketch, Regenerate)
│   ├── db/                      # Shared SQLite migrations and schema tables (Conversations, Messages, Sketches)
│   └── integrations-gemini-ai/  # Shared Google Gen AI SDK client and resolution logic
├── package.json                 # Monorepo workspace configuration
└── pnpm-workspace.yaml          # Monorepo dependencies definitions

To configure local or production instances, create separate .env files in their respective folders:

Create artifacts/sketch-to-component/.env:

# Clerk Publishable Key (from clerk.com dashboard)
VITE_CLERK_PUBLISHABLE_KEY=pk_test_...

Create artifacts/api-server/.env:

# Clerk Secret Key (from clerk.com dashboard)
CLERK_SECRET_KEY=sk_test_...

Imagica utilizes pnpm workspace filters to manage all packages from the root workspace directory. You never need to manually cd into individual folders.

Install all monorepo dependencies, link local library packages, and compile workspace structures:

pnpm install

To start all servers (Frontend React App, Sandbox Preview Frame, and Backend Express API) concurrently in local development mode:

pnpm run dev

• Frontend workbench Application: http://localhost:25383
• Sandbox Preview Application: http://localhost:25384
• API Backend Server: http://localhost:18080

To typecheck the entire monorepo and generate compiled production bundles:

pnpm run build

To start the compiled production Express server (which automatically serves the compiled frontend assets statically):

pnpm start

To perform isolated TypeScript compiler checks across all frontend libraries and backend services:

pnpm run typecheck

If you want to run commands inside specific sub-folders, you can use the --filter flag from the root directory:

• Backend DB migrations generation:

  pnpm --filter @workspace/db run generate

• Backend DB migrations execution:

  pnpm --filter @workspace/db run push

• Regenerate frontend API client hooks from OpenAPI spec:

  pnpm --filter @workspace/api-spec run generate

Built with passion and 🔮 Google Gemini AI.