DEV Community: Adithya Vardhan Reddy

Building OpenCraft in Public: Making Web Design Simple Again

Adithya Vardhan Reddy — Fri, 19 Jun 2026 08:43:34 +0000

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

🏆Sure AI — Winning the Meta Track at FutureStack GenAI Hackathon by WeMakeDevs

Adithya Vardhan Reddy — Sat, 18 Oct 2025 18:42:07 +0000

When innovation, open-source AI, and developer creativity come together, great things happen.

Last week, my project Sure AI won the Meta Track ($5000 USD) at the FutureStack GenAI Hackathon — an event that brought together developers worldwide to build cutting-edge generative AI solutions.

Hosted by WeMakeDevs and sponsored by Meta, Cerebras, and Docker, the hackathon challenged participants to push the limits of what’s possible with modern AI — from blazing-fast inference to open-source LLM innovation and scalable containerized deployments.

And that’s where Sure AI was born.

🚀 What is Sure AI?

Sure AI is a comprehensive platform that allows businesses to embed AI-powered agents directly into their websites — transforming the way they handle customer support, recruiting, and marketing.

It’s built with Next.js, TypeScript, and FastAPI, powered by Meta’s Llama 3.3 70B and Llama 4 Scout, running on Cerebras Cloud SDK for unparalleled inference speed.

These models from Meta — especially Llama 3.3 70B and Llama 4 Scout — are nothing short of engineering brilliance.

They deliver exceptional contextual reasoning, tool-calling precision, and versatility — all while being open-source and developer-friendly.

It’s no surprise that Llama continues to redefine the boundaries of open AI innovation.

🧠 How I Used Meta Llama & Cerebras Together

At the core of Sure AI lies a unique combination:

🧩 Llama 3.3 70B & Llama 4 Scout from Meta for deep reasoning and generative capabilities
⚡ Cerebras for lightning-fast inference — ensuring real-time, snappy responses even for complex multi-agent workflows

This synergy gave birth to three main agent systems:

⚙️ Architecture Highlights

Sure AI includes three core agent systems, each built with a unique multi-agent architecture:

💬 1. AI Customer Support Agent

Customer experience thrives on speed and precision — and that’s exactly what this agent achieves.

Using the CrewAI framework, powered by Meta Llama 3.3 70B (via Cerebras inference), it provides instant, contextually rich responses.

It dynamically loads the right tools:

🔍 Vector Search + RAG for contextual retrieval
💳 Stripe MCP for handling payments and subscriptions
💬 Slack Tools for internal team communication
📅 Cal.com for meeting scheduling

Hosted on FastAPI, the widget interacts seamlessly with this backend — sending requests and getting structured, high-quality responses in milliseconds.

🦙 The power of Llama 3.3 70B here is unmatched — its ability to reason across context and produce coherent, action-oriented responses is a game-changer for live support.

📧 2. AI Email Marketing Template Builder Agent

This one’s where Llama 4 Scout truly shines.

The Email Builder Agent uses the Cerebras Cloud SDK with Meta’s Llama 4 Scout — the next evolution in open-source generative AI.

It doesn’t just generate email templates — it thinks strategically.

A multi-agent research pipeline runs behind the scenes, powered by CrewAI:

🕵️‍♂️ Competitor Analysis Sub-Agent – Scrapes and summarizes competitor campaigns
📈 Market Trends & Insights Sub-Agent – Spots trending topics and industry shifts
💬 Customer Sentiment Sub-Agent – Gathers insights from forums, Reddit, Quora
✉️ Email Strategy Inspiration Sub-Agent – Analyzes top-performing subject lines and hooks

These sub-agents use the Exa API for web search and collectively supply context to the core Llama 4 Scout model — which then outputs a structured email schema (JSON), ready for a drag-and-drop visual editor.

The reasoning depth and creative precision of Llama 4 Scout made this workflow possible — its ability to synthesize scattered web research into a cohesive, structured output is genuinely next-level.

🧑‍💼 3. AI Recruiting Agent

The AI Recruiting Agent takes hiring to a new level.

Using Meta Llama + Tavus integration with Cerebras inference, it:

Generates an interview persona from job descriptions
Conducts AI-driven candidate interviews
Produces detailed reports and analyses post-interview

It’s a scalable, efficient alternative to traditional screening rounds — providing human-like interview interactions and actionable insights instantly.

This feature perfectly showcases the blend of Meta’s model intelligence and Cerebras’ inference speed in a production-ready workflow.

🧩 Tech Stack Overview

⚡ The Experience — Building with Meta Llama

The Meta Track was all about demonstrating impactful use of the Llama family of models — and it was easily the most exciting part of the hackathon for me.

From experimenting with CrewAI multi-agent frameworks to optimizing prompt chaining and contextual memory, Meta’s Llama 3.3 70B and Llama 4 Scout consistently impressed me with their performance and versatility.

They combined open accessibility with research-level quality, allowing me to iterate fast and build complex agent systems without closed APIs or latency issues.

🦙 Llama 3.3 70B delivers remarkable reasoning accuracy.

🧭 Llama 4 Scout pushes it further — with refined context understanding, precision tool-calling, and human-like conversational depth.

These models aren’t just open — they’re empowering developers to build production-grade AI.

🏁 The Moment — Winning the Meta Track

When I saw Sure AI announced me as the Meta Track Winner, it was an unbelievable moment.

To be recognized for building on top of Meta’s Llama models — tools that are changing the landscape of open AI — was incredibly rewarding.

It reaffirmed what I believe:

Open-source AI is the future — and Meta is leading that revolution.

🌍 What’s Next for Sure AI

This is only the beginning.

I’m working on turning Sure AI into a fully featured SaaS platform where:

Businesses can create and deploy custom AI agents instantly
Agents can learn from internal data via RAG
Users can manage everything — from conversations to recruiting — in a single dashboard

🙌 A Huge Thanks to WeMakeDevs

A massive shoutout to WeMakeDevs for organising such a well-structured and inspiring hackathon experience.

From the very beginning, they ensured that participants had everything they needed — from technical resources and community support to sessions with sponsor engineers explaining their technologies in depth.

They hosted interactive workshops on how to effectively use each sponsor’s technology — whether it was Meta’s Llama models, Cerebras Cloud SDK, or Docker MCP Gateway — which really helped participants understand how to build impactful projects during the hackathon.

The WeMakeDevs community was always active and approachable, answering doubts instantly and fostering an environment where learning and innovation could thrive.

I’m truly grateful for the opportunity to be a part of such an event — it wasn’t just a competition, it was a collaborative learning experience that empowered every participant to build, explore, and create with AI.

</> Github Repo

AdithyaVardhanReddyM / Sure-AI

⚠️ Disclaimer: In the latest commit (fix: backend url exposed), no major code changes were made. The backend URL, which was previously hardcoded and exposed in the codebase, has been moved to environment variables (NEXT_PUBLIC_BACKEND_URL) for better security and configuration management.

Sure AI is a comprehensive platform that empowers businesses to deploy intelligent customer support agents directly on their websites through an embeddable widget. With advanced AI capabilities, seamless integrations, and powerful management tools, Sure AI transforms customer interactions into efficient, personalized experiences.

Demo

Tech Stack

Frontend: Next.js, React, TypeScript
Backend: Separate repository at sure-widget-backend (Agents Implementation)
Database: PostgreSQL with Prisma ORM
Authentication: Clerk
Storage: AWS S3 (Tigris)
AI: Cerebras Cloud SDK, Meta, Tavus
UI Components: Custom UI library with Tailwind CSS
State Management: Jotai
Deployment: Turbo monorepo setup
Secrets Management: Doppler

Features

🤖 Agent Management

Create…

View on GitHub