Shaping Together: Rethinking Design, Dev, and Product Workflows

Editor's Note: This blog is adapted from a talk by Damini and Daryna, teammates at Shaper, delivered during the Build with AI meetup hosted by GeekyAnts at NIMHANS. The session explored how AI can dissolve the long-standing barriers between designers, developers, and product managers. With Daryna as the designer and Damini as the developer, they walked the audience through Shaper’s collaborative visual development platform, showcasing how AI-enhanced tooling and real-time sync can help teams build better products—faster and together.

Hello everyone, we are Daryna and Damini from Shaper. I am Daryna, a designer. And I am Damini, a developer. We are building a platform that helps designers, developers, and product managers work together—without the miscommunication, friction, or context loss that has become all too common in product development today.
Our talk is about design thinking, dev shipping, and the fading boundary between the two. We want to share our journey, our frustrations, and what we believe the future of collaborative tooling should look like.

Let us begin with a familiar problem. Most teams today are split into silos. Product managers research and define the goals. Designers explore solutions and build mockups in Figma or similar tools. Developers then implement that vision in an entirely different environment using code.
Between those stages, a lot of information is lost. Handovers are messy. Design decisions do not always translate into code. Developers rebuild what has already been prototyped. And everyone wastes time aligning what should have been aligned from the start.
Even with newer AI design tools like Lovable, Webflow, or Figma Sites, we noticed something strange: these tools often work better for individuals. They are fast, powerful, and impressive—but they are not built for teams. When it comes to shared workflows, they fall short.

The problem is not the people. It is the tools. Most design tools do not speak the language of code. Most dev tools are not designed for visual thinkers. And product managers get stuck in the middle trying to coordinate both sides.
For example, when I (Daryna) generate a concept in Lovable, what comes next? I cannot take it to production. I cannot iterate collaboratively. I cannot even ensure the design will make it into development without being reinvented from scratch.
And as a developer (Damini), when I receive designs from a designer, I often have to recreate the UI by hand. This is inefficient and brittle. What we needed was a shared language—a system where everyone works together in their own way, but within the same canvas.

That is what led us to create Shaper. Our platform unifies design, development, and product thinking into a real-time, visual workspace powered by AI. Designers can build interfaces visually. Developers can connect logic and structure. Product managers can stay in sync without being bottlenecks.
Everything you build in Shaper is production-ready. There is no handoff. There is no translation layer. When I design a section, it is reflected immediately in live code. When Dhamini edits the code, the changes appear in the visual layout.
We built a live demo to show exactly how this works. I created a simple marketing site in the visual editor. Without writing code, I was able to add sections, layouts, and components. Then Dhamini connected it to a live Next.js application via Shaper’s two-way sync. Code changes appeared in the design. Design changes updated the code.

One question that always comes up is about mistakes. What happens if someone breaks something? What if a designer deletes a layout or a dev introduces a bug?
We thought about that deeply. That is why Shaper integrates with GitHub. All changes made in the editor are committed automatically. Developers can review them just like any pull request. There is also built-in history tracking, so you can roll back to any previous version at any time.
For more complex scenarios, we even let you ask AI to fix the code directly. Whether it is syntax errors, layout issues, or structural problems, AI can assist without breaking your flow.

Our approach to AI is very intentional. It is not a gimmick. It is not about replacing anyone. It is about helping everyone move faster.
As a developer, I can ask AI to scaffold a new page, adjust a section, or apply styles. As a designer, I can use quick edit prompts to add spacing, change a font, or insert a testimonial block. The AI understands the structure of the project and follows the design language automatically.
We use tags and structured responses to ensure that AI-generated output is safe and predictable. For example, AI is instructed to return only valid code, structured edits, or context-aware updates. If the response falls outside that boundary, the system filters it out.

Shaper supports three main AI modes:

1. Full Project Generation – Scaffolds your entire project: layout, structure, config files, routes, and design tokens.
   
2. Page Generation – Adds a new page based on your prompt, using context from your existing design system and layout.
   
3. Quick Edit Mode – Allows you to select elements and ask for specific changes. AI outputs only the necessary code patch, without rewriting the file.
   

The goal is not just to generate code, but to generate context-aware, editable, and consistent output that respects your design system and logic.

We understand that every team has its design system. That is why Shaper allows you to bring your components, UI libraries, and design tokens.
Our AI is trained to detect your design language—whether it is bold, minimal, artistic, or futuristic. When you ask for a change, the AI reuses existing patterns. It does not invent a new button if one already exists. It reads from your files and chooses the appropriate component.
You can import your own NPM libraries, define reusable layers, and customise the project scaffold. All of this works across different project types. While our default setup uses Next.js, you can swap it out as needed.

There are two broad categories of tools out there. One focuses on prototyping with AI, like Replit, Lovable, and Bold. The other prioritises visual design, like Figma, Framer, and Webflow. But none of them closes the loop.
Shaper brings the two together. It supports real-time collaboration, respects the roles of every team member, and lets everyone build in their language—whether that is prompts, visuals, or code.
We believe this is the future of product building. Not silos. Not handoffs. Just shared creation.

Shaper is live and open to everyone. You can build, experiment, and ship directly from the editor. We have also set up a booth at the event where you can get a hands-on demo, ask questions, and try out some fun challenges for goodies.
We are excited to hear your feedback and would love for you to be early users. Thank you to everyone who joined us. Let us shape the future—together.