A build-in-public log of how we're turning sketches and prompts into beautiful, production-ready interfaces and why we think good design shouldn't be hard for anyone.
TL;DR
We're building OpenCraft, an AI-powered design-to-code platform. You sketch on an infinite canvas, describe what you want, and design actual beautiful, running Next.js code comes back. One environment. No tool-switching. No AI slop.
This post is the story of how we got here: the itch that started it, the design surface we obsessed over, the AI workflow that turns ideas into real UI, and the features we're proudest of, the infinite canvas, multi-model AI generation, Flows for designing whole products, a visual Tailwind editor for direct manipulation, and a theming engine that makes everything look intentional by default.
If you care about design and like watching a product get built brick by brick, you're in the right place.
The itch: design got fragmented, and then it got generic
Designing for the web in 2026 means living in a dozen tabs at once.
Figma for the mockup. The IDE for the code. An online sandbox for the preview. An AI chat for the snippet. A screenshot tool for inspiration. DevTools for "wait, how did they do that border?" Every handoff between those tools quietly leaks intent, the thing you imagined is never quite the thing that ships.
Then AI showed up and created a new problem. Suddenly everyone could generate UI in seconds, but it all started to look the same. The same hero section. The same gradient. The same three-card grid. We started calling it what it is: AI slop. Fast, soulless, forgettable.
We kept coming back to one belief:
Design shouldn't be this hard. And good design shouldn't be reserved for people who've mastered six different apps.
So we set out to build the tool we wished existed one place where sketching, generating, refining, and shipping all live together, and where the default output is beautiful and intentional, not generic.
That tool became OpenCraft.
The bet: design first, real code underneath
Early on we made three decisions that shaped everything after.
- A real design surface, not a form. Most "AI app builders" are a chat box and a preview pane. We wanted the freedom of a canvas. An infinite space you can sketch on, arrange screens on, and think visually in.
- Beautiful by default. The output shouldn't just function, it should look considered. Good spacing, real type, coherent color. Design quality is the product, not a finishing touch.
- Real code, no lock-in. Every screen is an actual Next.js app you can read, edit, and export. React 19, Next.js 16, Tailwind 4, shadcn/ui, the kind of code you'd actually ship.
Each of those bets came with a "...okay, but how?" Here's how it went.
Chapter 1 : The canvas: a place to think visually
The first thing we built was the infinite canvas, because design starts before code does. Frames, rectangles, ellipses, lines, arrows, freehand drawing, text, pan, zoom, multi-select, 8-point resize, undo/redo, layers, the design grammar people already know.
The point isn't the shapes. The point is freedom. You can scribble a rough idea, drop a few frames, arrange a whole product's worth of screens side by side, and reason about flow and hierarchy spatially, the way designers actually think, before a single line of code exists.
It was also the first thing that nearly fell over. Freehand drawing was laggy; every stroke triggered a cascade of re-renders. A design tool that stutters isn't a design tool, so we rebuilt the engine around performance:
-
Normalized entity state, : shapes live as
{ ids, entities }for O(1) lookups instead of array scans. - Separate reducers for viewport and shapes : panning never re-runs shape logic, and vice versa.
- Refs for interaction state : draft shapes, moves, and resizes live in refs, so dragging doesn't spam React.
- RAF throttling : freehand input throttled to ~8ms frames, so drawing stays buttery.
- History batching : a move or resize collapses into a single undo entry, so Ctrl+Z does what your brain expects.
The lesson that stuck: performance is a design feature. Reducer architecture and render discipline are the UX.
Chapter 2 : From sketch to beautiful UI
A canvas is nice. A canvas that turns your sketch into a polished, running interface is the magic trick.
Send a message or a wireframe, or a screenshot from the AI sidebar, and OpenCraft goes to work:
- It fires an Inngest event that spins up our UI coding agent on an Inngest AgentKit network.
- The agent connects to an E2B sandbox, a real, isolated Next.js dev server and builds your screen there.
- The whole time, reasoning and output stream back in real time, so you watch the design take shape instead of staring at a spinner.
Crucially, the agent isn't a single prompt, it's a tool network (it can run terminal commands, write files, and read files to check its own work). This was the single biggest quality unlock of the whole project:
AI gets dramatically more reliable when you give it tools instead of asking for raw text. Let it build, read, and correct, the output stops being slop and starts being design.
Choosing your collaborator
We run on OpenRouter so you can pick the model that fits the job, currently Kimi K2.7 Code (our default), Gemini 3.5 Flash, and MiniMax M3, all vision-capable so you can drop in a reference screenshot and say "more like this."
Getting consistently beautiful output across different models was genuinely hard, each has its own quirks. We solved it with multi-pass prompting, strict system-level design constraints, and sanitizing the UI structure before any file gets written, so the result is clean and intentional no matter which model you choose.
Chapter 3 : From a screen to a product: Flows
For a while, OpenCraft made beautiful single screens. But products aren't single screens. They have a home page and a checkout and a login and a dashboard. They need to feel like one coherent thing.
So we built Flows.
From any screen, click Create Flow, describe the next page ("a checkout page"), and OpenCraft designs a new page inside the same product. The magic is in what it inherits:
- The same sandbox, the new page lives in the same running app, not a separate one.
- The parent's theme, components, and design system — so page two, three, and four stay visually consistent automatically. No drift, no mismatched buttons.
- A new route, not an overwrite, your home page stays intact while the product grows.
On the canvas, each new screen auto-links back to its parent with bound connector arrows that follow the shapes as you move and resize them, so you end up with a living map of your product's design and navigation. Designing a consistent multi-page product in a few clicks is one of the things we're proudest of.
Chapter 4 : Design without writing code: the visual editor
Generated UI is a starting point, not a final answer. But "open the file and tweak the Tailwind classes" is exactly the kind of friction we set out to kill. Designers should be able to design directly, by hand, on the real thing.
So OpenCraft has a visual edit mode:
- Click any element in the live preview to select it.
- Adjust colors, spacing, typography, and borders with real controls.
- Under the hood, a CSS-to-Tailwind mapper converts your changes into the right utility classes and writes them back to the actual source files.
// You nudge some styles…
{ fontSize: "18px", backgroundColor: "#3b82f6", padding: "16px" }
// …and the source file gets:
["text-lg", "bg-[#3b82f6]", "p-4"]
The tricky bit was the two-way sync applying changes inside the sandbox iframe in real time while translating them into correct Tailwind and persisting them to source. A custom mapping layer and a postMessage bridge between the parent window and the iframe make it feel instant. The result: you can hand-tune a design without ever leaving the canvas, and the code stays clean.
Chapter 5 : Beautiful by default: the theming engine
The fastest way to avoid AI slop is to never start from a blank, generic style. So every generated screen runs on a theming engine with real presets : Default, Claude, Vercel, Cyberpunk, and more built on a semantic, CSS-variable color system.
Themes are per-screen, so you can explore distinct directions side by side on the canvas, and a whole Flow inherits its parent's theme so a product stays coherent end to end. It's a small idea with a big effect: the default output already looks like someone with taste made it.
(And yes, if you want to start from a real reference, you can point OpenCraft at a URL and have it recreate a page as a jumping-off point. It's a handy shortcut, not the main event, the main event is what you design next.)
The lessons we're taking forward
A few things we believe more strongly now than when we started:
- Tools beat raw text. The reliability jump from "ask the model to write code" to "give the model tools and let it work" is enormous — and it's what separates real design from slop.
- Focused tools win. Designers and developers don't want a bloated "do everything" suite. They want a few things that work exceptionally well, together.
- Vision is better with structure. A reference is more powerful when the canvas already knows what's a frame, what's text, what's a button. Semantics give the model scaffolding.
- Performance is a feature. A design tool that stutters isn't a design tool. Render discipline is the UX.
- Beautiful-by-default is a choice. Sensible themes, real spacing, and strong constraints are how you make "anyone can design well" actually true.
Where we are, and what's next
OpenCraft today: an infinite canvas, multi-model AI generation with live reasoning, Flows for whole-product design, a visual Tailwind editor, a code explorer, and a theming engine, all in one environment with real-time sync.
On the roadmap:
- 🧭 Multi-user live collaboration (Figma-style multiplayer)
- 📦 A marketplace for AI-generated components
- 🧪 Automated UI test generation
- 🎥 A timeline panel for design history and AI diffs
- 🧱 Export to React Native / SwiftUI
- 🧠 Local-first model support for private generation
Follow along
We're building OpenCraft in the open, shipping fast, breaking things occasionally, and writing about all of it. If a world where anyone can craft beautiful, production-ready interfaces sounds like one you want to live in, come build it with us.
Design shouldn't be hard. Let's make sure it isn't.
Built with ❤️ by Adithya
