May 5, 2025

Design to Code, Seamlessly: Why We Built Shaper to Unite Designers and Developers

Shaper bridges the designer-developer gap. Discover how Shaper builds apps with AI, real structure, and zero handoff friction. Explore how we built it.

MeetUp

Author

Sanket SahuCo-founder

Subject Matter Expert

Suraj Ahmed ChoudhuryAssociate Director of Engineering

Design to Code, Seamlessly: Why We Built Shaper to Unite Designers and Developers

Book a call

Table of Contents

Editor’s Note: This blog is adapted from a talk by Sanket Sahu (Co-founder, GeekyAnts) and Suraj Choudhury, who has been part of the GeekyAnts journey for over a decade. In this session, they introduced Shaper—an AI-powered code generation tool designed to dissolve the age-old boundary between designers and developers. This talk unpacked the problem, the promise of AI tooling, and how their approach is reshaping the build process itself.

From Vibe Coding to Vision-Driven Products

Hi, I am Sanket, and I have been building tools and platforms for over a decade. Alongside Suraj, we have worked on everything from NativeBase to gluestack, and in that journey, we kept hitting the same friction point: designers and developers rarely speak the same language.

Even with tools like Figma or platforms like Replit gaining momentum, there is still a gap. What if we could use AI not just to generate a landing page, but to build complete, functional apps—and do it in a way that designers and developers can both use?

That’s where Shaper comes in. An evolution of our earlier tool, BuilderX, Shaper is our attempt to merge design and code seamlessly.

Why Most AI Tools Don’t Cut It (Yet)

Sure, there are plenty of AI-powered tools that generate components or even entire pages. But they often fall short when it comes to complete project generation. Why?

Because they focus on visuals or snippets, not context.

We realized early on that to make something truly useful, the system would need to understand layouts, page structures, reusable components, and how all of this fits into an actual codebase.

Demo Time: Prompt to Dashboard in Minutes

Let me walk you through what we showed at the session.

We fired up Shaper, entered a prompt like “Create a fitness tracking dashboard”, and let it do the heavy lifting. Within minutes, it generated:

The entire project scaffold using Next.js
Pages, layouts, and reusable components
Tailwind CSS config and README files
Page-level prompts and dynamic content generation

Not only could we preview the app, but we could also edit it visually or directly in code, just like a hybrid between a design tool and a code editor.

Behind the Scenes: The Architecture of Shaper

We built Shaper to think like a developer. It starts with a Next.js base template and layers AI-generated outputs on top of it. The process includes:

Base system prompts: These define coding standards and structure expectations.
Project context prompts: Derived from the initial user input and the generated files like the README, global styles, and config.
Task-specific prompts: Tailored to whether you’re generating a new page, editing a component, or making a quick update.

The AI returns code blocks in structured XML format—including filenames, paths, and code content—so we can parse and apply them directly to the file system.

Smart Page Loading and Quick Edits

One cool feature? Pages are not all generated up front. When you click into a new page (say, the History tab), Shaper makes a new AI call to build it on the fly, using full context.

Need to make a small change like updating a button’s colour? That’s where our Quick Edit Mode kicks in. Instead of using heavy token counts, it sends only the relevant code block and context. AI then returns the minimal diff to apply via a simple find-and-replace.

It’s fast, efficient, and keeps your bill low.

From Error to Fix—With a Single Click

Since Shaper runs your project in a controlled iframe, we are also able to capture runtime errors. Click the “Fix with AI” button, and the tool will trace the issue, identify the faulty code, and attempt an auto-fix.

This is only possible because we maintain complete visibility over both the runtime and the source code.

More Than a Dev Tool—It’s a Shift in How We Build

For years, designers, developers, and product teams have operated in silos—each with their tools, workflows, and handoffs. But with the rise of generative AI, those boundaries are starting to dissolve.

Shaper is not merely generating code; it’s enabling a unified, collaborative build process. From a single prompt, teams can move from concept to structure.

Final Thoughts: It is Time to Build Without Barriers

Shaper is currently on the waitlist as we fine-tune the experience and optimize token usage. But the direction is clear: the future of software development is collaborative, context-aware, and AI-assisted.

If you are curious to try it, scan the QR code, join the waitlist, and let’s reshape how things get built.

Thanks for being part of this journey.

SHARE ON