SketchPad AI — Sketch to Production Graphics · beiryu
SketchPad AI — Sketch to Production Graphics
Live
A design tool that turns rough whiteboard sketches into finished thumbnails and graphics through a diffusion-model pipeline — a browser canvas editor on a type-safe Hono and Postgres backend, with authentication, asset storage, and subscription billing wired end to end.
SketchPad AI closes the gap between a rough idea and a presentable asset. A marketer, creator, or product team member sketches a layout the way they would on a whiteboard, and the platform returns a finished graphic — no design software, no design skills, no waiting on a designer for a thumbnail that has to ship today.
The product bet is that most "design work" in a content pipeline is not creative direction, it is execution on an idea the person already has in their head. Sketching is the fastest way to get that idea out; everything after it can be automated.
Sketch to image — the core transformation, running hand-drawn input through diffusion models hosted on Replicate
Style application — the same sketch rendered against different visual directions, so a user compares outputs instead of committing to the first result
Structure recognition — detecting the common shapes a sketch implies (panels, cards, headings, iconography) so the output respects the intended layout rather than reinterpreting it
Prompt assistance — language-model support for turning a user's short description into a fuller generation prompt
Background isolation and replacement — separating the subject so it can be placed on a chosen background
Multi-format export — raster and vector output at controllable resolution, sized for the platforms the asset is actually going to
A Hono API layer — lightweight, fully typed, running the generation orchestration and the CRUD surface with end-to-end type inference into the client
Postgres with Drizzle ORM — a type-safe schema where a migration and the query layer cannot silently disagree
Auth.js for session management and access control
Cloudinary for image storage, transformation, and CDN delivery, keeping generated assets off the application's own bandwidth
Polar for subscription billing and plan entitlements
Async generation handling — generation is slow and failure-prone by nature, so requests are tracked with explicit state and surfaced to the user with real progress rather than a spinner that might mean anything
Zod validation on every boundary, shared between client and server
Progressive disclosure — the interface starts as a canvas and reveals controls as they become relevant, rather than opening on a toolbar of forty icons
Responsive across devices, so a sketch can be captured on a tablet and finished on a desktop
Keyboard shortcuts for the editor actions used most
Light and dark themes
Clear credit visibility — users always know what a generation costs them before they run it
This project sits at the intersection of a genuinely useful AI capability and the unglamorous product engineering that makes it shippable: type safety from database to component, billing and entitlements that actually gate usage, and an async pipeline that stays honest with the user when a model is slow or a generation fails.