Skelara

What We Built

Skelara is an AI-assisted design workspace for founders, product designers, and front-end teams who want to move from rough interface ideas to editable UI concepts without jumping between disconnected tools. The product is built as a Next.js 15 and React 19 web app, with Redux managing the client-side canvas interaction model and Convex handling project data, auth-backed storage, and uploaded assets. Users create a project, sketch frames on an infinite canvas, upload visual references into a mood board, generate a style guide, and then turn individual frames into streaming HTML and Tailwind UI. Inngest is used for background workflows such as autosave and billing-event handling, while Polar manages subscriptions and credit-based access. The result is a single browser workspace where idea capture, visual direction, AI generation, and persistence all stay in the same context.

The Hardest Problems

The hardest engineering problem here is preserving context across multiple AI steps instead of treating each prompt as stateless. Skelara has to combine a wireframe snapshot, stored style-guide tokens, optional inspiration images, and the current generated HTML so the next response feels like a revision rather than a reset. A second challenge is making generation feel interactive on the canvas, which is why output streams directly into canvas shapes and the container re-measures itself as markup grows. The background architecture also carries real product complexity: credits are consumed across several AI routes, Polar webhooks need to stay in sync with user entitlements, and Inngest functions bridge those events back into Convex. On top of that, model-generated HTML has to be sanitized before rendering, which makes security one of the sharpest edges in the whole system.

What We Learned

This codebase makes it clear that the real product is not just "AI makes a screen" but "AI remembers the design conversation." Style-guide generation, wireframe context, and workflow-page expansion matter because users need continuity between the first concept and the fifth revision. The architecture also shows a useful split between immediate and deferred work: canvas interaction and streamed feedback stay in the client, while persistence and entitlement workflows are pushed into background infrastructure. If this project continues toward launch, the biggest improvement should be hardening the HTML-sanitization layer and tightening the written product story, because the implementation is already further along than the documentation. The most important lesson is that design-to-code tools only feel credible when context survives every handoff.

The Result

Skelara already covers the core loop needed for early product exploration in one place. A user can sign in, create a project, sketch a layout, derive a style system from reference images, generate a polished screen, expand it into adjacent workflow pages, refine the result in chat, and export output without leaving the workspace. There is no production URL documented in the repository, so this intake treats the product as a near-launch work in progress rather than a publicly released SaaS. Even in that state, the repo demonstrates a coherent product thesis: keep the messy front end of interface ideation inside one persistent system so iteration speed compounds instead of resetting.