Designing and Coding with Shaper: A New Era of Collaboration

Editor’s Note: This blog is adapted from a talk by Daryna Rajkumari, product designer at GeekyAnts. In this session, she shared the story behind Shaper—a tool built to eliminate the traditional handoff between design and development. Through practical examples and reflections from her workflow, Daryna highlighted how real-time collaboration, bidirectional code sync, and AI-assisted screen generation can reshape the way design and engineering teams build together.

When we talk about the future of design tools, we usually focus on better UIs, faster workflows, and improved handoff processes. But what if the problem is the handoff itself? As a designer working on Shaper, a product by GeekyAnts, I have spent the last several months thinking deeply about this, because I live it every day. 

Today, I want to unpack that problem and show you how we are trying to solve it with Shaper, a tool that brings design and development into the same environment.

The Real Problem: Where Creativity Dies

One of the first things I bring up is a frustration. It’s something I know a lot of designers share. You create a layout in Figma, tweak every pixel until it feels right, and then hand it off. But what comes back often feels off. Not because the developers did anything wrong, but because something always gets lost in translation. 

A small request like “Can you shift these two pixels to the right?” might seem trivial, but it matters to the visual balance, and I know developers feel the same way when they have spent hours making something responsive, only to be told to redo it based on a design change.

That’s where creativity starts to break down—not during ideation, but somewhere in that messy space between design and development.

Why Existing Tools Are Not Enough

Currently, tools fall into two categories:

• Code-first tools like Locofy or Replit, which produce real code but are not designed for visual thinkers.
• Visual-first tools like Figma, Webflow, and Framer offer great design workflows but do not produce production-grade code or integrate smoothly with development environments. 

You are either choosing expressive design or production-ready code. Why not both?

Rethinking the Shift That Figma Started

This shift toward structured design is not new. Tools like Figma laid the groundwork years ago with features like Auto Layout, Variables, and Tokens. Those additions were not just conveniences—they pushed us to think more systematically. They encouraged scalable, component-based design thinking. But after that initial leap, progress in design tooling seemed to stall. We got better animations and nicer UI kits, but the underlying workflow—the divide between design and development remained untouched. That is the part we are trying to evolve.

What We’re Building

Shaper is our answer to this gap. It is a collaborative environment where the design is the code. As a designer, I can manipulate visual components without needing to write code manually, but the output is actual, editable, production-quality code. At the same time, developers can work in their IDEs, and their changes reflect in my design canvas in real time.

This bi-directional sync removes the idea of “handoff” entirely. Instead, it becomes a live collaboration space.

Starting with AI, Not Just Ending with It

One more thing we are experimenting with is how to bring AI into the design workflow in a way that helps. In Shaper, we have added an option to generate initial screens from a prompt. You type what you want—a dashboard, a pricing page, anything, and it gives you a visual starting point. It is not about skipping design; it is about skipping the blank canvas. Once the layout is generated, you take over, edit visually, and iterate as usual. The point is to speed up early exploration, not automate creativity.

Rethinking the Workflow

Our current design-to-code flow is fragmented. You design in one tool, devs recreate it in another, and then come multiple rounds of testing, feature additions, and hotfixes. What we are proposing is a unified workflow: you design, validate, and build in the same system, side by side with your dev team.

That means no more exporting and re-importing. No stale design files. No guesswork about what the final product will look like. Everyone stays on the same page, literally and technically.

Looking Ahead

Shaper is still growing, but the core idea is clear: designers and developers deserve a shared space where both disciplines are respected, empowered, and fully in sync. We are not replacing either role—we are giving them a better way to work together.